# BuilderIO/mitosis

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/builderio-mitosis).**

13,749 stars · 635 forks · TypeScript · mit

## Links

- GitHub: https://github.com/BuilderIO/mitosis
- Homepage: https://mitosis.builder.io
- awesome-repositories: https://awesome-repositories.com/repository/builderio-mitosis.md

## Topics

`angular` `builder` `compiler` `declarative` `figma` `jsx` `jsx-lite` `liquid` `no-code` `react` `shopify` `solid` `solidjs` `svelte` `visual` `vue`

## Description

Mitosis is a cross-framework compiler that transforms a single JSX-based source into native components for multiple frontend libraries simultaneously. It functions as a multi-target UI library builder, allowing developers to maintain a single source of truth for design systems while generating production-ready code for diverse environments including React, Vue, Angular, and Svelte.

The system operates by parsing unified component code into an intermediate JSON representation, which serves as the foundation for all downstream framework generators. This architecture utilizes a visitor-based transformation process and a plugin-driven serializer model, enabling developers to inject custom logic, normalize lifecycle hooks, and apply target-specific formatting rules to ensure consistent behavior across different platforms.

The compiler supports a broad range of development requirements, including reactive state management, content slotting, and styling strategies. It provides mechanisms for design system synchronization, allowing for the integration of tokens from external design tools, as well as the ability to define framework-specific implementation overrides when unique library dependencies or platform requirements arise.

The tool is managed via a command-line interface that handles build target configuration and JSX transpilation. It is designed to be extensible, allowing users to hook into the compilation pipeline to modify component metadata or extend framework support through custom serializers.

## Tags

### Programming Languages & Runtimes

- [Component Compilers](https://awesome-repositories.com/f/programming-languages-runtimes/source-code-compilers/multi-target-compilers/component-compilers.md) — Transforms unified JSX-based source code into native syntax for multiple target frameworks including React, Vue, Angular, and Svelte. ([source](https://mitosis.builder.io/docs/cli/))
- [Intermediate Representations](https://awesome-repositories.com/f/programming-languages-runtimes/compiler-interpreter-internals/compiler-infrastructure/intermediate-representations.md) — Parses source code into a language-agnostic tree structure that serves as the single source of truth for all downstream framework generators.
- [Multi-Target Compilers](https://awesome-repositories.com/f/programming-languages-runtimes/source-code-compilers/multi-target-compilers.md) — Executes specific code or returns different values based on the target framework being generated to handle platform-specific requirements. ([source](https://mitosis.builder.io/docs/hooks/))

### Software Engineering & Architecture

- [Multiplatform UI Libraries](https://awesome-repositories.com/f/software-engineering-architecture/cross-platform-development/multiplatform-code-sharing/multiplatform-ui-libraries.md) — Maintains a single source of truth for design systems while outputting production-ready code for diverse frontend environments.
- [Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/plugin-architectures.md) — Allows developers to extend the compiler by injecting custom logic that converts the intermediate representation into new target languages or frameworks.

### User Interface & Experience

- [Component Compilers](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/component-compilers.md) — Transforms a single JSX-based source into native components for multiple frontend frameworks and libraries simultaneously.
- [Cross-Framework Component Generators](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ui-framework-components/cross-framework-component-generators.md) — Compiles unified JSX-based source code into native components for React, Vue, Angular, and Svelte simultaneously.
- [Design Token Synchronization](https://awesome-repositories.com/f/user-interface-experience/design-token-synchronization.md) — Imports design tokens and structures from external tools to automatically generate consistent, production-ready UI components.
- [Design-to-Code Generators](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/workflow-automation-tools/design-to-code-tools/design-to-code-generators.md) — Imports design assets and tokens from visual tools to automatically create consistent, production-ready component code. ([source](https://mitosis.builder.io/docs/quickstart/))
- [Component Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/component-lifecycle-hooks.md) — Maps unified component lifecycle events to the corresponding native methods of each target framework to ensure consistent behavior across platforms.
- [Reactive State Management](https://awesome-repositories.com/f/user-interface-experience/reactive-state-management.md) — Manages component data using hooks that trigger automatic UI updates when values change, supporting both object-based stores and individual state variables. ([source](https://mitosis.builder.io/docs/components/))
- [Component Adapters](https://awesome-repositories.com/f/user-interface-experience/component-adapters.md) — Customizes component logic and styling for specific target frameworks while maintaining a unified codebase for shared business logic.

### Web Development

- [JSX Compilers](https://awesome-repositories.com/f/web-development/jsx-compilers.md) — Parses unified component code into an intermediate representation to generate framework-specific syntax for multiple frontend libraries. ([source](https://mitosis.builder.io/docs/configuration/))
- [Serializer Extensions](https://awesome-repositories.com/f/web-development/compiler-based-framework-support/serializer-extensions.md) — Creates custom serializers that parse component structures into additional languages or framework-specific implementations to expand the range of supported output targets. ([source](https://mitosis.builder.io/docs/))

### Development Tools & Productivity

- [Framework Generators](https://awesome-repositories.com/f/development-tools-productivity/cli-application-generators/implementation-specifications/framework-generators.md) — Maps abstract component structures to native framework syntax by applying unique formatting rules and library-specific patterns for each output.
- [Abstract Syntax Tree Transformers](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-system-extensibility/build-system-extensions/abstract-syntax-tree-transformers.md) — Traverses the component tree to apply specific logic, refactor syntax, and inject framework-specific patterns during the compilation process.