[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-write-components-once-run-everywhere-with-mitosis-a-beautiful-dream-or-reality-i18n-slugs":134,"language-blog-slug-en-write-components-once-run-everywhere-with-mitosis-a-beautiful-dream-or-reality":141},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","write-components-once-run-everywhere-with-mitosis-a-beautiful-dream-or-reality",{"locale":139,"value":140},"nl","schrijf-code-eenmalig-en-gebruik-het-overal-met-mitosis-een-mooie-droom-of-werkelijkheid",{"page":142},{"slug":137,"i18nSlugs":143,"social":146,"title":148,"subtitle":79,"isArchived":151,"headerIllustration":152,"date":157,"authors":158,"introTitle":167,"items":168,"pivots":246,"relatedBlogPosts":247,"tags":248,"onMountedScript":161,"onUnmountedScript":161},[144,145],{"locale":136,"value":137},{"locale":139,"value":140},{"title":147,"description":148,"image":149},"Using Mitosis to build a Design System","“Write components once, run everywhere” with Mitosis; a beautiful dream or reality?",{"url":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726596831-mitosis-social-cover-en.jpg",false,{"url":153,"alt":154,"width":155,"height":156},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726479339-2024-voorhoede-mitosis.svg",null,723,471,"2024-09-16T13:04:31.307+02:00",[159],{"name":160,"lastName":161,"slug":162,"image":163},"Wessel","","wessel",{"url":164,"alt":160,"width":165,"height":166},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,"Mitosis is a tool that transforms JSX components into fully functional components for frameworks such as React, Vue, Angular and many more. It’s an ambitious project that could benefit many developers. But how does it achieve its goal and how production ready is it?",[169,173,184,187,191,196,199,202,206,209,212,216,220,223,226,230,233,235,238,242],{"__typename":170,"id":171,"title":161,"body":172},"TextSectionRecord","Te7LanT9QlybW3xRGlRx_Q","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Developed by\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.builder.io\u002F\">\u003Cspan style=\"font-weight: 400;\">Builder.io\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">, \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002F\">\u003Cspan style=\"font-weight: 400;\">Mitosis\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> is a promising open-source tool. It aims to solve a problem that every \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">design system\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> developer has dreamt of; write code once, run everywhere. It attempts to reach this goal by transforming JSX lite (a static subset of JSX) to an Abstract Syntax Tree (AST). This AST serves as a neutral format which is not related to any specific framework. Mitosis provides compilers for each output target that they support. Think of these compilers as transformative scripts that accept Mitosis ASTs as input and generate code for a specific \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">framework\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> target. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">At the time of writing Mitosis supports the following output targets: \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":174,"id":175,"image":176,"caption":181,"fullWidth":182,"captionPosition":183},"ImageRecord","fbarVNt3Si623WBVHWEoLQ",{"url":177,"alt":178,"width":179,"height":180},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726483457-mitosis-compile-targets.svg","Diagram showing the compile targets of Mitosis",1017,544,"List of all the possible Mitosis compilation targets",true,"bottom",{"__typename":170,"id":185,"title":161,"body":186},"QfQh1zF7SxmCb0ixlNtkNA","\u003Cp>\u003Cspan style=\"font-weight: 400;\">This impressive list is exactly the reason why I decided to explore Mitosis and figure out whether we can use it to improve our design system setups.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":188,"title":189,"body":190},"YFET6rGeSc-21IoVgx_n7A","The Good ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Here at De Voorhoede we have some experience building design systems. One of the biggest challenges in our design system projects is supporting multiple frameworks¹.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Saving time\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Over the last year I've worked on a design system that had to support React, Vue and Angular. These frameworks all have their own syntax and approaches for the same problems. Styling was easy to separate and reuse, but markup and behavior are often so tightly integrated in the framework syntax that changes typically require testing and changing the code in three components (one for each framework). This causes even the smallest changes to quickly become time intensive.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Mitosis strives to eliminate the need for developers to create (and maintain) the same components across different frameworks, which, speaking from experience, would significantly speed up the development of a design system.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Here’s an example of a Mitosis component being compilers to different frameworks:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":192,"id":193,"language":194,"body":195},"CodeBlockRecord","M6AruYxcTbKc_LwibElQRg","javascript","\u002F\u002F HelloWorld.lite.tsx :: a Mitosis component written in JSX lite\nimport type { HelloWorldProps } from '.\u002Fmodel';\n\nexport default function HelloWorld(props: HelloWorldProps) {\n  return (\n    \u003Ch1>{props.greeting} World\u003C\u002Fh1>\n  );\n}",{"__typename":170,"id":197,"title":161,"body":198},"TIC_g431T-KCQK0-R8M8cQ","\u003Cp>Compiles to:\u003C\u002Fp>",{"__typename":192,"id":200,"language":194,"body":201},"cYqKyZOGSfe5dnmNgb2LGg","\u002F\u002F HelloWorld.tsx :: The React output\nimport * as React from \"react\";\nimport type { HelloWorldProps } from \".\u002Fmodel\";\n\nfunction HelloWorld(props: HelloWorldProps) {\n  return \u003Ch1>{props.greeting} World\u003C\u002Fh1>;\n}\n\nexport default HelloWorld;",{"__typename":192,"id":203,"language":204,"body":205},"RwtDUvWvS6SKwVoJfyiLJQ","html","\u002F\u002F HelloWorld.vue :: The Vue ouput\n\u003Ctemplate>\n  \u003Ch1>{{ greeting }} World\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport type { HelloWorldProps } from \".\u002Fmodel\";\n\nconst props = defineProps\u003CHelloWorldProps>();\n\u003C\u002Fscript>",{"__typename":192,"id":207,"language":194,"body":208},"NZ5x3q11RyO96N0p60Q2Pg","\u002F\u002F HelloWorld.js :: The Angular ouput\nimport { NgModule } from \"@angular\u002Fcore\";\nimport { CommonModule } from \"@angular\u002Fcommon\";\n\nimport { Component, Input } from \"@angular\u002Fcore\";\n\n@Component({\n  selector: \"hello-world, HelloWorld\",\n  template: `\n    \u003Ch1>{{greeting}} World\u003C\u002Fh1>\n  `,\n  styles: [\n    `\n      :host {\n        display: contents;\n      }\n    `,\n  ],\n})\nexport default class HelloWorld {\n  @Input() greeting;\n}\n\n@NgModule({\n  declarations: [HelloWorld],\n  imports: [CommonModule],\n  exports: [HelloWorld],\n})\nexport class HelloWorldModule {}",{"__typename":170,"id":210,"title":161,"body":211},"a8T9w2HrRMa1dgNXHCpSVQ","\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Less framework knowledge required\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">If developers only need to create Mitosis components (and thus write JSX lite) — there would be less need for developers to know the ins and outs of the frameworks they support in their design system (although they would need to have knowledge of Mitosis itself). Of course there will always be cases where you need to debug the compiled code, requiring knowledge of the framework's workings, but this would be the exception rather than the rule.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">All in all, these are substantial benefits for both developers and companies, making the task of having a design system a bit less resource intensive.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":213,"title":214,"body":215},"VZBQpcGsTSOH8dHuVe5YHA","Getting into the right mindset","\u003Cp>\u003Cspan style=\"font-weight: 400;\">To start off my first Mitosis project, I figured all I really needed was to read the Mitosis documentation. After all, it is \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">pretty much \u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">the same as writing React code. Right?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Wrong! JSX lite is something that, although a subset of JSX, required quite some getting used to before I started getting results. I thought that writing JSX and swapping React specific concepts for Mitosis concepts would cover the largest part. So I would write a component in JSX, replace all hooks that you normally import from React (useState, useEffect, useRef etc.) with their Mitosis counterparts (useState\u002FuseStore, onUpdate, useRef respectively), but this was not sufficient. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">As it turns out, the interpretation of Mitosis is very strict. Every bit of code that is not either part of your template or one of the Mitosis hooks\u002Flifecycle events will not end up in your end code. This means that for your compiled components to work, you have to follow the rigid rules of Mitosis. This can be very difficult because many of these problems are invisible at the moment of writing the code. This has to do with the IDE interpreting your code as JSX². So your code is valid according to the language server, but when you ask the Mitosis compiler to work its magic, it starts screaming like hell.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">I found this off putting when I started out. The last thing you want to happen after compiling your first component is running into errors before your test app has even booted up. But when you think about it. It isn’t all that much to ask. After all, it very much is its own tool and takes on the task that your framework normally would. With this in mind I tried to be more open minded to its concepts and \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002Fdocs\u002Fgotchas\u002F\">\u003Cspan style=\"font-weight: 400;\">gotchas\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">So learn from my mistakes. Try to not think about it as a tool that uses JSX (lite), rather think of it as a framework which you need to invest some time into to really understand and benefit from. Mitosis provides an \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@builder.io\u002Feslint-plugin-mitosis\">\u003Cspan style=\"font-weight: 400;\">eslint plugin\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> to make this a bit easier.\u003C\u002Fspan>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":217,"title":218,"body":219},"TR7SwbidTLyzREpB0iw8yw","The Bad","\u003Cp>\u003Cspan style=\"font-weight: 400;\">But even after getting in the\u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\"> right\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">mindset,\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> I still ran into problems.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Lack of control\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">As a developer you are used to having fine grained control over most code you ship. With Mitosis this is a bit different. You write the input (Mitosis components), but the compiler generates the code that you will ship. This can be a tough pill to swallow as the Mitosis compilers are not complete and\u002For clearly documented (note that the documentation does not have a complete list of gotchas\u002Fquirks). In my experience — besides the working code, there will be code that I would write differently, is hard to grasp or flat out does not work³. \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Debugging this was difficult. Mitosis is open source, so you can pull up the source-code for the relevant compiler, but debugging compilers is not something I was used to, when writing basic UI components. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Compatibility\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Besides not having much control over what the generated code looks like, you also do not have much control over versioning. This can lead to some pretty substantial problems since you cannot expect all consumers of your design system to always be on the most recent version of their framework.The design system consumers often also use a meta-framework and\u002For 3rd party code which also has to be compatible with the same framework version. \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Mitosis offers some control over the output, for example:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">In Vue, you can specify if you want to use the options or composition API.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">In many frameworks, you can pick which popular solution you want to use for styling, state management etc (e.g. \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FBuilderIO\u002Fmitosis\u002Fblob\u002F5d78497420afc71ff4b343e4cdec32cb82ddff44\u002Fpackages\u002Fcore\u002Fsrc\u002Fgenerators\u002Freact\u002Ftypes.ts#L3\" style=\"font-weight: 400; letter-spacing: 0px;\">in React, you can choose between useState, MobX, Valtio, Solid, Builder and Variables for state management\u003C\u002Fa>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">)\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":192,"id":221,"language":194,"body":222},"bPLTFBvoQAW2w7BFFfrAUQ","\u002F\u002F Example of a mitosis config \nmodule.exports = {\n  files: \"src\u002F**\",\n  targets: ['vue', 'react'],\n  dest: \"..\u002Foutput\",\n  options: {\n    react: {\n      typescript: true,\n      stylesType: 'style-tag',\n    },\n    vue: {\n      typescript: true,\n      api: 'composition',\n    }\n  }\n}\n",{"__typename":170,"id":224,"title":161,"body":225},"W0M-kojATe-8k1_pyRTNcg","\u003Cp>\u003Cspan style=\"font-weight: 400;\">But there is currently no way to specify which framework version you want to be compatible with. Something that you generally would want to be locked down and only change when the team decides to do so.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":227,"title":228,"body":229},"Lt7pgZIlQ0CDNou7moNzbA","Developer Experience","\u003Cp>\u003Cspan style=\"font-weight: 400;\">The above mentioned pain points leave a lot to wish for in the department of developer experience. That might be worth the trade off, but that’s more of a business side vs developer experience discussion.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Debugging\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Testing and debugging your Mitosis code can be a pain in the ass. Mitosis is JSX (lite) and does not run in the browser. The recommended method of debugging is compiling your Mitosis code to let’s say React, then importing the compiled code in a React app to test it. But this is a tedious process as:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\u003C\u002Ful>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">compile steps do not attempt to validate the generated code — meaning that Mitosis will generate React components, but does not check if those files are valid or have syntax errors\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">you do not know if the error is caused by code in Mitosis or React.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">\u003Ccode>console.log\u003C\u002Fcode> statements are removed in the compiler (currently no configuration options are available to persist these)\u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">⁴.\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Example of a Mitosis component with a \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">console.log()\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> statement that is stripped by the compilers:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":192,"id":231,"language":194,"body":232},"NdBy1-G9RQ-b6SHIP4DD7A","\u002F\u002F MyComponent.lite.tsx :: a Mitosis component with a console.log() statement\nimport { useStore } from '@builder.io\u002Fmitosis';\nimport type { MyComponentProps, MyComponentState } from '.\u002Fmodel';\n\nexport default function MyComponent(props: MyComponentProps) {\n  const state = useStore\u003CMyComponentState>({\n    greeting: props.greeting ?? 'Hello',\n  });\n\n  console.log(`I am using the ${props.greeting ? 'value from the prop' : 'default value'} as a greeting`);\n\n  return (\n    \u003Ch1>{state.greeting} World\u003C\u002Fh1>\n  );\n}",{"__typename":170,"id":234,"title":161,"body":198},"UB3BC0whRF6ENRaRqdqSoQ",{"__typename":192,"id":236,"language":194,"body":237},"KTW0DkRLTj-MAAp3aZEGAw","\u002F\u002F MyComponent.tsx :: the React output where the console.log() statement is absent \n\"use client\";\nimport * as React from \"react\";\nimport { useState } from \"react\";\nimport type { MyComponentProps, MyComponentState } from \".\u002Fmodel\";\n\nfunction MyComponent(props: MyComponentProps) {\n  const [greeting, setGreeting] = useState(() => props.greeting ?? \"Hello\");\n\n  return \u003Ch1>{greeting} World\u003C\u002Fh1>;\n}\n\nexport default MyComponent;",{"__typename":170,"id":239,"title":240,"body":241},"f-v5NJG1RjSdbHblUKEcaA","My verdict for now","\u003Cp>\u003Cspan style=\"font-weight: 400;\">And now to answer the question you’ve been asking — does Mitosis deliver on its aspirations?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Personally I would not create a design system with Mitosis as its core yet. With the lack of control over the output, I’d want the compilers to be more feature complete before basing my design system around it. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">But do not let this deter you. Mitosis can very well be used as a tool for developing design systems. For example, if you need to create a component in React, Vue and Angular; I think creating a Mitosis component, compiling it to the respective frameworks and using this output as a starting point for your components also has a lot of value. This way you can get a lot of the boilerplate code out of the way and spend your time patching up and refining the output to your desire. I believe this could potentially still save your developers a lot of time depending on how many frameworks your design system has to support.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">In no way do I mean any disrespect to anyone who has worked on the Mitosis project. As I have mentioned before — the project is very ambitious and has a lot of potential. I am very pleased to see it being developed as an open source tool as I think it is a very unique idea that many people can benefit from. The huge scope makes the task of writing (and maintaining) the compilers very resource intensive; the fact that Mitosis works as well as it currently does is an accomplishment. I hope to see it grow further in the coming years and hope that the readers of this blog post are not deterred from trying Mitosis themselves. If you are interested in contributing, I know for a fact they value the community a lot and contributing to the project will be appreciated greatly besides being a learning experience.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Besides me not being ready to adapt Mitosis as an integral part of a design system yet, there are companies already using Mitosis in the wild. One example I came across is \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdb-ui\u002Fmono\">\u003Cspan style=\"font-weight: 400;\">DB UI Mono\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (the Deutsche Bahn design system). It seems to work for them, so take my conclusion with a grain of salt.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":243,"title":244,"body":245},"Yny-65KLTMOdotJkS3bjpw","TL;DR","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Mitosis is an open-source tool that aims to transform JSX components into functional components for multiple frameworks like React, Vue, and Angular. It offers benefits such as time savings and reduced need for framework-specific knowledge. However, it comes with challenges including a steep learning curve, strict coding rules, debugging difficulties, and lack of control over output. While promising, Mitosis isn't a perfect solution for cross-framework development yet and requires careful consideration before implementation in production environments.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cem>\u003Cspan style=\"font-weight: 400;\">¹ Web components have been trying to fill this void by providing a standard component model for the web allowing for encapsulation and interoperability, but come with their own \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002Fdocs\u002Foverview\u002F#challenges-with-web-components\">\u003Cspan style=\"font-weight: 400;\">limitations\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cem>\u003Cspan style=\"font-weight: 400;\">² Mitosis uses a *.lite.jsx naming convention. But since Mitosis isn’t that popular yet, my IDE validates the code as React (read JSX) code. You can \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002Fdocs\u002Fconfiguration\u002F#typescript-configuration\">\u003Cspan style=\"font-weight: 400;\">configure TS to use Mitosis’ JSX types\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">, which gets rid of some of these problems.\u003C\u002Fspan>\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cem>\u003Cspan style=\"font-weight: 400;\">³ You can alter this behavior by using the powerful \u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002Fdocs\u002Fcustomizability\u002F\">Mitosis plugins\u003C\u002Fa>, but this definitely requires a lot more time and effort seeing as you are basically extending the compiler with your own logic.\u003C\u002Fspan>\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cem>\u003Cspan style=\"font-weight: 400;\">⁴ Sami Jaber from the Mitosis team rightfully noted that you can use the \u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002Fdocs\u002Fhooks\u002F#oninit\">onInit\u003C\u002Fa> hook to achieve the same logging behavior in Mitosis. But that still leaves us with the annoying Mitosis ‘gotcha’ of no code written in the render body of a component being persisted (since this is a valid use case for defining constants\u002Fmagic-numbers and so forth). \u003C\u002Fspan>\u003C\u002Fem>\u003C\u002Fp>",[],[],[249],{"id":250,"title":251,"slug":252,"blogPosts":253},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[254,265,276],{"slug":255,"title":256,"date":257,"authors":258},"accessibility-in-design-systems","Accessibility in Design Systems","2025-06-17T14:15:56.000+02:00",[259],{"name":260,"image":261},"Sjoerd",{"url":262,"alt":154,"width":263,"height":264},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,{"slug":266,"title":267,"date":268,"authors":269},"design-system-from-scratch-from-the-shelf","Design System: from scratch or from the shelf?","2024-11-19T13:16:02.759+01:00",[270],{"name":271,"image":272},"Jasper",{"url":273,"alt":154,"width":274,"height":275},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,{"slug":277,"title":278,"date":279,"authors":280},"how-to-select-framework-design-system-components","How to select a framework for design system components","2022-12-12T01:00:00.000+01:00",[281],{"name":271,"image":282},{"url":273,"alt":154,"width":274,"height":275},1776256139070]