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>
  import { LilacEditor } from '@lilac-wysiwyg/svelte';
  import { './app.css' }

  let content = '<p>Hello Svelte!</p>'
  let theme = 'light'

  function handleChange(newContent) {
    content = newContent
  }
</script>

<LilacEditor
  bind:value={content}
  on:change={(e) => handleChange(e.detail)}
  toolbar={{ show: true }}
  placeholder="Start writing..."
  theme={theme}
/>

Features

Reactive Bindings

Automatic two-way binding with Svelte's reactive statements and props.

Minimal Bundle

Lightweight adapter with no additional runtime dependencies.

Event Dispatchers

Native Svelte event handling with custom event dispatchers.

TypeScript Support

Full TypeScript definitions for type-safe component usage.

Props

export let value: string = ''
export let toolbar: { show: boolean } = { show: true }
export let placeholder: string = 'Start writing...'
export let theme: 'light' | 'dark' = 'light'
export let readOnly: boolean = false
Svelte Adapter v0.5.0