Docstra App

A documentation site built with Next.js, MDX and Docstra — generated using create-docstra-app.

Project Creation

1. Create a new Docstra project

npx create-docstra-app

Choose:

• Project name
• Template → Next.js + Docstra
• Open in VS Code (optional)

2. Navigate into the project

cd your-project-name

3. Install dependencies

npm install

Docstra automatically installs all dependencies.

4. Start development server

npm run dev

Your documentation site will run at:

👉 http://localhost:3000

Writing MDX Documentation

Docstra allows writing documentation using MDX.

Create all documentation pages inside:

app/docs/content

Example MDX File: getting-started.mdx

# Getting Started

Welcome to your Docstra documentation!

You can write Markdown, React components and Docstra UI blocks in MDX files.

Docstra Configuration

All sidebar navigation, metadata and documentation settings are configured in:

docstra.config.ts

Example Configuration

import { defineDocstraConfig } from "docstra/config";

export default defineDocstraConfig({
  siteName: "Docstra",
  githubRepo: "https://github.com/sudhucodes/docstra",
  contentDir: "app/docs/content",
  editOnGithub: {
    owner: "sudhucodes",
    repo: "docstra",
    path: "docs/content",
  },
  feedback: {
    enabled: true,
    formSyncFormID: "<FORMSYNC_FORM_ID>",
  },
  navbar: {
    logo: {
      link: "/",
      src: "/logo.svg",
      alt: "Logo",
      className: "h-8 w-auto",
    },
    links: [
      { name: "Guides", href: "/docs/guides" },
      { name: "Examples", href: "/docs/examples" },
    ],
  },
  sidebar: {
    links: [
      {
        section: "Introduction",
        items: [
          {
            name: "Overview",
            href: "/docs",
            icon: "NotebookPenIcon",
          },
          {
            name: "Quick Start",
            href: "/docs/quick-start",
            icon: "RocketIcon",
          },
        ],
      },
      {
        section: "Support",
        items: [
          {
            name: "Docstra Help",
            href: "/docs/help",
            icon: "QuestionMarkCircleIcon",
          },
        ],
      },
    ],
  },
});

This controls how your documentation pages appear in the sidebar.