Getting Started with Alpine.js
An Alpine plugin that registers an x-lilac directive, so a server-rendered page can progressively enhance a plain element into an editor.
Installation
# Using npm npm install @lilac-wysiwyg/alpine # Using pnpm pnpm add @lilac-wysiwyg/alpine # Using yarn yarn add @lilac-wysiwyg/alpine
Basic Usage
<script type="module"> import Alpine from 'alpinejs'; import lilac from '@lilac-wysiwyg/alpine'; Alpine.plugin(lilac); Alpine.start(); </script> <div x-data="{ body: '<p>Hello Alpine!</p>' }" x-lilac="{ value: body, toolbar: true, onChange: c => body = c }"> </div>
Features
Progressive Enhancement
Turn a plain element into an editor with a single x-lilac attribute.
Reactive Options
The directive tracks value and readOnly from your x-data scope.
No Build Step
Ships as an Alpine plugin; use it straight from a CDN module or a bundler.
Tiny
No framework runtime beyond Alpine itself.
Directive Options
x-lilac="{ value: string, toolbar: ToolbarConfig | boolean, readOnly: boolean, placeholder: string, onChange: (content) => 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.