A tour of the Dokly editor — the writing surface, the toolbar, and the page tree.

The Dokly editor is where you write and structure your docs. It's a block editor with a slash menu, drag handles, and inline AI actions.

This page is a tour. The next pages cover individual features in depth.

The editor surface#

Screenshot needed

annotated screenshot of the editor showing: 1) page tree sidebar (left), 2) main editor canvas, 3) Edit/Preview tabs in the toolbar (top center)

Page tree (left) — add, rename, reorder, and nest pages. Drag a page onto another to nest it.
Editor canvas (center) — where you write. Each block (paragraph, heading, callout, etc.) has a drag handle on hover.
Edit / Preview tabs (top) — switch between the editing surface and a rendered preview that matches the published site.

Three ways to insert a block#

Save — ⌘S / Ctrl+S. Writes to the database. The page is live on your published site within ~1 second.
Autosave — every few seconds while you type. You almost never have to think about Save.
Draft vs published — toggle in the page settings. Drafts don't show on the live site or in the sidebar.

Select any text and click the sparkle button (or hit ⌘K) to run AI actions: improve, expand, summarize, translate, fix grammar. See AI actions.

For longer-form generation (a whole page from a brief, or a whole site from a description), see Generate with AI.

Each page in Dokly stores:

Title — shown in the sidebar and tab title.
Slug — the URL path (e.g., editor/overview).
Description — used for the meta description and the in-app page tree subtitle.
Content — the page body.
Published state — draft or live.
Order and nesting — controlled by drag-and-drop in the sidebar.

You can edit slug, title, and description from the page settings panel.