What is Vizel?
Vizel is a block-based visual editor for Markdown built with Tiptap, supporting React, Vue, and Svelte frameworks.
Overview
Features
Text Editing
- Text Formatting - Bold, italic, underline, strikethrough, text color, highlight
- Block Elements - Headings (H1-H3 by default, configurable up to 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 - Per-item drag handle for every block, including individual list items at any nesting depth
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 - Vizel uses TypeScript with exported type definitions
- Multi-Framework - Vizel provides consistent APIs across React, Vue, and Svelte
- Extensible - Vizel builds on Tiptap's extension architecture
- Tree-shakeable - All packages support tree-shaking
Package Architecture
| Package | Description |
|---|---|
@vizel/core | Framework-agnostic core with Tiptap extensions, types, utilities, and styles |
@vizel/react | React 19 components and hooks |
@vizel/vue | Vue 3 components and composables |
@vizel/svelte | Svelte 5 components and runes |
Feature Comparison
Most features are enabled by default. Opt-in features must be explicitly enabled in the features option.
| Feature | Default | Opt-in |
|---|---|---|
| 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 | ✅ | - |
| Callouts | ✅ | - |
| Diagrams (Mermaid, GraphViz) | ✅ | - |
| Superscript / Subscript | ✅ | - |
| Typography | ✅ | - |
| Wiki Links | - | ✅ |
| @Mention | - | ✅ |
| Comments | - | ✅ |
| Collaboration (Yjs) | - | ✅ |
Quick Start
Jump into the concept-first guide:
- Getting Started - Installation and basic setup
- Editor - The
Vizelcomponent,useVizelEditor, options, auto-save - Blocks - Block selection, clipboard, drag handle, block menu
- Markdown - Flavor system, encoding modes, round-trip contract
- Theming - Customize appearance with CSS variables
- SSR - Server-side rendering and static HTML generation
- Collaboration - Real-time editing, comments, version history
- Accessibility - Keyboard navigation and screen reader support
- Migration v1 to v2 - Upgrade from Vizel 1.x