What is Editu?
Editu is a block-based visual editor for Markdown built with Tiptap, supporting React frameworks.
Overview
Features
Text Editing
- Text Formatting - Bold, italic, underline, strikethrough, text color, highlight
- Block Elements - Headings (H1-H6), lists (bullet, numbered, task), blockquotes
- Code Blocks - Syntax highlighting via lowlight
Block-Based Editing
- Slash Commands - Type
/to insert blocks - Bubble Menu - Formatting menu on text selection
- Drag Handle - Reorder blocks with drag and drop
Media
- Images - Drag and drop, paste from clipboard, resize with handles
- Tables - Table editing with row and column controls
- Embeds - YouTube, Vimeo, Twitter via oEmbed
- Mathematics - LaTeX equations rendered with KaTeX
- Diagrams - Mermaid and GraphViz diagrams
Development
- TypeScript - Editu uses TypeScript with exported type definitions
- Multi-Framework - Editu provides consistent APIs across React
- Extensible - Editu builds on Tiptap's extension architecture
- Tree-shakeable - All packages support tree-shaking
Package Architecture
| Package | Description |
|---|---|
@editu/core | Framework-agnostic core with Tiptap extensions, types, utilities, and styles |
@editu/react | React 19 components and hooks |
Feature Comparison
| Feature | Default | Optional |
|---|---|---|
| Text Formatting | ✅ | - |
| Headings | ✅ | - |
| Lists (Bullet, Numbered) | ✅ | - |
| Task Lists | ✅ | - |
| Blockquotes | ✅ | - |
| Code Blocks | ✅ | - |
| Tables | ✅ | - |
| Links | ✅ | - |
| Images | ✅ | - |
| Slash Commands | ✅ | - |
| Drag Handle | ✅ | - |
| Character Count | ✅ | - |
| Text Color / Highlight | ✅ | - |
| Markdown Import/Export | - | ✅ |
| Mathematics (LaTeX) | - | ✅ |
| Embeds (oEmbed) | - | ✅ |
| Collapsible Details | - | ✅ |
| Diagrams (Mermaid) | - | ✅ |
Quick Start
Choose your framework to get started:
- React - React 19 with hooks
Or jump directly to:
- Getting Started - Installation and basic setup
- Configuration - Editor options and customization
- Features - Enable and configure features
- Theming - Customize appearance with CSS variables