MeldUI

Getting Started

Install @meldui/editor, wire up its peer dependencies and styles, and render your first editor.

Install

pnpm add @meldui/editor @meldui/vue @meldui/tabler-vue @meldui/charts-vue vue

@meldui/vue, @meldui/tabler-vue, @meldui/charts-vue, and vue are peer dependencies. The TipTap engine (@tiptap/*) and tippy.js ship as bundled dependencies and install automatically.

The chart block renders via @meldui/charts-vue, so it is a required peer even if you do not insert charts. To drop the dependency entirely, disable the chart extension — see Extensions.

Import styles

Import the MeldUI theme and the editor’s component styles once, at your app’s entry point:

// main.ts
import '@meldui/vue/themes/default'
import '@meldui/editor/styles'

@meldui/editor/styles carries the editor’s scoped component CSS (the .tiptap content styles, menus, and node views). The theme tokens come from @meldui/vue — the editor inherits your design system’s colors and radius.

Because the editor’s layout uses Tailwind utility classes, add it to your Tailwind v4 content sources so those utilities are generated (alongside the MeldUI theme you already import):

/* app.css */
@import 'tailwindcss';
@import '@meldui/vue/themes/default';

@source "../node_modules/@meldui/editor/dist/**/*.mjs";

Your first editor

MeldEditor has no content / v-model prop. Listen for the created event and seed the document through the TipTap Editor instance:

<script setup lang="ts">
import { MeldEditor } from '@meldui/editor'
import type { Editor } from '@tiptap/core'

function onCreated(editor: Editor) {
  editor.commands.setContent({
    type: 'doc',
    content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Start writing…' }] }],
  })
}
</script>

<template>
  <MeldEditor @created="onCreated" @update:json="(json) => console.log(json)" />
</template>

Reading and saving content

The editor emits update:json with the document JSON on every change. Persist that JSON and pass it back through setContent on created to restore a document:

<script setup lang="ts">
import { MeldEditor } from '@meldui/editor'
import type { Editor } from '@tiptap/core'

const saved = JSON.parse(localStorage.getItem('doc') ?? 'null')

function onCreated(editor: Editor) {
  if (saved) editor.commands.setContent(saved)
}

function onUpdate(json: Record<string, unknown>) {
  localStorage.setItem('doc', JSON.stringify(json))
}
</script>

<template>
  <MeldEditor @created="onCreated" @update:json="onUpdate" />
</template>

You can also grab HTML or text from the exposed editor instance (editor.getHTML(), editor.getText()) — see the API page.

Next steps

  • Features — slash menu, bubble menu, toolbar, tables, images, mentions.
  • Extensions — customize the default set and register your own blocks.
OverviewFeatures