Slate & Lexical (React-Only Editors)

Powerful rich text frameworks that require React. Here's what they offer and why the React dependency matters.

No live demos here. These editors require React to function, so we can't embed them in this SvelteKit app. Instead, this page explains their architectures, strengths, and what you'd gain (or lose) by choosing them.

Lexical (Meta)

Meta's editor framework, successor to Draft.js. Built for Facebook, Instagram, and WhatsApp web.

Architecture

  • LexicalEditor — core engine managing state and DOM updates
  • LexicalNode — base class (TextNode, ElementNode, DecoratorNode)
  • EditorState — immutable snapshots of the document
  • Commands — event system for user actions
  • DecoratorNodes — embed React components (polls, images, embeds)
tsx 
// Lexical example (React)
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';

function Editor() {
  const config = {
    namespace: 'MyEditor',
    onError(error) { console.error(error); }
  };

  return (
    <LexicalComposer initialConfig={config}>
      <PlainTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter text...</div>}
      />
      <HistoryPlugin />
    </LexicalComposer>
  );
}

Strengths

  • Excellent performance (lazy/deferred updates)
  • Meta backing — battle-tested at massive scale
  • Modern architecture (successor to Draft.js)
  • Rich playground with tables, images, equations, embeds
  • DecoratorNodes for embedding any React component
  • Yjs plugin for collaboration

Weaknesses

  • React-only — no official Svelte/Vue support
  • API still evolving (younger than ProseMirror)
  • Less community documentation
  • Plugin ecosystem smaller than ProseMirror/Tiptap

Slate

React-based editor framework that pioneered many modern editing ideas. Inspired by ProseMirror's data model.

Architecture

  • Editor object — mutable singleton managing state
  • Nested JSON tree — document as plain JSON
  • Operations — atomic changes to the document
  • Transforms — high-level document mutations
  • Custom rendering via React components for every node type
tsx 
// Slate example (React)
import { createEditor } from 'slate';
import { Slate, Editable, withReact } from 'slate-react';
import { useState, useMemo } from 'react';

function MyEditor() {
  const editor = useMemo(() => withReact(createEditor()), []);
  const [value, setValue] = useState([
    { type: 'paragraph', children: [{ text: 'Hello world' }] }
  ]);

  return (
    <Slate editor={editor} value={value} onChange={setValue}>
      <Editable
        renderElement={({ attributes, children, element }) => {
          switch (element.type) {
            case 'heading':
              return <h2 {...attributes}>{children}</h2>;
            default:
              return <p {...attributes}>{children}</p>;
          }
        }}
      />
    </Slate>
  );
}

Strengths

  • Flexible JSON document model
  • React-native rendering — every node is a React component
  • Good mental model (operations + transforms)
  • Pioneered many ideas adopted by other editors

Weaknesses

  • React-only — rendering IS React
  • Unstable API — breaking changes over years
  • Buggy edge cases
  • No built-in collaboration
  • Lost momentum to Tiptap and Lexical
  • Plugin-less — compose everything yourself

Plate (Slate++)

Makes Slate actually usable by adding a plugin system, toolbar, serialization, and 50+ plugins. Still React-only.

  • Plugin system that Slate lacks
  • 50+ plugins (tables, mentions, media, etc.)
  • shadcn/ui-style components
  • TypeScript-first
  • Active development, growing community

Why React-Only Is a Limitation

  1. Framework lock-in — Your editor choice forces your framework choice (or vice versa)
  2. Migration cost — Can't switch frameworks without replacing the entire editor
  3. Bundle overhead — If using Svelte, you'd need to bundle React just for the editor
  4. Integration friction — React components in a Svelte app require bridges and wrappers
  5. Community fragmentation — Editor plugins target React, not your framework

Our recommendation: Use framework-agnostic editors (ProseMirror, CodeMirror 6, Tiptap core) that work with any framework. The React-only editors are excellent, but the lock-in isn't worth it unless you're already committed to React.