In recent weeks, our product development team has been building a Svelte component library to provide frontend developers with reusable Svelte 5 implementations of GOV.UK Design System components, as well as other custom components specifically tailored for data-rich digital products and services in government.
The full component library is due to launch this autumn but you can try it out right now or follow our progress on GitHub.
In this blog, we talk about the problem we’re solving, what we’ve done so far, and how this open-source library could help other frontend development teams across government with similar user needs.
The problem
Imagine being a frontend developer who must create hundreds of bespoke web pages about local authorities that are easy for a citizen audience to find, understand and use. Imagine that these web pages are generated by datasets which are frequently updated as new data comes in.
This is one of many challenges that product development teams like ours face.
Across government, there is often a need to find clear and effective ways to communicate stories that otherwise remain hidden in large datasets. We found that, currently, there is no standardised solution to doing this while meeting the Government Service Standard. This results in duplication of effort and lack of consistency.
Our solution: a component library
To address this problem, we’re developing a reusable component library. This project builds on successful innovations at the Office for National Statistics (ONS), which helped create a suite of products for the 2021 Census.
Users of our library – frontend developers – will be able to combine responsive components with their own data to build products fast.
The component library aims to:
- provide the flexibility to craft easy-to-use products to meet our users’ needs and continuously improve
- allow developers to create bespoke data visualisations and infographics
- deliver excellent performance
- adhere to government design system standards
- be accessible out of the box
- be a reuseable solution to save time for our team and others in the future
An important part of this solution was the choice of frontend framework – Svelte.
Why Svelte?
We chose Svelte as the foundation for our component library because of its exceptional benefits for government data-led digital services:
- Strong performance: Svelte compiles to Vanilla JavaScript, resulting in smaller bundle sizes and faster load times. This is especially important when large amounts of data and code need to be passed to the web browser.
- Excellent search engine optimisation (SEO): Server-side rendering capabilities ensure your content is accessible to search engines and users with JavaScript disabled. The SEO benefits mean public-facing content gets higher visibility in Google searches, helping users get answers more quickly and driving traffic to the service.
- Built-in reactivity: Simple, intuitive state management without complex patterns or additional libraries allows us to build interactive user experiences to personalise the content to the user needs.
The components we’re building
To date, we’ve developed the standard and familiar user interface components that form the basis of a GOV.UK web page, drawing inspiration from existing design systems. This includes elements such as the page header and footer, breadcrumbs, buttons, links, different ways of presenting text and more.
We’ve also made a good start on the most common data visualisation types: charts, maps and advanced table components. These are being developed with great care by data visualisation specialists to ensure maximum ease of use and comprehension.
These components will continuously be added to and iteratively improved. They will allow frontend developers to quickly build visually rich products that:
- help summarise complex data in an engaging and accessible way
- allow for interaction and exploration to help users quickly find the answers to their questions
Accessibility
We take accessibility seriously, and carefully develop all our components to meet the highest standards. We will have our components audited before moving to Beta, with the aim that all components meet WCAG 2.2 AA standards.
Accessibility for data visualisation is a particular challenge where we’re working especially hard to be best in class.
User testing
Our user research team is testing the components on future users. We learn and iterate.
Want to be involved?
We're actively developing the component library for use on multiple products due to be launched later this year.
Once those products are published, we intend to iterate the library before inviting the wider government digital community to use it for their own projects.
In the meantime, we're keen to collaborate with other teams in government.
We’d love to hear from you if:
- you think our library could help solve a problem for you
- you’d like to contribute to the development of this product
- you have any questions about this product
- you have examples of similar projects in government to share
- you’d like to be invited to our future show and tell sessions
Contact our project lead Andrew Hillman, lead data visualisation frontend developer.
The brilliant team of developers and designers delivering this work also includes: Camilla Jones, Duncan Bradley, Glenn Herbert, Ibrahim Haizel, Miles Hinchliffe and Mike Lister.
Leave a comment