Package: integrationsType: integrationSurface: tooling

Astro Integration

Astro works through React islands with client hydration.

What works

React component wrapper for preset editor.
client:only="react" or client:load hydration.

Install

npm install @lyfie/luthor @astrojs/react

import '@lyfie/luthor/styles.css';
import { ExtensiveEditor } from '@lyfie/luthor';

export function EditorIsland() {
  return <ExtensiveEditor placeholder="Write here..." />;
}

Caveats

Use hydrated islands (client:only or client:load) for editor rendering.
Keep editor CSS import in the React island/component boundary.