The designer

The designer is for the people who own a form, such as caseworkers and product owners. They should not need to learn a syntax to change a question.

Open the designer · or run it yourself with npm run designer.

Working with it

Outline (left): pages, groups and questions. Add, move with the arrows or by dragging, and delete. Undo brings anything back (also Ctrl+Z).
Preview (middle): the real form, exactly as people will see it, in each language.
- Test data decides what each lookup returns, so lookups and address search work without a server.
- Submitted data shows what the form would send.
Settings (right): the question in each language, the answer type, and "Must be answered: No / Yes / Only when …". Rules come with their own messages, and lists of options are edited in place. Names follow the question text until you change them.
Problems (bottom): in plain words. Click one to jump to the setting to fix.

Rules are formulas like in Excel. The designer helps with them: an Insert field menu, a function reference, and errors shown as you type.

While a form has problems, the preview leaves out the broken parts, and Export for publishing stays disabled.

Open a YAML or Excel form. Save as YAML or Save as Excel writes it back, and opening the file again gives the same form.
Export for publishing writes the compiled JSON that servers use.
Nothing is uploaded: the designer runs in the browser. The current draft is kept in the browser between visits.

Drag the dividers between the panes, or focus a divider and use the arrow keys. Double-click a divider to reset it. Sizes are remembered.