BuilderIO/mitosis
Mitosis
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.
Features
- Component Compilers - Transforms unified JSX-based source code into native syntax for multiple target frameworks including React, Vue, Angular, and Svelte.
- Multiplatform UI Libraries - Maintains a single source of truth for design systems while outputting production-ready code for diverse frontend environments.
- Component Compilers - Transforms a single JSX-based source into native components for multiple frontend frameworks and libraries simultaneously.
- Cross-Framework Component Generators - Compiles unified JSX-based source code into native components for React, Vue, Angular, and Svelte simultaneously.
- JSX Compilers - Parses unified component code into an intermediate representation to generate framework-specific syntax for multiple frontend libraries.
- Intermediate Representations - Parses source code into a language-agnostic tree structure that serves as the single source of truth for all downstream framework generators.
- Design Token Synchronization - Imports design tokens and structures from external tools to automatically generate consistent, production-ready UI components.
- Design-to-Code Generators - Imports design assets and tokens from visual tools to automatically create consistent, production-ready component code.
- Framework Generators - Maps abstract component structures to native framework syntax by applying unique formatting rules and library-specific patterns for each output.
- Multi-Target Compilers - Executes specific code or returns different values based on the target framework being generated to handle platform-specific requirements.
- Abstract Syntax Tree Transformers - Traverses the component tree to apply specific logic, refactor syntax, and inject framework-specific patterns during the compilation process.
- Component Lifecycle Hooks - Maps unified component lifecycle events to the corresponding native methods of each target framework to ensure consistent behavior across platforms.
- Reactive State Management - Manages component data using hooks that trigger automatic UI updates when values change, supporting both object-based stores and individual state variables.
- Plugin Architectures - Allows developers to extend the compiler by injecting custom logic that converts the intermediate representation into new target languages or frameworks.
- Component Adapters - Customizes component logic and styling for specific target frameworks while maintaining a unified codebase for shared business logic.
- Serializer Extensions - Creates custom serializers that parse component structures into additional languages or framework-specific implementations to expand the range of supported output targets.
