CINXE.COM

<!DOCTYPE html><html lang="en-us" q:render="ssr" q:route="/" q:container="paused" q:version="1.5.3" q:base="/build/" q:locale="" q:manifest-hash="5pessu"><head q:head><meta charSet="utf-8" q:head><link rel="manifest" href="/manifest.json" q:head><script data-insights="22gsbhtjcyv" q:key="6Q_0" q:id="3" q:head>(function zn2(o, e, s, n2, i, t2) { var le4, ue4; const r = ((le4 = e.querySelector("[q\\:version]")) == null ? void 0 : le4.getAttribute("q:version")) || "unknown", a80 = ((ue4 = e.querySelector("[q\\:manifest-hash]")) == null ? void 0 : ue4.getAttribute("q:manifest-hash")) || "dev", d = [], c = /* @__PURE__ */ new Set(); let _3 = 0, q3 = 0; o.qSymbolTracker = { symbols: d, publicApiKey: i }; let E2, Q2 = performance.now(); const Y3 = e.querySelector("[q\\:route]"); Y3 && new MutationObserver((x2) => { x2.find((X4) => X4.attributeName === "q:route") && (Q2 = performance.now()); }).observe(Y3, { attributes: true }); function T() { if (E2 = null, d.length > _3) { const S2 = { qVersion: r, publicApiKey: i, manifestHash: a80, previousSymbol: _3 == 0 ? null : d[_3 - 1].symbol, symbols: d.slice(_3) }; n2.sendBeacon(t2.replace("${publicApiKey}", i), JSON.stringify(S2)), _3 = d.length; } } __name(T, "T"); function ze4() { E2 != null && clearTimeout(E2), E2 = setTimeout(T, 1e3); } __name(ze4, "ze"); e.addEventListener("visibilitychange", () => e.visibilityState === "hidden" && T()), e.addEventListener("qsymbol", (S2) => { const x2 = S2, G3 = x2.detail, X4 = G3.reqTime, _e3 = x2.timeStamp, ne3 = G3.symbol; if (!c.has(ne3)) { c.add(ne3); const Ee4 = (Y3 == null ? void 0 : Y3.getAttribute("q:route")) || "/"; d.push({ symbol: ne3, route: Ee4, delay: Math.round(0 - q3 + X4), latency: Math.round(_e3 - X4), timeline: Math.round(0 - Q2 + X4), interaction: !!G3.element }), q3 = _e3, ze4(); } }), o.addEventListener("error", (S2) => { const x2 = S2.error; if (!(x2 && typeof x2 == "object")) return; const G3 = { url: s.toString(), manifestHash: a80, timestamp: (/* @__PURE__ */ new Date()).getTime(), source: S2.filename, line: S2.lineno, column: S2.colno, message: S2.message, error: "message" in x2 ? x2.message : String(x2), stack: "stack" in x2 && x2.stack || "" }; n2.sendBeacon(t2.replace("${publicApiKey}", i) + "error/", JSON.stringify(G3)); }); })(window, document, location, navigator, "22gsbhtjcyv", "https://qwik-insights.builder.io/api/v1/${publicApiKey}/post/" )</script><title q:head>Mitosis - Write components once, run everywhere.</title><link href="https://mitosis.builder.io/" rel="canonical" q:head><link href="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F199eed663ae845baa8a6ea4136a40871" q:head><meta property="og:image" content="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F55995a55a8e9464b9f26cb206e8eff8f" q:head><meta property="og:image:width" content="1200" q:head><meta property="og:image:height" content="630" q:head><meta property="og:image:alt" content="Mitosis - write components once, run everywhere" q:head><meta property="og:type" content="website" q:head><meta property="og:locale" content="en_US" q:head><meta name="twitter:card" content="summary_large_image" q:head><meta name="twitter:site" content="@builderio" q:head><meta name="twitter:creator" content="@builderio" q:head><meta name="viewport" content="width=device-width, initial-scale=1.0" q:head><link rel="icon" type="image/svg+xml" href="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F5a86bcaa3a784a6b9f64f13d4a3016f5" q:head><meta name="description" content="Build multi-framework design systems with confidence. Compiles to React, Angular, Vue, Svelte, and more." q:head><script type="text/partytown" async src="https://www.googletagmanager.com/gtag/js?id=G-P6ZRY0ZT14" q:head></script><script type="text/partytown" q:head> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-P6ZRY0ZT14'); </script><script q:key="1Z_0" q:head>((i,a,r,s)=>{r=e=>{const t=document.querySelector("[q\\:base]");t&&a.active&&a.active.postMessage({type:"qprefetch",base:t.getAttribute("q:base"),...e})},document.addEventListener("qprefetch",e=>{const t=e.detail;a?r(t):i.push(t)}),navigator.serviceWorker.register("/service-worker.js").then(e=>{s=()=>{a=e,i.forEach(r),r({bundles:i})},e.installing?e.installing.addEventListener("statechange",t=>{t.target.state=="activated"&&s()}):e.active&&s()}).catch(e=>console.error(e))})([])</script><script q:key="xX_0" q:head>!(function(w,p,f,c){if(!window.crossOriginIsolated && !navigator.serviceWorker) return;c=w[p]=w[p]||{};c[f]=(c[f]||[]).concat(["dataLayer.push"])})(window,'partytown','forward');/* Partytown 0.8.2 - MIT builder.io */ !function(t,e,n,i,o,r,a,s,d,c,l,p){function u(){p||(p=1,"/"==(a=(r.lib||"/~partytown/")+(r.debug?"debug/":""))[0]&&(d=e.querySelectorAll('script[type="text/partytown"]'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(s=setTimeout(f,1e4),e.addEventListener("pt0",w),o?h(1):n.serviceWorker?n.serviceWorker.register(a+(r.swPath||"partytown-sw.js"),{scope:a}).then((function(t){t.active?h():t.installing&&t.installing.addEventListener("statechange",(function(t){"activated"==t.target.state&&h()}))}),console.error):f())))}function h(t){c=e.createElement(t?"script":"iframe"),t||(c.style.display="block",c.style.width="0",c.style.height="0",c.style.border="0",c.style.visibility="hidden",c.setAttribute("aria-hidden",!0)),c.src=a+"partytown-"+(t?"atomics.js?v=0.8.2":"sandbox-sw.html?"+Date.now()),e.querySelector(r.sandboxParent||"body").appendChild(c)}function f(n,o){for(w(),i==t&&(r.forward||[]).map((function(e){delete t[e.split(".")[0]]})),n=0;n<d.length;n++)(o=e.createElement("script")).innerHTML=d[n].innerHTML,o.nonce=r.nonce,e.head.appendChild(o);c&&c.parentNode.removeChild(c)}function w(){clearTimeout(s)}r=t.partytown||{},i==t&&(r.forward||[]).map((function(e){l=t,e.split(".").map((function(e,n,i){l=l[i[n]]=n+1<i.length?"push"==i[n+1]?[]:l[i[n]]||{}:function(){(t._ptf=t._ptf||[]).push(i,arguments)}}))})),"complete"==e.readyState?u():(t.addEventListener("DOMContentLoaded",u),t.addEventListener("load",u))}(window,document,navigator,top,window.crossOriginIsolated);</script><link rel="preload" href="/build/q-e632fa86.ttf" as="font" type="font/ttf" crossorigin><link rel="stylesheet" href="/build/q-638b28ed.css"><style q:style="lcydw1-0" hidden>:root{view-transition-name:none}</style></head><body lang="en"><div class="flex flex-col min-h-[80vh]"><div class="bg-primary-dark text-primary-light text-center font-medium px-3 py-3 max-md:py-2.5 rounded text-sm max-md:text-xs transition-all max-h-[50px]">Welcome to our new site! Please <a href="https://docs.google.com/forms/d/e/1FAIpQLSc6jOAOPMRHviiXv4Pkk28fmdFhcX-IprhHvKCIBhjuZKmgiA/viewform?usp=pp_url&entry.1953883676=https%3A%2F%2Fmitosis-9uh.pages.dev%2F" target="_blank" class="underline">share feedback</a></div><header class="text-white sticky top-0 z-50 border-y border-primary border-opacity-50 bg-purple-990 bg-opacity-80 backdrop-blur backdrop-saturate-150"><div class="p-6 max-md:p-3 flex justify-between items-center transition-all mx-auto container"><a q:link href="/" title="qwik" class="flex items-center" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" q:key="AD_1" q:id="9"><img alt="Mitosis logo" width="160" height="80" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F0fdb9aabd10f4205b3b3b56d7b950239" class="object-contain max-md:max-w-[110px]"></a><ul class="flex space-x-8 max-md:space-x-6 max-sm:space-x-4 font-medium items-center"><li><div id="searchbar" on:qvisible="q-8876a5d7.js#_hW[0]" q:key="IN_0" q:id="b"><button type="button" aria-label="Search" class="docsearch-btn"><span class="docsearch-btn-icon-container"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="docsearch-modal-btn-icon"><path fill="currentColor" d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 7-7a7 7 0 0 1-7 7Z"></path></svg></span><span class="docsearch-btn-placeholder"> Search</span><span class="docsearch-btn-keys"><kbd class="docsearch-btn-key">⌘</kbd><kbd class="docsearch-btn-key">K</kbd></span></button></div></li><li class="flex gap-4 items-center"><a aria-label="GitHub logo" target="_blank" href="https://github.com/BuilderIO/mitosis" class="hover:text-primary-light text-xl" q:key="AD_1"><svg data-qwikest-icon fill="none" height="1em" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" q:key="LD_0"><path d="M0 0h24v24H0z" fill="none" stroke="none"></path><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg></a><a q:link aria-label="Figma logo" href="/docs/figma/" data-prefetch class="hover:text-primary-light text-xl max-sm:hidden" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" on:mouseover="q-ef5de125.js#s_Osdg8FnYTw4" on:focus="q-ef5de125.js#s_Osdg8FnYTw4" on:qvisible="q-ef5de125.js#s_Osdg8FnYTw4" q:key="AD_1" q:id="e"><svg data-qwikest-icon fill="none" height="1em" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-figma" q:key="NM_0"><path d="M0 0h24v24H0z" fill="none" stroke="none"></path><path d="M15 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path d="M6 3m0 3a3 3 0 0 1 3 -3h6a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-6a3 3 0 0 1 -3 -3z"></path><path d="M9 9a3 3 0 0 0 0 6h3m-3 0a3 3 0 1 0 3 3v-15"></path></svg></a><a aria-label="Discord logo" target="_blank" href="https://discord.gg/yxjk5vn6pn" class="hover:text-primary-light text-xl max-sm:hidden" q:key="AD_1"><svg data-qwikest-icon fill="none" height="1em" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-discord" q:key="io_0"><path d="M0 0h24v24H0z" fill="none" stroke="none"></path><path d="M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3"></path><path d="M7 16.5c3.5 1 6.5 1 10 0"></path></svg></a></li><li><a q:link href="/docs/" data-prefetch class="hover:text-primary-light" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" on:mouseover="q-ef5de125.js#s_Osdg8FnYTw4" on:focus="q-ef5de125.js#s_Osdg8FnYTw4" on:qvisible="q-ef5de125.js#s_Osdg8FnYTw4" q:key="AD_1" q:id="h">Docs</a></li><li><a q:link href="/playground/" data-prefetch class="hover:text-primary-light" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" on:mouseover="q-ef5de125.js#s_Osdg8FnYTw4" on:focus="q-ef5de125.js#s_Osdg8FnYTw4" on:qvisible="q-ef5de125.js#s_Osdg8FnYTw4" q:key="AD_1" q:id="j">Playground</a></li><li class="max-lg:hidden"><a q:link href="/docs/quickstart/" data-prefetch class="bg-primary rounded hover:bg-primary-light px-4 py-3 text-black" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" on:mouseover="q-ef5de125.js#s_Osdg8FnYTw4" on:focus="q-ef5de125.js#s_Osdg8FnYTw4" on:qvisible="q-ef5de125.js#s_Osdg8FnYTw4" q:key="AD_1" q:id="l">Get Started</a></li></ul></div></header><main class="grow flex flex-col"><style q:style="72bq6r-0" hidden> .wrapper.⭐️72bq6r-0 { background-image: url('https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ff234065eeddc488f8189c4fab8e03bde'); background-size: 15px; } </style><div class="⭐️72bq6r-0 wrapper" q:key="au_3"><div class="⭐️72bq6r-0 pt-8 flex flex-col px-4 min-h-[90vh] container mx-auto"><img alt="Mitosis logo" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F0fdb9aabd10f4205b3b3b56d7b950239" class="⭐️72bq6r-0 aspect-[4] max-w-[80%] w-[400px] mx-auto mt-[10vh] max-md:mt-[5vh]"><p class="⭐️72bq6r-0 text-xl mx-auto mt-6 text-center">Write components once, run everywhere.</p><div class="⭐️72bq6r-0 flex mx-auto mt-12"><a q:link href="/docs/quickstart" data-prefetch class="btn bg-primary hover:bg-primary-light text-black py-2 px-4 font-medium rounded" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" on:mouseover="q-ef5de125.js#s_Osdg8FnYTw4" on:focus="q-ef5de125.js#s_Osdg8FnYTw4" on:qvisible="q-ef5de125.js#s_Osdg8FnYTw4" q:key="AD_1" q:id="o">Get Started</a><a q:link href="/playground" data-prefetch class="btn ml-4 border border-primary hover:bg-primary hover:bg-opacity-20 text-white font-medium py-2 px-4 rounded" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" on:mouseover="q-ef5de125.js#s_Osdg8FnYTw4" on:focus="q-ef5de125.js#s_Osdg8FnYTw4" on:qvisible="q-ef5de125.js#s_Osdg8FnYTw4" q:key="AD_1" q:id="q">Playground</a></div><div class="flex flex-col max-w-full transition-all duration-700 opacity-100 mx-auto mt-[5vh] mb-[9vh]" on:qvisible="q-af729539.js#_hW[0]" q:key="AJ_4" q:id="s"><img width="100" height="80" alt="Arrow pointing right" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F298a3d9f6c3743cb8c3e17d209237da8" class="object-contain my-4 mx-auto max-md:hidden"><div class="flex gap-8 max-md:flex-col max-md:mt-8"><div class="w-[450px] max-lg:w-1/2 max-md:w-full max-md:h-[290px] max-w-full relative"><div class="bg-primary-dark overflow-hidden border-primary border border-opacity-50 rounded-lg pl-0 transition-all duration-500 opacity-100 z-30" q:key="AJ_1"><div class="border-b border-primary border-opacity-50 flex"><div class="flex gap-3 items-center px-3 text-sm py-2 bg-primary bg-opacity-20 self-start border-r border-primary border-opacity-50"><img src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fa45d49818e464caaab4f4bb416fed861" alt="mitosis logo" width="25" height="25" q:id="u">mitosis.jsx</div></div><div class="relative grow-1 h-full p-4"><div class="hp-prose prose prose-invert"><pre class="-m-2 !text-xs"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@builder.io/mitosis"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>name<span class="token punctuation">,</span> setName<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"Steve"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">css</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>name<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setName</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks! </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></pre></div></div></div></div><img width="25" height="60" alt="Arrow pointing down" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F66021c443ad24d858f16cb5c1ea46961" class="object-contain mx-auto md:hidden mt-14 -mb-6"><div class="relative w-[450px] max-lg:w-1/2 max-md:w-full min-h-[540px] max-md:h-[290px] max-w-full transition-all duration-500 delay-200 opacity-100" on:mouseenter="q-af729539.js#s_fNQH0Zun4Bc[0]" on:mouseleave="q-af729539.js#s_4UF6ELFbTP4[0]" q:id="v"><div class="bg-primary-dark overflow-hidden border-primary border border-opacity-50 rounded-lg pl-0 transition-all duration-500 opacity-100 z-30 absolute w-full" q:key="AJ_1"><div class="border-b border-primary border-opacity-50 flex"><div class="flex gap-3 items-center px-3 text-sm py-2 bg-primary bg-opacity-20 self-start border-r border-primary border-opacity-50"><img src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F73a54a19443e48fab077e6f21687cd20?format=webp&width=50" alt="vue logo" width="25" height="25" q:id="x">component.vue</div></div><div class="relative grow-1 h-full p-4"><div class="hp-prose prose prose-invert"><pre class="-m-2 !text-xs"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name = $event.target.value<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"Steve"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.input</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></pre></div></div></div><div class="bg-primary-dark overflow-hidden border-primary border border-opacity-50 rounded-lg pl-0 transition-all duration-500 opacity-0 blur-sm translate-y-1 z-10 scale-[0.92] pointer-events-none z-0 opacity-0 translate-y-2 pointer-events-none absolute w-full" q:key="AJ_1"><div class="border-b border-primary border-opacity-50 flex"><div class="flex gap-3 items-center px-3 text-sm py-2 bg-primary bg-opacity-20 self-start border-r border-primary border-opacity-50"><img src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F20c9914962994f4a9ca3435c90854e9e?format=webp&width=50" alt="angular logo" width="25" height="25" q:id="z">angular.ts</div></div><div class="relative grow-1 h-full p-4"><div class="hp-prose prose prose-invert"><pre class="-m-2 !text-xs"><span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/core"</span><span class="token punctuation">;</span> @<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token operator">:</span> <span class="token string">"my-component"</span><span class="token punctuation">,</span> template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> <div> <input class="input" [attr.value]="name" (input)="name = $event.target.value" /> Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks! </div> </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> styles<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> .input { color: red; } </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token punctuation">{</span> name <span class="token operator">=</span> <span class="token string">"Steve"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></pre></div></div></div><div class="bg-primary-dark overflow-hidden border-primary border border-opacity-50 rounded-lg pl-0 transition-all duration-500 z-0 opacity-0 translate-y-2 pointer-events-none absolute w-full" q:key="AJ_1"><div class="border-b border-primary border-opacity-50 flex"><div class="flex gap-3 items-center px-3 text-sm py-2 bg-primary bg-opacity-20 self-start border-r border-primary border-opacity-50"><img src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ffbe9dfb6bb09448ba4fe5feb4bb0e53e?format=webp&width=50" alt="svelte logo" width="25" height="25" q:id="11">component.svelte</div></div><div class="relative grow-1 h-full p-4"><div class="hp-prose prose prose-invert"><pre class="-m-2 !text-xs"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Steve"</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{name}</span> <span class="token punctuation">/></span></span> Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.input</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></pre></div></div></div><div class="bg-primary-dark overflow-hidden border-primary border border-opacity-50 rounded-lg pl-0 transition-all duration-500 opacity-0 blur-sm -translate-y-1 z-40 scale-[1.08] pointer-events-none z-0 opacity-0 translate-y-2 pointer-events-none absolute w-full" q:key="AJ_1"><div class="border-b border-primary border-opacity-50 flex"><div class="flex gap-3 items-center px-3 text-sm py-2 bg-primary bg-opacity-20 self-start border-r border-primary border-opacity-50"><img src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F8469b183f0dd433aabd0fcd0a373b370" alt="qwik logo" width="25" height="25" q:id="13">qwik.tsx</div></div><div class="relative grow-1 h-full p-4"><div class="hp-prose prose prose-invert"><pre class="-m-2 !text-xs"><span class="token keyword">import</span> <span class="token punctuation">{</span> component$<span class="token punctuation">,</span> useStore<span class="token punctuation">,</span> useStylesScoped$ <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@builder.io/qwik"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> MyComponent <span class="token operator">=</span> <span class="token function">component$</span><span class="token punctuation">(</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">useStylesScoped$</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> .input-MyComponent { color: red; }</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Steve"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input-MyComponent<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span> <span class="token attr-name">onChange$</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>state<span class="token punctuation">.</span>name <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks! </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></div></div></div></div></div></div></div></div></main></div><footer class="border-t border-primary border-opacity-50 pb-4" q:key="ET_8"><div class="container md:my-8 p-8 mx-auto flex gap-4 max-md:flex-col-reverse"><div class="block max-md:mt-8"><a href="https://www.builder.io/" target="_blank" class="block text-primary-light">Made with ❤️ by<img alt="Builder.io logo" width="200" height="90" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fe2052e9c2ef34dab98709a67fcc4b8c3" class="object-contain mt-3 max-sm:w-[150px]"></a><div class="text-xs mt-4 text-primary-light opacity-90 font-light">Copyright © 2025 Builder.io, Inc.</div></div><div class="flex max-md:flex-col gap-8 md:ml-auto items-center text-3xl max-md:items-start max-md:mt-2"><div class="flex gap-4 text-base"><a q:link href="/docs/" data-prefetch class="hover:text-primary-light" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" on:mouseover="q-ef5de125.js#s_Osdg8FnYTw4" on:focus="q-ef5de125.js#s_Osdg8FnYTw4" on:qvisible="q-ef5de125.js#s_Osdg8FnYTw4" q:key="AD_1" q:id="16">Docs</a><a q:link href="/playground/" data-prefetch class="hover:text-primary-light" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" on:mouseover="q-ef5de125.js#s_Osdg8FnYTw4" on:focus="q-ef5de125.js#s_Osdg8FnYTw4" on:qvisible="q-ef5de125.js#s_Osdg8FnYTw4" q:key="AD_1" q:id="18">Playground</a></div><div class="flex gap-4"><a q:link aria-label="Figma logo" href="/docs/figma/" data-prefetch class="hover:text-primary-light" on:click="#0 q-ef5de125.js#s_pIf0khHUxfY[0 1 1 1]" on:mouseover="q-ef5de125.js#s_Osdg8FnYTw4" on:focus="q-ef5de125.js#s_Osdg8FnYTw4" on:qvisible="q-ef5de125.js#s_Osdg8FnYTw4" q:key="AD_1" q:id="1a"><svg data-qwikest-icon fill="none" height="1em" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-figma" q:key="NM_0"><path d="M0 0h24v24H0z" fill="none" stroke="none"></path><path d="M15 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path d="M6 3m0 3a3 3 0 0 1 3 -3h6a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-6a3 3 0 0 1 -3 -3z"></path><path d="M9 9a3 3 0 0 0 0 6h3m-3 0a3 3 0 1 0 3 3v-15"></path></svg></a><a aria-label="GitHub logo" target="_blank" href="https://github.com/BuilderIO/mitosis" class="hover:text-primary-light" q:key="AD_1"><svg data-qwikest-icon fill="none" height="1em" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" q:key="LD_0"><path d="M0 0h24v24H0z" fill="none" stroke="none"></path><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg></a><a aria-label="Discord logo" target="_blank" href="https://discord.gg/yxjk5vn6pn" class="hover:text-primary-light" q:key="AD_1"><svg data-qwikest-icon fill="none" height="1em" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-discord" q:key="io_0"><path d="M0 0h24v24H0z" fill="none" stroke="none"></path><path d="M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3"></path><path d="M7 16.5c3.5 1 6.5 1 10 0"></path></svg></a></div></div></div></footer><script>(async (t2, e) => { var n2; if (!window._qcs && history.scrollRestoration === "manual") { window._qcs = true; const s = (n2 = history.state) == null ? void 0 : n2._qCityScroll; s && window.scrollTo(s.x, s.y); const r = document.currentScript, o = r.closest("[q\\:container]"), i = new URL(o.getAttribute("q:base"), document.baseURI); (await import(new URL(t2, i).href))[e](r); } })('q-88565454.js','s_DyVc0YBIqQU');</script></body><link rel="modulepreload" href="/build/q-9e4ae435.js"><link rel="modulepreload" href="/build/q-ab81516c.js"><script q:type="prefetch-bundles">document.dispatchEvent(new CustomEvent("qprefetch",{detail:{"bundles":["q-a179890f.js","q-9e4ae435.js","q-ab81516c.js","q-ef5de125.js","q-8876a5d7.js","q-4b20a6e4.js","q-de833af9.js","q-af729539.js","q-3ce74db1.js","q-431c9397.js","q-64b5b32f.js","q-0fb890b1.js","q-e542350b.js","q-b8663cc6.js"]}}));document.dispatchEvent(new CustomEvent('qprefetch', {detail:{links: [location.pathname]}}))</script><script type="qwik/json">{"refs":{"9":"12 2a","16":"12 2a","18":"12 2a","b":"15","e":"12 2a","h":"12 2a","j":"12 2a","l":"12 2a","o":"12 2a","q":"12 2a","s":"21","v":"1a","1a":"12 2a"},"ctx":{"1":{"h":" z!","w":"11","c":"qc-c=0! qc-ic=a qc-h=7! qc-l=9! qc-n=12 qc-s=r! qc-a=b qc-ir=8"},"4":{"h":"22","s":"7! 9!"},"5":{"h":"m","s":"a"},"6":{"h":"q","s":"9!"},"7":{"h":"23","s":"9!"},"10":{"h":"1n h!"},"12":{"h":"1n i!"},"a":{"w":"15"},"g":{"h":"27 k!","s":"12 9!"},"i":{"h":"27 l!","s":"12 9!"},"r":{"h":"19 18!","w":"21","s":"j 1a 1b 1c c d e! 21"},"w":{"h":"1n f!"},"y":{"h":"1n g!"}},"objs":[{"headings":"2a","menu":"2a"},{"name":"o","content":"p"},["1"],[],[],[],{},{"title":"n","meta":"2","links":"3","styles":"4","scripts":"5","frontmatter":"6"},"\u0012u",{"url":"t","params":"v","isNavigating":"w","prevUrl":"x"},"\u00122a","\u00122a","\u00121d","\u00121d",{"vue":"1f","angular":"1g","svelte":"1h","qwik":"1i"},{"class":"1j","readOnly":"1d","code":"1f","isActive":"1d","index":"16","$$activeIndex":"1k","framework":"1l"},{"class":"1j","readOnly":"1d","code":"1g","isActive":"w","index":"1o","$$activeIndex":"1p","framework":"1q"},{"class":"1j","readOnly":"1d","code":"1h","isActive":"w","index":"1s","$$activeIndex":"1t","framework":"1u"},{"class":"1j","readOnly":"1d","code":"1i","isActive":"w","index":"1w","$$activeIndex":"1x","framework":"1y"},"\u001216",{"prefetch":"1d","href":"24","class":"26"},{"prefetch":"1d","href":"28","class":"29"},"\u0002q-32adda33.js#s_e0ssiDXoeAM","Mitosis - Write components once, run everywhere.","description","Build multi-framework design systems with confidence. Compiles to React, Angular, Vue, Svelte, and more.","\u0002q-b4637eef.js#s_Tc7mNr9ttU8",{},"initial","\u0005https://mitosis-9uh.pages.dev/",{"type":"s","dest":"t"},{},false,"\u0005https://mitosis-9uh.pages.dev/",{},{},"\u0002q-a179890f.js#s_02wMImzEAbk[b 0! a 7! 2a 12 r! y z! 8 9!]","\u00032 g 10 #1","\u0002q-a179890f.js#s_fX0bDjeJa0E[b y 8 9!]","\u0012#b","\u0002q-8876a5d7.js#s_55mqoT2D5L0[13 12]","\u00031 2 14 #a",0,"mx-auto mt-[5vh] mb-[9vh]",{"class":"17"},"\u0002q-af729539.js#s_VR0y4pgFWTQ","\u0012w","\u0012w","\u001216",true,"\u0011d 18! @1","<template>\n <div>\n <input class=\"input\" :value=\"name\" @change=\"name = $event.target.value\" />\n Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks!\n </div>\n</template>\n\n\x3Cscript setup>\nimport { ref } from \"vue\";\n\nconst name = ref(\"Steve\");\n\x3C/script>\n\n<style scoped>\n.input {\n color: red;\n}\n</style>","import { Component } from \"@angular/core\";\n\n@Component({\n selector: \"my-component\",\n template: `\n <div>\n <input\n class=\"input\"\n [attr.value]=\"name\"\n (input)=\"name = $event.target.value\"\n />\n\n Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks!\n </div>\n `,\n styles: [\n `\n .input {\n color: red;\n }\n `,\n ],\n})\nexport default class MyComponent {\n name = \"Steve\";\n}","\x3Cscript>\n let name = \"Steve\";\n\x3C/script>\n\n<div>\n <input class=\"input\" bind:value={name} />\n Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks!\n</div>\n\n<style>\n .input {\n color: red;\n }\n</style>","import { component$, useStore, useStylesScoped$ } from \"@builder.io/qwik\";\n\nexport const MyComponent = component$((props) => {\n useStylesScoped$(`\n .input-MyComponent {\n color: red;\n }`\n );\n const state = useStore({ name: \"Steve\" });\n\n return (\n <div>\n <input\n class=\"input-MyComponent\"\n value={state.name}\n onChange$={(event) => (state.name = event.target.value)}\n />\n Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks!\n </div>\n );\n});","absolute w-full","\u0011j @2","vue","\u0011f! @3","\u0002q-52a56423.js#s_k2lAd7yZejQ",1,"\u0011j @2","angular","\u0011g! @3",2,"\u0011j @2","svelte","\u0011h! @3",3,"\u0011j @2","qwik","\u0011i! @3","\u0002q-af729539.js#s_2WXRReLG3ao[j 1a]","\u00031 7 20 #r","\u0002q-0fb890b1.js#s_Z9hrYDlbeuA","\u0002q-e542350b.js#s_qmajuyxdQA0","/docs/","hover:text-primary-light",["25","w"],"\u0002q-ef5de125.js#s_8gdLBszqbaM","/playground/",["25","w"],"\u0001"],"subs":[["_1"],["_1","0 #4","0 #4 name","0 #4 content","0 #4 key"],["_1","0 #4"],["_1","0 #4"],["_1","0 #4"],["_1","0 #4"],["_1"],["_1","0 #4 title","0 #4 meta","0 #4 links","0 #4 styles","0 #4 scripts"],["0 11"],["0 #4 url","0 #6 url","0 #7 url"],["0 #5"],["0 11"],["0 #r"],["0 #r","1 #s 1e #r class"],["_1","0 #r vue","0 #r angular","0 #r svelte","0 #r qwik"],["0 #w framework","0 #w index","0 #w isActive","0 #w code","1 #x 1m #w alt framework"],["0 #y framework","0 #y index","0 #y isActive","0 #y code","1 #z 1r #y alt framework"],["0 #10 framework","0 #10 index","0 #10 isActive","0 #10 code","1 #11 1v #10 alt framework"],["0 #12 framework","0 #12 index","0 #12 isActive","0 #12 code","1 #13 1z #12 alt framework"],["0 #r","0 #w","0 #y","0 #10","0 #12"],["0 #g class"],["0 #i class"]]}</script><script q:func="qwik/json">document.currentScript.closest("[q\\:container]").qFuncs=[(S2, f2) => { S2.metaKey || S2.ctrlKey || S2.shiftKey || S2.altKey || S2.preventDefault(); }, (p0,p1,)=>(["flex flex-col max-w-full transition-all duration-700",p0.value?"opacity-100":"opacity-0 translate-y-2",p1.class]), (p0,)=>(p0.value), (p0,)=>(`${p0.framework} logo`)]</script><script id="qwikloader">((e,t)=>{const n="__q_context__",o=window,s=new Set,a="replace",i="forEach",r="target",c="getAttribute",l="isConnected",p="qvisible",f="_qwikjson_",u=t=>e.querySelectorAll(t),b=e=>e&&"function"==typeof e.then,d=(e,t,n=t.type)=>{u("[on"+e+"\\:"+n+"]")[i]((o=>m(o,e,t,n)))},w=t=>{if(void 0===t[f]){let n=(t===e.documentElement?e.body:t).lastElementChild;for(;n;){if("SCRIPT"===n.tagName&&"qwik/json"===n[c]("type")){t[f]=JSON.parse(n.textContent[a](/\\x3C(\/?script)/gi,"<$1"));break}n=n.previousElementSibling}}},y=(e,t)=>new CustomEvent(e,{detail:t}),m=async(t,o,s,i=s.type)=>{const r="on"+o+":"+i;t.hasAttribute("preventdefault:"+i)&&s.preventDefault();const p=t._qc_,f=p&&p.li.filter((e=>e[0]===r));if(f&&f.length>0){for(const e of f){const n=e[1].getFn([t,s],(()=>t[l]))(s,t),o=s.cancelBubble;b(n)&&await n,o&&s.stopPropagation()}return}const u=t[c](r);if(u){const o=t.closest("[q\\:container]"),i=new URL(o[c]("q:base"),e.baseURI);for(const r of u.split("\n")){const c=new URL(r,i),p=c.hash[a](/^#?([^?[|]*).*$/,"$1")||"default",f=performance.now();let u;const d=r.startsWith("#");if(d)u=(o.qFuncs||[])[Number.parseInt(p)];else{const e=import(c.href.split("#")[0]);w(o),u=(await e)[p]}const y=e[n];if(t[l])try{e[n]=[t,s,c],d||q("qsymbol",{symbol:p,element:t,reqTime:f});const o=u(s,t);b(o)&&await o}finally{e[n]=y}}}},q=(t,n)=>{e.dispatchEvent(y(t,n))},v=e=>e[a](/([A-Z])/g,(e=>"-"+e.toLowerCase())),h=async e=>{let t=v(e.type),n=e[r];for(d("-document",e,t);n&&n[c];){const o=m(n,"",e,t);let s=e.cancelBubble;b(o)&&await o,s=s||e.cancelBubble||n.hasAttribute("stoppropagation:"+e.type),n=e.bubbles&&!0!==s?n.parentElement:null}},g=e=>{d("-window",e,v(e.type))},_=()=>{var n;const a=e.readyState;if(!t&&("interactive"==a||"complete"==a)&&(t=1,q("qinit"),(null!=(n=o.requestIdleCallback)?n:o.setTimeout).bind(o)((()=>q("qidle"))),s.has(p))){const e=u("[on\\:"+p+"]"),t=new IntersectionObserver((e=>{for(const n of e)n.isIntersecting&&(t.unobserve(n[r]),m(n[r],"",y(p,n)))}));e[i]((e=>t.observe(e)))}},C=(e,t,n,o=!1)=>e.addEventListener(t,n,{capture:o,passive:!1}),E=t=>{for(const n of t)s.has(n)||(C(e,n,h,!0),C(o,n,g,!0),s.add(n))};if(!(n in e)){e[n]=0;const t=o.qwikevents;Array.isArray(t)&&E(t),o.qwikevents={push:(...e)=>E(e)},C(e,"readystatechange",_),_()}})(document)</script><script>window.qwikevents.push("click", "qvisible", "mouseover", "focus", "mouseenter", "mouseleave")</script></html>