ADR 003: Why Lexical for the Visual Editor
Status: ✅ Accepted
Date: 2026-05-04
Context
We need a rich text / visual editor for the in-browser design editor that allows users to edit AI-generated content.
Considered Options
- Lexical (by Meta)
- Tiptap (ProseMirror-based)
- Slate.js
- Quill
Decision
✅ Chosen: Lexical
Rationale
1. Architecture
Lexical uses a unidirectional data flow with an immutable editor state — similar to how React handles UI state. This makes it predictable and inspectable.
2. Framework Agnostic
Lexical has no React dependency in its core. The @lexical/react package is optional. This means it integrates cleanly with SvelteKit without framework conflicts.
3. Extensibility
Custom node types, decorators, and plugins are first-class citizens. We can create specialized nodes for:
- AI-generated content markers
- Design token overrides
- Asset placeholders
4. Performance
Lexical is designed for large documents and complex editing scenarios. Meta uses it in production on Facebook and Workplace.
5. Active Development
Actively maintained by Meta with frequent releases. Tiptap and Slate.js have had periods of slower development.
Trade-offs
| Lexical | Tiptap | Slate.js | |
|---|---|---|---|
| React dependency | ❌ (core only) | ✅ | ✅ |
| Svelte support | ✅ Headless | ⚠️ Adapter needed | ⚠️ Manual |
| Documentation | Good | Excellent | Moderate |
| Plugins ecosystem | Growing | Large | Limited |
| Bundle size | ~40kb | ~50kb | ~100kb |
Conclusion
Lexical's framework-agnostic core and Meta-backed maintenance make it the best fit for a SvelteKit-based visual editor.