Gjensidige – Design System in Enonic XP with SSR

Enonic Developer Meetup @ Oslo, Norway 12/6/2023

React
Design System
Enonic XP
SSR
Accessibility

Co-presented with Thorstein Thorrud (architect and developer), this talk covers the full journey of building and evolving Builders Core — Gjensidige’s comprehensive React-based design system — and integrating it with Enonic XP using server-side rendering.

The Journey

The design system started as a simple CSS file passed around between teams. It evolved into a React-based library embedded inside Enonic XP, and today it’s called Builders Core — a full component library used by approximately 150 developers across Gjensidige.

The Builders Platform is a set of microservices that create and host editorial pages for Gjensidige’s domains. It’s a monorepo hosted on GitHub and delivered to their cloud platform GAP, comprising:

Enonic XP as the web server and CMS
Server-side rendered React components
Server-side image compression
Varnish cache
Azure-hosted Kubernetes infrastructure

The 2022 Corporate Identity Migration

In early 2022, Gjensidige underwent a major redesign. The challenge: support a completely new corporate identity while maintaining existing solutions without taking anything offline.

The solution was using feature toggles in the Views API and Content Studio — allowing editors to build new pages using the new design system while existing pages continued to work normally. This enabled a smooth rollout across all Enonic pages.

Results

150 developers (called “builders”) use the design system daily
Powers 2,000+ pages and handles 100+ million user interactions per year
Covers 3 countries and 5 website domains
Accessibility score: 94.3 (industry average is considerably lower)
Carbon rating: B
Google Lighthouse scores: 90+ across all metrics