mitosis

> Mitosis provides a unified development experience across all frameworks, enabling you to build components in a single codebase and compile them to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more. > Maintain a consistent design system across multiple frameworks (example) > Sync your design systems from Figma to code and publish them to npm across frameworks > Avoid the pitfalls of web components by compiling to native framework code > MIT licensed: https://github.com/BuilderIO/mitosis/blob/main/LICENSE Website: https://mitosis.builder.io/

> I don't want to step on your toes by linking my own project Not at all, it's in good spirit! Happy to talk through any technical details from my side :) > though if you try to listen for those changes with a mutation observer, it won't fire It doesn't have to fire an immediate mutation imo. When you click on an element to edit, you could inject a data-attribute into it (not sure if the Chrome Devtool let you do this but an extension might). At write-time, you can query the elements that were marked, get the delta and write it to code. You might've thought of this longer than I have so I think that might be a naive solution. > can then be transpiled into any framework the user wants You might be interested in Mitosis https://github.com/BuilderIO/mitosis

Mitosis (https://github.com/BuilderIO/mitosis) is a fantastic project, but is still in its early stages, and in need of some build tooling. It allows you to "write once, run everywhere" in the sense that you can write a UI component and have it compiled to a React component for use in a React project, a Svelte component for use in a Svelte project, and so on. It does not, however, support bundling. create-multi-lib (run like so `npx create-multi-lib <your-lib-name>) is my attempt to contribute a much needed bundling-layer on top of Mitosis. It also comes with E2E testing included, and your resulting packages include type-declarations.

I see you was inspired by https://github.com/BuilderIO/mitosis was there no way to extend there AST?

https://github.com/BuilderIO/mitosis Maybe worth checking out

This is neat! I’m curious if you see this being extended for other languages, or the concept being applied in other projects? As for similar concepts, several projects by builder.io have some overlap. Most notably Mitosis[1], but I’d be shocked if TS-Lite[2] isn’t using similar techniques. Potentially Qwik[3] as well but I’m not sure, I would have bet that’s using Mitosis but it looks like that’s the other way around. 1: https://github.com/BuilderIO/mitosis 2: https://github.com/BuilderIO/ts-lite/tree/main/packages/core 3: https://github.com/BuilderIO/qwik

Something similar. Write components once, run everywhere. Compiles to: $manyWebUILibraries https://github.com/BuilderIO/mitosis

They also created Mitosis[1], which compiles JSX to a variety of frameworks, including Svelte. I’d bet a lot of the inverse logic’s pretty similar. I’m a bit surprised Svelte isn’t already supported in Builder. 1: https://github.com/BuilderIO/mitosis

Out of so many new drag and drop frameworks coming out it is still impressive to see how they are approaching here. Both Mitosis and qwik are nice repos to watch for. Putting links here for easy navigation qwick -> https://github.com/BuilderIO/qwik mitosis -> https://github.com/BuilderIO/mitosis partytown -> https://github.com/BuilderIO/partytown