Show HN: TypeScript Editor that generates structured forms from TypeScript types
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
This is SO close to the solution I need. If I could configure this form using typescript and then send them a link where they can't see or edit the typescript, but just fill out the form and send me the JSON, that would be incredible!!
Random values sound like a fantastic idea. It shouldn't be too hard to implement in the current codebase either. I'll add it in the coming days/weeks.
I have an app doing almost the same except it has its own schema editor, not typescript, work directly with ast.
Here's an example: https://tseditor.fwouts.com/?t=ZXhwb3J0IHR5cGUgVmFsdWUgPSBVc...