Joe Lanman - Designer

GOV.UK Prototype Kit - Versioning your prototype

It's often useful to create different versions of your prototype.

For example you may want to test two different approaches, or refer back to older versions to discuss changes that you've made.

Here is one approach to versioning:


  1. In app/views/layouts folder create a layout file, for example v2.html:
{% extends "layouts/main.html" %}

{% set bodyClasses = "v2" %}
{% set version = "v2" %}
  1. In app/views folder create a version folder, for example v2

  2. Create a page in that folder, for example test.html:

{% extends "layouts/v2.html" %}

{% block content %}

    <p>This is a page in version: {{ version }}</p>

{% endblock %}

You can now visit the page localhost:3000/v2/test in your browser.


  1. In app/assets/sass create a v2.scss file:
.v2 {
    p {
        color: red;
  1. In app/assets/application.scss add this to the top of the file:
@import 'v2.scss';

The text in your test page should now be red.


  1. In app create a routes folder

  2. In app/routes create a v2.js file:

const govukPrototypeKit = require('govuk-prototype-kit')
const router = govukPrototypeKit.requests.setupRouter('/v2')

const version = 'v2'

router.get('/test2', function(request, response) {

Note that the path in the route is just /test2 - you don't need to say /v2/test2. All the routes in this file will assume they are in the folder v2.

However, for redirect and render you do need to use the version, like this:

response.redirect('/' + version + '/my-page')
response.render(version + '/my-page')
  1. In app/routes.js add this line:

If you visit localhost:3000/v2/test2 in your browser, it should say 'test2'.


<a href="/{{ version }}/page-2">Page 2</a>
Last updated: 23/2/24