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 your service name
• create or modify a page
• update navigation
• add a component

Update service name

1. Open src/common/page-wrap.tsx.
   
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:
   
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>.

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.

Add a component

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

• copy the code from the HTML or React tabs in the design system
• copy the code from GOV.UK design system components (HTML only, not Nunjucks)

Use HTML component

1. Copy the HTML code
   
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:
   
5. Save your changes.
6. Go to http://localhost:8080/ and you will see the changes update automatically in your local web browser.
   

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.