The Dokly editor is where you write, structure, and preview your docs. It's a Tiptap-based block editor with a slash menu, drag handles, AI actions, and a live MDX preview.
This page is a tour. The next pages cover individual features in depth.
The editor surface#
Annotated screenshot of the editor showing: 1) page tree sidebar (left), 2) main editor canvas (center), 3) preview pane, 4) toolbar (top)
Three panes:
- Left — the page tree. Add, rename, reorder, and nest pages. Drag a page onto another to nest it.
- Center — the editor canvas. This is where you write. Each block (paragraph, heading, callout, etc.) has a drag handle on hover.
- Right — the live preview. Renders the same way the published site will render. Optional — you can hide it for more writing space.
Three ways to insert a block#
Saving and publishing#
- 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.
AI actions#
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.
What gets saved#
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 MDX 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 (gear icon next to the page in the tree).