PageSourceSearch

https://qwikcn.netlify.app/qwikcity/overview/

html qwikcn.netlify.app collected 2026-10-03 11:18:37 UTC 72,836 bytes, 165 lines download raw bytes

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.