Umbraco Tiptap Extension

This one helps you build custom Tiptap extensions for Umbraco's rich text editor. You'd reach for it when you need functionality beyond the default editor, whether that's custom formatting marks, new block types like callouts, or specialized nodes. The skill pulls fresh docs from both Umbraco and Tiptap before generating code, which matters since the extension API structure is specific. It covers the full pattern: manifest registration, the API class that extends UmbTiptapExtensionApiBase, and how to wire in configuration from the property editor. Good for when toolbar buttons alone won't cut it and you need to extend the editor's underlying capabilities.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Umbraco Tiptap Extension

What is it?

A Tiptap Extension adds functionality to Umbraco's Rich Text Editor (which is built on Tiptap). Extensions can add new node types (like custom blocks), marks (like custom formatting), or other editor capabilities. The extension API provides the underlying Tiptap extensions that get registered with the editor.

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 Toolbar Extension: For adding toolbar buttons
- Reference skill: umbraco-tiptap-toolbar-extension
Tiptap Statusbar Extension: For adding statusbar elements
- Reference skill: umbraco-tiptap-statusbar-extension