skills.rest
umbraco
umbracoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

umbraco-tiptap-extension

Generate custom Tiptap node and mark extensions for Umbraco's rich text editor.

26|13|Updated Nov 30, 2025
Search Tags:#customization#extension#editor#rich text editor#tiptap#umbraco
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-tiptap-extension
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-tiptap-extension
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-tiptap-extension
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-tiptap-extension

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation and implementation of custom extensions for Umbraco's Rich Text Editor, enhancing its functionality beyond standard text formatting.

Core Features & Use Cases

  • Custom Node Types: Add new block-level elements to the editor.
  • Custom Mark Types: Implement custom text formatting (e.g., highlighting, custom styles).
  • Integration with Tiptap API: Leverage the underlying Tiptap framework for advanced editor features.
  • Use Case: Develop a custom 'callout' block for important notes or a 'highlight' mark for specific terms within the rich text content.

Quick Start

Generate a Tiptap extension manifest and API class for a custom highlight feature.

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 a custom node type in the Umbraco rich text editor?▼

Yes, you can implement custom mark types for text formatting in Umbraco by generating Tiptap extensions. This allows you to apply custom styles, such as specific term highlighting, directly within the rich text content interface.

What is the best way to add a callout block to Umbraco's Tiptap editor?▼

The best way to add a callout block is by using a Tiptap extension to define a custom node type. This approach integrates directly with Umbraco's rich text editor framework to render block-level elements for important notes.

Do I need to understand the Tiptap API to customize the Umbraco rich text editor?▼

Yes, understanding the Tiptap API is required to customize the Umbraco rich text editor. You need knowledge of Umbraco extension types and Tiptap's extension API to successfully generate and implement custom node and mark types.

Does the Umbraco rich text editor support extending functionality beyond standard text formatting?▼

Yes, the Umbraco rich text editor supports extending functionality beyond standard text formatting. You can leverage the Tiptap API framework to build custom extensions that add new block-level elements and custom text styles.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-tiptap-extension

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

Official
Intermediate
albanistalbanist
4

umbraco-tiptap-extension

Implement custom Tiptap extensions for the Umbraco rich text editor.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-block-editor-custom-view

Implements custom web component views for Umbraco block editor content types.

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-property-editor-ui

Implement custom Umbraco property editor UIs with TypeScript and LitElement.

Official
Intermediate