Home Office plugin for GOV.UK prototypeHome Office React prototypeCommunity resources

PrototypingBuild your prototype

In Atom, select File then Open. Then select your prototype folder.

src/common is for your work. You won't need to change any files outside of this folder.

You can:

Update service name

  1. Open src/common/page-wrap.tsx.
    Text editor screen showing prototype file structure
  2. Find the Page React element.
  3. Add a new line before title.
  4. On that line add serviceName="My service name". To look like:
    Text editor screen the addition of the serviceName attribute to the Page component
  5. Save the file.
  6. Refresh your web browser and you should see the change. If your prototype is not running, follow View the prototype locally on set up prototype.

Create or modify a page

You can use both HTML (.html) and React (.tsx) to build your prototype. If you are more comfortable using HTML, enter in terminal:

  1. npm run create:page.
  2. Answer the prompts to choose either HTML or React.
  3. Edit the new page to suit you.

HTML (.html) page

A HTML page is HTML that's the content of <main>, between the header and footer. For example:

<h1>Test</h1>
 <p>This is a test HTML page. You can any HTML including lists:</p>
 <ul>
  <li>bullet 1</li>
  <li>bullet 2</li>
 </ul>

By default, the HTML is styled for you, so you don't need to add the standard govuk classes, such as govuk-body.

If you wish to override the style, add the class or style attribute to the HTML elements.

React (.tsx) page

If the page generator for React doesn't work, then:

  1. Copy the index.tsx file.
  2. Rename the file.
  3. Edit the title and description.
  4. Enter your page content between the </Helmet> and the </Fragment>.
Make sure you don't have a React (.tsx) and HTML (.html) file with the same name.

Update the sub-navigation and footer links

  1. Open page-wrap.tsx from the pages folder.
  2. Replace navigation with new sub-navigation and footer links. Press Cmd+S to save your changes.
  3. Check http://localhost:8080 to preview the changes.

See all the options for the Page component.

Text editor screen with a highlight around where service name could be updated

Add a component

There are several ways to add a component in your prototype:

If you use components that contain javascript (like tabs or accordions) the React code functions better. The files must be saved as .tsx files.

Use HTML component

  1. Copy the HTML code
    HTML code displayed for status banner
  2. Open your prototype in Atom.
  3. In src/common/pages find the HTML file to add the component to (or create a new one).
  4. Paste the HTML code. It should look like:
    Text editor screen with a highlight around where example code snippet should sit
  5. Save your changes.
  6. Go to http://localhost:8080/ and you will see the changes update automatically in your local web browser.
    Local web browser displaying properly coded status banner

Help us improve prototyping guidance

This needs improving. We need evidence about:

  • your experience using this kit

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.