Umbraco Tiptap Toolbar Extension

This handles the creation of toolbar buttons and menus for Umbraco's Tiptap rich text editor. You get four kinds: simple buttons for toggling formatting, color pickers, dropdown menus for things like heading levels, and style menus for applying CSS classes. The skill fetches current Umbraco docs before generating anything, which matters since the extension system changes. Most implementations are just a manifest linking to a tiptap extension and an API class with an execute method, though you can override isActive and isDisabled for custom states. Useful when you need custom formatting controls beyond the defaults, or when you want a toolbar button that opens a modal for more complex operations like link insertion.

skills.sh installs: 382
GitHub stars: 27
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-tiptap-toolbar-extension --agent claude-code

Installs into .claude/skills of the current project.

Files

Umbraco Tiptap Toolbar Extension

What is it?

A Tiptap Toolbar Extension adds buttons or controls to the Rich Text Editor's toolbar. It provides an execute method that runs when clicked, and can indicate active/disabled states. Several "kinds" are available: button (simple toggle), colorPickerButton (color selection), menu (dropdown menu), and styleMenu (style selection dropdown).

Documentation

Always fetch the latest docs before implementing:

Extension Types: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types
Rich Text Editor: https://docs.umbraco.com/umbraco-cms/model-your-content/property-editors/built-in-umbraco-property-editors/rich-text-editor
Tiptap Docs: https://tiptap.dev/docs/editor/extensions/overview
Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation

Related Skills

Tiptap Extension: For adding editor functionality
- Reference skill: umbraco-tiptap-extension
Modals: When toolbar buttons open modal dialogs
- Reference skill: umbraco-modals