Design a Form Builder – Frontend System Design

We’ll walk through the frontend system design for a form builder like Typeform or Google Forms: an authoring surface that edits a document, a live preview of that document, and a published runtime that collects answers. You’ll see why the form is a JSON schema and not a tree of React components, how a drag becomes one undoable command, how show/hide rules form a graph you can sort, and why a respondent who started on version 3 still submits against version 3 after you publish version 4.

This is not “build a form.” A single <form> with five labeled inputs is an afternoon. The interviewer wants a product that lets other people invent forms, change them after people have answered, hide questions from earlier answers, and ship markup a screen reader can use. The schema is the product. The canvas is a view of it.

Problem Statement

Design the frontend for a form builder used by teams to create surveys and intake forms.

Requirements:

• Authors drag fields onto a... premium content.