Svelte Adapter

Back to Home

Getting Started with Svelte

Lilac Editor provides a Svelte component with reactive bindings and minimal bundle size for modern web applications.

Installation

# Using npm
npm install @lilac-wysiwyg/svelte

# Using pnpm
pnpm add @lilac-wysiwyg/svelte

# Using yarn
yarn add @lilac-wysiwyg/svelte

Basic Usage

<script>
  // The Svelte adapter ships an action, not a component, so it works
  // identically in Svelte 4 and 5 and needs no compiler.
  import { lilac } from '@lilac-wysiwyg/svelte';

  let content = '<p>Hello Svelte!</p>'
</script>

<div
  use:lilac={{
    value: content,
    toolbar: true,
    placeholder: 'Start writing...',
    onChange: (c) => (content = c),
  }}
></div>

Features

Action, Not a Component

A use:lilac action — a plain function that works the same in Svelte 4 and 5.

No Compiler Needed

Ships as TypeScript; no Svelte compiler step, no extra runtime dependencies.

Reactive Options

Changing value or readOnly in the action params updates the editor.

TypeScript Support

Full TypeScript definitions for type-safe action parameters.

Action Params

interface LilacEditorProps {
  value?: string;
  toolbar?: ToolbarConfig | boolean;
  placeholder?: string;
  theme?: 'light' | 'dark' | 'auto';
  readOnly?: boolean;
  onChange?: (content: string) => void;
}

Live Playground

A real editor running this adapter, loaded straight from npm (v0.6.0). Type in it — formatting, lists, undo/redo all work.

Svelte Adapter v0.6.0