LexicalEditor — usage examples

LexicalEditor ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

React

import { LexicalEditor } from '@rozie-ui/lexical-react';

export function Editor() {
  return <LexicalEditor ariaLabel="Post body" />;
}

Vue

<script setup lang="ts">
import LexicalEditor from '@rozie-ui/lexical-vue';
</script>

<template>
  <LexicalEditor aria-label="Post body" />
</template>

Svelte

<script lang="ts">
  import LexicalEditor from '@rozie-ui/lexical-svelte';
</script>

<LexicalEditor ariaLabel="Post body" />

Angular

import { Component } from '@angular/core';
import { LexicalEditor } from '@rozie-ui/lexical-angular';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [LexicalEditor],
  template: `<LexicalEditor ariaLabel="Post body" />`,
})
export class EditorComponent {}

Solid

import { LexicalEditor } from '@rozie-ui/lexical-solid';

export function Editor() {
  return <LexicalEditor ariaLabel="Post body" />;
}

See also

• LexicalEditor — showcase & API — the full prop / event / slot / handle reference, and theming.
• LexicalEditor comparison — how it stacks up against the per-framework libraries.
• LexicalEditor — live demo — the real package running in the page, plus the one .rozie source and all six generated outputs.