Case Study: Implementing Any Design System in Anvil

New to Anvil? Welcome! Anvil lets you build full-stack web apps using only Python. No need to juggle JavaScript, HTML, CSS, Python, SQL and all their frameworks. Just code in Python and bring your app to life!

Design systems are invaluable for creating professional web apps. Implementing your design system in Anvil, by creating custom drag-and-drop components, layouts, and themes, streamlines development for both yourself and others. Today, I’ll show you one I built from scratch to demonstrate what’s possible in Anvil.

A form in the Anvil editor based on the GOV.UK design system.

A form in the Anvil editor based on the GOV.UK design system.

For this case study, I’m using GOV.UK’s design system. It’s a great example of a comprehensive design system, which standardises styles, helps construct components and takes accessibility seriously. It provides all the benefits of using a well thought out design system when creating a web app - so it’s perfect to show you what you can achieve in Anvil.

The finished product

The proof is in the pudding so, before I dig into how I implemented the system in Anvil, here’s an example of using the finished design system in the Anvil editor. Here’s me using the design system as a dependency and creating a GOV.UK form by simply dragging and dropping components into the page:

Building a form in Anvil which uses the GOV.UK design system.

Building a form in Anvil which uses the GOV.UK design system.

You can even clone this app and play around yourself:

Clone The Example

How it’s built

GOV.UK’s design system website provides all the HTML and CSS needed to implement their design system. They break everything down into individual components and page templates. Since Anvil allows for extensive customisation, I was able to use a few of its out-of-the-box features to recreate them.

Custom HTML Layouts

The first step was to implement GOV.UKs page template.

GOV.UKs basic page implemented in Anvil

GOV.UKs basic page implemented in Anvil

Anvil’s custom HTML Layouts let me use the HTML from the design system’s page templates. All I had to do was insert slots in the HTML to define where components can be added to the Layout when it is used by other Forms.

<!-- Here's a slimmed down example of the GOV.UK's footer -->
<footer class="govuk-footer" role="contentinfo">
    <!-- To let developers add components to the footer, I simply defined
    the anvil-slot. -->
    <div anvil-slot="footer-items">
        <!-- And added usage details for the Anvil designer. -->
        <p anvil-if-slot-empty="footer-items" class="anvil-designer-only"><i>Drag footer links or components here</i></p>
    </div>
</footer>

To see how simple it is to create layouts from scratch, check out our docs:

Read the docs on custom layouts

Components from HTML

For GOV.UK’s individual components, I used Anvil’s ability to create components from scratch in HTML.

I simply copied and pasted the HTML from the design system and added the anvil-name attribute to the elements I wanted to access in code.

<!-- The Component's HTML is the same as the design system plus the `anvil-name` attribute -->
<input anvil-name="govuk-input" class="govuk-input">

With anvil-name assigned, I could easily reference those elements in Python using Anvil’s dom_nodes API. This let me to select individual elements, insert new content, apply new styles, and modify attributes—all while keeping the structure of the original design system intact.

# Here's are some simple getter and setter functions for the text input component I built
@property
def label_text(self):
    return self.dom_nodes["govuk-label"].textContent

@label_text.setter
def label_text(self, value):
    self.dom_nodes["govuk-label"].textContent = value

Anvil stands out by giving you full access to any HTML element’s APIs directly from Python code. There are no limits imposed by Anvil’s abtraction.

Check out our tutorial on building custom components from HTML:

Learn how to create components

Ready to get started?

We’ve got full documentation and tutorials to help you get started:

These resources will help you with everything you need to bring your design system into Anvil.

Any questions? Our Community Forum is full of helpful information and Anvil experts.

More about Anvil

If you’re new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

Sign up for Anvil

Want to build an app of your own? Get started with one of our tutorials:

Data Dashboard

In this tutorial, you will learn to plot data using client-side Python code and deploy it online for others to see.
Go

Build Database-Backed Apps

In this tutorial, you will learn how to build a simple news aggregator app.
Go

Build a Simple Feedback Form

Build a data-entry app, and learn the techniques fundamental to building any Anvil app. In this tutorial, you will:

  • Write server-side Python
  • Build your User Interface
  • Write client-side Python
  • Store data in a database
  • Deploy your app
Go