Mitosis - Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more

  •        6980

Mitosis is inspired by many modern frameworks. You'll see components look like React components and use React-like hooks, but have simple mutable state like Vue, use a static form of JSX like Solid, compile away like Svelte, and uses a simple, prescriptive structure like Angular. Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

https://mitosis.builder.io/
https://github.com/BuilderIO/mitosis

Tags
Implementation
License
Platform

   




Related Projects

figma-html - Figma to HTML, CSS, React, Vue, and more!

  •    TypeScript

When exporting Figma to Builder, the plugin requires all elements to be in auto-layout. However, it's not possible to auto-layout a vector. The alternative here is to use Figma's rasterize selection command on your vector. If the output of that is too low-resolution, then you can try this plugin: https://www.figma.com/community/plugin/837846252158418235/Flatten-Selection-to-Bitmap. If you want the Builder end-result to have a vector, then consider this rasterized selection as a placeholder, and swap it back with an SVG in the Builder editor.

Storybook - Build bulletproof UI components faster in React, Vue, Angular, and more.

  •    Typescript

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

poi - :zap: Delightful web development.

  •    Javascript

Start writing an app with a single .js file, Poi could handle all the development setups for you, no more configuration hell.Note: You need to install react react-dom and run Poi with --jsx react flag. For convenience, here's also poi-preset-react which adds both React JSX and React HMR support.

jsx-control-statements - Neater If and For for React JSX

  •    Javascript

JSX-Control-Statements is a Babel plugin that extends JSX to add basic control statements: conditionals and loops. It does so by transforming component-like control statements to their JavaScript counterparts - e.g. <If condition={condition()}>Hello World!</If> becomes condition() ? 'Hello World!' : null. Developers coming to React from using JavaScript templating libraries like Handlebars are often surprised that there's no built-in looping or conditional syntax. This is by design - JSX by is not a templating library, it's declarative syntactic sugar over functional JavaScript expressions. JSX Control Statements follows the same principle - it provides a component-like syntax that keeps your render functions neat and readable, but desugars into clean, readable JavaScript.


builder - Drag and drop Visual CMS for React, Vue, Angular, and more

  •    TypeScript

Integrate with any site or app. Drag and drop with the components already in your codebase. Performance is our top priority. All content is delivered from the edge, renderable server side or statically, we optimize the heck out of it and our SDKs are small and mighty.

svelte - The magical disappearing UI framework

  •    TypeScript

The magical disappearing UI framework. The style and script preprocessors will run after the markup preprocessor. Each preprocessor can return a) nothing (in which case no transformation takes place), b) a { code, map } object, or c) a Promise that resolves to a) or b). Note that sourcemaps are currently discarded, but will be used in future versions of Svelte.

relay-fullstack - :point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS

  •    Javascript

Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It comes with many modern technologies; Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS. Relay Fullstack is also using Hot-reload to real time update the screen whenever any code changes. Check out the Live demo on Heroku.

SVELTE - Cybernetically enhanced web apps

  •    Typescript

Svelte is a new way to build web applications. It is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

stencil - A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team

  •    TypeScript

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components. Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that runs on both modern browsers and legacy browsers back to Internet Explorer 11.

OpenChakra - Full-featured visual editor and code generator for React using Chakra UI

  •    Typescript

OpenChakra is a visual editor for the best component library for Chakra UI. It helps to quickly draft components with the simple drag and drop UI. Drag any component from the left hand panel into this editor. Then start interacting with them. You can drag a preset: it's a group of components (like Alert). Just drop a preset to easily setup a complex component!

Brahmos - Super charged JavaScript library with modern React API and native templates.

  •    Javascript

Brahmos is a supercharged JavaScript library to build user interfaces with modern React API and native templates. Brahmos supports all the APIs of React including the upcoming concurrent mode APIs and the existing ones. It has its own custom fiber architecture and concurrent mode implementation to support the concurrent UI patterns. It is a fast alternative to Virtual DOM. (JSX without VDOM).

formsy-material-ui - A Formsy compatibility wrapper for Material-UI form components

  •    TypeScript

This package is currently under active restoration after a long hiatus, and all help is appreciated, especially MUI users. This library is a wrapper for Material-UI form components to allow them to be used with formsy-react, a form validation component for React forms.

storybook - Interactive UI component dev & test: React, React Native, Vue, Angular

  •    Javascript

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

oruga - 🐛 Oruga is a lightweight library of UI components without CSS framework dependency

  •    Vue

Oruga doesn't depend on any specific style or CSS framework (like Bootstrap, Bulma, TailwindCSS etc...) and it doesn't provide any grid system or CSS utility, it just offer a set of components easy to customize. Oruga wants you to focus only on UI/UX aspects of your application and be totally flexible to future changes without having to touch a line of JavaScript. Browse online documentation here.

react-fine-uploader - Easily integrate Fine Uploader or Fine Uploader S3 into a React app

  •    Javascript

Makes using Fine Uploader in a React app simple. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI. These allow you to easily build a highly customizable and powerful UI for your upload widget, backed by Fine Uploader's core feature set. Most of these components are unstyled (i.e. ready to be styled by you). Focused component-specific stylesheets may be provided at a later date.

Tooljet - Internal tool builder. An alternative to Retool, AppSmith, JetAdmin, Internal.io etc

  •    Ruby

ToolJet is an open-source no-code framework to build and deploy internal tools quickly without much effort from the engineering teams. You can connect to your data sources such as databases ( like PostgreSQL, MongoDB, Elasticsearch, etc ), API endpoints ( ToolJet supports importing OpenAPI spec & OAuth2 authorization) and external services ( like Stripe, Slack, Google Sheets, Airtable ) and use our pre-built UI widgets to build internal tools.

coreui-free-bootstrap-admin-template - CoreUI is free bootstrap admin template

  •    HTML

Curious why I decided to create CoreUI? Please read this article: Jack of all trades, master of none. Why Bootstrap Admin Templates suck. CoreUI is an Open Source Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high quality icons.

vime - Customizable, extensible, accessible and framework agnostic media player

  •    TypeScript

Vime is a customizable, extensible, accessible and framework agnostic media player. The examples below are using web components but there are bindings for React, Vue, Svelte, Stencil and Angular. If you want to see how they look check out our Demo.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.