{
  "version": "https://jsonfeed.org/version/1",
  "title": "Marmite 0.4.1",
  "home_page_url": "https://marmite.blog",
  "feed_url": "https://marmite.blog/tag-editor.json",
  "description": "Static Site Generator <br> <small>for blogs</small> <br> <small>made with ❤️ and 🦀</small>",
  "items": [
    {
      "id": "https://marmite.blog/marmite-editor.html",
      "url": "https://marmite.blog/marmite-editor.html",
      "title": "Marmite Editor",
      "content_html": "<p>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.</p>\n<div class=\"markdown-alert markdown-alert-note\">\n<p class=\"markdown-alert-title\">Note</p>\n<p>The editor is only available when serving with <code>--serve</code>. It does not appear on your deployed site.</p>\n</div>\n<h2 id=\"opening-the-editor\">Opening the editor<a href=\"#opening-the-editor\" aria-label=\"Link to heading 'Opening the editor'\" data-heading-content=\"Opening the editor\" class=\"anchor\"></a></h2>\n<p>Start your site with the built-in server:</p>\n<pre class=\"marmite-code\"><code class=\"marmite-code-inner language-console\">$ marmite myblog --serve --watch\n</code></pre>\n<p>Open the toolbar (gear icon at top-left) and click the <strong>Editor</strong> 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.</p>\n<p>You can also navigate directly to <code>http://localhost:8000/__marmite__/editor/my-post</code> to edit a specific slug, or <code>http://localhost:8000/__marmite__/editor/</code> for the file browser.</p>\n<h2 id=\"editor-layout\">Editor layout<a href=\"#editor-layout\" aria-label=\"Link to heading 'Editor layout'\" data-heading-content=\"Editor layout\" class=\"anchor\"></a></h2>\n<p>The editor has three panels:</p>\n<ul>\n<li><strong>Sidebar</strong> (left, collapsible) - metadata, file tree, and help reference</li>\n<li><strong>Editor</strong> (center) - CodeMirror 6 markdown editor with a toolbar above it</li>\n<li><strong>Preview</strong> (right, toggle-able) - live preview of the rendered page</li>\n</ul>\n<h3 id=\"top-bar\">Top bar<a href=\"#top-bar\" aria-label=\"Link to heading 'Top bar'\" data-heading-content=\"Top bar\" class=\"anchor\"></a></h3>\n<p>The top bar contains:</p>\n<ul>\n<li><strong>Sidebar</strong> / <strong>Back</strong> - toggle sidebar visibility or return to the rendered page</li>\n<li><strong>New</strong> - create a new post or page</li>\n<li><strong>Version</strong> - current marmite version</li>\n<li><strong>Content type</strong> - shows POST or PAGE badge</li>\n<li><strong>Content title</strong> - the title of the content being edited</li>\n<li><strong>Config</strong> - open the site configuration dialog</li>\n<li><strong>Theme</strong> - toggle light/dark editor theme</li>\n<li><strong>Preview</strong> - show/hide the preview panel</li>\n</ul>\n<h3 id=\"editor-toolbar\">Editor toolbar<a href=\"#editor-toolbar\" aria-label=\"Link to heading 'Editor toolbar'\" data-heading-content=\"Editor toolbar\" class=\"anchor\"></a></h3>\n<p>Above the editor area:</p>\n<ul>\n<li><strong>Insert</strong> menu - headings, bold, italic, links, images, code blocks, tables, lists, blockquotes, horizontal rules, and a media file picker</li>\n<li><strong>Save</strong> - save to disk (also triggered by Ctrl+S)</li>\n<li><strong>Save As</strong> - save as a new content file with a different title</li>\n</ul>\n<h3 id=\"sidebar-tabs\">Sidebar tabs<a href=\"#sidebar-tabs\" aria-label=\"Link to heading 'Sidebar tabs'\" data-heading-content=\"Sidebar tabs\" class=\"anchor\"></a></h3>\n<ul>\n<li><strong>Info</strong> - content metadata (title, slug, date, tags, etc.) and a project file tree. Content files link to the editor. Non-content editable files (CSS, JS, YAML, fragments) open in a floating modal editor.</li>\n<li><strong>Edit</strong> - frontmatter fields with autocomplete for tags, streams, series, authors, languages, images</li>\n<li><strong>Actions</strong> - add translations, clone content, delete content</li>\n<li><strong>Help</strong> - markdown syntax reference and available shortcodes list</li>\n</ul>\n<h3 id=\"status-bar\">Status bar<a href=\"#status-bar\" aria-label=\"Link to heading 'Status bar'\" data-heading-content=\"Status bar\" class=\"anchor\"></a></h3>\n<p>Below the editor area, shows cursor position (line/column), font size slider, and editor theme selector with 12 themes.</p>\n<h2 id=\"auto-save\">Auto-save<a href=\"#auto-save\" aria-label=\"Link to heading 'Auto-save'\" data-heading-content=\"Auto-save\" class=\"anchor\"></a></h2>\n<p>The editor auto-saves after 1.5 seconds of inactivity. This writes the file to disk, triggers a rebuild (when running with <code>--watch</code>), 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.</p>\n<h2 id=\"preview\">Preview<a href=\"#preview\" aria-label=\"Link to heading 'Preview'\" data-heading-content=\"Preview\" class=\"anchor\"></a></h2>\n<p>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.</p>\n<p>The preview panel can be hidden with the <strong>Preview</strong> 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.</p>\n<p>Use <strong>Pop Out</strong> to open the preview in a separate browser tab, or <strong>Refresh</strong> to manually reload it.</p>\n<h2 id=\"raw-file-editing\">Raw file editing<a href=\"#raw-file-editing\" aria-label=\"Link to heading 'Raw file editing'\" data-heading-content=\"Raw file editing\" class=\"anchor\"></a></h2>\n<p>The editor supports editing non-content files without adding frontmatter:</p>\n<ul>\n<li><strong>Fragment files</strong> (<code>_hero.md</code>, <code>_comments.md</code>, etc.) - open from the file tree or navigate to <code>/__marmite__/editor/content/_hero.md</code></li>\n<li><strong>Config, CSS, JS, YAML, and other text files</strong> - click them in the file tree to open a floating modal editor with a save button, or navigate directly via URL for full-screen editing</li>\n</ul>\n<p>In raw mode, the editor skips frontmatter handling, hides the preview panel and Edit/Actions sidebar tabs.</p>\n<h2 id=\"configuration-dialog\">Configuration dialog<a href=\"#configuration-dialog\" aria-label=\"Link to heading 'Configuration dialog'\" data-heading-content=\"Configuration dialog\" class=\"anchor\"></a></h2>\n<p>Click <strong>Config</strong> in the top bar to open the site configuration dialog with 9 tabs:</p>\n<ul>\n<li><strong>Site</strong> - name, tagline, URL, language, footer, logo</li>\n<li><strong>Content</strong> - pagination, default author, date format, TOC, next/prev links, related content</li>\n<li><strong>Search</strong> - enable search, match snippets, snippets per result, search title</li>\n<li><strong>Feeds</strong> - JSON feed, sitemap, URLs JSON, publish markdown, shortcodes</li>\n<li><strong>Appearance</strong> - colorscheme (13 options), colorscheme picker, color mode, light/dark toggle, code highlighting</li>\n<li><strong>Images</strong> - card image, banner image, skip resize, max width, banner width, resize filter</li>\n<li><strong>Menu</strong> - add, remove, and reorder navigation menu items</li>\n<li><strong>Paths</strong> - content, site, and media directory paths</li>\n<li><strong>Raw YAML</strong> - edit the full marmite.yaml directly</li>\n</ul>\n<h2 id=\"disabling-the-toolbar\">Disabling the toolbar<a href=\"#disabling-the-toolbar\" aria-label=\"Link to heading 'Disabling the toolbar'\" data-heading-content=\"Disabling the toolbar\" class=\"anchor\"></a></h2>\n<p>To serve without the toolbar and editor:</p>\n<pre class=\"marmite-code\"><code class=\"marmite-code-inner language-yaml\"><a-c># marmite.yaml</a-c>\n<a-pr>enable_toolbar</a-pr><a-p>:</a-p> <a-co>false</a-co></code></pre>\n<p>Or via CLI:</p>\n<pre class=\"marmite-code\"><code class=\"marmite-code-inner language-console\">$ marmite myblog --serve --enable-toolbar false\n</code></pre>\n<p>The API endpoints and editor page still work when the toolbar is disabled - only the automatic injection into served HTML pages is suppressed.</p>\n<h2 id=\"api-endpoints\">API endpoints<a href=\"#api-endpoints\" aria-label=\"Link to heading 'API endpoints'\" data-heading-content=\"API endpoints\" class=\"anchor\"></a></h2>\n<p>The editor uses these API endpoints (all under <code>/__marmite__/</code>):</p>\n<table>\n<thead>\n<tr>\n<th>Endpoint</th>\n<th>Method</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>content/{slug}/body</code></td>\n<td>GET</td>\n<td>Read frontmatter and raw markdown body</td>\n</tr>\n<tr>\n<td><code>content/{slug}/body</code></td>\n<td>PUT</td>\n<td>Write markdown body with optional frontmatter updates</td>\n</tr>\n<tr>\n<td><code>file/{path}</code></td>\n<td>GET</td>\n<td>Read any text file in the project</td>\n</tr>\n<tr>\n<td><code>file/{path}</code></td>\n<td>PUT</td>\n<td>Write any text file in the project</td>\n</tr>\n<tr>\n<td><code>files</code></td>\n<td>GET</td>\n<td>List all project files with editable/fragment flags</td>\n</tr>\n<tr>\n<td><code>config</code></td>\n<td>GET</td>\n<td>Read raw marmite.yaml content</td>\n</tr>\n<tr>\n<td><code>config</code></td>\n<td>PUT</td>\n<td>Write raw marmite.yaml (with YAML validation)</td>\n</tr>\n<tr>\n<td><code>editor/{slug}</code></td>\n<td>GET</td>\n<td>Serve the editor page for a content slug</td>\n</tr>\n<tr>\n<td><code>editor/{path}</code></td>\n<td>GET</td>\n<td>Serve the editor in raw mode for a file path</td>\n</tr>\n<tr>\n<td><code>editor/</code></td>\n<td>GET</td>\n<td>Serve the empty editor with file tree navigation</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Please consider giving a ☆ on Marmite <a href=\"https://github.com/rochacbruno/marmite\">Github</a> repository, that helps a lot!</p>\n</blockquote>\n<!-- Contents from _markdown_footer.md are appended to every content -->\n<!-- _references.md is a file to gather all references together \nthis file is appended to every raw markdown.\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"
    }
  ]
}