TypeScript Editor that generates structured forms from TypeScript types
Hey HN! I've been doing a lot of work with the TypeScript Compiler API[1] recently as part of my work on Preview.js[2], an IDE extension that lets you preview React/Solid/Vue components. One thing I noticed is that even with great autocomplete and type validation, creating/editing JS values that match a given TypeScript type can require a lot of typing. This is especially the case in Preview.js, where you can edit the props you pass to the component you're previewing in the bottom right panel. For example, quickly switching between different variants of a union type can be a…
In plain words
This tool automatically generates structured forms from TypeScript type definitions, allowing developers to create and edit values that match specific types without manual coding. Built for use within Preview.js—an IDE extension for previewing React, Solid, and Vue components—it lets users quickly switch between different type variants and edit component props through an intuitive form interface rather than typing raw JavaScript values directly.
written from the facts on this page · September 2026
From the sources
In the maker’s words, at launch
Hey HN! I've been doing a lot of work with the TypeScript Compiler API[1] recently as part of my work on Preview.js[2], an IDE extension that lets you preview React/Solid/Vue components. One thing I noticed is that even with great autocomplete and type validation, creating/editing JS values that match a given TypeScript type can require a lot of typing. This is especially the case in Preview.js, where you can edit the props you pass to the component you're previewing in the bottom right panel. For example, quickly switching between different variants of a union type can be a hassle. To solve this, I decided to try creating a tool that generates a structured from for a given TypeScript type. For example if you pass it `type Foo = { bar: string, baz: number }`, it will show you a form with two inputs `bar` and `baz` with the appropriate types, and it will output the equivalent JS code (or JSON) as you type. You can try it at https://tseditor.fwouts.com I built this as a standalone tool so that I could debug it easily (and indeed, I found a ton of great bugs!). As it took shape, I realised there might be other use cases for it than Preview.js. Imagine for example using this in Postman (or whichever tool is better than Postman these days!) instead of inputting JSON values for your request payloads. Or perhaps using this for ad-hoc forms (the form is effectively encoded in the URL). I'm curious what you'd see yourself using this editor for? Any feedback welcome of course! Thanks François (@fwouts on Twitter) [1] https://github.com/microsoft/TypeScript/wiki/Using-the-Compi... [2] https://previewjs.com
More dev tools this month
the category →
Open-source GTM skills for technical founders
Dev tools · 29d ago · gtmcofounder.com
OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.
Dev tools · 1d ago · opentrailpaper.com
Launched alongside, July 2022
the whole month →
- PO
Life & fun · 2022 · justine.lol
- PO
Dev tools · 2022 · github.com
- PP
Hello, HN - I wanted to share this puzzle game I made during my vacation. I'm rather fond of the pipes puzzle where your goal is to restore a scrambled network of connections by rotating tiles. It's usually played on a grid of squares and this all started when I decided to make a programmatic solver for that kind of puzzle. Then I realized that with some minor changes the solver could generate new puzzle instances. I thought about what kind of puzzle to make and someone suggested a hexagonal grid. Adapting the generator wasn't too hard but then I had to create a way to play this variant. So…
Life & fun · 2022 · hexapipes.vercel.app
- PD
We're building Parsnip to create a "tech tree" of cooking skills that allows anyone to level up on the building blocks of cooking knowledge while tracking their progress over time. It took us a few iterations to figure out the right product; here's the story of our latest pivot: [https://parsnip.substack.com/p/a-new-hope] The goal is to create a personalized way to learn any recipe on the Internet, then use this as a springboard to help home cooks of all levels solve the problem of repeated meal planning in a 10x better way:…
Work · 2022 · parsnip.ai