Quickstart

Install Dockit, wire its renderer and page discovery, then build a static documentation site. Dockit packages the MDX compiler, Tailwind plugin, and syntax highlighting; React and Vike are installed alongside it as peers.

Requirements

• Node 20+ (Vite 7 requires 20.19 or 22.12+)
• pnpm (any recent version; the DreamLake workspaces pin pnpm@10.33.0)

Install

pnpm add @dreamlake/dockit
pnpm add react@latest react-dom@latest tailwindcss vike@^0.4.260 vike-react @mdx-js/react
pnpm add -D vite typescript pagefind @types/react@latest @types/react-dom@latest

Peer versions dockit expects (org convention: sites track react@latest; the peer ranges are floors, not pins):

Everything else — @mdx-js/rollup, @tailwindcss/vite, @vitejs/plugin-react, shiki and the remark/rehype plugins — comes in as dockit's own dependencies. You never install them directly, and the dockit() plugin factory wires them all. (tailwindcss is declared as a peer AND belongs in your own dependencies — strict CI installs, Netlify included, do not auto-install peers, and the shell's classes need it resolvable at your site root.) If you are porting a site off the old template, those are exactly the deps you get to delete — see Migrate an existing site.

Verify installation

pnpm exec vite --version   # ≥ 7
pnpm exec vike --version   # ≥ 0.4.260
node -e "import('@dreamlake/dockit').then(m => console.log(Object.keys(m).length, 'exports'))"

Site structure

Create the following files:

my-docs/
  vite.config.ts        # plugins: [...dockit()]
  site.config.ts        # initDocs(...) — the one place you configure
  renderer/
    +config.ts          # re-export dockit's Vike config
    +onRenderHtml.tsx   # thin wrapper over @dreamlake/dockit/server
    +onRenderClient.tsx # thin wrapper over @dreamlake/dockit/client
  styles/app.css        # tailwind + dockit styles
  pages/
    index/+Page.mdx     # your first page

Already have a docs site on the hand-rolled DreamLake template? Skip this page and follow Migrate an existing site instead — it maps every old file onto the structure below.

1. Vite config

The dockit() factory returns the entire plugin stack — Tailwind v4, MDX with frontmatter + GFM + shiki dual-theme highlighting, the ?raw-MDX loader, React, and Vike:

import { defineConfig } from 'vite'
import { dockit } from '@dreamlake/dockit/vite'

export default defineConfig({
  plugins: [...dockit()],
  server: { port: 3020 },
})

2. Site config

initDocs populates the shell's singletons: branding, the page list (from an eager glob), the raw sources for search, sidebar section order, and topbar tabs. See SiteConfig for every field, and the site config guide for how the pieces fit together.

import { initDocs, type PageFrontmatter } from '@dreamlake/dockit'

initDocs({
  site: {
    brand: 'MyProject',
    subtitle: 'docs',
    repoUrl: 'https://github.com/me/my-project',
    docsRepoUrl: 'https://github.com/me/my-docs',
    docsBranch: 'main',
    breadcrumbRoot: 'MyProject',
    url: 'https://docs.my-project.dev',
    docsPagesPath: 'pages',
  },
  pageMetadata: import.meta.glob<PageFrontmatter>('./pages/**/+Page.mdx', { eager: true, query: '?frontmatter', import: 'default' }),
  rawPages: import.meta.env.DEV ? import.meta.glob<string>('./pages/**/+Page.mdx', {
    eager: true, query: '?raw', import: 'default',
  }) : undefined,
  sectionOrder: ['Getting started', 'Guides', 'Reference'],
  tabs: [], // or a TabDef[] — see /components/topbar
})

3. Renderer wrappers

Vike discovers hooks by their +-prefixed filenames, which cannot live inside a published package — so your site carries three one-liners:

export { default } from '@dreamlake/dockit/vike'

// site.config MUST come first — it runs initDocs before anything renders.
import '../site.config'
import '../styles/app.css'
export { onRenderHtml } from '@dreamlake/dockit/server'

import '../site.config'
import '../styles/app.css'
export { onRenderClient } from '@dreamlake/dockit/client'

4. Styles

@import "tailwindcss";
@import "@dreamlake/dockit/styles.css";

/* Point Tailwind at your own class usage: */
@source "../pages";
@source "../renderer";

Dockit's stylesheet carries the theme tokens, dark-mode overrides, and its own @source directive so Tailwind also scans the library's compiled components. Details in Theming.

5. First page

---
title: Introduction
section: Getting started
order: 0
---

# Hello

Welcome to the docs.

Run it

pnpm exec vite          # dev server
pnpm exec vite build && pnpm exec vike prerender
pnpm exec pagefind --site dist/client   # build the search index

That is the whole site. Next, read the authoring guide that make the sidebar build itself.

Deploying your site

The build is fully static, so any static host works: after pnpm build, publish the docs/dist/client directory (or your docs package's dist/client). On Netlify, point the site's publish directory there and enable branch deploys — every pushed branch then serves a snapshot at <branch>--<site>.netlify.app, which is what powers versioned docs URLs.

For versioned releases, the package ships a copy-in release kit at node_modules/@dreamlake/dockit/templates/ — set-version.mjs, version-branch.sh, versions.example.json, and netlify.example.toml. Copy them in, fill the marked EDIT ME block with your Netlify site name, and follow Releases & versioning for the full flow.

Orient your agents

Use the agent setup fragment to describe your docs layout, authoring conventions, and generated skill to coding agents.