Form Builder (JSON Schema)
Problem statement
A Form Builder generates a fully functional form dynamically from a JSON schema — no hardcoded inputs. This is the pattern behind Typeform, Google Forms, HubSpot forms, and every low-code platform that lets non-developers create forms. Your task is to implement a FormBuilder component in React that receives a schema array, renders the appropriate input for each field type (text, email, number, select, textarea, checkbox), validates required fields on submit, and shows a review state displaying all entered values.
This question tests your ability to build a generic, data-driven UI — writing code that adapts to its data rather than code written specifically for a fixed set of fields. The key skills are: deriving initial state from the schema, rendering different input types from a type discriminator, and writing a validation function that works against any schema.
Requirements & constraints
- Render a form from a JSON schema array — each field has name, type, label, required, placeholder/options
- Support field types: text, email, number, select, textarea, checkbox
- Initialize form state from schema (text fields start empty, checkboxes start false)
- Validate required fields on submit — show inline error messages per field
- Clear a field's error immediately when the user starts editing that field
- On successful submit, show a review/summary state with all entered values
- A Reset button returns to the empty form
How to approach Form Builder (JSON Schema)
The strategy an interviewer expects you to reach for.
Problem Understanding The core principle: the schema is the only source of truth. You don't hardcode any field names, types, or labels in JSX. Everything is derived by iterating over the schema. If the schema has 3 fields, the form has 3 fields. If it has 20, it has 20. The code doesn't change — only the schema does.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.