The marmite editor is a three-panel content editor that runs inside the built-in dev server. It provides a CodeMirror 6 markdown editor with autocomplete, a live preview iframe, and a sidebar for metadata and file management.
\nNote
\nThe editor is only available when serving with --serve. It does not appear on your deployed site.
Start your site with the built-in server:
\n$ marmite myblog --serve --watch\nOpen the toolbar (gear icon at top-left) and click the Editor button in the header. On content pages, this opens the editor for that specific post or page. On non-content pages (index, tag listings), it opens the editor with a file tree for navigation.
\nYou can also navigate directly to http://localhost:8000/__marmite__/editor/my-post to edit a specific slug, or http://localhost:8000/__marmite__/editor/ for the file browser.
The editor has three panels:
\nThe top bar contains:
\nAbove the editor area:
\nBelow the editor area, shows cursor position (line/column), font size slider, and editor theme selector with 12 themes.
\nThe editor auto-saves after 1.5 seconds of inactivity. This writes the file to disk, triggers a rebuild (when running with --watch), and refreshes the preview panel. A localStorage backup is also kept for crash recovery - if the browser closes unexpectedly, the editor offers to restore the draft on next load.
The preview panel shows the rendered page in an iframe. It refreshes automatically after each save/rebuild via a dedicated WebSocket connection. The editor page itself never reloads during saves.
\nThe preview panel can be hidden with the Preview button in the top bar. When browsing around in the preview and then clicking back into the editor, the preview automatically navigates back to the page being edited.
\nUse Pop Out to open the preview in a separate browser tab, or Refresh to manually reload it.
\nThe editor supports editing non-content files without adding frontmatter:
\n_hero.md, _comments.md, etc.) - open from the file tree or navigate to /__marmite__/editor/content/_hero.mdIn raw mode, the editor skips frontmatter handling, hides the preview panel and Edit/Actions sidebar tabs.
\nClick Config in the top bar to open the site configuration dialog with 9 tabs:
\nTo serve without the toolbar and editor:
\n# marmite.yaml \nenable_toolbar : false Or via CLI:
\n$ marmite myblog --serve --enable-toolbar false\nThe API endpoints and editor page still work when the toolbar is disabled - only the automatic injection into served HTML pages is suppressed.
\nThe editor uses these API endpoints (all under /__marmite__/):
| Endpoint | \nMethod | \nDescription | \n
|---|---|---|
content/{slug}/body | \nGET | \nRead frontmatter and raw markdown body | \n
content/{slug}/body | \nPUT | \nWrite markdown body with optional frontmatter updates | \n
file/{path} | \nGET | \nRead any text file in the project | \n
file/{path} | \nPUT | \nWrite any text file in the project | \n
files | \nGET | \nList all project files with editable/fragment flags | \n
config | \nGET | \nRead raw marmite.yaml content | \n
config | \nPUT | \nWrite raw marmite.yaml (with YAML validation) | \n
editor/{slug} | \nGET | \nServe the editor page for a content slug | \n
editor/{path} | \nGET | \nServe the editor in raw mode for a file path | \n
editor/ | \nGET | \nServe the empty editor with file tree navigation | \n
\n\n\n\n", "summary": "\"The marmite editor is a full-featured markdown editor with live preview, metadata management, and file editing built into the dev server.\"", "date_published": "2026-07-10T10:00:00-00:00", "image": "media/marmite-editor.banner.jpg", "authors": [ { "name": "Bruno Rocha", "url": "https://go.rocha.social/@bruno", "avatar": "https://github.com/rochacbruno.png" } ], "tags": [ "docs", "features", "editor", "toolbar", "server" ], "language": "en" }, { "id": "https://marmite.blog/marmite-toolbar.html", "url": "https://marmite.blog/marmite-toolbar.html", "title": "Marmite Toolbar", "content_html": "Please consider giving a ☆ on Marmite Github repository, that helps a lot!
\n
The marmite toolbar is a floating development panel that appears when you serve your site with --serve. It provides a visual interface for managing content, editing frontmatter, configuring your site, and viewing site stats - all without leaving the browser.
Note
\nThe toolbar is only injected by the built-in dev server. It does not appear on your deployed site.
\nStart your site with the built-in server:
\n$ marmite myblog --serve --watch\nA small gear icon appears at the top-left corner of every page. Click it to open the toolbar sidebar. Press Escape or click the overlay to close it. The toolbar remembers its open/closed state and active tab across page reloads.
The toolbar header shows the marmite version and an Editor button. On content pages, the Editor button opens the marmite-editor for that specific content. On non-content pages, it opens the editor with a file tree for navigation.
\nTo disable the toolbar, set enable_toolbar: false in marmite.yaml or use --enable-toolbar false on the CLI. The API endpoints and editor page remain accessible even when the toolbar is disabled.
The toolbar organizes its features into tabs. On content pages (posts and pages), all tabs are available. On non-content pages (index, tag listings, archive), only the Site, Layout, and Config tabs are shown.
\nDisplays metadata for the current content page:
\nThe data comes from the {slug}.metadata.json file generated during --serve mode.
A form for editing the current page's frontmatter. Fields include:
\nextra frontmatter fieldClick Save Frontmatter to write changes. The site rebuilds automatically and the page reloads (or redirects if the slug changed).
\nThe Edit Content button is reserved for a future in-browser markdown editor.
\nContent-specific actions for the current page:
\nSelect a language code and enter a translated title. Marmite creates the translation file in the correct location:
\nposts/hello.md), the translation goes to posts/ola.md with explicit translates: hello and language: pt in frontmatterposts/hello/hello.md), the translation goes to posts/hello/pt-ola.md with a language prefix in the filename (auto-discovered by marmite)Creates a full copy of the current content including the markdown body and all frontmatter. Only the title and slug are changed. The aliases and translates fields are stripped from the clone. Enter a new title and click Clone Content.
Rename the file or move it to a different directory. Enter the new filename (e.g. new-name.md or tutorials/new-name.md). If the content has an explicit slug: in frontmatter, the URL does not change.
Deletes the content file after a confirmation prompt. Redirects to the home page.
\nSite overview and quick content creation.
\nSix clickable cards showing counts for posts, pages, tags, streams, authors, and series. Each card links to its corresponding listing page. Below the cards, the last build's rendering time is displayed.
\nA form with title and tags fields, plus an expandable + Advanced section with stream, series, language, translates (slug picker), and directory fields. All fields support autocomplete. Two buttons:
\nEdit site layout and navigation settings. Changes are saved to marmite.yaml.
Visual editor for the navigation menu. Each menu item has a label and URL. Drag items up/down with the arrow buttons, remove with the X button, or add new items at the bottom.
\nEdit section titles used across the site: Pages, Tags, Archives, Authors, Streams, Series, Languages, and Search.
\nEdit display names and metadata for each configured entry:
\ndisplay_name for each streamdisplay_name and description for each seriesdisplay_name for each languageLabel=URL, Label=URL)Each section has a + button to add new entries and an X button on each row to remove entries. The key field autocompletes from existing values.
\nEdit general site configuration fields from marmite.yaml:
extra config objectWhen you navigate to a page that doesn't exist (e.g. http://localhost:8000/my-new-page.html), the 404 page shows a "Page not found - Click here to create it!" button. Clicking it creates the page using the slug from the URL as the title (converting hyphens to spaces and capitalizing words), then redirects you to the newly created page after the site rebuilds.
The toolbar is a self-contained JavaScript and CSS bundle served from /__marmite__/toolbar.js and /__marmite__/toolbar.css. The server injects <link> and <script> tags before </body> in every HTML response.
All toolbar actions use the content-management-api endpoints. After any mutation (create, edit, move, clone, delete), the toolbar intercepts the live-reload WebSocket signal to redirect to the correct page instead of blindly reloading the current URL.
\nThe toolbar state (open/closed, active tab) is persisted in localStorage so it survives page reloads.
| Key | \nAction | \n
|---|---|
Escape | \nClose the toolbar panel | \n
\n\n\n\n", "summary": "\"The marmite toolbar is a floating development panel injected during --serve mode that lets you create, edit, move, clone, and delete content directly from the browser.\"", "date_published": "2026-07-09T12:30:00-00:00", "image": "media/marmite-toolbar.banner.jpg", "authors": [ { "name": "Bruno Rocha", "url": "https://go.rocha.social/@bruno", "avatar": "https://github.com/rochacbruno.png" } ], "tags": [ "docs", "features", "toolbar", "server" ], "language": "en" } ] }Please consider giving a ☆ on Marmite Github repository, that helps a lot!
\n