Design System Management with reusable components

In this demo, I’ll show you how Squiz Component Service enables developers to deploy components once and reuse them across multiple sites.

The challenge

Here, we’re looking at a list of components that developers have already built—such as an alert bar and a video module.

Before we begin, let’s look at a page where content editors are currently facing a challenge. They’re using large images, but these don’t fit well within the site’s design. We want to improve how these images are displayed.

To solve this, we’ll create a new parallax image component that allows large images to scroll smoothly within the page.

Building and deploying a component

In the local development environment, we can see the component being built.

One file defines the content structure that editors will use, including fields like the heading, description, and image. The component itself includes the scrolling effect, allowing large images to be presented in a more visually appealing way.

There’s also a manifest file that defines key details such as the component’s unique ID, name, versioning, and how it should be executed—including any required JavaScript.

Once the component is ready, it can be deployed directly to the Squiz DXP Component Service.

After deployment, the new component appears in the component library, making it available for use across the platform.

Managing components with component sets

Web managers can browse available components in the DXP console and decide which ones to use on their sites.

To make a component available, it must be added to a component set. You can think of component sets as design systems for your organization, helping maintain consistency across different websites.

In this case, we add the new parallax image component to a component set so it can be used on the site.

Using components in the page builder

Now, we move into the content management interface.

In the page builder, we remove the old image component and replace it with the new parallax component from the component set.

Content editors can then configure the component by adding their own content—such as the title, text, and image—without needing to worry about design or functionality.

Once saved, the updated page shows the improved experience, with large images displayed in a more engaging and space-efficient way.

Reusing components across sites

The real advantage of Component Service is reuse.

The same component can be added to multiple component sets, each aligned to different design systems across your organization.

For example, we can add this component to another site with a completely different design system. Web managers can also choose which version of a component to use, ensuring full control over what appears on each site.

When we add the component to a second site and update the content, the same improved experience is delivered—without rebuilding the component.

Summary

With Squiz Component Service, developers can build components once and reuse them everywhere.

This reduces development effort, speeds up content delivery, and ensures consistency across all your digital properties—while giving web managers control and content editors the flexibility to create.

If you’d like to learn more about the developer experience with Component Service, get in touch with our team.