Block-based Editing
Block-based editing with slash commands, drag-and-drop reordering, and a bubble menu for inline formatting.
Features
EdituBlock-based Visual Editor
A Markdown editor built with Tiptap for React 19
Skip to content
Quick Start
Install Editu for your framework:
bash
npm install @editu/reactBasic Usage
tsx
import { Editu } from '@editu/react';
import '@editu/core/styles.css';
function App() {
return (
<Editu
placeholder="Type '/' for commands..."
onUpdate={({ editor }) => console.log(editor.getJSON())}
/>
);
}Feature Highlights
Slash Commands
Type / to open the command menu:
- Headings - H1, H2, H3
- Lists - Bullet, Numbered, Task
- Media - Images, Embeds, Files
- Advanced - Tables, Code Blocks, Diagrams, Math
Bubble Menu
Select text to display the bubble menu:
- Bold, Italic,
Strikethrough - Links, Highlights, Code
- Text alignment
Drag & Drop
Drag blocks by their handle to reorder content.
Features
| Feature | Description |
|---|---|
| React 19 | First-class React 19 support |
| TypeScript | Includes type definitions |
| Markdown | Imports and exports Markdown |
| Theming | Uses CSS variables |
| Bundle size | Supports tree-shaking |
| Extensions | Uses modular architecture |