Open your prototype in your editor

In your code editor, open your prototype folder. You will see the files and folders that you can edit in your prototype.

Overview of files and folders

app is for your work. Inside that folder:

• assets is for CSS, JavaScript, images and downloadable files
• data is for any default data, such as a default answer to a question
• views is for page templates – this is where you’ll spend most of your time editing

Outside of a folder are some additional files:

• config.js is used for configuring some settings
• filters.js can be used to add your own helpful filters
• locals.js can be used to set any information you’d like to be able to include on any page, for example the name of your organisation
• routes.js is for advanced logic – for example, if a user should go to one page or another based on their answers (we’ll cover this later)
• README.md can be used to add any notes about your prototypes for yourself or others working on it

Editing files

In most code editors you can toggle folders open or closed, and click files to open them in a separate panel.

You can have more than one file open at once in tabs, and close them when you are finished editing them.

Depending on your editor and its settings, you may need to press ‘Save’ to save changes. Press Command + S on Mac or Ctrl + S on Windows. In Codespaces this is set up to save automatically, although you can turn this feature off later if you prefer.