umbraco-context-api

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

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-context-api-kraftvaerk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-context-api
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-context-api
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-context-api-kraftvaerk

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, enabling seamless data and functionality sharing between components in the Umbraco backoffice.

Core Features & Use Cases

  • Context Consumption: Learn how to access shared data and services (like notifications or user info) from parent components.
  • Context Provision: Understand how to make your own data and services available to descendant components.
  • Use Case: Integrate a custom notification system into your Umbraco extension by providing a custom context and consuming it in various backoffice views.

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 do I share data between components in an Umbraco backoffice extension?

To share data between Umbraco backoffice components, you use the Umbraco Context API to define context tokens, provide data via provideContext, and consume it in descendants using consumeContext or getContext, ensuring decoupled communication.

What is the difference between consumeContext and getContext in Umbraco?

The difference between consumeContext and getContext in Umbraco is that consumeContext establishes a subscription for reactive updates, while getContext retrieves the context instance for one-time access without ongoing subscription tracking.

How do I provide a custom context to descendant components in Umbraco?

To provide a custom context in Umbraco, you define a context token and call provideContext within a parent component, making your custom data and services available to all descendant components in the backoffice extension.

Can I use TypeScript to implement the Umbraco Context API for a notification system?

Yes, you can use TypeScript to implement the Umbraco Context API for a notification system by providing a custom notification context and consuming it across various backoffice views to handle inter-component communication.

When should I use the Context API instead of direct component references in Umbraco?

You should use the Context API instead of direct component references in Umbraco when building decoupled and maintainable extensions, as it prevents tight coupling and allows seamless data sharing without explicit parent-to-child prop passing.