How we work Prototyping

This guide explains how to create prototypes using the MOJ Design System and GOV.UK Prototype Kit.

Use a template from Cloud Platform

You can follow the MOJ Cloud Platform guide to automatically set up a GitHub repository containing the GOV.UK Prototype Kit and a hosting environment.

This template comes with the MOJ Design System pre-installed so you don't need to set it up manually. However you may need to update it using the instructions below.

Manual installation

You can also install the GOV.UK Prototype Kit and MOJ Design System manually. You must follow the GOV.UK Design System prototype setup guide first.

You then need to install the NPM package for the MOJ Design System:

  1. Open a command prompt application (e.g. Terminal on MacOS)
  2. Change the directory to your prototype's directory. For example, cd path/to/prototype
  3. Run npm install @ministryofjustice/frontend --save

If you're using version 13 or later of the GOV.UK Prototype Kit, the components of the MOJ Design System will now be available to you.

For older versions of the GOV.UK Prototype Kit

If you're using a version of the GOV.UK Prototype Kit before 13, you need to take additional steps to use the MOJ Design System in your prototype:

  1. Open app/assets/javascripts/application.js
  2. Add window.MOJFrontend.initAll() below the line that does the same for GOVUKFrontend

Updating MOJ Frontend

The current version of MOJ Frontend is 1.8.1.

You can check which version your prototype is running by opening package.json in the root folder of your prototype. Look for "@ministryofjustice/frontend" under "dependencies".

To update your prototype to the latest version of MOJ Frontend:

  1. Check that you're using the latest long-term support version of npm (for example by using Node Version Manager)
  2. Open package.json in the root folder of your prototype in a text editor
  3. Under dependencies, update the reference to MOJ Frontend to "@ministryofjustice/frontend": "1.8.1",
  4. Save package.json
  5. Open a command prompt application (e.g. Terminal on MacOS)
  6. Change the directory to your prototype's directory. For example, cd path/to/prototype
  7. Run npm install