Creating Reusable Components with Mitosis Builder.io

Modern web development faces a significant challenge: framework fragmentation. Teams often need to support multiple JavaScript frameworks simultaneously, whether due to client requirements, legacy system integration, or organizational technology standards. Historically, this meant maintaining separate codebases for each framework, duplicating effort and introducing inconsistencies. Mitosis Builder.io changes this paradigm by enabling developers to write components once using a unified syntax and compile them to React, Vue, Angular, Svelte, Solid, Qwik, and Web Components. This approach enables true code reuse across frameworks while maintaining optimal performance and integration quality.

For organizations investing in comprehensive web development services, Mitosis offers a strategic advantage by reducing the technical debt associated with multi-framework maintenance.

Introduction to Mitosis

Mitosis is a compile-time framework that transforms a single component codebase into multiple framework-specific outputs. Unlike runtime adapters or polyfills that add overhead, Mitosis produces idiomatic code that looks hand-written for each target framework. This approach ensures optimal performance and seamless integration with existing codebases. The framework takes a "write once, run everywhere" philosophy to component development, eliminating the need to maintain separate implementations for each technology stack your organization supports.

Supported Frameworks

Mitosis supports an impressive range of JavaScript frameworks for maximum flexibility in enterprise and agency environments:

• React & React Native - For Meta ecosystem projects and React development services
• Vue 2 & Vue 3 - For progressive framework adoption in Vue.js projects
• Angular - For enterprise and large-scale applications requiring robust architecture
• Svelte - For performance-critical applications where bundle size matters
• Solid - For fine-grained reactivity enthusiasts seeking optimal performance
• Qwik - For resumable application architectures that minimize JavaScript execution
• Web Components - For framework-agnostic distribution across diverse technology stacks

Each output follows framework conventions, ensuring your components integrate naturally with existing codebases and leverage framework-specific optimizations.

Organizations building scalable design systems benefit significantly from Mitosis's ability to maintain visual and behavioral consistency across all framework outputs.

Setting Up Your Development Environment

Initializing a Mitosis project requires establishing the proper tooling chain that supports TypeScript, JSX, and the Mitosis compiler itself. The setup process involves installing core dependencies, configuring TypeScript for JSX transformation, and establishing a project structure optimized for multi-target compilation. For teams already using TypeScript in their web development workflow, the transition to Mitosis is straightforward and requires minimal additional configuration.

Beyond initial setup, Mitosis integrates seamlessly with CI/CD pipelines that automate compilation and testing across multiple framework targets, ensuring consistent quality in your component library releases.

TypeScript Configuration

Proper TypeScript configuration is essential for Mitosis projects to enable JSX transformation and type-safe component development. The configuration below establishes the foundation for compile-time component generation across all supported frameworks.

{
 "compilerOptions": {
 "jsx": "react-jsx",
 "jsxImportSource": "@builder.io/mitosis",
 "module": "ESNext",
 "moduleResolution": "node",
 "target": "ESNext",
 "strict": true,
 "esModuleInterop": true,
 "skipLibCheck": true,
 "declaration": true
 },
 "include": ["src/**/*"]
}

This configuration enables the JSX transformation pipeline that Mitosis uses to generate framework-specific output while maintaining full TypeScript type safety for your component definitions.

Component Architecture and Syntax

Mitosis components utilize a TypeScript interface-based approach for defining props, state, and component behavior. The syntax feels familiar to React developers but includes annotations that enable framework-agnostic compilation. This unified approach means developers learn one API pattern that applies consistently across all target frameworks, reducing context-switching overhead and improving team productivity.

import { component$, useSignal, PropTypes } from '@builder.io/mitosis';

interface ButtonProps {
 label: string;
 variant?: 'primary' | 'secondary' | 'danger';
 size?: 'small' | 'medium' | 'large';
 disabled?: boolean;
 onClick?: () => void;
}

export default component$((props: ButtonProps) => {
 return (
 <button
 class={`btn btn-${props.variant || 'primary'} btn-${props.size || 'medium'}`}
 disabled={props.disabled}
 onClick={props.onClick}
 >
 {props.label}
 </button>
 );
});

The component$ wrapper is the entry point for Mitosis components, marking the function for compilation to all supported frameworks. Props are defined using standard TypeScript interfaces, ensuring type safety while remaining framework-agnostic.

For teams building reusable UI component libraries, this unified approach significantly reduces the learning curve and maintenance burden across the organization.

State Management Patterns

State management in Mitosis leverages signals as the primary primitive for reactivity. Signals represent observable values that automatically trigger updates in the component tree when modified. This approach provides a unified state management experience that compiles efficiently across all target frameworks, leveraging each framework's optimal reactivity system.

import { component$, useSignal, useComputed } from '@builder.io/mitosis';

export default component$(() => {
 const count = useSignal(0);
 const doubleCount = useComputed(() => count.value * 2);

 return (
 <div class="counter">
 <p>Count: {count.value}</p>
 <p>Double: {doubleCount.value}</p>
 <button onClick={() => count.value++}>
 Increment
 </button>
 </div>
 );
});

The useSignal hook creates reactive state that works identically across React, Vue, Svelte, and other framework outputs. Computed values use useComputed for derived state that updates automatically when dependencies change.

When building complex state management solutions, Mitosis's signal-based approach provides consistency across all platform targets.

Styling Approaches

Styling in Mitosis supports multiple approaches, from CSS modules to utility-first frameworks like Tailwind CSS. Tailwind CSS integration represents a popular choice for Mitosis projects, as utility classes translate directly to className strings that all frameworks accept. This consistency makes Tailwind an excellent choice for design systems built with Mitosis, particularly when working with component libraries that need to maintain visual consistency across framework outputs.

