DemoDocsPlaygroundGitHub

An extensible rich text editor framework built on Lexical. Ship faster with production-ready defaults and TypeScript-first APIs.

Documentation

IntroductionInstallation@lyfie/luthor-headless@lyfie/luthor

Resources

DemoFeaturesPlaygroundGitHubluthor @ npmluthor-headless @ npm

Support the Project

Buy me a coffeeStar on GitHub

Built with ❤️ by Lyfie.org

HomeDocsFeaturesDemodev.toMediumGitHubllms.txtllms-full.txt
  1. Home
  2. Docs
  3. Luthor
  4. Presets Catalog
  5. HTML Editor

Luthor Documentation

Start Here

  • Getting Started
  • Installation
  • Dependencies
  • Capabilities
  • Quickstart: @lyfie/luthor
  • Quickstart: @lyfie/luthor-headless
  • AI Agents and Vibe Coding

@lyfie/luthor (Presets)

  • @lyfie/luthor Overview
  • @lyfie/luthor Architecture
  • Feature Flags
  • Props Reference
  • Presets Catalog
  • Extensive Editor
  • Compose Editor
  • Simple Editor
  • Legacy Rich Editor
  • Markdown Editor
  • HTML Editor
  • Slash Editor
  • Headless Editor Preset
  • Commands Reference

@lyfie/luthor-headless (Runtime)

  • @lyfie/luthor-headless Overview
  • @lyfie/luthor-headless Architecture
  • Extensions and API
  • Metadata Comment System
  • Features
  • Typography and Text
  • Structure and Lists
  • Media and Embeds
  • Code and Devtools
  • Interaction and Productivity
  • Customization and Theming
  • Extensions Reference
  • Nodes and Bridges Reference

Integrations

  • React Integration
  • Next.js Integration
  • Astro Integration
  • Remix Integration
  • Vite Integration

Reference Indexes

  • Search Guide
  • Exports Map
  • Preset Selector

Contributing

  • Contributor Guide

Package: luthorType: referenceSurface: preset

HTML Editor

This preset is optimized for HTML source editing flows.

When to use this

Use HTMLEditor when HTML output is a first-class editing artifact.

Mode profile

  • Modes: visual-only, visual, json, html.

Preset props

  • initialMode: Sets initial active mode.
  • defaultEditorView: Alias for initial mode selection.
  • featureFlags: Optional per-feature overrides. Includes codeIntelligence.

Code intelligence toggle

tsx
<HTMLEditor
  initialMode="html"
  featureFlags={{ codeIntelligence: false }}
/>
tsx
import '@lyfie/luthor/styles.css';
import { HTMLEditor } from '@lyfie/luthor';

export function App() {
  return <HTMLEditor initialMode="html" />;
}
Previous: Markdown Editor
Next: Slash Editor

On this page

  • When to use this
  • Mode profile
  • Preset props
  • Code intelligence toggle