Documentation

Build a prototype

Prototype Builder helps you create GOV.UK-style journeys without writing code. Use it to make page-by-page prototypes for research, feedback and service design.

Wizard overview page

The overview page lists the pages in your wizard. Use it to open the editor, add pages, reorder pages and delete pages you no longer need.

Renaming a wizard

Open the wizard settings from the overview page to change its name. The name is for you and your team. Users of the prototype do not see it.

Share link

Use the share link to send a prototype to colleagues or research participants. Anyone with the link can run the prototype.

Importing a page

If a page already exists in a live service, you can copy it into your wizard instead of rebuilding it by hand. Use it to start from a real page and change only the parts you are testing.

How to import a page

1. Open the page you want to copy in your browser.
2. Right-click the page and choose View page source, then select everything and copy it.
3. In wizard settings, select Import page.
4. Paste the HTML into the box and select Import page.

The imported page is added to the end of the wizard and the page editor opens so you can check it. Move it where you need it with the reorder controls on the wizard overview page.

What comes across

Importing reads the main content of the page and ignores the header, footer, phase banner, cookie banner and other page furniture. From what is left it builds:

• the page heading, its size, and any caption above it
• confirmation panels, including the text inside them
• paragraphs, subheadings and lists, with links and bold text kept as Markdown
• text inputs, radios, checkboxes and file uploads, with their labels, hints and options
• buttons, including start buttons

Where the original page asks a single question, the heading is used as the label for that question, matching the pattern on GOV.UK.

Answer names are taken from the fields on the original page, so a question named claim[nursery_search_query] becomes nursery-search-query. If a name is already used elsewhere in the wizard, a number is added to keep it unique. Use these names when you write branch rules.

Imported buttons have no target, so they continue to the next page in your wizard. Set a target or add branch rules if the journey needs to go somewhere else.

What does not come across

Some GOV.UK components have no equivalent in the builder yet. These include inset text, warning text, details, accordions, tables, summary lists and cards, task lists, notification banners, error summaries and messages, tabs, date inputs, character counts, password inputs, select dropdowns, autocompletes and pagination.

Anything left behind is listed in a message at the top of the imported page, so you know what to add yourself. Text areas are imported as single-line text inputs, and this is flagged in the same way.

The HTML you paste is stored with the wizard. It is only used to work out which components to build next, so do not paste pages containing personal or sensitive information.

Page editor

The page editor has two panes. The left pane contains editing controls. The right pane shows a live preview of the page as users will see it.

Page controls

Page controls let you edit the page heading, caption, URL slug and back link. The slug is generated automatically from the page title. You usually only need to change it when a button or branch rule links to a page that does not exist yet and is not the next page.

Paragraphs

Use paragraphs for short blocks of body text. Keep each paragraph focused on one idea.

You can add links with Markdown, for example [link text](https://example.com). You can make text bold with double asterisks, for example **important text**.

Shared component controls

Most components can be removed or moved up and down the page. Moving a component changes the order users encounter the content.

Buttons

A button usually sends users to the next page in the wizard. You can also set a specific page slug in the button target.

In builder mode, if the target slug does not exist, the app creates that page when you follow the button. For conditional journeys, use branch rules.

Subheadings

Use subheadings to group related content within a page. Do not use them where a new page would make the journey clearer.

Lists

Use lists when several items belong together. Choose bullets for unordered items and numbers when order matters.

Each line becomes a list item. List items can include Markdown links.

Text inputs

Use a text input when users need to type a short answer.

Add a clear label and optional hint. You can use the page heading as the label when the page asks one question.

Radio inputs

Use radios when users must choose one option from a list. Enter each option on a new line.

Radios can be displayed inline for short choices. You can also add a text divider when the options need a visual break.

Checkbox inputs

Use checkboxes when users can choose more than one option. Enter each option on a new line.

Add a clear label and optional hint.

File upload and uploaded file

Use file upload when a prototype needs to ask for a document or image. Use uploaded file to show a file that has already been added to the prototype.

Check answers table

Use a check answers table near the end of a journey so users can review answers before continuing. In builder mode, placeholders are shown instead of the answers. You can add more than one check answers table to a page.

Branch rules

Branch rules send users to different pages based on their answers. Use them when one button needs different destinations for different users.

Add conditions to a branch rule to describe when it should run. If no rule matches, the button falls back to its Go to page target or the next page in the wizard.