umbraco-tiptap-toolbar-extension

Implement custom Tiptap toolbar extensions for the Umbraco rich text editor.

4|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-tiptap-toolbar-extension-albanist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-tiptap-toolbar-extension
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/rich-text/umbraco-tiptap-toolbar-extension
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-tiptap-toolbar-extension-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the process of adding custom buttons and controls to the Umbraco Rich Text Editor's toolbar, allowing for enhanced content creation workflows.

Core Features & Use Cases

  • Custom Toolbar Buttons: Implement various types of toolbar extensions like simple buttons, color pickers, and dropdown menus.
  • Integration with Tiptap: Seamlessly integrates with Umbraco's Tiptap-based rich text editor.
  • Use Case: Add a custom "Insert Callout Box" button to the toolbar that, when clicked, inserts a pre-defined styled box into the content, improving content structure and visual appeal.

Quick Start

Use the umbraco-tiptap-toolbar-extension skill to create a new button manifest for adding bold text functionality.

Frequently Asked Questions about umbraco-tiptap-toolbar-extension

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add custom buttons to the Umbraco rich text editor toolbar?

To add custom toolbar buttons in Umbraco, implement Tiptap toolbar extensions using official documentation and provided examples. This Skill supports various extension kinds including simple buttons, color pickers, and dropdown menus for enhanced editor functionality.

Can I add a color picker or dropdown menu to the Umbraco Tiptap editor?

Yes, you can add a color picker or dropdown menu to the Umbraco Tiptap editor. This Skill supports implementing various extension kinds including color pickers and menus, allowing for highly customized content creation workflows within the rich text editor.

What do I need to know to create a Tiptap toolbar extension for Umbraco?

Creating a Tiptap toolbar extension for Umbraco requires an understanding of Umbraco extension types and Tiptap editor APIs. You will also need to reference official documentation and provided examples to correctly implement your custom toolbar controls.

What is the best way to insert a styled callout box into Umbraco content?

The best way to insert a styled callout box is to implement a custom Tiptap toolbar extension. By adding a dedicated button to the Umbraco rich text editor toolbar, you can insert pre-defined styled boxes into your content with a single click.

Does this toolbar extension approach work with the standard Umbraco rich text editor?

Yes, this approach works directly with the standard Umbraco rich text editor. The Skill is specifically designed to seamlessly integrate with Umbraco's Tiptap-based editor, allowing you to enhance the existing content creation interface without replacing it.

Why are my custom Tiptap toolbar controls not showing up in Umbraco?

If custom Tiptap toolbar controls are not showing up in Umbraco, it likely indicates an issue with the button manifest or extension configuration. Ensure your custom toolbar extensions correctly follow official Umbraco extension types and Tiptap editor API requirements.