# 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

| Shortcut | Action |
|---|---|
| ⌘/ or Ctrl+/ | Toggle dev panel |
| ⌘S or Ctrl+S | Save current file |
| ⌘F or Ctrl+F | Find in file |
| Enter | Next match (in search bar) |
| Shift+Enter | Previous match (in search bar) |
| Escape | Close search bar |
| Tab | Insert 2 spaces (in editor) |

See [Keyboard Shortcuts](/docs/keyboard-shortcuts) for the full list including global shortcuts.