1<!DOCTYPE html><html lang="en" q:container="paused" q:version="0.11.0" q:render="ssr" q:base="/build/"><!--qv q:id=0 q:key=jYmHfFOoy2s:--><!--qv q:id=1 q:key=z1nvHyEppoI:--><!--qv q:s q:sref=1 q:key=--><head q:head><meta charSet="utf-8" q:head> 2<!-- This site is hosted on Netlify. Anyone can build and deploy a site 3 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=8117285e-0b95-4f10-b3a0-d5e1d29eb4d1 4 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><!--qv q:id=2 q:key=M8H3t1J2DEc:--><title q:head>Qwik City - Overview - Qwik</title><meta name="description" content="No hydration, auto lazy-loading, edge-optimized, and fun ð!" q:head><link rel="canonical" href="https://qwik.builder.io/qwikcity/overview/" q:head><meta name="viewport" content="width=device-width, initial-scale=1" q:head><meta name="apple-mobile-web-app-title" content="Qwik" q:head><meta name="application-name" content="Qwik" q:head><meta name="apple-mobile-web-app-title" content="Qwik" q:head><meta name="theme-color" content="#006ce9" q:head><link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" q:head><link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml" q:head><meta property="og:url" content="https://qwik.builder.io/qwikcity/overview/" q:head><meta property="og:title" content="Qwik City - Overview - Qwik" q:head><meta property="og:description" content="No hydration, auto lazy-loading, edge-optimized, and fun ð!" q:head><meta property="og:image" content="https://qwik.builder.io/logos/social-card.png?v=3" q:head><meta property="og:image:alt" content="Image of Qwik Framework Logo, Framework reimagined for the edge. Code snippet npm create qwik@latest" q:head><meta property="og:image:width" content="800" q:head><meta property="og:image:height" content="418" q:head><meta property="og:type" content="website" q:head><meta property="og:site_name" content="Qwik" 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="@QwikDev" q:head><meta name="twitter:title" content="Qwik City - Overview - Qwik" q:head><meta name="twitter:description" content="No hydration, auto lazy-loading, edge-optimized, and fun ð!" q:head><meta name="twitter:image" content="https://qwik.builder.io/logos/social-card.png?v=3" q:head><meta name="twitter:image:alt" content="Image of Qwik Framework Logo, Framework reimagined for the edge. Code snippet npm create qwik@latest" q:head><meta property="fb:app_id" content="676395883130092" q:head>
4<script q:head>!(function(w,p,f,c){c=w[p]=w[p]||{};c[f]=(c[f]||[]).concat(["dataLayer.push"])})(window,'partytown','forward');/* Partytown 0.7.1 - MIT builder.io */ 5!function(t,e,n,i,r,o,a,d,s,c,p,l){function u(){l||(l=1,"/"==(a=(o.lib||"/~partytown/")+(o.debug?"debug/":""))[0]&&(s=e.querySelectorAll('script[type="text/partytown"]'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(d=setTimeout(w,1e4),e.addEventListener("pt0",f),r?h(1):n.serviceWorker?n.serviceWorker.register(a+(o.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):w())))}function h(t){c=e.createElement(t?"script":"iframe"),t||(c.setAttribute("style","display:block;width:0;height:0;border:0;visibility:hidden"),c.setAttribute("aria-hidden",!0)),c.src=a+"partytown-"+(t?"atomics.js?v=0.7.1":"sandbox-sw.html?"+Date.now()),e.body.appendChild(c)}function w(t,n){for(f(),t=0;t<s.length;t++)(n=e.createElement("script")).innerHTML=s[t].innerHTML,e.head.appendChild(n);c&&c.parentNode.removeChild(c)}function f(){clearTimeout(d)}o=t.partytown||{},i==t&&(o.forward||[]).map((function(e){p=t,e.split(".").map((function(e,n,i){p=p[i[n]]=n+1<i.length?"push"==i[n+1]?[]:p[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>
5<script type="text/partytown" q:head>
vendor: 327 bytes, lines 5-9
5(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 6new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 7j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 8'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 9})(window,document,'script','dataLayer','
9GTM-NR2STLN
vendor: 3 bytes, line 9
9');
9</script>
9<script type="text/partytown" src="https://cdn.jsdelivr.net/npm/@builder.io/[email protected]/dist/persist-attribution.min.js" id="persist-attribution-init" data-send-page-view-events="true" q:head></script>
9<link rel="dns-prefetch" href="https://cdn.jsdelivr.net/" q:head><link rel="dns-prefetch" href="https://cdn.builder.io/" q:head><!--/qv--><style q:style="kcqvc0-0">code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#282a36}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6272a4}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#ff79c6}.token.boolean,.token.number{color:#bd93f9}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#50fa7b}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#f1fa8c}.token.keyword{color:#8be9fd}.token.regex,.token.important{color:#ffb86c}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2?v=1) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2?v=1) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2?v=1) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}code[class*=language-],pre[class*=language-]{font-family:Menlo,Monaco,Courier New,monospace;font-weight:400;font-size:14px;font-feature-settings:"liga" 0,"calt" 0;line-height:18px;letter-spacing:0px}/*! tailwindcss v3.2.0 | MIT License | https://tailwindcss.com 10 */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}
10input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}.\!container{width:100%!important}@media (min-width: 640px){.container{max-width:640px}.\!container{max-width:640px!important}}@media (min-width: 768px){.container{max-width:768px}.\!container{max-width:768px!important}}@media (min-width: 1024px){.container{max-width:1024px}.\!container{max-width:1024px!important}}@media (min-width: 1280px){.container{max-width:1280px}.\!container{max-width:1280px!important}}@media (min-width: 1536px){.container{max-width:1536px}.\!container{max-width:1536px!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.right-\[max\(0px\,calc\(50\%-42rem\)\)\]{right:max(0px,calc(50% - 42rem))}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.hidden{display:none}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.overflow-y-auto{overflow-y:auto}.border{border-width:1px}.border-t{border-top-width:1px}.border-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.py-4{padding-top:1rem;padding-bottom:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.text-right{text-align:right}.text-sm{font-size:.875rem;line-height:1.25rem}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{font-family:Poppins,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";color:#0e201a;--scroll-margin-top: 120px;--qwik-blue: #0093ee;--qwik-dark-blue: #006ce9;--qwik-light-blue: #daf0ff;--qwik-purple: #ac7ef4;--header-height: 118px;--repl-tab-height: 56px;--repl-tab-bg-color: var(--qwik-light-blue);--panel-toggle-height: 0px}@media (max-width: 768px){html{--panel-toggle-height: 56px;--header-height: 80px}}a,button,textarea,input,select{touch-action:manipulation}body{height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width: 1023px){.menu-open .sidebar{width:100%;z-index:50}.menu-open .menu{display:block;top:0px;padding:.75rem 4rem .75rem .75rem;width:360px;background:white}.menu-open .menu h5{padding:.5rem}.menu-open .menu li a,.menu-open .menu li a.is-active{padding:.75rem}.menu-open header{pointer-events:none;touch-action:none;opacity:.4;background-color:transparent}.menu-open .breadcrumbs{pointer-events:none;touch-action:none;opacity:.2;background-color:transparent}.menu-open main{pointer-events:none;touch-action:none;opacity:.2;position:fixed;top:0;bottom:0;background:transparent}.menu-close{display:block;position:fixed;top:0;left:300px;width:100%;height:100vh;padding-left:12px;cursor:default;color:var(--qwik-dark-blue)}.menu-close svg{position:fixed;top:20px;width:24px;height:24px;
10cursor:pointer}}@media (max-width: 540px){body{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.menu-open .menu{-webkit-user-select:none;-moz-user-select:none;user-select:none}.menu-open .menu a:hover{background-color:transparent;color:rgb(241 245 249 / var(--tw-text-opacity))!important}}@media (min-width: 768px){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grow{flex-grow:1}.md\:justify-end{justify-content:flex-end}.md\:p-4{padding:1rem}.md\:px-0{padding-left:0;padding-right:0}}@media (min-width: 1024px){.lg\:hidden{display:none}}@media (min-width: 1280px){.xl\:top-\[9rem\]{top:9rem}.xl\:block{display:block}.xl\:w-\[16rem\]{width:16rem}} 11</style></head><body><!--qv q:id=3 q:key=nd8yk3KO22c:--><!--qv q:id=4 q:key=NCbE0mvF0Ho:--><style q:style="gwzb3z-0">.docs main{margin-left:auto;margin-right:auto;min-height:100vh}@media (min-width: 1280px){.docs main{max-width:1300px}}.docs main{margin-top:calc(var(--header-height) + 10px)}.docs .docs-container{overflow:hidden;padding-top:80px;padding-left:2rem;padding-right:2rem}@media (min-width: 1024px){.docs .docs-container{margin-left:17rem;margin-right:4rem;padding-left:0;padding-right:0;padding-top:1.25rem}}@media (min-width: 1280px){.docs .docs-container{margin-right:18rem;padding-right:4rem}}.docs article a{color:var(--qwik-dark-blue);text-decoration:underline}.docs article blockquote{background:#f1f5fe;padding:20px 13px 20px 10px;border-left:10px solid #ac7ef4;margin:30px 0}.docs article blockquote p:first-child{margin-top:0}.docs article blockquote p:last-child{margin-bottom:0}.docs article a:hover{text-decoration:none}.docs article .card-grid{display:flex;flex-wrap:wrap;gap:25px;margin:30px 0}.docs article .card{background:#f7f8fb;border-radius:10px;min-width:230px;padding:25px;flex:1;color:inherit;text-decoration:none}.docs article a.card:hover{outline:2px solid var(--qwik-dark-blue)}.docs article .card-center{text-align:center}.docs article .card h3{margin-top:10px;margin-bottom:0;font-weight:500;font-size:22px}.docs article .card p{font-size:14px}.docs article .card .icon{font-size:70px;margin:0;line-height:1}.docs article h1{margin-bottom:1.75rem;position:relative;line-height:1.2;font-size:55px;font-weight:800;scroll-margin-top:var(--scroll-margin-top)}.docs article h2,.docs article h3,.docs article h4,.docs article h5,.docs article h6{font-size:1.25rem;line-height:1.75rem;font-weight:600;position:relative;margin-top:1.2em;scroll-margin-top:var(--scroll-margin-top);margin-bottom:max(.7em,18px)}.docs article h2{line-height:1.2;font-size:42px;font-weight:800;scroll-margin-top:var(--scroll-margin-top);margin-top:70px}.docs article h3{font-size:1.8rem}.docs h2 a,.docs h3 a,.docs h4 a,.docs h5 a,.docs h6 a{position:absolute;width:100%;height:1em}.icon-link{display:none}.icon-link:after{position:absolute;content:"#";left:-1em}h2 a:hover .icon,h3 a:hover .icon,h4 a:hover .icon,h5 a:hover .icon,h6 a:hover .icon{display:inline}.docs article p{margin-top:1.6rem;margin-bottom:.9rem;font-size:16px;font-weight:400;line-height:1.7;color:#171a19}.docs article ul,.docs article ol{margin-top:1rem;margin-bottom:1rem;margin-left:2.5rem;line-height:1.7;list-style:disc;font-size:16px;font-weight:400;color:#171a19}.docs article ol{list-style:decimal}.docs article li{margin-top:.25rem;margin-bottom:.25rem;padding-left:.5rem}.docs article li::marker,.docs article li::-webkit-details-marker{color:var(--qwik-dark-blue);font-weight:800}.docs article pre{overflow:auto;color:#fff;background-color:#011f33;padding:18px 15px;border-radius:8px;margin:20px 0}.docs article pre code{display:block;max-width:50px;background-color:transparent;line-height:1.26;border:none;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.docs article code{background-color:#e0e0e0;padding:2px 4px;border-radius:3px;font-size:.9em;border-bottom:2px solid #bfbfbf;-webkit-user-select:all;-moz-user-select:all;user-select:all}@media (max-width: 640px){.docs article code{word-break:break-all}.docs article h1{font-size:40px}.docs article h2{font-size:30px}}.docs article table{margin-top:1.25rem;margin-bottom:1.25rem}.docs article th,.docs article td{padding:6px;vertical-align:top}.docs article th:first-child,.docs article td:first-child{padding-left:0}.docs article th:last-child,.docs article td:last-child{padding-right:0}.docs article img{border-radius:5px;overflow:hidden}.docs main.no-right-menu .on-this-page{display:none}@media (min-width: 1280px){.docs main.no-right-menu .docs-container{margin-right:6rem}}@media (max-width: 768px){.docs article h2{font-size:1.2rem;margin-top:2rem}} 12</style><div class="docs fixed-header"><!--qv q:id=5 q:key=r7Vp3qLhkYM:--><style q:style="1bx00x-0">.header-container{height:calc(var(--header-height));margin-bottom:6px;background:white;position:relative;z-index:100}@media (min-width: 1024px){.header-container{background:#ffffff9e;-webkit-backdrop-filter:blur(23px) saturate(4.5);backdrop-filter:blur(23px) saturate(4.5)}}.fixed-header .header-container{position:fixed;top:0;width:100%;z-index:40}header li{padding:1rem .5rem;text-align:right}@media (min-width: 768px){header li{padding-top:0;padding-bottom:0}}header li{font-size:14px;font-weight:500}header a.active{color:var(--qwik-dark-blue)}header a:hover{text-decoration:underline}header li a:hover svg{opacity:.8}header .mobile-menu{position:absolute;right:0;padding:1.25rem}@media (min-width: 768px){header .mobile-menu{display:none}}header ul{display:none}@media (min-width: 768px){header ul{display:block}}header ul{padding-top:0;padding-bottom:1.5rem}@media (min-width: 768px){header ul{padding-top:0}}header ul{height:100%;align-items:center}header .more-icon{display:block}header .close-icon{display:none}@media (max-width: 767px){.header-container{padding-top:5px}.header-open header ul{position:absolute;z-index:10;display:block;top:var(--header-height);width:100%;background:white;height:auto}.header-open header .more-icon{display:none}.header-open header .close-icon{display:block}.header-open .menu-toolkit li{text-align:center}}header .header-inner{max-width:1400px;margin-left:auto;margin-right:auto;position:relative;height:100%}.full-width header .header-inner{max-width:100%}header .header-logo{position:absolute;top:0;bottom:0;left:max(0px,calc(50% - 45rem));padding-left:1rem;display:flex;align-items:center;height:var(--header-height)}.full-width header .header-logo{left:0} 13</style><header class="header-container"><div class="header-inner"><div class="header-logo"><a href="/"><span class="sr-only">Qwik Homepage</span>
13<svg width="180" height="50" viewBox="0 0 167 53" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Qwik Logo"><path d="M81.9545 46.5859H75.5513V35.4045C73.4363 36.8579 71.0496 37.5749 68.4884 37.5749C65.0151 37.5749 62.4344 36.6253 60.8239 34.6487C59.2134 32.6915 58.3984 29.2034 58.3984 24.2231C58.3984 19.1266 59.3492 15.5997 61.2702 13.5456C63.23 11.4721 66.3734 10.4644 70.7004 10.4644C74.7946 10.4644 78.5201 11.0264 81.9545 12.131V46.5859ZM75.5513 16.278C74.096 15.8323 72.4661 15.6191 70.7004 15.6191C68.5272 15.6191 66.9749 16.1811 66.1017 17.3244C65.2479 18.4871 64.7823 20.6962 64.7823 23.9712C64.7823 27.0524 65.1897 29.1065 66.0435 30.2304C66.8973 31.335 68.3719 31.897 70.5452 31.897C73.3781 31.897 75.5513 30.7343 75.5513 29.2809V16.278Z" fill="black"></path><path d="M91.133 11.1426C93.4033 17.4406 95.3242 23.7386 96.993 30.0948C99.205 23.5836 101.087 17.2856 102.542 11.1426H108.15C110.265 17.4406 112.031 23.7386 113.447 30.0948C115.97 23.196 117.949 16.8787 119.404 11.1426H125.71C123.033 20.173 120.064 28.777 116.785 36.8966H109.256C108.402 32.3039 107.044 26.7617 105.22 20.1536C104.056 25.2889 102.445 30.8893 100.33 36.8966H92.8018C90.2793 27.5174 87.5434 18.9522 84.6328 11.1426H91.133Z" fill="black"></path><path d="M132.832 7.55758C129.999 7.55758 129.203 6.85996 129.203 3.97257C129.203 1.39523 130.018 0.794495 132.832 0.794495C135.665 0.794495 136.46 1.39523 136.46 3.97257C136.46 6.85996 135.665 7.55758 132.832 7.55758ZM129.649 11.1426H136.053V36.8966H129.649V11.1426Z" fill="black"></path><path d="M166.303 11.1426C161.763 17.5956 158.581 21.5295 156.815 22.9441C158.27 23.8937 162.17 28.8933 167.002 36.916H159.628C153.613 27.7887 150.742 23.8549 149.325 23.2542V36.916H142.922V0H149.325V23.2348C150.78 22.169 153.963 18.1382 158.872 11.1426H166.303Z" fill="black"></path><path d="M40.973 52.5351L32.0861 43.6985L31.9503 43.7179V43.621L13.0511 24.9595L17.708 20.4637L14.9721 4.76715L1.99103 20.8513C-0.220992 23.0798 -0.628467 26.7036 0.962635 29.3778L9.07337 42.8265C10.3152 44.9 12.566 46.1402 14.9915 46.1208L19.0081 46.082L40.973 52.5351Z" fill="#18B6F6"></path><path d="M45.8232 20.5411L44.038 17.2468L43.1066 15.5609L42.738 14.902L42.6992 14.9408L37.8094 6.47238C36.587 4.34075 34.2974 3.02301 31.8137 3.04239L27.5255 3.15865L14.7384 3.19741C12.313 3.21679 10.101 4.49577 8.87853 6.56927L1.09766 21.9945L15.0101 4.72831L33.2496 24.7656L30.0091 28.0406L31.9495 43.7178L31.9689 43.679V43.7178H31.9301L31.9689 43.7565L33.4824 45.2293L40.8364 52.4187C41.1469 52.7094 41.6514 52.3606 41.4379 51.9924L36.8975 43.0589L44.8142 28.4282L45.0664 28.1375C45.1634 28.0212 45.2604 27.905 45.3381 27.7887C46.8904 25.6764 47.1038 22.8472 45.8232 20.5411Z" fill="#AC7EF4"></path><path d="M33.3076 24.6882L15.0099 4.74774L17.61 20.3668L12.9531 24.882L31.9105 43.6985L30.203 28.0794L33.3076 24.6882Z" fill="white"></path></svg></a></div><button type="button" title="Toggle right menu" aria-label="Toggle right menu" class="mobile-menu" on:click="q-e232404c.js#s_N4BybqFa6wQ[0]" q:id="6"><span class="more-icon"><svg width="30" height="30" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true"><circle cx="256" cy="256" r="48"></circle><circle cx="256" cy="416" r="48"></circle><circle cx="256" cy="96" r="48"></circle></svg></span><span class="close-icon"><svg width="30" height="30" viewBox="0 0 10 10" role="img" aria-label="Close Icon"><path d="M0 0L10 10M10 0L0 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg></span></button><ul class="md:grow md:flex md:justify-end md:p-4 menu-toolkit"><li><a href="/docs/overview/"><span>Docs</span></a></li><li><a href="/qwikcity/overview/" class="active"><span>Qwik City</span></a></li><li><a href="/media/"><span>Media</span></a></li><li><a href="/examples/introduction/hello-world/"><span>Examples</span></a></li><li><a href="/tutorial/welcome/overview/"><span>Tutorial</span></a></li><li><a href="/playground/"><span>Playground</span></a></li><li><!--qv q:id=d q:key=VpE1JptyDuo:--><style q:style="xxzfna-0">/*! @docsearch/css 3.2.2 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}
13.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;position:relative;padding:0 0 2px;border:0;top:-1px;width:20px}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-moz-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;
13stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{f
13ill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"\bb "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.docsearch{--docsearch-searchbox-background: rgba(247, 248, 250, 1);--docsearch-searchbox-focus-background: rgba(247, 248, 250, 1);color:#213547}.docsearch .DocSearch-Button{background-color:var(--docsearch-searchbox-background);--docsearch-text-color: var(--docsearch-muted-color);border:2px solid var(--qwik-dark-blue);--docsearch-muted-color: var(--qwik-dark-blue)}.docsearch kbd{font-family:system-ui}.docsearch ul li{text-align:left;margin:0 0 4px;padding:0}.docsearch a:hover{text-decoration:none}
13@media (max-width: 996px){.docsearch{display:none}} 14</style><div class="docsearch" on-window:keydown="q-d8bda0cf.js#s_nNmKJB7iZrY[0 1]" q:id="e"><!--qv q:id=f q:key=5uEGS10POj8:--><button type="button" aria-label="Search" class="DocSearch DocSearch-Button" on:click="q-d8bda0cf.js#s_qikzz07lAZs[0]" q:id="g"><span class="DocSearch-Button-Container"><svg width="20" height="20" viewBox="0 0 20 20" class="DocSearch-Search-Icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span></button><!--/qv--></div><!--/qv--></li><li><a href="https://github.com/BuilderIO/qwik" target="_blank" title="Github"><span class="md:hidden">Github</span><span class="hidden md:block"><svg viewBox="0 0 16 16" width="22" height="22" fill="currentColor" role="img" aria-label="Github Logo"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></span></a></li><li><a href="https://twitter.com/QwikDev" target="_blank" title="Twitter"><span class="md:hidden">@QwikDev</span><span class="hidden md:block"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512" role="img" fill="currentColor" aria-label="Twitter Logo"><path d="M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z"></path></svg></span></a></li><li><a href="https://qwik.builder.io/chat" target="_blank" title="Discord"><span class="md:hidden">Discord</span><span class="hidden md:block"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512" role="img" fill="currentColor" aria-label="Discord Logo"><path d="M464 66.52A50 50 0 00414.12 17L97.64 16A49.65 49.65 0 0048 65.52V392c0 27.3 22.28 48 49.64 48H368l-13-44 109 100zM324.65 329.81s-8.72-10.39-16-19.32C340.39 301.55 352.5 282 352.5 282a139 139 0 01-27.85 14.25 173.31 173.31 0 01-35.11 10.39 170.05 170.05 0 01-62.72-.24 184.45 184.45 0 01-35.59-10.4 141.46 141.46 0 01-17.68-8.21c-.73-.48-1.45-.72-2.18-1.21-.49-.24-.73-.48-1-.48-4.36-2.42-6.78-4.11-6.78-4.11s11.62 19.09 42.38 28.26c-7.27 9.18-16.23 19.81-16.23 19.81-53.51-1.69-73.85-36.47-73.85-36.47 0-77.06 34.87-139.62 34.87-139.62 34.87-25.85 67.8-25.12 67.8-25.12l2.42 2.9c-43.59 12.32-63.44 31.4-63.44 31.4s5.32-2.9 14.28-6.77c25.91-11.35 46.5-14.25 55-15.21a24 24 0 014.12-.49 205.62 205.62 0 0148.91-.48 201.62 201.62 0 0172.89 22.95s-19.13-18.15-60.3-30.45l3.39-3.86s33.17-.73 67.81 25.16c0 0 34.87 62.56 34.87 139.62 0-.28-20.35 34.5-73.86 36.19z"></path><path d="M212.05 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.8 0 24.7-11.83 24.7-26.57.25-14.76-10.9-26.57-24.7-26.57zM300.43 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.81 0 24.7-11.83 24.7-26.57S314 218 300.43 218z"></path></svg></span></a></li></ul></div></header><!--/qv--><!--qv q:id=7 q:key=8aBetzIbmQ8:--><style q:style="6uhi6-0">.sidebar{position:fixed;top:0px;bottom:0px;z-index:20}.sidebar summary{cursor:pointer;display:block}.sidebar summary:hover h5{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:currentColor}.sidebar summary::marker,.sidebar summary::-webkit-details-marker{display:none;content:""}.sidebar details[open] summary{font-weight:800}.breadcrumbs{position:fixed;z-index:10;width:100%;top:var(--header-height);border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));padding-left:.25rem;padding-right:.25rem;display:flex;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}@media (min-width: 1024px){.breadcrumbs{display:none}}.breadcrumbs button{display:block;padding:1rem;opacity:.7}.breadcrumbs button:hover{opacity:1}.breadcrumbs ol{min-width:0px;white-space:nowrap;font-size:.875rem;line-height:1.5rem;display:flex;align-items:center}.breadcrumbs li{padding-left:.25rem;padding-right:1.25rem;position:relative}.breadcrumbs li:after{position:absolute;content:"\203a";top:-1px;right:6px}.breadcrumbs li:last-child:after{content:""}.menu{position:fixed;bottom:0px;z-index:10;padding-bottom:1.5rem;overflow-y:auto;display:none;right:auto;left:max(0px,calc(50% - 43rem))}@media (min-width: 1024px){.menu{display:block;padding-left:1rem;padding-right:1rem;width:14rem}}.menu{padding-top:30px;top:8rem;border-right:2px solid #18b6f6}.menu h5{margin-bottom:.25rem;white-space:nowrap;border-radius:.375rem;padding:.25rem .75rem;color:var(--qwik-dark-blue)}.menu ul{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity));padding-left:10px;padding-bottom:15px}.menu li{white-space:nowrap}details li{padding-top:.25rem;padding-bottom:.25rem;padding-left:.75rem}
14details li:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}details li a{display:block;overflow:hidden;text-overflow:ellipsis}.menu li a{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.menu li a.is-active{font-weight:800} 15</style><aside class="sidebar"><nav class="breadcrumbs"><button type="button" title="Toggle left menu" aria-label="Toggle left menu" on:click="q-e8c101b4.js#s_3yR1ZZ9aous[0]" q:id="8"><span class="sr-only">Navigation</span><svg width="24" height="24"><path d="M5 6h14M5 12h14M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg></button><ol><li>Qwik City</li><li>Overview</li></ol></nav><nav class="menu"><button type="button" class="menu-close lg:hidden" on:click="q-e8c101b4.js#s_JSIV600DsXk[0]" q:id="9"><svg width="24" height="24" viewBox="0 0 10 10" role="img" aria-label="Close Icon"><path d="M0 0L10 10M10 0L0 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg></button><ul><li><details open=""><summary><h5>Qwik City</h5></summary><ul><li><a href="/qwikcity/overview/" class="is-active">Overview</a></li><li><a href="/qwikcity/directory-layout/">Directory Layout</a></li><li><a href="/qwikcity/static-assets/">Static Assets</a></li></ul></details></li><li><details><summary><h5>Routing</h5></summary><ul><li><a href="/qwikcity/routing/overview/">Overview</a></li><li><a href="/qwikcity/routing/route-parameters/">Route Parameters</a></li><li><a href="/qwikcity/routing/error-responses/">Error Responses</a></li></ul></details></li><li><details><summary><h5>Layout</h5></summary><ul><li><a href="/qwikcity/layout/overview/">Overview</a></li><li><a href="/qwikcity/layout/nested/">Nested</a></li><li><a href="/qwikcity/layout/grouped/">Grouped</a></li><li><a href="/qwikcity/layout/named/">Named</a></li><li><a href="/qwikcity/layout/top/">Top</a></li></ul></details></li><li><details><summary><h5>Data</h5></summary><ul><li><a href="/qwikcity/data/overview/">Overview</a></li><li><a href="/qwikcity/data/retrieve/">Retrieving Data</a></li><li><a href="/qwikcity/data/modify/">Modifying Data</a></li><li><a href="/qwikcity/data/endpoints/">Endpoints</a></li><li><a href="/qwikcity/data/redirects/">Redirects</a></li></ul></details></li><li><details><summary><h5>Authoring Content</h5></summary><ul><li><a href="/qwikcity/content/component/">Components</a></li><li><a href="/qwikcity/content/mdx/">MDX</a></li><li><a href="/qwikcity/content/menu/">Menu</a></li></ul></details></li><li><details><summary><h5>Integrations</h5></summary><ul><li><a href="/qwikcity/integrations/react/">React</a></li><li><a href="/qwikcity/integrations/partytown/">Partytown</a></li><li><a href="/qwikcity/integrations/tailwind/">Tailwind</a></li></ul></details></li><li><details><summary><h5>Server adaptors</h5></summary><ul><li><a href="/qwikcity/adaptors/overview/">Overview</a></li><li><a href="/qwikcity/adaptors/cloudflare-pages/">Cloudflare Pages</a></li><li><a href="/qwikcity/adaptors/netlify-edge/">Netlify Edge</a></li><li><a href="/qwikcity/adaptors/node/">Node</a></li></ul></details></li><li><details><summary><h5>Prefetching</h5></summary><ul><li><a href="/qwikcity/prefetching/overview/">Overview</a></li><li><a href="/qwikcity/prefetching/service-worker-prefetching/">Service Worker</a></li><li><a href="/qwikcity/prefetching/request-response-cache/">Response Caching</a></li><li><a href="/qwikcity/prefetching/parallelizing-network-requests/">Parallelizing Requests</a></li></ul></details></li><li><details><summary><h5>Static Site Generation</h5></summary><ul><li><a href="/qwikcity/static-site-generation/overview/">Overview</a></li><li><a href="/qwikcity/static-site-generation/static-site-config/">Static Site Config</a></li><li><a href="/qwikcity/static-site-generation/dynamic-routes/">Dynamic Routes</a></li></ul></details></li><li><details><summary><h5>Head</h5></summary><ul><li><a href="/qwikcity/head/title/">Title</a></li></ul></details></li><li><details><summary><h5>APIs</h5></summary><ul><li><a href="/qwikcity/api/use-content/">useContent()</a></li><li><a href="/qwikcity/api/use-document-head/">useDocumentHead()</a></li><li><a href="/qwikcity/api/use-location/">useLocation()</a></li></ul></details></li></ul></nav></aside><!--/qv--><main><div class="docs-container"><article><!--qv q:s q:sref=4 q:key=--><h1 id="qwik-city-routing"><a aria-hidden="true" tabIndex="-1" href="#qwik-city-routing"><span class="icon icon-link"></span></a>Qwik City (routing)</h1> 16<p><em>aka. Qwik Router</em></p> 17<p>å¦ä¹ Qwik å Qwik City 䏿¯ä¸¤ä»¶äº, Qwik City æ¯æå»ºå¨ Qwikçåºç¡ä¸ç, 带æ¥äºçº¦å®å¼è·¯ç±åå ¶ä»ç好ä¸è¥¿ï¼ 18è¿äºä¸è¥¿å¯ä»¥ä½¿ä½ ççæ´»æ´å®¹æã</p> 19<blockquote> 20<p>Qwik¹ City²</p> 21<p><a href="/docs/overview/"><strong>Qwik¹</strong></a>: æ ¸å¿æ¡æ¶, 稳å®ç, åå§ç, ç»ä»¶æ¨¡åã</p> 22<p><a href="/qwikcity/directory-layout/"><strong>City²</strong></a>: 约å®å¼åºäºæä»¶çè·¯ç±, æå»ºå¾å¿«ã</p> 23</blockquote> 24<p>Qwik Cityæ¯ QWIKç <strong>meta-framework</strong>ã 25Qwik City ä¹äº Qwik, å°±å <a href="https://nextjs.org/">Next.js</a> ä¹äº React, å°±å <a href="https://nuxtjs.org/">Nuxt</a> ä¹äº Vue, 26æè <a href="https://kit.svelte.dev/">SvelteKit</a> ä¹äº Svelteã</p> 27<p>Qwik (core) å Qwik City (routing) å¨ä¸¤ä¸ªä¸åæ½è±¡å±çº§ä¸ è§£å³é®é¢ã 28<strong>Qwik å¯ä»¥ä¿æç¨³å®</strong>, 没æbreaking changes, èç¦å¨ é¿æ and 稳å®ç primitives, 29è Qwik City 带æ¥äº æå»ºç«ç¹ ç <strong>约å®å¼ å 髿§è½çæ¹å¼</strong>ã
30æä»¬ä¸æ³æçæéæ»å¨æå»ºç«ç¹çå¯ä¸æ£ç¡®çæ¹å¼ã 31äºå®ä¸æä»¬é¼å±ç¤¾åº å¨QWIKä¸æå»ºå ¶ä»è§£å³æ¹æ¡ã</p> 32<blockquote> 33<p>As a user, using Qwik City today for your app is a no-brainer. Thanks to Qwik architecture, it comes with zero overhead, meaning that no extra JS will be delivered to the browser.</p> 34</blockquote> 35<p>使ç¨Qwik Cityæå»ºçµåç½ç«ï¼å客ç«ç¹ï¼æä»»ä½å ¶ä» éè¦è·¯ç±ãlayoutãæ¨¡æ¿ãæ°æ®è·å/æ°æ®æ´æ° çç«ç¹ï¼ 36Qwik City æå»ºå¨ Qwikä¹ä¸, å æ¤ Qwik City ç«ç¹ æ¯ å¯æ¢å¤ç 37å¹¶ä¸ å ç»ç²åº¦çæå è½½å¯ä»¥åªä¸è½½æå°éçJSã</p> 38<p>Qwik City æä¾:</p> 39<ul> 40<li>åºäºç®å½çè·¯ç±</li> 41<li>åµå¥ layouts</li> 42<li>File-based menus</li> 43<li>é¢å å±</li> 44<li>æ¯æç¨ <code>.tsx</code> æ <code>.mdx</code> æä»¶æ ¼å¼åä½å 容</li> 45<li>Data endpoints</li> 46</ul> 47<p>é»è®¤ä¸ï¼QWIK cityç«ç¹æ¯å¾å¿«çå 为å®ï¼</p> 48<ul> 49<li>æ¯ å¯æ¢å¤ç</li> 50<li>ä¸è½½å¾å°çJS</li> 51<li>æé äº <a href="https://partytown.builder.io">Partytown</a></li> 52</ul> 53<p>为äºè·ä¸æ¥ä¸æ¥çæå¯¼å 容ï¼è¯·å¨ä½ çå½ä»¤è¡è¿è¡Qwik CLIï¼</p> 54<pre><code class="language-bash"><span class="token function">npm</span> create qwik@latest 55</code></pre> 56<p>ææç¤ºåï¼è¯·è¾å ¥ä¸ä¸ªé¡¹ç®å å éæ©é¡¹ç®æ¨¡æ¿ã</p> 57<blockquote> 58<p>注æ: <code>start</code> èæ¬å°è¯å¨ç³»ç»æµè§å¨æèµ·ç«ç¹, 59which in headless environments (e.g., within a container) 60å¯è½å¯¼è´å½ä»¤å¤±è´¥. 61ç¼è¾ <code>package.json</code> æ¸ é¤ <code>--open</code> flagã</p> 62</blockquote><!--/qv--></article><!--qv q:id=a q:key=o2ZMUQk09QI:--><style q:style="iv0djj-0">.content-nav .prev,.content-nav .next{position:relative;background-color:var(--qwik-dark-blue);border:1px solid var(--qwik-dark-blue);border-radius:5px;padding:6px 16px;text-decoration:none;color:#fff;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:10px 0;max-width:150px}@media (min-width: 540px){.content-nav .prev,.content-nav .next{max-width:250px}}.content-nav .prev:hover,.content-nav .next:hover{background-color:#fff;color:var(--qwik-dark-blue)}.content-nav .prev{padding-left:24px}.content-nav .next{padding-right:24px}
62.content-nav .prev:before{position:absolute;content:"\2039";top:5px;left:11px}.content-nav .next:after{position:absolute;content:"\203a";top:5px;right:11px} 63</style><nav class="content-nav border-t border-slate-300 flex flex-wrap py-4"><div class="flex-1"></div><div class="flex-1 text-right"><a href="/qwikcity/directory-layout/" class="px-3 py-1 next">Directory Layout</a></div></nav><!--/qv--><!--qv q:id=b q:key=DpcML3LPGPg:--><style q:style="gtyaj8-0">footer{padding:20px 0}.made-with-love{font-size:12px;margin-bottom:9px;color:#333}.footer-top{display:flex;justify-content:space-between;border-bottom:1px solid black;padding-bottom:15px}.builder-logo{width:160px}.footer-social{list-style:none;display:flex}.footer-social li{padding:10px}.footer-bottom{padding-top:5px;font-size:12px} 64</style><footer class="container mx-auto px-4 md:px-0 mt-4"><div class="made-with-love">Made with â¤ï¸ by</div><div class="footer-top"><a href="https://www.builder.io" target="_blank"><img width="312" height="67" src="/build/q-244efe0e.svg" alt="Builder.io logo" loading="lazy" class="builder-logo"></a><ul class="footer-social"><li><a href="https://qwik.builder.io/chat" target="_blank" title="Discord"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512" role="img" fill="currentColor" aria-label="Discord Logo"><path d="M464 66.52A50 50 0 00414.12 17L97.64 16A49.65 49.65 0 0048 65.52V392c0 27.3 22.28 48 49.64 48H368l-13-44 109 100zM324.65 329.81s-8.72-10.39-16-19.32C340.39 301.55 352.5 282 352.5 282a139 139 0 01-27.85 14.25 173.31 173.31 0 01-35.11 10.39 170.05 170.05 0 01-62.72-.24 184.45 184.45 0 01-35.59-10.4 141.46 141.46 0 01-17.68-8.21c-.73-.48-1.45-.72-2.18-1.21-.49-.24-.73-.48-1-.48-4.36-2.42-6.78-4.11-6.78-4.11s11.62 19.09 42.38 28.26c-7.27 9.18-16.23 19.81-16.23 19.81-53.51-1.69-73.85-36.47-73.85-36.47 0-77.06 34.87-139.62 34.87-139.62 34.87-25.85 67.8-25.12 67.8-25.12l2.42 2.9c-43.59 12.32-63.44 31.4-63.44 31.4s5.32-2.9 14.28-6.77c25.91-11.35 46.5-14.25 55-15.21a24 24 0 014.12-.49 205.62 205.62 0 0148.91-.48 201.62 201.62 0 0172.89 22.95s-19.13-18.15-60.3-30.45l3.39-3.86s33.17-.73 67.81 25.16c0 0 34.87 62.56 34.87 139.62 0-.28-20.35 34.5-73.86 36.19z"></path><path d="M212.05 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.8 0 24.7-11.83 24.7-26.57.25-14.76-10.9-26.57-24.7-26.57zM300.43 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.81 0 24.7-11.83 24.7-26.57S314 218 300.43 218z"></path></svg></a></li><li><a href="https://github.com/BuilderIO/qwik" target="_blank" title="Github"><svg viewBox="0 0 16 16" width="22" height="22" fill="currentColor" role="img" aria-label="Github Logo"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></li><li><a href="https://twitter.com/qwikdev" target="_blank" title="Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512" role="img" fill="currentColor" aria-label="Twitter Logo"><path d="M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z"></path></svg></a></li></ul></div><div class="footer-bottom">© 2022 Builder.io, Inc.</div></footer><!--/qv--></div><!--qv q:id=c q:key=7YoMfUrtVcI:--><style q:style="8pzyiz-0">.on-this-page{bottom:0px;z-index:20;padding-bottom:2rem;font-size:.875rem;line-height:1.25rem}.on-this-page h6{padding-bottom:.75rem;font-weight:600;text-transform:uppercase}.on-this-page ul{padding-bottom:1.5rem}.on-this-page a{position:relative;display:block;color:#006ce9c7;border:0 solid #18b6f6;border-left-width:2px;padding:4px 2px 4px 12px}.on-this-page a.indent{padding-left:30px}.on-this-page a:hover{background-color:#0093ee17;border-color:var(--qwik-dark-blue)}.on-this-page svg{display:inline-block;position:absolute;top:7px}
64.on-this-page span{display:inline-block;padding:3px 0 2px 28px} 65</style><aside class="on-this-page fixed text-sm z-20 bottom-0 right-[max(0px,calc(50%-42rem))] overflow-y-auto hidden xl:block xl:w-[16rem] xl:top-[9rem]"><h6>More</h6><ul><li><a href="https://github.com/BuilderIO/qwik/edit/main/packages/docs/src/routes/qwikcity/overview/index.mdx" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512" aria-hidden="true"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path fill="currentColor" d="M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z"></path></svg><span>Edit this page</span></a></li><li><a href="https://github.com/BuilderIO/qwik/issues/new/choose" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" aria-hidden="true" viewBox="0 0 512 512"><path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path d="M250.26 166.05L256 288l5.73-121.95a5.74 5.74 0 00-5.79-6h0a5.74 5.74 0 00-5.68 6z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path d="M256 367.91a20 20 0 1120-20 20 20 0 01-20 20z" fill="currentColor"></path></svg><span>Create an issue</span></a></li><li><a href="https://qwik.builder.io/chat" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512" aria-hidden="true"><path d="M408 64H104a56.16 56.16 0 00-56 56v192a56.16 56.16 0 0056 56h40v80l93.72-78.14a8 8 0 015.13-1.86H408a56.16 56.16 0 0056-56V120a56.16 56.16 0 00-56-56z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path></svg><span>Join our community</span></a></li><li><a href="https://github.com/BuilderIO/qwik" target="_blank" rel="nofollow noopener"><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor" role="img" aria-label="Github Logo"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg><span>Github</span></a></li><li><a href="https://twitter.com/QwikDev" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512" role="img" fill="currentColor" aria-label="Twitter Logo"><path d="M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z"></path></svg><span>@QwikDev</span></a></li></ul></aside><!--/qv--></main></div><!--/qv--><!--/qv-->
65<script>((s,a,i,r)=>{i=(e,t)=>{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?i(t):t.bundles&&s.push(...t.bundles)}),navigator.serviceWorker.register("/service-worker.js").then(e=>{r=()=>{a=e,i({bundles:s})},e.installing?e.installing.addEventListener("statechange",t=>{t.target.state=="activated"&&r()}):e.active&&r()}).catch(e=>console.error(e))})([])</script>
65<script> 66 ((d, sentStats) => { 67 const id = () => Math.round(Math.random() * Number.MAX_SAFE_INTEGER).toString(36); 68 const pageId = id(); 69 const sessionId = (sessionStorage["q:sId"] = sessionStorage["q:sId"] || id()); 70 const now = Date.now(); 71 const sessionStart = parseInt((sessionStorage["q:sTs"] = sessionStorage["q:sTs"] || now), 10); 72 const sessionOffset = now - sessionStart; 73 const visitorId = (localStorage["q:vId"] = localStorage["q:vId"] || id()); 74 const qEvents = []; 75 const loggedQrls = new Set(); 76 77 const send = () => { 78 if (qEvents.length > 0) { 79 fetch("https://cdn.builder.io/api/v1/track", { 80 method: "POST", 81 body: JSON.stringify({ events: qEvents }), 82 keepalive: true, 83 }); 84 qEvents.length = 0; 85 } 86 87 }; 88 89 const queue = (type, metadata) => { 90 qEvents.push({ 91 type: type, 92 data: { 93 metadata: { 94 url: location.href, 95 pageId: pageId, 96 sessionOffset: sessionOffset, 97 ...metadata 98 }, 99 ownerId: "fe30f73e01ef40558cd69a9493eba2a2", 100 sessionId: sessionId, 101 visitorId: visitorId 102 }, 103 }); 104 }; 105 106 d.addEventListener("qsymbol", (ev) => { 107 try { 108 const detail = ev.detail; 109 const qsymbol = detail?.symbol; 110 if (qsymbol && !loggedQrls.has(qsymbol)) { 111 loggedQrls.add(qsymbol); 112 113 queue("qrl", { 114 reqTime: Math.round(detail?.reqTime ?? -1), 115 execTime: Math.round(performance.now()), 116 qsymbol: qsymbol, 117 }); 118 119 if (qEvents.length > 9) { 120 send(); 121 } 122 } 123 } catch (e) { 124 console.error(e); 125 } 126 }); 127 128 d.addEventListener("visibilitychange", () => { 129 if (d.visibilityState === "hidden") { 130 try { 131 if (!sentStats) { 132 sentStats = true; 133 134 const metadata = { 135 perf: [], 136 ua: navigator.userAgent, 137 }; 138 const entryTypes = ["navigation", "paint", "longtask"]; 139 140 if (performance.getEntriesByType) { 141 for (const entryTypeName of entryTypes) { 142 for (const entry of performance.getEntriesByType(entryTypeName)) { 143 metadata.perf.push(entry.toJSON()); 144 } 145 } 146 } 147 148 if (navigator.connection) { 149 metadata.conn = {}; 150 for (const n in navigator.connection) { 151 if (navigator.connection[n] && typeof navigator.connection[n] !== "function") { 152 metadata.conn[n] = navigator.connection[n]; 153 } 154 } 155 } 156 queue('qstats', metadata); 157 } 158 send(); 159 } catch (e) { 160 console.error(e); 161 } 162 } 163 }); 164 })(document); 165</script>
165</body><!--/qv--><!--/qv--><!--/qv-->
165<script type="qwik/json">{"ctx":{"#0":{"h":"2! e","s":"f 0! g","c":"site-store=0!"},"#1":{"c":"qc-c=4l! qc-ic=4m! qc-h=4s! qc-l=4w! qc-n=4!"},"#6":{"r":"0!"},"#8":{"r":"0!"},"#9":{"r":"0!"},"#d":{"h":"3! h","s":"i 1! 6!"},"#e":{"r":"6! 1!"},"#g":{"r":"1!"}},"objs":[{"headerMenuOpen":"5","sideMenuOpen":"5"},{"isOpen":"5","initialQuery":"7","favoriteSearches":"8","recentSearches":"8","query":"7","collections":"9","context":"b","activeItemId":"8","status":"c","snippetLength":"d"},{},{"appId":"4x","apiKey":"4x","indexName":"4x"},{"path":"r"},false,{"current":"#g"},"",null,[],[],{"searchSuggestions":"a"},"idle",10,"\u0002q-217ebb2b.js#s_jYmHfFOoy2s","kcqvc0-0",true,"\u0002q-d8bda0cf.js#s_VpE1JptyDuo","xxzfna-0","Qwik City (routing)","qwik-city-routing",1,{"text":"j","id":"k","level":"l"},["m"],"Qwik City Guide","Qwik City","Overview","/qwikcity/overview/",{"text":"q","href":"r"},"Directory Layout","/qwikcity/directory-layout/",{"text":"t","href":"u"},"Static Assets","/qwikcity/static-assets/",{"text":"w","href":"x"},["s","v","y"],{"text":"p","items":"z"},"Routing","/qwikcity/routing/overview/",{"text":"q","href":"12"},"Route Parameters","/qwikcity/routing/route-parameters/",{"text":"14","href":"15"},"Error Responses","/qwikcity/routing/error-responses/",{"text":"17","href":"18"},["13","16","19"],{"text":"11","items":"1a"},"Layout","/qwikcity/layout/overview/",{"text":"q","href":"1d"},"Nested","/qwikcity/layout/nested/",{"text":"1f","href":"1g"},"Grouped","/qwikcity/layout/grouped/",{"text":"1i","href":"1j"},"Named","/qwikcity/layout/named/",{"text":"1l","href":"1m"},"Top","/qwikcity/layout/top/",{"text":"1o","href":"1p"},["1e","1h","1k","1n","1q"],{"text":"1c","items":"1r"},"Data","/qwikcity/data/overview/",{"text":"q","href":"1u"},"Retrieving Data","/qwikcity/data/retrieve/",{"text":"1w","href":"1x"},"Modifying Data","/qwikcity/data/modify/",{"text":"1z","href":"20"},"Endpoints","/qwikcity/data/endpoints/",{"text":"22","href":"23"},"Redirects","/qwikcity/data/redirects/",{"text":"25","href":"26"},["1v","1y","21","24","27"],{"text":"1t","items":"28"},"Authoring Content","Components","/qwikcity/content/component/",{"text":"2b","href":"2c"},"MDX","/qwikcity/content/mdx/",{"text":"2e","href":"2f"},"Menu","/qwikcity/content/menu/",{"text":"2h","href":"2i"},["2d","2g","2j"],{"text":"2a","items":"2k"},"Integrations","React","/qwikcity/integrations/react/",{"text":"2n","href":"2o"},"Partytown","/qwikcity/integrations/partytown/",{"text":"2q","href":"2r"},"Tailwind","/qwikcity/integrations/tailwind/",{"text":"2t","href":"2u"},["2p","2s","2v"],{"text":"2m","items":"2w"},"Server adaptors","/qwikcity/adaptors/overview/",{"text":"q","href":"2z"},"Cloudflare Pages","/qwikcity/adaptors/cloudflare-pages/",{"text":"31","href":"32"},"Netlify Edge","/qwikcity/adaptors/netlify-edge/",{"text":"34","href":"35"},"Node","/qwikcity/adaptors/node/",{"text":"37","href":"38"},["30","33","36","39"],{"text":"2y","items":"3a"},"Prefetching","/qwikcity/prefetching/overview/",{"text":"q","href":"3d"},"Service Worker","/qwikcity/prefetching/service-worker-prefetching/",{"text":"3f","href":"3g"},"Response Caching","/qwikcity/prefetching/request-response-cache/",{"text":"3i","href":"3j"},"Parallelizing Requests","/qwikcity/prefetching/parallelizing-network-requests/",{"text":"3l","href":"3m"},["3e","3h","3k","3n"],{"text":"3c","items":"3o"},"Static Site Generation","/qwikcity/static-site-generation/overview/",{"text":"q","href":"3r"},"Static Site Config","/qwikcity/static-site-generation/static-site-config/",{"text":"3t","href":"3u"},"Dynamic Routes","/qwikcity/static-site-generation/dynamic-routes/",{"text":"3w","href":"3x"},["3s","3v","3y"],{"text":"3q","items":"3z"},"Head","Title","/qwikcity/head/title/",{"text":"42","href":"43"},["44"],{"text":"41","items":"45"},"APIs","useContent()","/qwikcity/api/use-content/",{"text":"48","href":"49"},"useDocumentHead()","/qwikcity/api/use-document-head/",{"text":"4b","href":"4c"},"useLocation()","/qwikcity/api/use-location/",{"text":"4e","href":"4f"},["4a","4d","4g"],{"text":"47","items":"4h"},["10","1b","1s","29","2l","2x","3b","3p","40","46","4i"],{"text":"o","items":"4j"},{"headings":"n","menu":"4k"},{"contents":"4x"},"Qwik City - Overview",[],[],[],{},{"title":"4n","meta":"4o","links":"4p","styles":"4q","frontmatter":"4r"},"https://qwik.builder.io/qwikcity/overview/",{},{},{"href":"4t","pathname":"r","query":"4u","params":"4v"},"\u0001"],"subs":[["0 #0 headerMenuOpen","0 #0 sideMenuOpen"],["0 #d isOpen"],["_2"],["_2"],[]]}</script>
165<script type="module">document.dispatchEvent(new CustomEvent("qprefetch",{detail:{"bundles":["q-e8c101b4.js","q-217ebb2b.js","q-3ed3932e.js","q-273f31e7.js","q-69ca505c.js","q-a3c73279.js","q-bff208b5.js","q-f8ae59c2.js","q-7ef72cb2.js","q-e232404c.js","q-646c773b.js","q-fd0afd80.js","q-d8bda0cf.js"]}}))</script>
165<script id="qwikloader">((e,t)=>{const n="__q_context__",o=window,r=new Set,i=t=>e.querySelectorAll(t),s=(e,t,n=t.type)=>{i("[on"+e+"\\:"+n+"]").forEach((o=>l(o,e,t,n)))},a=(e,t)=>new CustomEvent(e,{detail:t}),c=(t,n)=>(t=t.closest("[q\\:container]"),new URL(n,new URL(t.getAttribute("q:base"),e.baseURI))),l=async(t,o,r,i=r.type)=>{const s="on"+o+":"+i;t.hasAttribute("preventdefault:"+i)&&r.preventDefault();const a=t._qc_,l=null==a?void 0:a.li.filter((e=>e[0]===s));if(l&&l.length>0){for(const e of l)await e[1].getFn([t,r],(()=>t.isConnected))(r,t);return}const d=t.getAttribute(s);if(d)for(const o of d.split("\n")){const i=c(t,o),s=b(i),a=performance.now(),l=u(await import(i.href.split("#")[0]),s),d=e[n];if(t.isConnected)try{e[n]=[t,r,i],f("qsymbol",{symbol:s,element:t,reqTime:a}),await l(r,t)}finally{e[n]=d}}},f=(t,n)=>{e.dispatchEvent(a(t,n))},u=(e,t)=>{if(t in e)return e[t];for(const n of Object.values(e))if("object"==typeof n&&n&&t in n)return n[t]},b=e=>e.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",d=e=>e.replace(/([A-Z])/g,(e=>"-"+e.toLowerCase())),p=async e=>{let t=d(e.type),n=e.target;for(s("-document",e,t);n&&n.getAttribute;)await l(n,"",e,t),n=e.bubbles&&!0!==e.cancelBubble?n.parentElement:null},v=e=>{s("-window",e,d(e.type))},w=()=>{var n;const s=e.readyState;if(!t&&("interactive"==s||"complete"==s)&&(t=1,f("qinit"),(null!=(n=o.requestIdleCallback)?n:o.setTimeout).bind(o)((()=>f("qidle"))),r.has("qvisible"))){const e=i("[on\\:qvisible]"),t=new IntersectionObserver((e=>{for(const n of e)n.isIntersecting&&(t.unobserve(n.target),l(n.target,"",a("qvisible",n)))}));e.forEach((e=>t.observe(e)))}},q=(e,t,n,o=!1)=>e.addEventListener(t,n,{capture:o}),y=t=>{for(const n of t)r.has(n)||(q(e,n,p,!0),q(o,n,v),r.add(n))};if(!e.qR){const t=o.qwikevents;Array.isArray(t)&&y(t),o.qwikevents={push:(...e)=>y(e)},q(e,"readystatechange",w),w()}})(document);</script>
165<script>window.qwikevents.push("click", "keydown")</script>
165</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.