One question per page apps made easy


8425.3.02 years ago4 years agoMinified + gzip package size for @hmcts/one-per-page in KB


One per page

Easily build GOV.UK style one question per page services using express, nunjucks and webpack.


One per page solves a number of hard problems in building a one question per page service:

  • Capturing and validating users answers
  • Navigating branching journeys
  • Session management
  • Content internationalisation
  • Template management

All documentation is available at https://one-per-page.herokuapp.com


Add one-per-page and look-and-feel to your package.json:

> yarn add @hmcts/one-per-page @hmcts/look-and-feel

Then create a few steps and wire them to your express app:


const app = express();

class Start extends EntryPoint {
  next() {
    return goTo(this.journey.steps.CheckYourAnswers);

class Name extends Question {
  get form() {
    return form({
      firstName: text.joi('Enter your first name', Joi.string().required()),
      lastName: text.joi('Enter your last name', Joi.string().required()),
  next() {
    return goTo(this.journey.steps.CheckYourAnswers);

journey(app, {
  steps: [


And create a template for your step:


{% extends "look-and-feel/layouts/question.html" %}
{% from "look-and-feel/components/fields.njk" import textbox %}

{% set title %}What is your name?{% endset %}

{% block fields %}
  {{ textbox(fields.firstName, "First Name") }}
  {{ textbox(fields.lastName, "Last Name") }}
{% endblock %}

@hmcts/look-and-feel helps with creating templates

Then start your app:

> node app.js
# listening on port 3000


This project is open to accepting contributions. Check out our open issues for ideas on where to start or to raise your own issue. Read our development documentation for help on getting started.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.