umbraco-tiptap-extension

Implement Tiptap extensions for custom nodes and marks in Umbraco's rich text editor.

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-tiptap-extension-kraftvaerk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-tiptap-extension
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-tiptap-extension
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-tiptap-extension-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables developers to add custom functionality and styling to Umbraco's rich text editor by implementing Tiptap extensions, making content creation more powerful and flexible.

Core Features & Use Cases

  • Custom Node Types: Create unique content blocks within the rich text editor.
  • Custom Mark Types: Apply custom formatting like highlighting or specific styles to text.
  • Integration with Umbraco Docs: Leverages official documentation for robust implementation.
  • Use Case: Add a custom "callout" block to highlight important information within articles, or implement a "highlight" mark to draw attention to specific phrases.

Quick Start

Use the umbraco-tiptap-extension skill to create a new custom node extension for a 'quote' block.

Frequently Asked Questions about umbraco-tiptap-extension

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

FAQPage Schema
How do I create custom node and mark types in the Umbraco rich text editor?

To create custom node and mark types in the Umbraco rich text editor, implement Tiptap extensions. This allows you to define unique content blocks like callouts and apply custom text formatting such as specific highlights.

What is needed to build Tiptap extensions for Umbraco?

Building Tiptap extensions for Umbraco requires an understanding of the Tiptap extension API and the Umbraco extension registry. You must integrate these custom extensions directly within Umbraco's frontend architecture.

Can I use official documentation to guide Umbraco rich text editor customization?

Yes, you can use official documentation to guide Umbraco rich text editor customization. The implementation process specifically leverages official Umbraco and Tiptap documentation to ensure robust and accurate extension development.

How do I add a custom callout block to Umbraco articles?

To add a custom callout block to Umbraco articles, you implement a custom Tiptap node extension. This extends the rich text editor capabilities, allowing you to define and render unique content blocks for highlighting important information.

How do I apply custom highlighting to text in Umbraco's editor?

To apply custom highlighting to text in Umbraco's editor, you implement a custom Tiptap mark extension. Marks allow you to apply specific styling and formatting rules to selected text phrases directly within the rich text editor.