Umbraco 17 LTS: The Future of CMS with Lit

Umbraco 17 LTS is a landmark release for the CMS community. Beyond being a Long-Term Support version, it introduces a major architectural shift in the Backoffice: the adoption of Lit, a modern, lightweight library for building Web Components. This change sets the stage for a faster, more modular, and future-proof developer experience.

Why Lit?

AngularJS has been the backbone of Umbraco’s Backoffice for years, but its end-of-life status made modernization inevitable. Lit was chosen because it:

• Aligns with web standards: Built on native Web Components.
• Delivers performance: Minimal overhead and optimized rendering.
• Simplifies development: Declarative templates and reactive properties make UI building intuitive

What Does This Mean for Developers?

With Lit, Umbraco Backoffice extensions are now:

• Framework-agnostic: You’re not locked into AngularJS or React. Lit works seamlessly with vanilla JS or other frameworks.
• Component-driven: Build custom property editors, dashboards, and UI elements as standalone web components.
• Future-proof: Web Components are a W3C standard, ensuring longevity and compatibility.

Key Benefits of Lit in Umbraco 17

Lightweight and Fast
Lit’s minimal footprint means less overhead and better performance for complex Backoffice operations.

Declarative Templates
Lit uses a simple, expressive syntax for rendering HTML, making UI development intuitive.

Reactive Properties
State management becomes easier with reactive properties that automatically update the DOM.

Performance Benchmarks

Early benchmarks comparing AngularJS-based Backoffice with Lit-powered components show impressive gains:

• Load Time Reduction: Up to 40% faster initial load for Backoffice dashboards.
• Memory Usage: Lit components consume 30–50% less memory than equivalent AngularJS components.
• Rendering Speed: UI updates are nearly 2x faster, thanks to Lit’s efficient diffing algorithm.
• Bundle Size: The Backoffice JavaScript bundle is significantly smaller, improving network performance.

These improvements translate into a smoother experience for editors and developers, especially in large installations with complex customizations.

Real-world Use Cases

Here’s how developers are already leveraging Lit in Umbraco 17:

• Custom Property Editors
  A team building a bespoke e-commerce solution created a Lit-based product selector that integrates seamlessly with Umbraco’s data layer.
• Dashboard Widgets
  Marketing teams are using Lit components to build dynamic dashboards that pull analytics data from external APIs without heavy dependencies.
• Third-party Integrations
  Developers integrating CRM systems have built Lit components for contact management, reducing complexity compared to AngularJS directives.
• Performance-sensitive Applications
  Agencies managing high-traffic sites report faster Backoffice operations and reduced server load due to optimized rendering.

How to Get Started

Creating a Lit component in Umbraco 17 is straightforward:

import { LitElement, html, css } from 'lit';

class MyCustomEditor extends LitElement {
  static styles = css`p { color: blue; }`;

  render() {
    return html`<p>Hello from Lit!</p>`;
  }
}

customElements.define('my-custom-editor', MyCustomEditor);

Register your component using the new extension manifest system, create a manifest file (e.g., manifest.js) in your App_Plugins folder:

export const manifests = [
  {
    type: 'propertyEditorUi',
    alias: 'My.CustomEditor',
    name: 'My Custom Editor',
    elementName: 'my-custom-editor',
    js: '/App_Plugins/MyCustomEditor/my-custom-editor.js',
    css: '/App_Plugins/MyCustomEditor/my-custom-editor.css'
  }
];

Then, register the manifest in your package.manifest:

{
  "javascript": [
    "/App_Plugins/MyCustomEditor/manifest.js"
  ]
}

This tells Umbraco to load your Lit component as a Property Editor UI in Backoffice. And you’re ready to go.

The Road Ahead

Umbraco’s adoption of Lit is more than a technical upgrade—it’s a commitment to a modern, flexible, and developer-friendly ecosystem. Expect more enhancements in future releases as the Backoffice continues to evolve.

Final Thoughts

If you’ve been waiting for a reason to upgrade, Umbraco 17 LTS is it. The combination of LTS stability and Lit-powered Backoffice makes this release a game-changer for developers and editors alike.

NashTech is a certified Umbraco gold partner offering flexible Umbraco web development services tailored to businesses of all sizes. Our comprehensive range of services includes:

• Umbraco web build
• Customized enterprise-level Umbraco solutions
• Umbraco migration and upgrades
• Umbraco maintenance and support
• Umbraco integration for e-commerce and more.

To receive more information about Umbraco services, please fill out the form provided at https://www.nashtechglobal.com/contact-us/.