UI components with a way to query for typed controls

[forresto]

As a maker of documents, whiteboards, and apps, I want to be able to use pre-made components to be able to prototype UIs and dataflows quickly.

• I don't want to build a custom UI for every property / parameter that can be set on the component.
• I don't want to build a custom UI to inspect every event / data that comes from the component.
• I'd like to be able to write types in code once. (Not juggling other config files or meta.json.)

I want to be able to use these components in TLDraw, Notion, Meemoo, Webflow, Web Studio, Natto, browser dev tools... and any other web app.

I want to be able to make components like this without (necessarily) dropping to code. (Nesting / embedding.)

Potential solution: a library of components that reports typed

• attributes / events
• inports / outports
• copy paste / drag and drop points.

(These are all related.)

I have seen several standards around this recently, in researching what a Meemoo v2 could be.

• Block Protocol – "The" open standard for building block-based interfaces
• Storybook Controls – "If you’re using React, Vue, Angular, or Web Components, Storybook analyzes your component arguments and automatically generates UI to edit these arguments."
• API Viewer Element – API Viewer is a set of custom elements and helpers providing interactive UI for documenting web components. This project is based on Custom Elements Manifest, a file format that describes custom HTML elements.
• Meemoo v1 itself. The first iteration used iframes for every component. When loaded, the iframe sends a message to the parent frame, reporting typed properties and events (inports and outports).
• meemoo-elements – standard web components with a method to report own "ports." No build or frameworks, as vanilla as possible.

Bonus:

• TypeScript Language Server could be a low-level way to do this. I'd prefer to not depend on TS, because the compilation step is a slippery slope to making the tool for developers only. But I'd be OK as long as there is a path to edit TS in situ in the browser-based tool.

So we don't need yet another standard. Should we choose one of these?

[forresto]

More examples and ideas welcome.