Show HN: TypeScript Editor that generates structured forms from TypeScript types(tseditor.fwouts.com)
tseditor.fwouts.com
Show HN: TypeScript Editor that generates structured forms from TypeScript types
https://tseditor.fwouts.com
3 comments
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!!
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!!
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
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.
I have an app doing almost the same except it has its own schema editor, not typescript, work directly with ast.
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...
Here's an example: https://tseditor.fwouts.com/?t=ZXhwb3J0IHR5cGUgVmFsdWUgPSBVc...
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