Getting Started with Lit
A native Web Component, <lilac-editor>, built on LitElement. Drop it into any HTML page or any framework that renders custom elements.
Installation
# Using npm npm install @lilac-wysiwyg/lit # Using pnpm pnpm add @lilac-wysiwyg/lit # Using yarn yarn add @lilac-wysiwyg/lit
Basic Usage
<!-- Registers <lilac-editor> on import --> <script type="module"> import '@lilac-wysiwyg/lit'; </script> <lilac-editor value="<p>Hello Lit!</p>" toolbar></lilac-editor> <script> const el = document.querySelector('lilac-editor'); el.addEventListener('change', (e) => console.log(e.detail)); </script>
Features
Standards-Based
A real custom element — works in plain HTML and in every framework that supports Web Components.
Light DOM Rendering
Renders into the light DOM so Lilac's global styles reach the editable region.
Reactive Attributes
value and read-only react to attribute and property changes.
No Decorators
Uses the static properties getter, so it builds with plain tsc.
Attributes & Events
// Attributes / properties value // string read-only // boolean placeholder // string theme // 'light' | 'dark' | 'auto' min-height / max-height // number // Events change // detail: string (content) lilac-focus / lilac-blur lilac-selection-change
Live Playground
A real editor running this adapter, loaded straight from npm (v0.6.0). Type in it — formatting, lists, undo/redo all work.