Svelty Editor

A Svelte 5 wrapper component for Editor.js -- built with runes, TypeScript, and lazy-loaded tools.

Features

• Svelte 5 -- uses $props, $state, and $effect runes
• TypeScript -- fully typed props, events, and exports
• Bring your own tools -- install only the Editor.js plugins you need
• Snippet support -- render custom UI around the editor with Svelte 5 snippets
• Component API -- save(), setReadOnly(), registerTool(), and getManager() via bind:this
• EditorManager -- access the underlying manager class directly for advanced use cases

Installation

npm install svelty-editor @editorjs/editorjs

Then install whichever Editor.js tools you want to use:

npm install @editorjs/header @editorjs/list @editorjs/paragraph

Available tool packages

| Package | Block type | |---------|-----------| | @editorjs/header | Headings (H1-H6) | | @editorjs/list | Ordered / unordered lists | | @editorjs/paragraph | Paragraphs | | @editorjs/image | Image blocks | | @editorjs/embed | Embedded content (YouTube, etc.) | | @editorjs/delimiter | Visual dividers | | @editorjs/marker | Inline text highlighting | | @editorjs/quote | Block quotes | | @editorjs/table | Tables | | @editorjs/warning | Warning callouts |

You can also use any Editor.js plugin -- just pass its class in the tools prop.

Quick Start

<script lang="ts">
  import { SveltyEditor } from 'svelty-editor';
  import Header from '@editorjs/header';
  import List from '@editorjs/list';
  import Paragraph from '@editorjs/paragraph';

  let editor: ReturnType<typeof SveltyEditor>;

  async function handleSave() {
    const data = await editor.save();
    console.log(data);
  }
</script>

<SveltyEditor
  bind:this={editor}
  tools={{
    header: { class: Header },
    list: { class: List },
    paragraph: { class: Paragraph }
  }}
  placeholder="Start writing..."
/>

<button onclick={handleSave}>Save</button>

Props

SveltyEditor accepts all Editor.js configuration options (except holder, which is managed internally), plus:

| Prop | Type | Description | |------|------|-------------| | tools | Record<string, EditorTool> | Map of tool names to their config (including the class). | | data | OutputData | Initial editor content. | | placeholder | string | Placeholder text for an empty editor. | | autofocus | boolean | Focus the editor on mount. | | readOnly | boolean | Start in read-only mode. | | onChange | (api, event) => void | Called when editor content changes. | | onReady | () => void | Called when the editor is ready. | | class | string | CSS class applied to the outer wrapper. | | children | Snippet | Svelte 5 snippet rendered above the editor. |

Component Methods

Access these via bind:this:

<SveltyEditor bind:this={editor} ... />

save()

Returns the editor content as an OutputData object.

const data = await editor.save();

setReadOnly(readOnly: boolean)

Toggle read-only mode.

editor.setReadOnly(true);

registerTool(name, loader, config?)

Dynamically register a tool at runtime. The editor will reinitialize to pick it up.

await editor.registerTool(
  'checklist',
  () => import('@editorjs/checklist'),
  { inlineToolbar: true }
);

getManager()

Returns the underlying EditorManager instance for advanced use cases.

const manager = editor.getManager();
const editorjs = manager.getEditor(); // raw Editor.js instance

Tool Configuration

Each tool entry accepts an EditorTool object:

tools={{
  header: {
    class: Header,
    inlineToolbar: true,
    config: {
      levels: [1, 2, 3],
      defaultLevel: 2
    },
    shortcut: 'CMD+SHIFT+H'
  }
}}

| Field | Type | Description | |-------|------|-------------| | class | Tool constructor | The Editor.js tool class. | | inlineToolbar | boolean \| string[] | Enable inline toolbar for this block. | | config | Record<string, unknown> | Tool-specific configuration. | | shortcut | string | Keyboard shortcut. | | tunes | string[] | Block tunes to apply. |

Using Snippets

Render custom UI above the editor content using Svelte 5 snippets:

<SveltyEditor bind:this={editor} tools={...}>
  {#snippet children()}
    <div class="my-toolbar">
      <button onclick={() => editor.save()}>Save</button>
    </div>
  {/snippet}
</SveltyEditor>

Listening to Changes

<SveltyEditor
  tools={...}
  onChange={(api, event) => {
    console.log('Content changed:', event);
  }}
  onReady={() => {
    console.log('Editor is ready');
  }}
/>

Loading Initial Data

<SveltyEditor
  tools={...}
  data={{
    blocks: [
      { type: 'header', data: { text: 'Hello', level: 2 } },
      { type: 'paragraph', data: { text: 'Some content here.' } }
    ]
  }}
/>

Advanced: EditorManager

For more control, import EditorManager directly:

import { EditorManager } from 'svelty-editor';
import type { EditorOptions } from 'svelty-editor';

The manager exposes:

• initialize() -- create the editor instance
• save() -- get editor output
• destroy() -- clean up
• setReadOnly(boolean) -- toggle read-only
• registerTool(name, loader, config?) -- add a tool dynamically
• updateOptions(options) -- update editor options
• getEditor() -- access the raw Editor.js instance
• getInitializedTools() -- get loaded tool configs

TypeScript

All types are exported:

import type {
  EditorOptions,
  EditorTool,
  EditorChangeEvent,
  I18nConfig,
  ToolsLoadMap,
  SveltyEditorProps
} from 'svelty-editor';

Development

git clone https://github.com/code-gio/svelty-editor.git
cd svelty-editor
npm install
npm run dev

Visit http://localhost:5173 to see the demo page.

License

MIT