Open SourceReact Only

A modern editor framework for the web!

An extensible, headless rich-text editor built on Lexical. From simple inputs to complex document editors — build exactly what you need.

Get StartedExamples
Extension-based
Blazing fast
Fully typed
Production ready
Lightweight
Headless core
typix-editor.dev/playground
A
B
+3
Alice
Bob
You
H2

Welcome to Typix

A headless, extensible editor framework that gives you full control over your editing experience with powerful AI-assisted writing capabilities

tsxcopy
import { EditorRoot, EditorContent } from '@typix-editor/react'
Extension-based architecture
Slash commands & mentions
Built on Meta's Lexical engine

Why Typix?

Everything you need to build world-class editing experiences.

Headless by Design

Zero opinions on UI. Same editor core, endless looks — you own every pixel.

B
I
U
Paragraph
Documentation
Getting Started with Typix

A minimal, distraction-free writing experience. Just you and your words.

B
I
U
Paragraph
Workspace
Team Meeting Notes

Discuss Q2 roadmap, assign owners, and track progress across teams.

B
I
U
Paragraph
Published
Launch Announcement

Introducing our new editor — built for speed, designed for developers.

16+ Extensions

Modular architecture. Add only what you need.

Rich Text
Mentions
Auto Link
Drag & Drop
Code Highlight
Keywords
Shortcuts
Collapsible
Context Menu
Speech to Text
Max Length
Tab Focus
Auto Complete
Link
Draggable Block
Themes
Rich Text
Mentions
Auto Link
Drag & Drop
Code Highlight
Keywords
Shortcuts
Collapsible
Context Menu
Speech to Text
Max Length
Tab Focus
Auto Complete
Link
Draggable Block
Themes

Fully Typed

End-to-end TypeScript. Autocomplete everywhere.

const editor = useEditorState<
RichTextExtension,
LinkExtension
>()
// ^ Full IntelliSense

Blazing Fast

Built on Meta's Lexical engine.

<1ms

render time

AI Ready

First-class AI extension support. Autocomplete, rewrite, summarize — plug in any LLM.

Coming Soon
The editor supports modular extensions that enable powerful AI-assisted writing, including autocomplete suggestions, tone adjustments, and content summarization.
Autocomplete
Rewrite
Summarize
Translate

Real-Time Collaboration

Multiple cursors, presence awareness, and conflict-free editing.

Coming Soon
Alice
Bob
Carol

Build anything, Block by Block.

Every Typix document is powered by extensions — paragraphs, headings, lists, code blocks, and more. Use the built-in ones, customize them, or create entirely new ones.

Paragraph
Headings
List
Ordered List
Checklist
Collapsible
Code Block
Quote
Divider
Table
Image
Link
Mention
Rich Text
Drag & Drop
Shortcuts
Autocomplete
Speech to Text
Keywords
Your Own

Get Started with Typix

Up and running in under a minute.

$ pnpm add @typix-editor/react
Structure
tsx
<EditorRoot>
<EditorContent>
<EditorCommand>
<EditorCommandItem />
<EditorCommandItem />
<EditorCommandItem />
</EditorCommand>
<EditorBubble>
<EditorBubbleItem />
<EditorBubbleItem />
<EditorBubbleItem />
</EditorBubble>
</EditorContent>
</EditorRoot>
Minimal Setup
tsx
import {
EditorRoot,
EditorContent,
} from "@typix-editor/react"
export function MyEditor() {
return (
<EditorRoot>
<EditorContent
placeholder="Start typing..."
onContentChange={(state) => {
// save to your backend
console.log(state)
}}
/>
</EditorRoot>
)
}

Frequently Asked Questions

Everything you need to know about Typix.