Qwik Adapter

Back to Home

Getting Started with Qwik

A Qwik component that mounts the editor client-side in a visible task. Event handlers use the QRL convention (onChange$).

Installation

# Using npm
npm install @lilac-wysiwyg/qwik

# Using pnpm
pnpm add @lilac-wysiwyg/qwik

# Using yarn
yarn add @lilac-wysiwyg/qwik

Basic Usage

import { component$, useSignal } from '@builder.io/qwik';
import { LilacEditor } from '@lilac-wysiwyg/qwik';

export const App = component$(() => {
  const content = useSignal('<p>Hello Qwik!</p>');

  return (
    <LilacEditor
      value={content.value}
      onChange$={(c) => (content.value = c)}
      toolbar
    />
  );
});

Features

Resumable

A real component$; the editor mounts in a client-only useVisibleTask$.

QRL Handlers

Events follow the Qwik convention: onChange$, onFocus$, onBlur$.

Reactive Signals

Bind value and readOnly to signals; changes update the editor.

TypeScript Ready

Typed component props.

API Reference

interface LilacEditorProps {
  value?: string;
  toolbar?: ToolbarConfig | boolean;
  readOnly?: boolean;
  onChange$?: QRL<(content: string) => void>;
}

// Note: build the consuming app with the Qwik optimizer.

Live Playground

A real editor running the published Qwik adapter, built with the Qwik optimizer (v0.6.0). Type in it — it's a full Qwik app embedded below.

Qwik Adapter v0.6.0