JSON to Form — Auto-Generated Editor
Paste any JSON. Get a real form with the right input per field — text, number, toggle, dropdown, date, color, nested cards, array lists. Edit either side, they stay in sync. Runs in your browser.
The JSON you paste here is parsed, inferred, and rendered entirely in your browser. Nothing is uploaded. Type detection and form rendering happen offline once the page has loaded.
Why use this instead of a server-based editor?
Your data stays on your device
Most online JSON editors POST your data to a server. Pyrelo runs the parser and inference in JavaScript on your machine — nothing is uploaded.
Works offline
Once this page is loaded, you can disconnect from the internet and keep editing. There's no remote dependency for parsing or rendering.
No tracking on the editor
No third-party analytics or scripts run on the editor itself — your keystrokes and your JSON aren't watched.
Auto-types your fields
Strings used as enums become dropdowns, dates become date pickers, hex colors become color pickers — without you writing a schema.
How to use it
- 1
Paste, upload, or load the sample
Three ways in: paste any JSON into the editor, upload a .json file, or click Sample for a representative payload.
- 2
Watch the form auto-build
The tool walks your structure once. Each field gets the right input — text, number, toggle, dropdown, date picker, color picker, nested card, or array list.
- 3
Edit either side — they stay in sync
Edit a field, the JSON updates. Edit the JSON, the form updates. Add or remove rows in arrays. The two views are always one source of truth.
- 4
Copy or download when you're happy
Hit Copy to put the JSON on your clipboard, or Download to save a .json file. Use it as test data, an API request body, or a config file.
When this is the right tool
Test API request bodies
Drop in a sample request payload, tweak field values via the form, and copy the JSON back into Postman or your terminal. Faster than hand-editing strings.
Build mock data for a frontend
Iterate on the shape of your data while looking at it as a real form. Toggle a boolean, change an enum, see if your component handles edge values.
Validate that a JSON file is well-formed
Drop in a config file or a fixture. The form panel only renders when the JSON parses. Parse errors show line and column.
Onboard non-technical teammates
Send a colleague a JSON sample and a link to this tool — they can edit values via real form inputs without ever touching a comma or a brace.
FAQ
What does this actually do?▼
Paste or upload a JSON sample. The tool inspects the structure, infers the type of every field (string, number, boolean, date, email, color, enum, nested object, array), and renders a live, editable form. Edit any field and the JSON updates in place. Edit the JSON and the form updates. It's a fast way to test, tweak, or visualize a JSON payload without writing throwaway HTML.
How does the type inference work?▼
For a single object, every field's type comes from its current value. For an array of objects, the tool merges samples across all items: a string field with ≤8 unique values becomes a dropdown, a string that looks like a date (YYYY-MM-DD) gets a date picker, an email pattern becomes an email input, hex colors get a color picker, and so on. Nested objects render as collapsible sub-forms; arrays render as a list with add and remove buttons.
Is my JSON uploaded anywhere?▼
No. Parsing and type inference run entirely in your browser. The JSON never leaves your device. You can verify by checking the network tab while you use the tool — there are no requests during conversion.
What types and formats are detected?▼
Strings, numbers, booleans, null, objects, and arrays — plus refined string formats: dates (YYYY-MM-DD), datetimes (ISO 8601), email addresses, http(s) URLs, and hex colors. Strings used as a small set of repeated values across an array are auto-promoted to a dropdown.
Can I add and remove items in arrays?▼
Yes. Each array gets an Add Item button. Each item has a delete control. The new item starts with sensible defaults derived from the inferred item schema, so a new user object will arrive with the same fields as the others.
What if my JSON has fields with mixed types (e.g. sometimes a number, sometimes a string)?▼
Those fields are tagged 'mixed' and rendered as a JSON-value input — you can type any literal (a number, a string, a nested object) and it parses on the fly. The rest of the schema is unaffected.
Does it handle deeply nested JSON?▼
Yes. Object and array groups are recursive — an array of users where each user has a preferences object with a notifications array works out of the box. Each level is collapsible so deep payloads stay navigable.
Will my JSON parse if it's invalid?▼
If the JSON in the editor doesn't parse, the form panel shows an error and the last valid form state is preserved. Fix the JSON and the form re-renders. The exact parse error message (with position) is shown so you can find the problem fast.
More data tools
Powered by Pyrelo
The all-in-one work dashboard for small teams
Tasks, finance, calendar, timesheet, notes, team chat, file storage, AI assistant, and these tools — all in one place. Starts at ₹599/month flat for up to 30 employees.
See Pyrelo Dashboard