umbraco avatar

Umbraco Tiptap Statusbar Extension

Adds informational components to the status bar at the bottom of Umbraco's Tiptap rich text editor. You get three solid examples: a word and character counter that updates on editor changes, an element path breadcrumb showing the node hierarchy at cursor position, and a line/column position indicator. All three consume the UMB_TIPTAP_RTE_CONTEXT to subscribe to editor events like update and selectionUpdate. The skill fetches current Umbraco docs before generating anything, which matters since the extension registry types change between versions. Statusbar extensions are read only displays, so if you need interactive controls that modify content, you want the toolbar extension skill instead.

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

Install

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

Installs into .claude/skills of the current project.

Files

Umbraco Tiptap Statusbar Extension

What is it?

A Tiptap Statusbar Extension adds components to the status bar at the bottom of the Rich Text Editor. Common uses include showing element path (breadcrumb navigation), word count, character count, or other editor state information. Unlike toolbar extensions, statusbar extensions are purely visual/informational elements.

Documentation

Always fetch the latest docs before implementing:

Related Skills

  • Tiptap Extension: For adding editor functionality

    • Reference skill: umbraco-tiptap-extension
  • Umbraco Element: For implementing the statusbar element

    • Reference skill: umbraco-umbraco-element

Sponsors

Details

Repository
github.com/umbraco/umbraco-cms-backoffice-skills
Categories
Documentation, .NET & C#
First seen
Jun 3, 2026

More from umbraco/umbraco-cms-backoffice-skills

All 76
1umbraco avatarumbraco-tiptap-toolbar-extensionumbraco/umbraco-cms-backoffice-skillsImplement Tiptap toolbar extensions for Umbraco rich text editor using official docs382skills.sh installs
2davila7 avatarpydicomdavila7/claude-code-templatesPython library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging381skills.sh installs
3umbraco avatarumbraco-ufm-componentumbraco/umbraco-cms-backoffice-skillsImplement UFM (Umbraco Flavored Markdown) components in Umbraco backoffice using official docs381skills.sh installs
4bobmatnyc avatarnextjs-v16bobmatnyc/claude-mpm-skillsNext.js 16 migration guide (async request APIs, "use cache", Turbopack)380skills.sh installs
5evoscientist avatarexperiment-craftevoscientist/evoskillsUse this skill when the user wants to debug, diagnose, or systematically iterate on an experiment that already exists, or when they need a structured experiment380skills.sh installs
6pproenca avatarrails-hotwirepproenca/dot-skillsRuby on Rails Hotwire best practices for building interactive applications with Turbo Drive, Turbo Frames, Turbo Streams, Turbo 8 morphing, and Stimulus control380skills.sh installs