Skip to main content

DHTMLX RichText. Svelte integration example

Demo of DHTMLX RichText integration with Svelte using the official GitHub demo. Shows initialization and cleanup for a Svelte-based DHTMLX RichText component. For a step-by-step setup guide, see the detailed Svelte integration guide.

Try it online

View on GitHub - open the repository and click "Open in Codespaces" on the README page to launch a fully configured Svelte app with DHTMLX RichText in seconds. No local setup required.

DHTMLX RichText integrates with Svelte through a component that mounts the editor with a bound element and manages it in the Svelte lifecycle functions. The editor is created in onMount and destroyed in onDestroy, so it lives and dies with the component.

The component binds its container element and creates a Richtext instance in onMount, passing the configuration and the starting value prop. When the component is removed, onDestroy calls editor?.destructor() to clean up the widget.

Solution overview​

To integrate DHTMLX RichText with Svelte, follow the standard widget lifecycle pattern:

  1. Import the package and styles - import { Richtext } from "@dhx/trial-richtext" and its richtext.css.
  2. Bind the container with bind:this on the container <div>.
  3. Initialize in onMount - call editor = new Richtext(richtext_container, { value }).
  4. Pass initial content via props - the parent provides value, which initializes the editor when the component mounts.
  5. Clean up in onDestroy by calling editor?.destructor() to remove the widget and its listeners.

API reference​

Additional resources​