Built-in Components

Documentation components you can use directly in your markdown files.

2 min read

Callouts

Use callouts to highlight important information.

Note

This is a note callout. Use it for general information the reader should be aware of.

Tip

This is a tip callout. Use it for helpful suggestions and best practices.

Warning

This is a warning callout. Use it for potential issues or things to watch out for.

Danger

This is a danger callout. Use it for critical warnings about destructive or irreversible actions.

You can also customize the title:

Custom Title

Callouts support custom titles via the `title` prop.

Tabs

Use tabs to show alternative content, like different package managers:

npm install svelte-docs-starter

pnpm add svelte-docs-starter

yarn add svelte-docs-starter

Steps

Use steps for sequential instructions:

Create a new project

Clone the template repository and install dependencies.

Configure your site

Edit web/src/data/docs.ts (site title, description, sidebar sections) and web/src/lib/docs/constants/config.ts (assembled docs config such as TOC settings).

Write your content

Add markdown files to src/content/docs/.

Deploy

Build and deploy to your hosting provider.

Cards

Use cards to highlight features or key information:

📝 Markdown Powered

Write documentation in Markdown with full MDSvex support for Svelte components.

🔍 Fast Search

Built-in full-text search powered by Pagefind with zero JavaScript overhead.

🌙 Dark Mode

Automatic light and dark theme support with system preference detection.

📈 SEO Ready

OpenGraph, Twitter cards, JSON-LD structured data, and auto-generated sitemap.

Link Cards

Use link cards for navigation:

Installation

Set up your environment and deploy OpenQuok

Configuration

Customize your docs site

Badges

Use Badge from $lib/ui/components/docs/mdx/index.js for short labels in prose.

Release / status: New Experimental Deprecated v1.0.0

Docs semantics (pick variants so readers can scan by color — see web/src/content/docs/Installation/vercel.md):

Backend env (no VITE_ prefix): BACKEND_DOMAIN_URL
Web / Vite env: VITE_API_BASE_URL
CORS / origins: ALLOWED_FRONTEND_ORIGINS
Runtime / platform: VERCEL
Env files: backend/.env.development.local
Repo paths & routes (often nested in ExternalLink to GitHub): backend/vercel.json
URL examples (prefer / avoid): https://example.com vs https://example.com/

File Tree

Display directory structures:

src/
- content/
  - docs/
    - index.md
    - getting-started/
      - installation.md
    - how-to-write-docs/
      - configuration.md
- lib/
  - components/
    - docs/
      - callout.svelte
      - tabs.svelte
  - docs/
    - config.ts
    - content.ts