VizelBlock-based Visual Editor

Quick Start ​

Install Vizel for your framework:

npm install @vizel/react

npm install @vizel/vue

npm install @vizel/svelte

Basic Usage ​

import { Vizel } from '@vizel/react';
import '@vizel/core/styles.css';

function App() {
  return (
    <Vizel
      placeholder="Type '/' for commands..."
      onUpdate={({ editor }) => console.log(editor.getJSON())}
    />
  );
}

<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>

<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())}
/>

Try the Demo ​

Each framework ships a live demo that exercises the full feature set:

React 19@vizel/reactVue 3@vizel/vueSvelte 5@vizel/svelte

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 any block by its handle to reorder content. Every block has its own handle — including individual list items (bullet, ordered, task) at any nesting depth.

Features ​

Community ​

• GitHub Repository
• Issue Tracker
• Discussions