Preact Adapter

Back to Home

Getting Started with Preact

A lightweight, React-compatible component wrapper. The same props and imperative ref handle as the React adapter, in a fraction of the bytes.

Installation

# Using npm
npm install @lilac-wysiwyg/preact

# Using pnpm
pnpm add @lilac-wysiwyg/preact

# Using yarn
yarn add @lilac-wysiwyg/preact

Basic Usage

import { useState } from 'preact/hooks';
import { LilacEditor } from '@lilac-wysiwyg/preact';

export function App() {
  const [content, setContent] = useState('<p>Hello Preact!</p>');

  return (<LilacEditor
    value={content}
    onChange={setContent}
    toolbar
    placeholder="Start writing..."
  />);
}

Features

React-Compatible API

Same value/onChange props and imperative ref handle as the React adapter.

Tiny Footprint

Built on preact + preact/hooks; no React runtime required.

TypeScript Ready

Full type definitions for props and the ref handle.

Drop-in

Works anywhere Preact does, including preact/compat apps.

API Reference

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

Live Playground

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

Preact Adapter v0.6.0