Week 9: Making Forms Actually Saveable(import/export)

This week was about turning the form designer from something you build once in a session into something you can save, share, and reload.

From Textarea to File

The existing "export" experience was really just a JSON preview rendered on the page, useful for debugging, but not something you'd hand to someone else. I built out a proper file-based export using a Blob and a temporary object URL, so clicking export actually downloads a questionnaire.json file instead of just showing text on the screen.

Making Import Handle Both Paths

For import, I wanted a user to be able to either paste JSON directly or pick a file from disk, and have both paths go through the exact same validation. Rather than writing two separate parsing flows, I updated the existing import method to accept either the pasted text or the text read from a file, so there's only one place where "is this valid Questionnaire JSON" gets decided.

Respecting the Existing Programmatic Hook

The component already dispatched an event whenever a questionnaire was exported, even though nothing in the repo currently listens for it. I made sure that hook stayed in place rather than disappearing quietly, since anyone embedding this component elsewhere might depend on it even if the demo doesn't.

What Comes Next

Next week I planned to start on a feature I think will make the biggest difference in how the designer feels to use: an actual live preview of the form you're building, instead of only seeing the editing canvas.