Dev Panel

Edit your site's markdown files directly in the browser. The dev panel is a VS Code-styled editor that appears alongside your site preview during local development.

Opening the panel

The dev panel is available whenever the dev server is running. Toggle it with:

• ⌘+/ (Mac) or Ctrl+/ (Windows/Linux)
• Click the caret button on the left edge of the page

The panel slides open on the left and pushes your site preview to the right.

Click-to-edit

Navigate your site in the right panel and the dev panel automatically loads the corresponding markdown file. Click any page link and the editor switches to that page's source.

File explorer

Click sitemd dev panel at the top to expand the file explorer. It lists everything in pages/ and settings/:

• Pages — Click a page file to open it in the editor and navigate the preview to that page
• Settings — Click a settings file to open it in the editor (no preview navigation)

Folders are collapsible. Clicking a file auto-collapses the explorer.

Status notifications

The dev panel and site preview each have a status bar that tells you when the other panel updated in response to your action:

• Click a file in the explorer — the site preview navigates to that page, and a blue "Navigated to /slug" toast appears in the top-left corner of the site preview
• Click a link in the site preview — the editor loads the matching file, and an "Opened pages/file.md" toast appears at the top of the editor

Each toast only appears when the other panel caused the update, so you always know which side is driving the navigation.

Hiding comments

Every sitemd page file includes frontmatter comment lines (lines starting with #) that document the available markdown syntax. The comments toggle in the top-right corner of the editor hides these lines so you can focus on the actual content.

• Off (default) — comment lines are stripped from the editor view
• On (green) — comment lines are visible

The toggle state is remembered across sessions. Hidden comments are preserved — they're always included when you save, even if you can't see them. The toggle fades out when you scroll down and reappears on hover.

Editing and saving

The editor uses the same syntax highlighting colors as VS Code's Dark+ theme for markdown:

• Frontmatter keys in blue, values in orange
• Headings in blue
• Code fences and inline code in orange
• Links, images, blockquotes, and HTML tags each have distinct colors
• sitemd-specific syntax (button:, embed:, {#id}) is highlighted

Save with ⌘S (Mac) or Ctrl+S (Windows/Linux), or click the Save button. The file is written, the site rebuilds, and the preview updates — all without losing your cursor position.

Find in file

Press ⌘F (Mac) or Ctrl+F (Windows/Linux) to open the search bar in the top-right corner of the editor. Type a query and all matches are highlighted yellow — in the editor and in the site preview.

• Navigate matches — Click the ↑/↓ arrows, or press Enter (next) and Shift+Enter (previous)
• Active match — The current match is highlighted orange with an outline, in both panels
• Live updates — Matches update as you type in the editor while search is open
• Close — Press Escape or click the × button. Highlights clear from both panels.

The match count shows your position (e.g. "3 of 12"). Frontmatter matches only highlight in the editor since frontmatter doesn't appear in the rendered preview.

How it works

The dev panel is injected by the dev server into every page response. It never appears in production builds.

When you save a file, the dev server writes it to disk. The existing file watcher detects the change, triggers a rebuild, and sends an update to the browser. Instead of a full page reload, the panel performs a content swap — replacing only the page content while preserving the editor state.

Keyboard shortcuts

See Keyboard Shortcuts for the full list including global shortcuts.