Skip to main content

Editor

Editor overview

A tour of the web editor — three regions, two sidebar tabs, and the slide-out panel for page or site settings.

The editor is a browser-only dashboard surface for editing MDX in a connected repo; there is no editor API. It has three regions: a left sidebar (a Navigation tab mirroring nookdocs.config.json#navigation, and a Files tab showing the raw repo tree), a center Monaco editor, and a context-aware right panel (Page Settings when a page is selected, site-wide Configurations when the toolbar gear is clicked). Save rolls all unsaved MDX, frontmatter, and config changes into one commit signed nookdocs-bot[bot], which the sync pipeline replays to update the live site. The branch selector appears only for self-hosted repos with more than one branch; managed repos are single-branch. Editor permissions derive from the underlying repo's GitHub permissions — there is no separate editor RBAC.

What the editor does

The in-app editor lets you edit MDX in your connected repo through a familiar Monaco surface (the engine behind VS Code). A sidebar on the left lists your pages and files, and a slide-out panel on the right handles settings — either for the current page or for the whole site.

Save writes a commit to your repo. The webhook replays through our sync pipeline and your site updates within seconds.

Three regions

Left sidebar

Navigation tree (mirrors nookdocs.config.json#navigation) and Files tree (raw repo layout). Right-click on any row for actions.

Center — Monaco

Full Monaco editor with MDX syntax highlighting, multi-cursor, find/replace, and autosave to a draft buffer until you click Save.

Right panel

Page Settings for the currently-open page, or Site Configurations for project-wide options. Click outside to dismiss.

The dashboard's own sidebar starts collapsed here — the editor already asks for three columns, and a fourth leaves little room for the document. Expand it with the toggle and the editor remembers; your dashboard sidebar keeps its own setting either way.

Right-clicking a row and choosing Settings selects that row as well as opening its panel, so the highlight always matches what the panel is editing.

Left: Navigation tab vs Files tab

The Navigation tab shows pages grouped exactly the way your site's sidebar renders them — tabs, groups, and pages in the order declared in nookdocs.config.json#navigation. Pages referenced in your repo but not in the nav show up under an automatic Other group at the bottom.

The Files tab shows the raw repo tree — every file, every folder. Use this when you need to work with files your nav doesn't surface (images under public/, templates, snippets).

Center: Monaco

The Monaco instance is configured for MDX: syntax highlighting for Markdown + JSX, bracket matching, multi-cursor editing (⌘D), and find/replace (⌘F). Unsaved edits live in-memory only until Save fires a commit.

Right: Page Settings vs Configurations

The right panel is context-aware:

  • Click a page in the navigation tree → Page Settings slides in (frontmatter, icon, tag, hidden, redirects).

  • Click the gear icon in the top toolbar → Configurations slides in (site identity, colors, navbar, footer, AI Assistant, advanced toggles).

  • Click outside the panel or hit Esc → panel closes without saving.

Top toolbar

Branch selector · Save button (shows pending-change count) · Configurations gear

The editor toolbar sits above the three regions.

Branch selector

Only visible for self-hosted repos with more than one branch. Pick the branch you want to edit — the navigation tree, file tree, and editor all re-resolve against that branch. For managed repos the selector is hidden (single-branch operation is enforced).

Save

The Save button counts unsaved changes across all panels — MDX edits, frontmatter updates, and configuration tweaks all roll into one commit. The commit message is auto-generated ([nookdocs] update <files>), signed as nookdocs-bot[bot].

Configurations gear

Toggles the right-side Configurations panel for project-wide settings.

When the panel changes

You doPanel shows
Click a page in Navigation or FilesPage Settings for that page
Right-click a page → SettingsSame as above
Click the gear icon in the toolbarConfigurations (site-wide)
Click outside the panelPanel closes, unsaved field values stay in the form
Hit EscSame as click-outside

Permissions inside the editor

Editor permissions are derived from the GitHub permissions on the underlying repo. We do not have a separate editor-level RBAC.

  • Viewers (no repo write access) — read-only. Can open any page and see Monaco, but Save is disabled and the context menu's destructive actions (delete, rename, move) are hidden.

  • Editors (repo write access) — can save directly to branches that are NOT protected. Hitting Save on a protected branch (main with branch protection rules) falls through to the PR-creation flow (planned).

  • Owners (repo admin) — everything editors can do, plus project-level deletion (in Settings, not the editor).

Where to go next

Save and publish

How Save turns clicks into commits, and what happens on protected branches.

Navigation tab

Build your sidebar by drag-dropping pages and groups.

Configurations panel

The slide-out for site-wide settings — colors, navbar, AI, and more.

Page settings

Per-page frontmatter without touching raw YAML.

Was this page helpful?

Last updated August 20, 2026

Editor overview | NookDocs | NookDocs