Getting Started with Mitosis: Creating a Cross-Framework Design System

In the realm of web development, consistency and efficiency are paramount. Design systems, with their standardized components and guidelines, play a pivotal role in achieving these goals. Mitosis, a powerful tool for building cross-framework design systems, takes this concept to the next level, empowering developers to create reusable components that can be seamlessly integrated across diverse frameworks like React, Vue, and Svelte.

This article will guide you through the process of getting started with Mitosis, exploring its core functionalities, key concepts, and providing practical examples to illustrate its application.

What is Mitosis?

Mitosis is an open-source framework that enables the creation of cross-framework UI components. It allows you to define a single source of truth for your components, which can then be seamlessly rendered across multiple front-end frameworks. This approach significantly reduces code duplication and promotes consistency throughout your design system.

The diagram above illustrates the core of Mitosis. You write your component once in a specialized syntax that supports features from various frameworks. Mitosis then translates this code into the native syntax of your target framework. This way, you can develop components for React, Vue, Svelte, or even vanilla JavaScript, all from a single source file.

Key Benefits of Using Mitosis

• Cross-Framework Compatibility: Build components that work seamlessly across multiple front-end frameworks, eliminating code duplication and ensuring consistent design.
• Centralized Development: Maintain a single source of truth for your components, making updates and changes easier to manage.
• Increased Efficiency: Reduce development time by writing code once and deploying it across multiple applications.
• Improved Code Quality: Enforce consistency and best practices across your design system, leading to cleaner and more maintainable code.
• Enhanced Collaboration: Teams working on different frameworks can easily share and reuse components, facilitating collaboration and streamlining development workflows.

  Getting Started with Mitosis

  Let's delve into the practical aspects of using Mitosis.

  1. Installation

npm install mitosis -g

This command installs the Mitosis CLI globally, making it accessible from your terminal.

2. Creating a New Project

Use the following command to initiate a new Mitosis project:

mitosis create my-design-system

This will create a new directory named my-design-system containing the necessary files for your project.

3. Building Your First Component

Navigate to the newly created directory and open the src/components/Button.mitosis.js file. This file will contain the basic structure of your first component, a button.

import { h } from 'preact';

export default function Button({ children, ...props }) {
  return (
<button {...props}="">
 {children}
</button>
);
}

This code snippet defines a simple button component using preact's h function, which serves as the core rendering mechanism in Mitosis. The children prop allows passing content to the button, while ...props facilitates adding additional attributes like className or style.

4. Rendering in Different Frameworks

Now, let's see how this component can be rendered in various frameworks:

React:

import { render } from 'react-dom';
import { ReactRenderer } from '@mitosis-js/react';

// Render the button component
render(
<reactrenderer {...button}="">
</reactrenderer>
, document.getElementById('root'));

Vue:

import { createApp } from 'vue';
import { VueRenderer } from '@mitosis-js/vue';

const app = createApp({});
app.use(VueRenderer);

// Mount the button component
app.mount('#app');

Svelte:

import { render } from 'svelte';
import { SvelteRenderer } from '@mitosis-js/svelte';

const app = new SvelteRenderer({
  target: document.getElementById('app'),
  component: Button,
});

// Render the button component
render(app);

5. Using State and Props

Mitosis components can easily manage state and handle props. The following example demonstrates how to create a button component that toggles its state:

import { h, useState } from 'preact';

export default function ToggleButton({ initialValue }) {
  const [isOn, setIsOn] = useState(initialValue || false);

  return (
<button =="" onclick="{()">
 setIsOn(!isOn)}&gt;
      {isOn ? 'On' : 'Off'}
</button>
);
}

In this code, we use the useState hook to manage the isOn state. Clicking the button toggles the state, changing the text displayed.

6. Adding Styles

Mitosis allows you to style your components using CSS or CSS-in-JS solutions. For this example, we'll use a CSS module:

import { h, useState } from 'preact';
import styles from './ToggleButton.module.css';

export default function ToggleButton({ initialValue }) {
  const [isOn, setIsOn] = useState(initialValue || false);

  return (
<button =="" classname="{styles.button}" onclick="{()">
 setIsOn(!isOn)}&gt;
      {isOn ? 'On' : 'Off'}
</button>
);
}

The styles object imports the CSS module, enabling us to use classes defined in the ToggleButton.module.css file to style the button.

7. Using Other Libraries

Mitosis supports the use of popular libraries like React hooks, Vue directives, and Svelte actions. This allows you to leverage the power of these libraries while still maintaining a single component definition.

Advanced Features and Techniques

• Custom Renderers: Mitosis offers the flexibility to create custom renderers for frameworks not yet supported by default.
• TypeScript Integration: Strong typing can be enforced using TypeScript, ensuring type safety across your design system.
• Component Composition: Build complex components by combining smaller, reusable components, promoting modularity and reusability.
• Component Libraries: Leverage existing component libraries like Material UI, Bootstrap, or Tailwind CSS within your Mitosis project.
• Testing: Thoroughly test your components to ensure their functionality and consistency across frameworks.

  Conclusion

  Mitosis empowers developers to build cross-framework design systems, significantly streamlining the development process, promoting code consistency, and enabling seamless integration across various front-end frameworks. By embracing Mitosis, you can create reusable components that enhance developer productivity, foster team collaboration, and elevate the overall quality of your design systems.

  Remember to explore the official Mitosis documentation for more in-depth guidance and examples. Experiment with different features, customize your workflows, and leverage the full potential of this powerful tool to create robust and scalable design systems.