umbraco-tiptap-statusbar-extension

Create custom status bar extensions for the Umbraco Rich Text Editor using Tiptap.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables developers to add custom, informative status bar elements to the Umbraco Rich Text Editor (Tiptap), providing users with real-time feedback and context.

Core Features & Use Cases

  • Custom Status Information: Display element paths, word counts, character counts, cursor positions, or any other relevant editor state.
  • Integration with Umbraco RTE: Leverages Umbraco's extension system and Tiptap's capabilities for seamless integration.
  • Use Case: Add a word count and character count to the status bar of a rich text field, helping content editors manage text length and complexity.

Quick Start

Implement a Tiptap statusbar extension in Umbraco to display the current word count.

Frequently Asked Questions about umbraco-tiptap-statusbar-extension

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

FAQPage Schema
How do I add a word count to the Umbraco rich text editor status bar?

Adding a word count to the Umbraco rich text editor status bar requires creating a custom Tiptap extension that tracks text statistics and renders them dynamically within the editor interface for real-time content feedback.

Can I display element breadcrumbs in the Umbraco Tiptap editor?

Yes, you can display element breadcrumbs in the Umbraco Tiptap editor by creating a custom status bar extension that reads the Tiptap editor context and outputs the current element path dynamically as the cursor moves.

How does a Tiptap status bar extension update information in real time?

A Tiptap status bar extension updates information in real time by leveraging the Tiptap editor context to listen for state changes and re-rendering dynamic information like element breadcrumbs or cursor location as the editor state updates.

Do I need to configure the Umbraco extension manifest to build a custom rich text editor status bar?

Yes, building a custom rich text editor status bar requires configuring the Umbraco extension manifest structure to register the custom component and ensure proper integration with the Tiptap editor environment for real-time updates.

What kind of dynamic information can I show in an Umbraco RTE status bar?

Within an Umbraco RTE status bar, you can display dynamic information such as element breadcrumbs, word counts, character counts, and cursor positions by leveraging the Tiptap editor context to retrieve and render current editor state.

What is the best way to provide real-time feedback for content editors in Umbraco?

The best way to provide real-time feedback for content editors in Umbraco is adding custom Tiptap status bar extensions to the rich text editor, displaying dynamic information like text statistics and cursor location to help manage content complexity.