Solid Adapter

Back to Home

Getting Started with SolidJS

A reactive Solid component plus a use:lilac directive. The component builds its own element (no JSX gymnastics) and value/readOnly stay reactive through Solid primitives.

Installation

# Using npm
npm install @lilac-wysiwyg/solid

# Using pnpm
pnpm add @lilac-wysiwyg/solid

# Using yarn
yarn add @lilac-wysiwyg/solid

Basic Usage

import { createSignal } from 'solid-js';
import { LilacEditor } from '@lilac-wysiwyg/solid';

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

  return (
    <LilacEditor
      value={content()}
      onChange={setContent}
      toolbar
    />
  );
}

Features

Fine-Grained Reactivity

Changing value or readOnly updates the editor without a rebuild.

Component or Directive

Use the <LilacEditor> component, or the use:lilac directive on any element.

No Compiler Quirks

The component returns its own DOM node, so the package builds with plain tsc.

TypeScript Ready

Typed props and directive parameters.

Component & Directive

// Component
<LilacEditor value={content()} onChange={setContent} toolbar />

// Directive form
import { lilac } from '@lilac-wysiwyg/solid';
<div use:lilac={{ value: content(), toolbar: true }}></div>

Live Playground

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

Solid Adapter v0.6.0