MarkEdit Direct Preview

One-click Edit ↔ Preview toggle for MarkEdit. A thin helper on top of MarkEdit-preview.

한국어 · Releases · MIT License

---

Why this exists

MarkEdit-preview already provides everything you need to render Markdown previews inside MarkEdit. The only friction is the default UX:

• The View Mode toolbar item opens a dropdown menu every time — even when you just want to flip between Edit and Preview.
• ⇧⌘V (Change Mode) cycles through three modes by default (edit → side-by-side → preview), not a clean two-way toggle.

Direct Preview is a one-shot installer that standardizes the workflow into a single click:

1. A Toggle Preview eye icon you can drag into the MarkEdit toolbar.
2. ⇧⌘V reduced to a two-state toggle: Edit ⇄ Preview.

That's it. We do not replace MarkEdit-preview — the actual rendering and mode switching are still done by it.

---

Requirements

• macOS with MarkEdit 1.24.0+
• MarkEdit-preview installed first

---

Install

1. Drop the script into MarkEdit

Download markedit-direct-preview.js from the latest Release and copy it to:

~/Library/Containers/app.cyan.markedit/Data/Documents/scripts/

Or build from source — see Develop below.

2. Apply the one-click toggle setup

1. Restart MarkEdit (⌘Q, relaunch).
2. From the menu bar, choose Extensions → Direct Preview → Apply One-Click Toggle Setup…
3. Restart MarkEdit again.
4. Right-click the toolbar → Customize Toolbar… → drag the Toggle Preview eye icon into your toolbar → Done.

That's the full setup. The eye icon now toggles Edit ⇄ Preview in a single click, no menu.

---

What "Apply Setup" actually does

For full transparency, it writes the following keys into MarkEdit's settings.json:

{
  "editor.customToolbarItems": [
    {
      "title": "Toggle Preview",
      "icon": "eye",
      "actionName": "Change Mode"
    }
  ],
  "extension.markeditPreview": {
    "changeMode": {
      "modes": ["edit", "preview"]
    }
  }
}

It merges with any keys you already have. If you prefer to do it by hand, copy the JSON above into your settings.json and skip the extension entirely — the result is identical.

To roll it back, choose Extensions → Direct Preview → Revert One-Click Toggle Setup…

---

Known limitations

These are upstream constraints in MarkEdit and markedit-api, not bugs in this extension:

• Toolbar icon cannot change with mode. MarkEdit's customToolbarItems[*].icon is static. The eye icon stays eye; it does not flip to eye.slash based on the current mode.
• Split-button (icon = action, ⌄ = menu) is not supported. Each toolbar item is either a menu or an action, not both.
• No external API to trigger mode switching. This extension cannot programmatically toggle the preview — it only configures MarkEdit so that the existing Change Mode action gets bound to a one-click toolbar item.

If you want any of these, the right place is a feature request on MarkEdit or MarkEdit-preview.

---

Develop

git clone https://github.com/Squarelight-ai/markedit-direct-preview.git
cd markedit-direct-preview
npm install
npm run build
npm run install:script   # copies dist/ into MarkEdit's scripts folder
npm run reload           # restarts MarkEdit

The build produces a single CJS file at dist/markedit-direct-preview.js, around 5 KB.

---

Credits

This project would not exist without the upstream work by MarkEdit.app:

• MarkEdit — the editor
• MarkEdit-preview — the preview engine and Change Mode command
• MarkEdit-api — the extension API

All third-party trademarks are property of their respective owners.

---

License

MIT © 2026 Squarelight Inc.