Block-based Editing
Block-based editing with slash commands, drag-and-drop reordering, and a bubble menu for inline formatting.
Features
VizelBlock-based Visual Editor
A Markdown editor built with Tiptap for React 19, Vue 3, and Svelte 5
Skip to content
Quick Start
Install Vizel for your framework:
bash
npm install @vizel/reactbash
npm install @vizel/vuebash
npm install @vizel/svelteBasic Usage
tsx
import { Vizel } from '@vizel/react';
import '@vizel/core/styles.css';
function App() {
return (
<Vizel
placeholder="Type '/' for commands..."
onUpdate={({ editor }) => console.log(editor.getJSON())}
/>
);
}vue
<script setup lang="ts">
import { Vizel } from '@vizel/vue';
import '@vizel/core/styles.css';
</script>
<template>
<Vizel
placeholder="Type '/' for commands..."
@update="({ editor }) => console.log(editor.getJSON())"
/>
</template>svelte
<script lang="ts">
import { Vizel } from '@vizel/svelte';
import '@vizel/core/styles.css';
</script>
<Vizel
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 |
|---|---|
| Multi-framework | React 19, Vue 3, Svelte 5 |
| TypeScript | Type definitions included |
| Markdown | Import and export |
| Theming | CSS variables |
| Bundle size | Tree-shakeable |
| Extensions | Modular architecture |