import { component$ } from '@builder.io/mitosis';

export default component$((props) => {
 return (
 <button 
 class="btn btn-primary px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors"
 >
 {props.children}
 </button>
 );
});

For teams using CSS-in-JS solutions, Mitosis provides abstractions that compile to framework-specific styling APIs, ensuring your styled components behave identically regardless of the output target.

Design System Implementation

Building design systems with Mitosis capitalizes on the framework's core strength: enabling a single source of truth for UI components that distribute across diverse technology stacks. Design systems built with Mitosis typically organize around three layers that work together to create cohesive, consistent experiences:

1. Design Tokens - Colors, typography, spacing, and other foundational values that define your visual language
2. Primitive Components - Buttons, inputs, cards, and basic UI elements that serve as building blocks
3. Composite Components - Form layouts, navigation patterns, and complete UI assemblies that combine primitives

This layered approach ensures consistency across all framework outputs while allowing framework-specific optimizations at each level. For organizations maintaining multiple technology stacks, Mitosis design systems dramatically reduce the effort required to keep visual and behavioral consistency across platforms.

Implementing such systems aligns with enterprise web development best practices that prioritize long-term maintainability and team productivity.

Performance Optimization

Mitosis compilation produces optimized output by leveraging framework-specific best practices for each target. React output uses appropriate hooks patterns and memoization, Vue output leverages Vue 3's composition API, and Angular output integrates with Angular's change detection strategies. The compiler applies these optimizations automatically, ensuring compiled components perform as well as hand-written framework code.

For bundle size optimization, Mitosis allows selective compilation to only the frameworks you need, reducing output size for projects that don't require full multi-framework support. Tree shaking works correctly across all outputs since Mitosis generates standard ES modules that bundlers can analyze and optimize effectively.

Organizations focused on performance optimization appreciate that Mitosis produces production-ready code without the runtime overhead often associated with cross-framework solutions.

Testing Strategies

Testing Mitosis components requires approaches that work across framework outputs. A comprehensive testing strategy combines multiple levels of validation to ensure your components work correctly everywhere:

1. Unit Testing - Testing Mitosis source directly with Jest or Vitest ensures your component logic is correct before compilation
2. Integration Testing - Testing compiled outputs in their target frameworks validates that the transformation produced valid code
3. Snapshot Testing - Capturing and comparing component output structure helps detect unintended changes
4. End-to-End Testing - Validating complete user flows with Cypress or Playwright ensures real-world functionality

For teams practicing test-driven development, Mitosis components can be tested using familiar patterns, with the compiled outputs automatically gaining the benefits of framework-specific testing utilities.

Deployment and Distribution

NPM package distribution for Mitosis components requires configuration that accounts for multiple framework outputs. The package.json specifies entry points for each framework through conditional exports, allowing bundlers to automatically select the appropriate version for each project.

{
 "name": "@my-org/design-system",
 "version": "1.0.0",
 "main": "./dist/react/index.js",
 "module": "./dist/react/index.mjs",
 "exports": {
 ".": {
 "react": "./dist/react/index.mjs",
 "vue": "./dist/vue/index.mjs",
 "default": "./dist/react/index.mjs"
 }
 },
 "peerDependencies": {
 "react": ">=18.0.0",
 "vue": ">=3.0.0"
 }
}

This configuration enables consumers to install your package normally, and their bundler automatically selects the framework-specific build appropriate for their project, simplifying adoption across diverse technology environments.

For organizations distributing components across multiple teams or clients, our DevOps consulting services can help establish automated publishing workflows for your Mitosis component library.

Comparison with Alternatives

Mitosis occupies a unique position in the cross-framework landscape, differentiating from alternatives through its compile-time approach and framework-specific output philosophy. Understanding how Mitosis compares to other approaches helps teams make informed decisions about component architecture.

Web Components provide browser-native component distribution but require JavaScript frameworks to accept their non-reactive programming model. While Web Components work everywhere, they often require wrapper libraries to integrate cleanly with modern frameworks, adding complexity and potential performance overhead.

Custom multi-framework codebases without compilation tools represent the baseline alternative, where teams maintain separate implementations for each target framework. This approach offers maximum flexibility but requires significantly more effort to maintain consistency across implementations.

For teams supporting two or more frameworks, Mitosis's compilation approach typically reduces total effort while improving consistency. The initial setup investment pays dividends over time as component changes need only be made once rather than propagated across multiple codebases.

When evaluating technology options for enterprise web applications, the reduced maintenance burden of Mitosis becomes a significant factor in total cost of ownership.

Best Practices and Common Patterns

Successful Mitosis adoption requires attention to patterns that work well across all framework outputs. Following these practices ensures your component library remains maintainable and produces high-quality outputs:

• Use standard JavaScript types rather than framework-specific types in your TypeScript interfaces
• Keep props focused on data, not implementation details, allowing each framework to optimize rendering
• Provide sensible defaults for optional props to reduce boilerplate in consuming applications
• Maintain consistency across your component library in naming conventions and API patterns
• Test against each target framework during development to ensure proper compilation and identify issues early

Accessibility considerations apply identically across frameworks, with Mitosis preserving semantic HTML and ARIA attributes in component output. This means accessibility testing conducted on Mitosis source produces results valid for all framework outputs.

By following these practices and leveraging professional web development services, organizations can build component libraries that scale across their entire technology ecosystem.

Sources

1. Mitosis: A Quick Guide - Official Builder.io documentation covering Mitosis architecture, supported frameworks, and compile-time component approach
2. Get Started with Mitosis - Official tutorial covering project setup, TypeScript configuration, and component development basics
3. Creating Reusable Components with Mitosis - Comprehensive developer guide with practical examples for cross-framework component development