Writing content

Pages are Markdown or MDX files in src/content/docs. The file path becomes the URL: guides/offline-support.mdx is served at /guides/offline-support/.

Frontmatter

---
title: Example page          # required
description: Shown under the title and in search
order: 3                     # position in its sidebar group
sidebarLabel: Example        # shorter label for the sidebar
badge: New                   # pill next to the sidebar item
toc: false                   # hide "On this page"
---

Sidebar groups are defined in src/config.ts. Each group maps to a folder.

Code blocks

Code is highlighted at build time with Shiki, in both light and dark themes. Every block has a copy button.

File names

Add title="…" after the language:

export const syndra = createClient({ project: 'acme-notes' });

Highlighting lines

Use {1,3-4} in the meta string, or a // [!code highlight] comment:

const doc = syndra.doc('notes/1');
doc.update((d) => (d.pinned = true));
const status = doc.status; 

Diffs

Mark lines with // [!code ++] and // [!code --]:

const syndra = createClient({
  project: 'acme-notes',
  storage: memory(), 
  storage: indexedDB(), 
});

Focus

// [!code focus] blurs everything else until the reader hovers the block:

import { createClient } from '@syndra/client';

const syndra = createClient({ project: 'acme-notes' });
const doc = syndra.doc('notes/1'); 
doc.subscribe(render);

Terminal

Shell languages get a terminal label automatically:

pnpm dev

Everything else

Standard Markdown works as you’d expect: bold, italic, inline code, links, and ⌘ K keyboard keys.

Blockquotes are useful for quoting specs or users.

1. Ordered lists
2. With multiple items
   • And nested bullets
   • Like these