Awesome Component Converters
convert html components between frameworks: react, svelte, solid, mitosis, vue, angular, ...
awesome-component-converters
convert html components between frameworks
converters
multi framework
- https://github.com/BuilderIO/mitosis - mitosis2react, mitosis2svelte, mitosis2solid, mitosis2qwik, mitosis2vue, mitosis2angular, mitosis2alpine, mitosis2reactnative, mitosis2rsc, mitosis2swift, mitosis2stencil, mitosis2marko, mitosis2preact, mitosis2lit, mitosis2webcomponents, mitosis2liquid, mitosis2html, mitosis2js, mitosis2json, mitosis2builder
- https://github.com/builderio/figma-html - figma2mitosis
- https://github.com/BuilderIO/mitosis/issues/149 - Reverse-Mitosis. convert components to mitosis. import components to mitosis
- https://github.com/ionic-team/stencil - stencil2webcomponents (stencil2react, stencil2angular, stencil2vue, ...). Since Stencil generates web components, they work in any major framework or with no framework at all.
react
- https://github.com/roman01la/html-to-react-components - html2react
- https://github.com/vega/react-vega - vega2react, vega for dataviz: Vega is a declarative format for creating, saving, and sharing visualization designs
- https://github.com/mikenikles/html-to-react - html2react
- https://github.com/peternewnham/react-html-parser - html2react
- https://github.com/christianalfoni/markdown-to-react-components - md2react
- https://github.com/c8r/pixo - svg2react
- https://github.com/webcomponents/react-integration - webcomponent2react, archived
- https://github.com/bitovi/react-to-webcomponent - react2webcomponent
- https://github.com/vicwang163/react-to-vue - react2vue
- https://github.com/vueact/babel-plugin-transform-react-to-vue - react2vue
- https://github.com/egoist/react-to-vue - react2vue
svelte
- https://github.com/sveltosis/sveltosis - svelte2mitosis
- https://github.com/egoist/svelte-convert - svelte2vue, svelte2react
- https://github.com/metonym/svg-to-svelte - svg2svelte
- https://github.com/PoCInnovation/Sveno - react2svelte
- https://github.com/metonym/svelvg - svg2svelte
- https://github.com/jiangfengming/svg2svelte - svg2svelte
- https://github.com/JackC90/svelte-to-vue - svelte2vue
- https://github.com/QiroNT/svelte.vue - svelte2vue, bundler plugin based on https://github.com/unjs/unplugin
- https://github.com/AlbertAZ1992/react2svelte - react2svelte
- https://github.com/SheikhSajid/jsx2svelte - react2svelte
- https://sheikhsajid.github.io/react2svelte-visualizer/ - online demo. no typescript. mostly broken
solid
- https://github.com/swordev/suid/tree/main/packages/codemod - react2solid, based on ts-morph
- https://github.com/swordev/suid/pull/137 - some unmerged transformers
- https://github.com/milahu/eslint-plugin-react2solid - react2solid, based on eslint
vue
- https://github.com/dwqs/vue-to-react - vue2react
- https://github.com/mcuking/vue2react - vue2react
- https://github.com/egoist/vue-to-react - vue2react
- https://github.com/QingWei-Li/vue-markdown-loader md2vue
- https://github.com/egoist/vmark md2vue
- https://github.com/damianstasik/svg-to-vue svg2vue
- https://github.com/deNULL/svuelte vue2svelte
- https://github.com/trickstival/vue2svelte - vue2svelte, archive
- https://github.com/dubrowsky/vue-to-svelte-transpiler - vue2svelte
native apps
- https://github.com/nanohop/sketch-to-react-native sketch2reactnative
- https://github.com/aloisdeniel/figma-to-flutter figma2flutter
off topic
runtime adapters
mix two frameworks on runtime
- https://github.com/BuilderIO/builder - Drag and drop Visual CMS for React, Vue, Angular, and more
- https://podium-lib.io/ - server side composition of microfrontends, "javascript iframes", Podium is a library for building micro frontends. "Micro frontends" is a concept that advocates letting go of the monolith and instead putting all functionallity into smaller independent servers with each server being responsible for serving individual parts of the page in isolation (page fragments) and then composing them together into whole pages in separate layers. The composition is done by requesting each independent fragment over HTTP and then putting each fragment into the HTML page's markup.
- https://github.com/devongovett/vue-hooks - shim the React Hooks API in Vue
- https://github.com/Rich-Harris/react-svelte - svelte2react - Use Svelte components inside a React app
- https://github.com/jpinho/svelte-react - react2svelte - Use React components inside Svelte apps.
- https://github.com/jesseskinner/svelte-react - react2svelte - Use React components inside Svelte apps.
- https://github.com/FE-PIRL/svere - svelte2react, svelte2vue
- https://github.com/pngwn/svelte-adapter - svelte2react, svelte2vue
micro frontends
mix multiple frameworks on runtime
- https://github.com/topics/micro-frontends
- https://github.com/umijs/qiankun - 14K stars
- https://github.com/single-spa/single-spa - 12K stars - router for microfrontends
- https://github.com/neuland/micro-frontends - 4K stars - https://micro-frontends.org/ - Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks
- https://github.com/billyjov/microfrontend-resources
- https://github.com/namecheap/ilc - Isomorphic Layout Composer (ILC) - a layout service that composes a web page from fragment services. It supports client/server-based page composition. ILC assembles a page on the server-side using apps that support Server-side rendering (SSR), and after that, the page is passed on the client-side, so the client-side rendering handles all further navigation.
i18n
also a "translation" but i18n means the translation between human languages
- https://github.com/tolgee/tolgee-platform - translation management cloud platform made for translating modern web applications
