Editor42 in a Svelte app

When to use

When you are building with Svelte 5 and want the editor as a component, with its content bindable like any other prop.

How it works

The component from @editor42/editor42-svelte. In a .svelte file you write <Editor bind:value={content}/>; a demo page has no component file to compile, so the same component is mounted from JavaScript with Svelte's own mount() and reports changes through its change and keyup props. Editor options go in conf.

How to start using

Install the component with npm install @editor42/editor42-svelte and bind it with bind:value. Svelte 5 is required — the component is written with runes.

See the Svelte install page for self-hosting and the move from @tinymce/tinymce-svelte.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

// In a Svelte app this is a component in your markup:

// <script>
//   import Editor from '@editor42/editor42-svelte';
//   let content = $state('<p>Hello from Editor42</p>');
// </script>
//
// <Editor bind:value={content} conf={{height: 420}}/>

// A demo page has no .svelte file to compile, so the same component is mounted from JS:

import {mount} from 'svelte';
import Editor from '@editor42/editor42-svelte';

const INITIAL = `
<h2>Editor42 in a Svelte app</h2>
<p>This is the component from <code>@editor42/editor42-svelte</code>. In a real app you bind it with <code>bind:value</code>; here it is mounted from plain JavaScript and reports changes through the <code>change</code> and <code>keyup</code> props.</p>
<ul>
  <li><code>conf</code> holds the Editor42 options</li>
  <li><code>value</code> is the content, bindable in a .svelte file</li>
  <li>Every editor event is a prop: <code>change</code>, <code>keyup</code>, <code>init</code>, …</li>
</ul>
`;

const output = document.getElementById('output');
const show = (event, editor) => {
  output.textContent = editor.getContent().trim();
};

mount(Editor, {
  target: document.getElementById('app'),
  props: {
    value: INITIAL,
    change: show,
    keyup: show,
    conf: {
      height: 420,
      menubar: false,
      plugins: 'lists link code',
      toolbar: 'undo redo | bold italic | bullist numlist | link code',
      content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; }'
    }
  }
});

HTML

<h1>Editor42 in Svelte</h1>
<p class="hint">The <code>@editor42/editor42-svelte</code> component, mounted with Svelte 5.</p>

<div id="app"></div>

<h2 class="h6 mt-3">Your content, live</h2>
<pre id="output" class="state"></pre>

SASS

.hint {
  margin-bottom: 20px;
  color: var(--demo-muted-color);
}

.state {
  max-height: 160px;
  overflow: auto;
  padding: 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 13px;
  white-space: pre-wrap;
}