umbraco-context-api

Explain and demonstrate the Umbraco Context API for backoffice inter-component communication.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill helps developers understand and implement Umbraco's Context API, a crucial system for enabling extensions to share data and functionality within the Umbraco backoffice.

Core Features & Use Cases

  • Context Consumption: Learn how to access and subscribe to existing contexts (e.g., notifications, user data).
  • Context Provision: Understand how to provide custom contexts to descendant components.
  • Use Case: A developer needs to display a notification when a specific action occurs in their custom backoffice extension. This Skill guides them on how to consume the UMB_NOTIFICATION_CONTEXT to achieve this.

Quick Start

Use the umbraco-context-api skill to generate a TypeScript example for consuming the UMB_NOTIFICATION_CONTEXT.

Frequently Asked Questions about umbraco-context-api

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

FAQPage Schema
How does the Umbraco Context API work for backoffice component communication?

The Umbraco Context API facilitates inter-component communication within the backoffice through context token definitions and provider-consumer patterns. It enables extensions to share data and functionality while remaining decoupled and maintainable.

How do I consume the UMB_NOTIFICATION_CONTEXT in a TypeScript Umbraco extension?

To consume the UMB_NOTIFICATION_CONTEXT in a TypeScript extension, you access the context to subscribe or retrieve data. This allows your custom extension to display notifications when specific actions occur within the Umbraco backoffice.

When should I use subscription versus one-time access for Umbraco context?

Use subscription for ongoing context access when you need your component to react to future data changes, and choose one-time access when you only need the context's current value once without tracking subsequent updates in the Umbraco backoffice.

Can I provide custom contexts to descendant components in Umbraco?

Yes, you can provide custom contexts to descendant components using the Umbraco Context API provision pattern. This approach allows you to share custom data and functionality down the component tree without direct prop drilling.

Do I need TypeScript to build decoupled Umbraco backoffice extensions with the Context API?

TypeScript is the primary language used for demonstrating and implementing the Umbraco Context API. It provides the type safety needed to correctly define context tokens and enforce provider-consumer contracts in backoffice extensions.

Why are my Umbraco extensions tightly coupled and how can the Context API help?

Extensions become tightly coupled when components directly reference each other. The Umbraco Context API solves this by using context tokens for communication, allowing you to build decoupled, maintainable extensions that share data indirectly.