Show HN: TypeScript Editor that generates structured forms from TypeScript types

Show HN: TypeScript Editor that generates structured forms from TypeScript types(tseditor.fwouts.com)

12 points by fwouts 3 years ago | 9 comments

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

kadrian12 3 years ago |

Wow, this is really great! I've got this case very often when I need non-technical people to send me data in a JSON format, but trying to teach them what JSON is and how to edit it is impossible / takes way too much time.

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!!

fwouts 3 years ago | |

Oh, I was wondering if people would ask for that exact scenario! I'll see if I can make that happen, check again in a few days :)

fwouts 3 years ago | |

This is now implemented. Easier than expected!

kadrian12 3 years ago | | |

Wow nice, that works, thank you!! This will be so useful, I can't wait to try this for a real case soon

armchairhacker 3 years ago |

This is really nice and it actually supports a lot of the complex types TypeScript allows (e.g. array of unions, functions). Would also be cool if you could generate random values and function inputs for QuickCheck / regression test generation

fwouts 3 years ago | |

Thanks for the feedback!

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.

fwouts 3 years ago | |

Generating random values is live now :)

Existenceblinks 3 years ago |

The optional and random value buttons are nice. Does Typescript have tagged union? Would love too see how it looks like.

I have an app doing almost the same except it has its own schema editor, not typescript, work directly with ast.

fwouts 3 years ago | |

Yes! They're called discriminated unions: https://www.typescriptlang.org/docs/handbook/typescript-in-5...

Here's an example: https://tseditor.fwouts.com/?t=ZXhwb3J0IHR5cGUgVmFsdWUgPSBVc...