Configuration

The docs-config.json file controls the global settings of your site.

Configuration Structure

Lito’s configuration is divided into two categories:

  • Core Config - Portable across all templates (guaranteed to work)
  • Extensions - Template-specific features (templates ignore what they don’t support)

This means you can swap templates without changing your docs - core config always works, and unsupported extensions are simply ignored.

Core Configuration

These options are supported by ALL Lito templates:

PropertyTypeRequiredDescription
metadataobjectYesSite meta information.
brandingobjectNoLogo, favicon, and primary color.
navigationobjectNoSidebar and navbar structure.
searchobjectNoSearch configuration.
seoobjectNoSEO and social sharing settings.
i18nobjectNoInternationalization settings.
assetsobjectNoAsset folder configuration.

Extensions (Template-Specific)

These options are template-specific. Templates that don’t support them will simply ignore the configuration:

PropertyTypeDescription
footerobjectFooter layout and links.
themeobjectExtended theme options.
landingobjectLanding page configuration.
integrationsobjectAnalytics, feedback, copy page.
versioningobjectDocumentation versioning.

metadata (Required)

"metadata": {
  "name": "Site Name",
  "description": "Site description",
  "url": "https://docs.example.com",
  "version": "1.0.0"
}
PropertyTypeRequiredDescription
namestringYesSite name (appears in title and meta tags).
descriptionstringNoDefault site description for SEO.
urlstringNoBase URL for canonical URLs and OG tags.
versionstringNoDocumentation version.

branding

"branding": {
  "logo": {
    "light": "/logo-light.svg",
    "dark": "/logo-dark.svg",
    "href": "/"
  },
  "favicon": "/favicon.svg",
  "colors": {
    "primary": "#6366f1"
  },
  "fonts": {
    "heading": "Syne",
    "body": "Inter",
    "code": "Fira Code"
  }
}
PropertyTypeDescription
logo.lightstringLogo for light mode.
logo.darkstringLogo for dark mode.
logo.hrefstringLink when clicking the logo.
faviconstringFavicon path.
colors.primarystringPrimary brand color.
fonts.headingstringHeading font (any Google Font). Default: Syne.
fonts.bodystringBody text font (any Google Font). Default: Inter.
fonts.codestringCode block font (any Google Font). Default: Fira Code.
"navigation": {
  "navbar": {
    "links": [
      { "label": "GitHub", "href": "https://github.com/..." }
    ],
    "cta": { "label": "Get Started", "href": "/introduction" }
  },
  "sidebar": [
    {
      "label": "Getting Started",
      "items": [
        { "label": "Installation", "href": "/getting-started/installation" },
        { "label": "Quick Start", "href": "/getting-started/quick-start" }
      ]
    }
  ]
}
PropertyTypeDescription
labelstringDisplay text.
hrefstringPage URL or external link.
slugstringPage slug (alternative to href).
iconstringIconify icon name (e.g., lucide:home).
methodstringHTTP method for API docs (GET, POST, etc.).
itemsarrayNested items for sub-groups.

Anchors

Anchors are top-level navigation sections displayed above the sidebar. They filter sidebar groups so each anchor shows only its relevant pages:

"navigation": {
  "anchors": [
    {
      "label": "Documentation",
      "href": "/introduction",
      "icon": "lucide:book-open",
      "groups": ["Introduction", "Getting Started", "Guides", "Reference"]
    },
    {
      "label": "API Reference",
      "href": "/api",
      "icon": "lucide:code",
      "color": "#3b82f6",
      "groups": ["API Reference"]
    }
  ]
}
PropertyTypeDescription
labelstringDisplay text.
hrefstringDefault link for this anchor.
iconstringIconify icon name.
colorstringOptional accent color for the anchor.
externalbooleanWhether this links externally.
groupsstring[]Sidebar group labels to show when this anchor is active.

Locale-Specific Sidebars

You can define different sidebars per locale:

"navigation": {
  "sidebar": [...],
  "sidebar.es": [...],
  "sidebar.fr": [...]
}
"search": {
  "enabled": true,
  "provider": "local",
  "placeholder": "Search docs..."
}
PropertyTypeDefaultDescription
enabledbooleantrueEnable search.
providerstringlocalSearch provider (local or algolia).
placeholderstringSearch...Search input placeholder.

seo

