Skip to content

Svelte

A use:richText action for Svelte 3, 4 and 5. Actions never run on the server, so it is safe in SvelteKit.

On this page
Package@open-wysiwyg-editor/svelte(opens in a new tab)Requires Svelte 3, 4 or 5

Install

Terminal
npm install @open-wysiwyg-editor/svelte

Usage

<script lang="ts">
  import { richText } from "@open-wysiwyg-editor/svelte";
  import "@open-wysiwyg-editor/svelte/style.css";

  let html = $state("<p>Hello <strong>world</strong></p>");
</script>

<div
  use:richText={{
    content: html,
    placeholder: "Write something…",
    onUpdate: (editor) => (html = editor.getHTML()),
  }}
></div>

<pre>{html}</pre>

Good to know

  • content goes in and onUpdate sends the HTML back. Outside changes load into the editor; its own HTML is not reloaded, so the cursor stays.
  • Pass any editor option except element. Runtime options apply live; the rest is read when the editor is created (wrap the element in {#key …} to recreate it).

Always sanitize on the server

The editor sanitizes what it loads and produces, but that is not a security boundary: anyone can post any string to your API. Sanitize the HTML again with a library you trust before you store it or render it for other users.

Edit this page on GitHub