skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-tiptap-extension

Implement custom Tiptap extensions for Umbraco Rich Text Editor via manifests and UmbTiptapExtensionApiBase classes.

4|Updated Mar 6, 2026
Search Tags:#typescript#extension#rich text editor#tiptap#umbraco#backoffice customization#editor styling
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-tiptap-extension-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-tiptap-extension
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/rich-text/umbraco-tiptap-extension
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-tiptap-extension-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you implement custom rich text editor behavior in Umbraco by creating Tiptap extensions that integrate correctly with the Umbraco backoffice editor.

Core Features & Use Cases

  • Docs-driven extension implementation: Guides you to use official Umbraco and Tiptap documentation to implement the correct extension type and API structure.
  • Custom nodes, marks, and configurable extensions: Supports creating new node types or marks (and making behavior configurable via data type settings).
  • Optional editor styling and integration: Shows how to add editor CSS using Umbraco’s styling utilities so the custom content renders clearly.
  • Testable workflow: Provides an end-to-end workflow from fetching docs to generating manifest + API classes you can register and verify.

Quick Start

Create an Umbraco Tiptap extension for a custom highlight mark that reads configuration values (like color) and registers it via a manifests.ts file.

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 Tiptap extension for the Umbraco rich text editor?▼

To create a custom Tiptap extension for the Umbraco rich text editor, you implement an UmbTiptapExtensionApiBase class that returns configured extensions and register it through manifests.ts using Umbraco's extension APIs.

How do I add custom nodes and marks to the Umbraco backoffice rich text editor?▼

You add custom nodes and marks to the Umbraco backoffice rich text editor by building Tiptap extensions that define the new element types and registering them via the UmbTiptap extension manifest type metadata.

Can I make Umbraco Tiptap editor extensions configurable via data type settings?▼

Yes, you can make Umbraco Tiptap editor extensions configurable by retrieving configuration values within your UmbTiptapExtensionApiBase class, allowing behavior to be dynamically driven by data type settings.

How do I apply custom editor styling to Tiptap content in the Umbraco backoffice?▼

To apply custom editor styling to Tiptap content in the Umbraco backoffice, you include optional CSS within your Tiptap extension implementation using Umbraco's built-in styling utilities for clear content rendering.

What is the workflow for testing and verifying a custom Umbraco Tiptap extension?▼

The workflow for testing a custom Umbraco Tiptap extension involves fetching official documentation, generating the required manifest and API classes, registering them in the backoffice, and verifying the new toolbar behavior or nodes.

Do I need TypeScript to build backoffice customizations for the Umbraco rich text editor?▼

Yes, you need TypeScript to build backoffice customizations for the Umbraco rich text editor, as Tiptap extensions and the UmbTiptapExtensionApiBase class are implemented using TypeScript and registered via manifests.

Related Skills

Explore More Software Engineering Skills→
umbracoumbraco
5.2k

general-create-extension-type

Create and register new backoffice extension types for Umbraco CMS.

Official
Basic
1k-off1k-off
1

umbraco-tiptap-extension

Creates and registers Tiptap extensions for Umbraco's Rich Text Editor.

Community
Intermediate
umbracoumbraco
26

umbraco-tiptap-extension

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

Official
Intermediate
albanistalbanist
4

umbraco-tiptap-toolbar-extension

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

Community
Intermediate