Editor Modes

Developer Demo

Switch between Inline, Iframe, Document, and Preview modes and see the same document in each one.

Get started freeContact Sales
← View all demos

In this demo, you can experience

  • Inline: the toolbar appears only while you edit, inside your page layout.
  • Iframe: the editing area runs in its own frame, isolated from page styles.
  • Document: a page-sized sheet like a word processor.
  • Preview: the document as users will see it, without editing tools.

How To Try

  1. 1Press a mode button above the editor.
  2. 2Compare how the same document looks in each mode.
  3. 3Copy the setting code shown below the editor into your own project.
Live editor — click anywhere and start editing
Editor modeThe toolbar shows up only while you edit. Click inside the document.

Setting for this mode

const editor = new SynapEditor('editor', {
  "editor.type": "inline"
}, html);