Astro Adapter

Back to Home

Getting Started with Astro

Astro renders to static HTML with client islands, so Lilac ships a client mount helper plus an Astro integration that pre-bundles the core with Vite.

Installation

# Using npm
npm install @lilac-wysiwyg/astro

# Using pnpm
pnpm add @lilac-wysiwyg/astro

# Using yarn
yarn add @lilac-wysiwyg/astro

Basic Usage

// astro.config.mjs
import { defineConfig } from 'astro/config';
import lilac from '@lilac-wysiwyg/astro';

export default defineConfig({ integrations: [lilac()] });

<!-- src/pages/index.astro -->
<div id="editor"></div>
<script>
  import { mountLilacEditor } from '@lilac-wysiwyg/astro';
  mountLilacEditor(document.getElementById('editor'), { toolbar: true });
</script>

Features

Islands-Friendly

A client-side mountLilacEditor() for use in a <script> or any island.

Astro Integration

A lilac() integration pre-bundles the core with Vite for clean dev and build.

Framework-Agnostic

Use it directly, or inside a React/Vue/Svelte island on the same page.

Optional Peer

Astro is an optional peer — the mount helper works without it.

API Reference

function mountLilacEditor(
  container: HTMLElement,
  options?: MountLilacOptions
): EditorRef;

function lilac(): AstroIntegration;

Live Playground

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

Astro Adapter v0.6.0