"seo": {
  "ogImage": "/og-image.png",
  "twitterHandle": "@yourhandle",
  "defaultAuthor": "Your Name",
  "defaultKeywords": ["docs", "api"],
  "enableJsonLd": true,
  "organizationName": "Your Org",
  "articleType": "TechArticle",
  "autoCanonical": true,
  "enableBreadcrumbs": true,
  "autoOgImages": true
}
PropertyTypeDefaultDescription
ogImagestring-Default Open Graph image.
twitterHandlestring-Twitter handle for twitter:creator.
twitterSitestring-Twitter site handle.
defaultAuthorstring-Default author name.
defaultKeywordsstring[]-Default keywords for all pages.
enableJsonLdbooleantrueEnable JSON-LD structured data.
organizationNamestring-Organization name for JSON-LD.
organizationLogostring-Organization logo URL.
articleTypestringTechArticleTechArticle or Article.
autoCanonicalbooleantrueAuto-generate canonical URLs.
enableBreadcrumbsbooleantrueEnable breadcrumb JSON-LD.
autoOgImagesbooleanfalseAuto-generate Open Graph images for every page (1200x630px, uses your primary color).

i18n

"i18n": {
  "defaultLocale": "en",
  "locales": ["en", "es", "fr"],
  "routing": {
    "prefixDefaultLocale": false
  },
  "translations": {
    "es": {
      "search.placeholder": "Buscar..."
    }
  }
}
PropertyTypeDefaultDescription
defaultLocalestringenDefault locale.
localesstring[]["en"]Supported locales.
routing.prefixDefaultLocalebooleanfalseInclude default locale in URLs.
translationsobject-Custom UI translations per locale.

assets

"assets": {
  "images": "_images",
  "css": "_css",
  "static": "_assets"
}
PropertyTypeDefaultDescription
imagesstring_imagesImages folder name.
cssstring_cssCSS folder name.
staticstring_assetsStatic assets folder.

Extensions

landing

Configure your landing page. Lito supports multiple landing page approaches:

Option 1: Config-Based Landing (Simple)

Define your landing page directly in the config:

"landing": {
  "enabled": true,
  "hero": {
    "title": "Your Product",
    "subtitle": "A brief description",
    "version": "v2.0",
    "cta": [
      { "label": "Get Started", "href": "/docs", "variant": "primary" },
      { "label": "GitHub", "href": "https://github.com", "variant": "secondary" }
    ]
  },
  "features": [
    {
      "title": "Feature Name",
      "description": "Feature description",
      "icon": "rocket"
    }
  ]
}

Option 2: Full Custom Landing (HTML/CSS/JS)

For complete control, create a _landing/ folder with your own HTML, CSS, and JavaScript:

docs/
├── _landing/
│   ├── index.html      # Main landing structure
│   ├── styles.css      # Landing styles (scoped)
│   ├── script.js       # Interactions
│   └── assets/         # Images, icons
└── docs-config.json

Configure in docs-config.json:

"landing": {
  "type": "custom",
  "source": "_landing",
  "injectNav": true,
  "injectFooter": true
}

Option 3: Section-Based Landing (Mix & Match)

Combine custom HTML sections with default template components:

"landing": {
  "type": "sections",
  "sections": [
    { "type": "hero", "source": "default" },
    { "type": "custom", "html": "_landing/features.html" },
    { "type": "cta", "source": "default" },
    { "type": "custom", "html": "_landing/pricing.html" },
    { "type": "testimonials", "source": "default" }
  ]
}

Landing Configuration Options

PropertyTypeDefaultDescription
enabledbooleantrueEnable landing page.
typestringconfigLanding type: custom, sections, config, default, none.
sourcestring_landingFolder path for custom landing.
injectNavbooleantrueInclude site navbar on custom landing.
injectFooterbooleantrueInclude site footer on custom landing.
heroobject-Hero section config (for config type).
featuresarray-Features list (for config type).
sectionsarray-Section definitions (for sections type).

Available Section Types

Templates should support these section types for section-based landings:

SectionDescription
heroMain hero with title, subtitle, CTA buttons
featuresFeature grid or list
ctaCall-to-action banner
testimonialsCustomer testimonials
pricingPricing tables
faqFrequently asked questions
statsStatistics/metrics display
logosPartner/client logos
comparisonFeature comparison table
"footer": {
  "layout": "full",
  "tagline": "Beautiful docs made simple",
  "copyright": "© {year} Your Company",
  "showBranding": true,
  "showVersion": true,
  "socials": {
    "github": "https://github.com/...",
    "twitter": "https://twitter.com/...",
    "discord": "https://discord.gg/...",
    "linkedin": "https://linkedin.com/...",
    "youtube": "https://youtube.com/..."
  },
  "links": [
    {
      "title": "Resources",
      "items": [
        { "label": "Documentation", "href": "/docs" }
      ]
    }
  ],
  "bottomLinks": [
    { "label": "Privacy Policy", "href": "/privacy" },
    { "label": "Terms of Service", "href": "/terms" }
  ]
}
PropertyTypeDefaultDescription
layoutstringfullFooter layout: full, compact, or centered.
taglinestring-Short tagline text.
copyrightstring-Copyright text. {year} is replaced with current year.
showBrandingbooleantrueShow “Powered by Lito” branding.
showVersionbooleanfalseShow site version in footer.
socialsobject-Social media links (github, twitter, discord, linkedin, youtube).
linksarray-Footer link columns, each with title and items.
bottomLinksarray-Links displayed at the very bottom (e.g. legal pages).

