Custom Toolbar

Showing Specific Items

Use the items prop to display only the toolbar buttons you need. Pass an array of item names:

<template>
  <Tiptapify
    :items="['bold', 'italic', 'underline', '|', 'heading', 'bulletList', 'orderedList', '|', 'link', 'image', '|', 'undo', 'redo']"
    placeholder="Custom toolbar..."
  />
</template>

Use | as a separator between button groups.

Excluding Items

Use items-exclude alongside items to show most toolbar items but exclude specific ones:

<template>
  <Tiptapify
    :items="['bold', 'italic', 'underline', 'strike']"
    :items-exclude="true"
    placeholder="Excluding unwanted items..."
  />
</template>

Custom Sections

Group items into your own named sections using an object:

<script setup lang="ts">
const customItems = {
  formatting: ['bold', 'italic', 'underline', 'strike'],
  headings: ['heading'],
  lists: ['bulletList', 'orderedList', 'taskList'],
  media: ['link', 'image', 'video'],
}
</script>

<template>
  <Tiptapify
    :items="customItems"
    placeholder="Custom sections toolbar..."
  />
</template>

Toolbar Sections Reference

Toolbar items are organized into sections. Here are all available sections:

Section	Items
actions	undo, redo
format	bold, italic, underline, strike
formatExtra	sup, sub, code, codeBlock, blockquote
style	heading, fontFamily, fontSize, lineHeight, textColor, highlightColor
alignment	left, center, right, justify
list	bulletList, orderedList, taskList, indent, outdent
media	link, image, video, iframe, emoji, charmap, table
misc	line, pagebreak, source, preview, fullscreen, formatClear, invisibleChar

Hiding the Toolbar

<template>
  <Tiptapify
    :toolbar="false"
    placeholder="No toolbar — use the bubble menu instead..."
  />
</template>

Custom Toolbar Components

Add your own buttons with the customExtensions prop. Each entry is a toolbar section — use a built-in section name (misc, media, …) to merge your buttons into an existing group, or a new name for a separate group rendered after the built-in sections:

<script setup lang="ts">
import BlockquoteButton from './BlockquoteButton.vue'

const customExtensions = [{
  section: 'custom',
  group: true,
  components: [{ name: 'blockquoteBtn', component: BlockquoteButton }],
}]
</script>

<template>
  <Tiptapify :custom-extensions="customExtensions" />
</template>

Custom components are rendered inside <Tiptapify>, so they have access to the same shared values the built-in buttons use — editor, translations and the editor-level config:

<!-- BlockquoteButton.vue -->
<script setup lang="ts">
import { inject, type Ref } from 'vue'
import { TipTapEditor, useTiptapifyConfig } from 'tiptapify'

const editor = inject('tiptapifyEditor') as Ref<TipTapEditor>
const { variantBtn } = useTiptapifyConfig()
</script>

<template>
  <VBtn
    :color="editor.isActive('blockquote') ? 'primary' : ''"
    :variant="variantBtn"
    size="32"
    @click="editor.commands.toggleBlockquote()"
  >
    Quote
  </VBtn>
</template>

• useTiptapifyConfig() returns the editor-level config (variantBtn, variantField), so custom components automatically match the styling of the built-in toolbar.
• The variantBtn prop is still passed to every toolbar component for backward compatibility — components written before the shared config keep working unchanged.
• inject('tiptapifyI18n') gives the same translation function built-in buttons use.