Rich Text

Headless rich-text editor: a typed document model (schema-declared node and mark types), immutable transactions and commands with undo history, input rules, sanitized HTML paste and serialization, and contenteditable parts.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { RichTextRoot, RichText, RichTextBubbleMenu, RichTextContent, RichTextToolbar, RichTextToolbarButton } from "@vizejs/ui/rich-text";

Or copy the source into your project with vize lib pull rich-text (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Rich-text editor with a formatting toolbar, a selection bubble menu, and v-model HTML output. -->
<script setup lang="ts">
import { computed, ref } from "vue";

import {
  RichTextBubbleMenu,
  RichTextContent,
  RichTextRoot,
  RichTextToolbar,
  RichTextToolbarButton,
  createDefaultRichTextSchema,
  createRichTextCommands,
  isBlockActive,
  isMarkActive,
  richTextDocFromText,
  richTextToHtml,
} from "@vizejs/ui/rich-text";

const schema = createDefaultRichTextSchema();
const commands = createRichTextCommands(schema);
const doc = ref(
  richTextDocFromText(schema, "Release notes\nType ## for a heading or - for a list."),
);
const html = computed(() => richTextToHtml(schema, doc.value));
</script>

<template>
  <RichTextRoot v-model="doc" :schema>
    <RichTextToolbar aria-label="Formatting">
      <RichTextToolbarButton
        :command="commands.toggleMark('bold')"
        :active="(state) => isMarkActive(state, 'bold')"
        aria-label="Bold"
      >
        B
      </RichTextToolbarButton>
      <RichTextToolbarButton
        :command="commands.toggleBlockType('heading', { level: 2 })"
        :active="(state) => isBlockActive(state, 'heading', { level: 2 })"
        aria-label="Heading"
      >
        H2
      </RichTextToolbarButton>
      <RichTextToolbarButton :command="commands.toggleWrap('bulletList')" aria-label="Bullet list">
        List
      </RichTextToolbarButton>
      <RichTextToolbarButton :command="commands.undo" aria-label="Undo">Undo</RichTextToolbarButton>
    </RichTextToolbar>
    <RichTextContent aria-label="Release notes" placeholder="Write something…" />
    <RichTextBubbleMenu>
      <RichTextToolbarButton :command="commands.toggleMark('italic')" aria-label="Italic">
        I
      </RichTextToolbarButton>
    </RichTextBubbleMenu>
  </RichTextRoot>
  <output>{{ html }}</output>
</template>

API

RichTextRoot<Schema extends RichTextSchema>

Source: src/families/editor/rich-text/rich-text-root.vue

Props

Events

Slots

Exposed

RichText<Schema extends RichTextSchema>

Source: src/families/editor/rich-text/rich-text-root.vue

Props

Events

Slots

RichTextBubbleMenu

Source: src/families/editor/rich-text/rich-text-bubble-menu.vue

Props

Slots

Exposed

RichTextContent

Source: src/families/editor/rich-text/rich-text-content.vue

Props

Exposed

RichTextToolbar

Source: src/families/editor/rich-text/rich-text-toolbar.vue

Props

Slots

Exposed

RichTextToolbarButton

Source: src/families/editor/rich-text/rich-text-toolbar-button.vue

Props

Slots

Behavior

@vizejs/ui/rich-text is a headless, contenteditable rich-text editor. The model (schema, documents, transforms, transactions, history, commands, input rules, keymap, HTML) is pure TypeScript; the parts rich-text-root.vue, rich-text-content.vue, rich-text-toolbar.vue, rich-text-toolbar-button.vue, and rich-text-bubble-menu.vue bind it to the DOM. Every row is proven by the named test in rich-text.test.ts, rich-text-model.test.ts, rich-text-html.test.ts, or rich-text-ssr.test.ts; typing guarantees live in rich-text.types.test-d.ts.

Notes

• The browser never mutates the document: beforeinput is prevented and translated into commands. Composition is the exception; the IME's text is committed at compositionend and the DOM is re-rendered from the model.
• Content renders through v-html of richTextToHtml(…, { editor: true }), which escapes text, drops event attributes, and passes every attribute through the schema's render specs (links and images are URL-checked).
• Collaboration, tables, and drag-and-drop of content are out of scope for v1.