theme

"theme": {
  "mode": "auto",
  "defaultDark": false,
  "hideToggle": false,
  "primaryColor": "#6366f1",
  "accentColor": "#22d3ee"
}
PropertyTypeDefaultDescription
modestringautoTheme mode: light, dark, or auto (system preference).
defaultDarkbooleanfalseDefault to dark mode when mode is auto.
hideTogglebooleanfalseHide the theme toggle button.
primaryColorstring-Override primary brand color.
accentColorstring-Override accent color.

integrations

The integrations object controls built-in features for analytics, page feedback, edit links, and more.

integrations.analytics

See the Analytics Guide for full provider documentation. Supports: google-analytics, posthog, clarity, plausible, umami, fathom.

"integrations": {
  "analytics": {
    "provider": "google-analytics",
    "measurementId": "G-XXXXXXXXXX"
  }
}

integrations.editPage

Add an “Edit this page” link to every doc page, pointing to your Git repository.

"integrations": {
  "editPage": {
    "enabled": true,
    "pattern": "https://github.com/your-org/docs/edit/main/{path}"
  }
}
PropertyTypeDescription
enabledbooleanEnable edit page links.
patternstringURL pattern. {path} is replaced with the file path.

integrations.lastUpdated

Show a “Last updated” timestamp on each page (derived from file modification time).

"integrations": {
  "lastUpdated": {
    "enabled": true,
    "format": "long"
  }
}
PropertyTypeDefaultDescription
enabledbooleanfalseEnable last updated display.
formatstringlongDate format: long, short, or relative.

integrations.feedback

Enable a “Was this page helpful?” feedback widget.

"integrations": {
  "feedback": {
    "enabled": true,
    "webhookUrl": "https://hooks.example.com/feedback"
  }
}
PropertyTypeDescription
enabledbooleanEnable feedback widget.
webhookUrlstringOptional webhook URL to receive feedback data.

integrations.rss

Generate an RSS feed at /rss.xml from your sidebar navigation.

"integrations": {
  "rss": {
    "enabled": true,
    "title": "My Docs Feed",
    "description": "Latest documentation updates",
    "limit": 50
  }
}
PropertyTypeDefaultDescription
enabledbooleanfalseEnable RSS feed generation.
titlestringSite nameFeed title.
descriptionstringSite descriptionFeed description.
limitnumber50Maximum number of items in the feed.

integrations.llmsTxt

Generate an llms.txt file for LLM-friendly site indexing.

"integrations": {
  "llmsTxt": {
    "enabled": true,
    "title": "My Documentation",
    "description": "Complete docs for My Product"
  }
}
PropertyTypeDescription
enabledbooleanEnable llms.txt generation.
titlestringTitle for the llms.txt file.
descriptionstringDescription for the llms.txt file.

integrations.copyPage

A floating widget that lets visitors copy the current page content — useful for pasting into AI assistants.

"integrations": {
  "copyPage": {
    "enabled": true,
    "position": "bottom-right",
    "aiProviders": [
      { "name": "chatgpt", "label": "ChatGPT", "icon": "simple-icons:openai" },
      { "name": "claude", "label": "Claude", "icon": "simple-icons:anthropic" }
    ],
    "contextPrompt": "You are a helpful assistant. Use the following documentation to answer questions:"
  }
}
PropertyTypeDefaultDescription
enabledbooleanfalseEnable copy-page widget.
positionstringbottom-rightWidget position: bottom-right, bottom-left, top-right, top-left.
aiProvidersarray-AI provider buttons to display.
contextPromptstring-System prompt prepended when copying for AI.

versioning

"versioning": {
  "enabled": true,
  "defaultVersion": "latest",
  "versions": [
    { "id": "latest", "label": "Latest", "path": "latest" },
    { "id": "v1", "label": "v1.0", "path": "v1", "deprecated": true }
  ],
  "versionBanner": {
    "enabled": true,
    "message": "You are viewing docs for an older version."
  }
}
Last updated: March 2, 2026
5 min read
Edit this page