umbraco-collection-view

Implement custom Umbraco backoffice collection views with TypeScript and LitElement.

4|Updated Mar 6, 2026

Search Tags:#typescript #customization #frontend development #umbraco #backoffice #collection view

Ready to run

npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-collection-view-albanist

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: umbraco-collection-view
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/extensions/umbraco-collection-view
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-collection-view-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of custom visual representations for data collections within the Umbraco backoffice, moving beyond default table or list views.

Core Features & Use Cases

Customizable Views: Design unique layouts like grids, cards, or specialized tables for displaying collection items.
Dynamic Data Presentation: Integrate with Umbraco's context API to display item data effectively.
Use Case: Implement a card-based view for media items, showing thumbnails and basic details, or a detailed table view for content items with custom sortable columns.

Quick Start

Use the umbraco-collection-view skill to create a new card-based view for the 'Umb.Collection.Media' collection.

Frequently Asked Questions about umbraco-collection-view

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

FAQPage Schema

How do I create a custom collection view in the Umbraco backoffice?▼

A custom collection view in Umbraco uses TypeScript and LitElement to define manifest files and view elements, enabling dynamic data presentation for unique layouts like grids or specialized tables.

What is needed to customize Umbraco collection displays beyond default tables?▼

Customizing Umbraco collection displays requires understanding Umbraco extension types and the collection context API to integrate dynamic data presentation and design unique visual representations like card-based layouts.

Can I build a card-based layout for Umbraco media items?▼

Yes, you can build a card-based layout for Umbraco media items by implementing a custom collection view that integrates with the context API to display thumbnails and basic details dynamically.

Does customizing Umbraco backoffice collections require LitElement?▼

Yes, creating custom collection views for the Umbraco backoffice requires LitElement and TypeScript to implement the view elements that render dynamic data presentations.

How do I display dynamic data in an Umbraco custom collection view?▼

To display dynamic data in an Umbraco custom collection view, integrate with the Umbraco collection context API within your TypeScript and LitElement view elements to fetch and present item data effectively.