BuilderIO/mitosis

어떤 프로젝트인가요?

핵심 기능

• 01하나의 컴포넌트 소스를 React, Vue, Angular, Svelte, Solid, Alpine, Qwik용으로 컴파일합니다.
• 02JSX와 유사한 작성 형식을 사용합니다.
• 03Figma와 연동해 디자인 시스템 컴포넌트를 코드로 동기화합니다.
• 04웹 컴포넌트 대신 각 프레임워크의 네이티브 코드를 생성합니다.
• 05온라인 플레이그라운드와 시작을 돕는 도구를 제공합니다.

활용 사례

• 서로 다른 프레임워크를 사용하는 팀이 함께 쓰는 디자인 시스템을 유지 관리합니다.
• 여러 프레임워크용 빌드를 포함한 컴포넌트 라이브러리를 npm에 배포합니다.
• Figma 디자인에서 여러 프런트엔드 스택용 컴포넌트 코드를 생성합니다.

빠른 시작

1. 1

   create 명령어로 새 Mitosis 프로젝트를 만드세요

   npm create @builder.io/mitosis@latest
2. 2

   새 프로젝트에서 생성된 README를 읽고 컴포넌트를 빌드하고 테스트하는 방법을 확인하세요

사용 전 알아둘 점

• !Mitosis는 컴파일러이므로 프레임워크별 요구 사항에 맞게 생성된 코드를 수동으로 수정해야 할 수 있습니다.

토픽

자주 묻는 질문

mitosis은(는) 무엇인가요?

JSX와 유사한 문법으로 UI 컴포넌트를 한 번 작성하고 React, Vue, Angular, Svelte, Solid, Qwik 등으로 컴파일합니다. Mitosis는 하나의 코드베이스에서 UI 컴포넌트를 작성하고 여러 프레임워크의 네이티브 코드로 생성하는 컴파일러입니다. 컴포넌트를 JSX와 유사한 형식으로 작성하면 React, Vue, Angular, Svelte, Solid, Alpine, Qwik 등의 타깃으로 컴파일할 수 있어, 팀은 서로 다른 구현을 따로 관리하는 대신 단일 소스 오브 트루스를 유지할 수 있습니다.

mitosis은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

mitosis은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

mitosis은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. mitosis의 마지막 커밋은 2026년 9월 29일입니다.

mitosis은(는) 어디에 사용할 수 있나요?

서로 다른 프레임워크를 사용하는 팀이 함께 쓰는 디자인 시스템을 유지 관리합니다. 여러 프레임워크용 빌드를 포함한 컴포넌트 라이브러리를 npm에 배포합니다. Figma 디자인에서 여러 프런트엔드 스택용 컴포넌트 코드를 생성합니다.

mitosis는 어떻게 설치하나요?

create 명령어로 새 Mitosis 프로젝트를 만드세요: npm create @builder.io/mitosis@latest 새 프로젝트에서 생성된 README를 읽고 컴포넌트를 빌드하고 테스트하는 방법을 확인하세요

mitosis은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/BuilderIO/mitosis