Examples › Track 3 — Editor › Example 8

Five-line embed

The minimal drop-in. Add a div, import the editor, instantiate it. That's the whole API surface for the basic case.

The complete code

<div id="editor" style="height: 520px;"></div>

<script type="module">
  import QuikdownEditor from 'https://unpkg.com/quikdown/dist/quikdown_edit.esm.min.js';

  new QuikdownEditor('#editor');
</script>

Live result

That's all you need for the basic case

The editor handles:

  • Live preview (split mode by default)
  • Bidirectional editing — type in either pane
  • Light/dark theme via system preference
  • Keyboard shortcuts (Ctrl+1/Ctrl+2/Ctrl+3)
  • Default toolbar with mode switcher and copy actions

Want to enable undo/redo, the "Remove HR" button, custom fences, or your own toolbar? Try the full editor or jump to headless mode.