At Cyridium, we build a headless, multi-tenant CMS that powers elegant, performant websites with effortless content control. A key part of that foundation is our heavy investment in Lit for web components. Lit has delivered the perfect balance of simplicity, speed, and future-proof architecture as we've tackled the complexities of a modern CMS—especially with server-side rendering (SSR).

Here's the tale of why we chose Lit, the highlights we've experienced, the SSR challenges we navigated, and why it stands out against heavier frameworks.

Why Web Components? And Why Lit Makes Them Shine

Web Components are the browser's native way to create reusable, encapsulated UI elements (Custom Elements + Shadow DOM + Templates). They work anywhere HTML lives—inside React, Vue, Angular, plain vanilla JS, or even a CMS backend output.

Raw Web Components can feel verbose. Lit changes that. It's a lightweight (~5KB minified/gzipped) library on top of the standards that adds:

• Reactive properties — Declare state simply; Lit handles updates efficiently.

• Declarative templates with html tagged template literals — Familiar, expressive, no JSX or custom syntax.

• Scoped styles via Shadow DOM by default.

• Boilerplate reduction with decorators (in TypeScript) or static properties.

Highlights we've loved:

• Blazing performance: Lit only updates changed DOM parts—no full virtual DOM diff/re-render cycle like many frameworks. Ideal for a CMS with dynamic content blocks, editors, and live previews.

• Tiny footprint and fast loading — Crucial for PWAs and global CDN delivery in our multi-tenant setup.

• True interoperability — Our components work seamlessly across the platform, design systems, and even customer custom extensions.

• Scoped everything — Shadow DOM eliminates CSS conflicts in complex, user-editable page layouts. Styles stay encapsulated.

• Future-proof & standards-based — We're building on the web platform itself, not fighting framework churn.

The CMS SSR Challenge: Content First, Interactivity Second

Building a headless CMS with strong SSR needs is tricky. Users expect instant, SEO-friendly pages with rich, interactive elements (visual editors, real-time previews, forms, dashboards). Pure client-side rendering hurts initial load, SEO, and perceived performance. Full SSR frameworks add complexity, bundle bloat, and hydration issues.

Key challenges we faced:

• Rendering dynamic, component-based page layouts on the server for fast delivery and good Core Web Vitals.

• Hydrating interactivity on the client without mismatches or heavy JavaScript payloads.

• Supporting multi-tenant isolation, custom domains, PWA installability, and edge delivery while keeping components consistent.

• Handling slots, shadow DOM, and async data in a way that's compatible with server environments (no window globals during render).

Lit SSR (via @lit-labs/ssr) helps here by rendering components to static HTML (with Declarative Shadow DOM where supported). This gives us meaningful HTML on first paint, then progressive enhancement on the client. Limitations exist—async work and some shadow DOM scenarios need careful handling—but the team is actively improving it, and the overall model fits our needs perfectly.

We can output component-based pages from the backend, serve optimized content globally, and let Lit hydrate rich interactions (like drag-and-drop block editing) without rewriting everything for the server.

Why Lit Over React, Vue, Svelte, or Vanilla?

• Vs. React/Vue: Heavier bundles, framework-specific lock-in, and larger VDOM overhead. Web Components with Lit integrate into those ecosystems when needed but don't require them. No wrapper hell for our design system.

• Vs. Svelte: Svelte is fantastic and compile-time magical, but Lit stays closer to standards, requires no build step for basic use, and produces native components that travel better across stacks.

• Vs. rolling our own: Web Components are powerful but tedious without Lit's reactivity and templating sugar. Lit gives us joy and velocity without complexity.

• Bundle size & performance wins: Sub-5KB vs. tens of KB (or more) for framework runtimes. Critical for our performance-focused, PWA-first CMS.

Lit strikes the ideal balance: enough structure for rapid, maintainable development, but minimal enough to feel like an enhancement to the web rather than a replacement.

Building for the Long Term with Cyridium

Lit powers our reusable UI blocks, visual editor components, and interactive elements while keeping the platform lightweight, interoperable, and standards-aligned. It lets us focus on what matters: giving businesses pixel-perfect control, multi-tenant scalability, global performance, and true content freedom—without engineering bottlenecks.

Whether you're a developer integrating our components or a business user building sites block-by-block, the underlying tech stays invisible and reliable.

If you're exploring modern web architectures for your CMS, design system, or product, give Lit a spin. The combination of native web power and delightful DX has been transformative for us at Cyridium.

Explore Cyridium's headless CMS features and book a demo at cyridium.co.uk.