Configuration

Customize your Docstra site using the docstra.config.ts file.

Docstra is fully configurable through the docstra.config.ts file located at the root of your project. This file controls global behavior such as content sources, navigation, feedback integration, and repository settings.

Getting Started

Use the defineDocstraConfig helper from docstra/mdx to enable full TypeScript support and IntelliSense.

docstra.config.ts
import { defineDocstraConfig } from 'docstra/mdx';
 
export default defineDocstraConfig({
    collections: {
        docs: 'content'
    },
    editOnGithub: {
        owner: 'sudhucodes',
        repo: 'docstra',
        path: 'apps/web/content',
        branch: 'main'
    },
    feedback: {
        enabled: true,
        formSyncFormID: '<FORM_SYNC_FORM_ID>'
    },
    navbar: {
        logo: {
            link: '/',
            src: '/brand/logo.svg',
            alt: 'Docstra',
            className: 'h-8 w-auto'
        },
        links: [
            { name: 'Introduction', href: '/docs' },
            { name: 'Quick Start', href: '/docs/getting-started/quick-start' },
            { name: 'Configuration', href: '/docs/configuration' },
            { name: 'Features', href: '/docs/features/mdx-components' }
        ]
    }
});

Configuration Options

collections

Defines where your documentation content is stored.

Property	Type	Default	Description
`collections`	`Record<string, string>`	`{}`	Maps collection names to content directories.

Example:

ts
collections: {
    docs: 'content';
}

Controls the top navigation bar.

navbar.logo

Property	Type	Description
`src`	`string`	Path to the logo image.
`alt`	`string`	Accessible alt text.
`link`	`string`	URL the logo links to (default: `/`).
`className`	`string`	Optional CSS classes for styling.

navbar.links

Property	Type	Description
`name`	`string`	Label displayed in navigation.
`href`	`string`	Target URL.

Example:

docstra.config.ts
navbar: {
  logo: {
    src: "/logo.svg",
    alt: "Docstra Logo"
  },
  links: [
    { name: "Guides", href: "/docs/guides" },
    { name: "API", href: "/docs/api" }
  ]
}

Feedback

Enables built-in user feedback collection via FormSync.

Property	Type	Description
`enabled`	`boolean`	Toggle feedback system.
`formSyncFormID`	`string`	Your FormSync form identifier.

Example:

docstra.config.ts
feedback: {
  enabled: true,
  formSyncFormID: "<FORM_SYNC_FORM_ID>"
}

Thanks to FormSync for providing the feedback system without building your own backend.

Edit on GitHub

Adds an "Edit this page" link to each documentation page.

Property	Type	Description
`owner`	`string`	GitHub username or organization.
`repo`	`string`	Repository name.
`path`	`string`	Path to content inside the repository.
`branch`	`string`	Branch name.

Example:

docstra.config.ts
editOnGithub: {
  owner: "sudhucodes",
  repo: "docstra",
  path: "apps/website/content",
  branch: "main"
}

Best Practices

Keep configuration minimal and readable.
Use environment variables for deploy-specific values.
Prefer auto-generated sidebar unless you need full control.
Ensure paths (like collections and editOnGithub.path) stay in sync.

How is this guide?

Last updated on March 30, 2026

Quick Start

Deployment