Hello World 📚 Qwik Documentation

	
		OSZAR »

\n \n );\n};\n","\u0002q-q0YFrO62.js#s_1yp1UcY0e2M[r!]","\u00031 5 2s #8","\u0002q-D0AHmzFH.js#s_9t1uPE4yoLA[4!]","\u00031 4 2u #a","X0ISHY6M1I","33e17ca2559e66c62577ab1d6c195a36","qwik",{"isOpen":"x","appId":"2w","apiKey":"2x","indexName":"2y"},"\u0002q-DuXcmrGz.js#s_NsnidK2eXPg","gcz2wk-0","\u0011s @b","idle",10,"\u00126b","rs70xc-tPjcayG9jX8-r",{"localId":"36","showSig":"x","closeOnBackdropClick":"6b","onShow$":"6b","onClose$":"6b","alert":"6b"},"\u0002q-q0YFrO62.js#s_0Q7aC2voKhA","\u0002q-q0YFrO62.js#s_Nj3eCBc9G7M","\u0002q-q0YFrO62.js#s_tjLLDiWJ90g","\u0002q-q0YFrO62.js#s_YieKg0HKpZk","\u0002q-q0YFrO62.js#s_kIsDBCxiN1Y","\u0002q-q0YFrO62.js#s_kOTxCB0l3I4[3c]","\u0002q-Bd1UaK32.js#s_zJuwLdGQuqw",{"trapFocus":"38","activateFocusTrap":"39","deactivateFocusTrap":"3a","showModal":"3b","closeModal":"3d","wasModalBackdropClicked":"3e","supportClosingAnimation":"3c"},"\u0012#1q","\u0002q-q0YFrO62.js#s_AvZDuASwsJQ[37 3f 3g]","\u00032 3 3h #1p","\u0002q-q0YFrO62.js#s_gv1XLpH4WE4[37]","\u00032 4 3j #1p","\u001137 @c","\u001137 @d","\u001137 @e","The simplest Qwik app.","🌎",{"path":"2d","code":"2n"},{"path":"2o","code":"2p"},{"path":"2q","code":"2r"},["3q","3r","3s"],{"id":"1h","title":"1y","description":"3o","icon":"3p","inputs":"3t"},"Input","Examples","Output","Console","introduction/runtime-less","Runtime-less","An interactive app without runtime.","🪶","import { component$ } from '@builder.io/qwik';\n\nexport default component$(() => {\n console.log('render ');\n return (\n

\n {\n // The click handler is completely stateless, and does not use any QWIK api.\n // Meaning, the qwik runtime is NEVER downloaded, nor executed\n console.log('click');\n const div = document.querySelector('#container')! as HTMLElement;\n if (div.style.background === 'yellow') {\n div.style.background = 'red';\n } else {\n div.style.background = 'yellow';\n }\n }}\n >\n Action\n \n

\n );\n});\n",{"path":"2d","code":"43"},{"path":"2o","code":"2p"},{"path":"2q","code":"2r"},["44","45","46"],{"id":"3z","title":"40","description":"41","icon":"42","inputs":"47"},"reactivity/task","Simple useTask()","Learn how to react to changes in variables.","👀","import { component$, useTask$, useStore } from '@builder.io/qwik';\n\ninterface State {\n count: number;\n debounced: number;\n}\n\nexport default component$(() => {\n const store = useStore({\n count: 0,\n debounced: 0,\n });\n\n useTask$(({ track }) => {\n // track changes in store.count\n track(() => store.count);\n console.log('count changed');\n\n const timer = setTimeout(() => {\n store.debounced = store.count;\n }, 2000);\n return () => {\n clearTimeout(timer);\n };\n });\n\n console.log(' renders');\n return (\n

\n \n \n

\n );\n});\n\nexport const Child = component$((props: { state: State }) => {\n console.log(' render');\n return (\n

{props.state.count}

\n \n

\n );\n});\n\nexport const GrandChild = component$((props: { state: State }) => {\n console.log(' render');\n return

Debounced: {props.state.debounced}

;\n});\n",{"path":"2d","code":"4d"},{"path":"2o","code":"2p"},{"path":"2q","code":"2r"},["4e","4f","4g"],{"id":"49","title":"4a","description":"4b","icon":"4c","inputs":"4h"},"reactivity/counter","Counter","A simple standard counter example.","⏲","import { component$, useStore } from '@builder.io/qwik';\n\nexport default component$(() => {\n const store = useStore({ count: 0 });\n\n return (\n

Count: {store.count}

\n \n

\n );\n});\n",{"path":"2d","code":"4n"},{"path":"2o","code":"2p"},"import App from './app';\n\nexport const Root = () => {\n return (\n <>\n \n Counter\n \n \n \n

	
		OSZAR »

\n \n );\n};\n",{"path":"2q","code":"4q"},["4o","4p","4r"],{"id":"4j","title":"4k","description":"4l","icon":"4m","inputs":"4s"},"reactivity/auto-complete","Auto-complete","Auto-complete searching for Star Wars characters using the SWAPI API","🎬","import { component$, useStore, useTask$ } from '@builder.io/qwik';\n\nexport default component$(() => {\n return (\n

\n This example features an auto-complete component with a debounce of 150 ms.\n
\n The function `debouncedGetPeople` needs to be exported because it is used in `useTask$`.\n
\n
\n Go ahead, search for Star Wars characters such as \"Luke Skywalker\", it uses the{' '}\n Star Wars API\n \n

\n );\n});\n\ninterface IState {\n searchInput: string;\n searchResults: string[];\n selectedValue: string;\n}\n\nexport const AutoComplete = component$(() => {\n const state = useStore({\n searchInput: '',\n searchResults: [],\n selectedValue: '',\n });\n\n useTask$(async ({ track }) => {\n const searchInput = track(() => state.searchInput);\n\n if (!searchInput) {\n state.searchResults = [];\n return;\n }\n\n const controller = new AbortController();\n state.searchResults = await debouncedGetPeople(state.searchInput, controller);\n\n return () => {\n controller.abort();\n };\n });\n\n return (\n

\n (state.searchInput = el.value)} />\n \n

\n );\n});\n\nexport const SuggestionsListComponent = (props: { state: IState }) => {\n const searchResults = props.state.searchResults;\n return searchResults?.length ? (\n

(props.state.selectedValue = suggestion)}>{suggestion}

\n ) : (\n

\n No suggestions, you re on your own!\n

\n );\n};\n\nconst getPeople = (searchInput: string, controller?: AbortController): Promise =>\n fetch(`https://swapi.dev/api/people/?search=${searchInput}`, {\n signal: controller?.signal,\n })\n .then((response) => {\n return response.json();\n })\n .then((parsedResponse) => {\n return parsedResponse.results.map((people: { name: string }) => people.name);\n });\n\nfunction debounce any>(fn: F, delay = 500) {\n let timeoutId: ReturnType;\n\n return (...args: Parameters): Promise> => {\n return new Promise((resolve) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => {\n resolve(fn(...(args as any[])));\n }, delay);\n });\n };\n}\n\nexport const debouncedGetPeople = debounce(getPeople, 150);\n",{"path":"2d","code":"4y"},{"path":"2o","code":"2p"},"import App from './app';\n\nexport const Root = () => {\n return (\n <>\n \n Auto-complete example using Qwik\n \n \n \n

	
		OSZAR »

\n \n );\n};\n",{"path":"2q","code":"51"},["4z","50","52"],{"id":"4u","title":"4v","description":"4w","icon":"4x","inputs":"53"},"visibility/clock","Below the fold Clock","Component which requires lazy initialization when it comes into view.","⏰","import { component$, useStore, useStyles$, useVisibleTask$ } from '@builder.io/qwik';\nimport styles from './clock.css?inline';\n\nexport default component$(() => {\n const items = new Array(60).fill(null).map((_, index) => 'item ' + index);\n\n console.log('PARENT');\n return (\n

console.log('test')}>\n This is an example of Lazy executing code on component when component becomes visible.\n

\n\n

\n ⬇️ Scroll down until the clock is in view.\n

\n\n

\n\n \n

\n );\n});\n\nexport const Clock = component$(() => {\n useStyles$(styles);\n\n const store = useStore({\n hour: 0,\n minute: 0,\n second: 0,\n });\n\n useVisibleTask$(() => {\n const update = () => {\n const now = new Date();\n store.second = now.getSeconds() * (360 / 60);\n store.minute = now.getMinutes() * (360 / 60);\n store.hour = now.getHours() * (360 / 12);\n };\n update();\n const tmrId = setInterval(update, 1000);\n return () => clearInterval(tmrId);\n });\n\n console.log('Render Clock');\n return (\n

\n );\n});\n",{"path":"2d","code":"59"},"/clock.css","/* Clock inspired by: https://paulund.co.uk/create-a-clock-in-css */\n\n.clock {\n background: #fff;\n border: 10px solid #7a7a7a;\n border-radius: 50%;\n box-sizing: border-box;\n height: 300px;\n margin: 0 auto;\n position: relative;\n width: 300px;\n}\n\n.twelve,\n.three,\n.six,\n.nine {\n background: #333;\n position: absolute;\n}\n\n.twelve,\n.six {\n height: 10px;\n width: 4px;\n}\n\n.three,\n.nine {\n height: 4px;\n width: 10px;\n}\n\n.twelve {\n left: 50%;\n top: -1px;\n}\n\n.three {\n right: -1px;\n top: 50%;\n}\n\n.six {\n left: 50%;\n bottom: -1px;\n}\n\n.nine {\n left: -1px;\n top: 50%;\n}\n\n.hour {\n height: 60px;\n width: 4px;\n background: #333;\n position: absolute;\n left: 50%;\n top: 80px;\n animation: tick 43200s infinite linear;\n -webkit-animation: tick 43200s infinite linear;\n}\n\n.minute {\n height: 100px;\n width: 4px;\n background: #777;\n position: absolute;\n left: 50%;\n top: 40px;\n animation: tick 3600s infinite linear;\n -webkit-animation: tick 3600s infinite linear;\n}\n\n.second {\n height: 120px;\n width: 3px;\n background: #fc0505;\n position: absolute;\n left: 50%;\n top: 20px;\n animation: tick 60s infinite linear;\n -webkit-animation: tick 60s infinite linear;\n}\n\n.hour,\n.minute,\n.second {\n transform-origin: 2px 100%;\n -webkit-transform-origin: 2px 100%;\n}\n",{"path":"5b","code":"5c"},{"path":"2o","code":"2p"},"import App from './app';\n\nexport const Root = () => {\n return (\n <>\n \n Clock\n \n \n \n

	
		OSZAR »

\n \n );\n};\n",{"path":"2q","code":"5f"},["5a","5d","5e","5g"],{"id":"55","title":"56","description":"57","icon":"58","inputs":"5h"},"partial/hackernews-index","HackerNews","HackerNews landing page.","📰","import { component$, useTask$, useStore, useStyles$ } from '@builder.io/qwik';\nimport { isServer } from '@builder.io/qwik';\nimport HackerNewsCSS from './hacker-news.css?inline';\n\nexport const HackerNews = component$(() => {\n useStyles$(HackerNewsCSS);\n const store = useStore({ data: null });\n\n useTask$(async () => {\n if (isServer) {\n const response = await fetch('https://node-hnapi.herokuapp.com/news?page=0');\n store.data = await response.json();\n }\n });\n\n return (\n

\n );\n});\n\nexport const Nav = component$(() => {\n return (\n \n );\n});\n\nexport const Stories = component$<{ data: any }>((props) => {\n const page = 1;\n const type = 'list';\n const stories = props.data;\n return (\n

\n {page > 1 ? (\n \n {'<'} prev\n \n ) : (\n \n {'<'} prev\n \n )}\n page {page}\n {stories && stories.length >= 29 ? (\n \n more {'>'}\n \n ) : (\n \n more {'>'}\n \n )}\n

\n {stories && (\n

\n ))}\n

\n )}\n

\n );\n});\n\nexport const StoryPreview = component$<{ story: IStory }>((props) => {\n return (\n

\n {props.story.points}\n \n {props.story.url && !props.story.url.startsWith('item?id=') ? (\n <>\n \n {props.story.title}\n \n ({props.story.domain})\n \n ) : (\n {props.story.title}\n )}\n \n
\n \n {props.story.type !== 'job' ? (\n <>\n by {props.story.user} {props.story.time_ago}{' '}\n |{' '}\n \n {props.story.comments_count ? `${props.story.comments_count} comments` : 'discuss'}\n \n \n ) : (\n {props.story.time_ago}\n )}\n \n {props.story.type !== 'link' && (\n <>\n {' '}\n {props.story.type}\n \n )}\n

\n );\n});\n\nexport interface IComment {\n id: string;\n user: string;\n time_ago: string;\n content: string;\n comments: IComment[];\n}\n\nexport interface IStory {\n id: string;\n points: string;\n url: string;\n title: string;\n domain: string;\n type: string;\n time_ago: string;\n user: string;\n comments_count: number;\n comments: IComment[];\n}\n",{"path":"2d","code":"5n"},{"path":"2o","code":"2p"},"/hacker-news.css",".hacker-news {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n font-size: 15px;\n background-color: #f2f3f5;\n margin: 0;\n padding-top: 55px;\n color: #34495e;\n overflow-y: scroll;\n}\na {\n color: #34495e;\n text-decoration: none;\n}\n.header {\n background-color: #335d92;\n position: fixed;\n z-index: 999;\n height: 55px;\n top: 0;\n left: 0;\n right: 0;\n}\n.header .inner {\n max-width: 800px;\n box-sizing: border-box;\n margin: 0 auto;\n padding: 15px 5px;\n}\n.header a {\n color: rgba(255, 255, 255, 0.8);\n line-height: 24px;\n display: inline-block;\n vertical-align: middle;\n font-weight: 300;\n letter-spacing: 0.075em;\n margin-right: 1.8em;\n}\n.header a:hover {\n color: #fff;\n}\n.header a.active {\n color: #fff;\n font-weight: 400;\n}\n.header a:nth-child(6) {\n margin-right: 0;\n}\n.header .github {\n color: #fff;\n font-size: 0.9em;\n margin: 0;\n float: right;\n}\n.logo {\n width: 24px;\n margin-right: 10px;\n display: inline-block;\n vertical-align: middle;\n}\n.view {\n max-width: 800px;\n margin: 0 auto;\n position: relative;\n}\n@media (max-width: 860px) {\n .header .inner {\n padding: 15px 30px;\n }\n}\n@media (max-width: 600px) {\n .header .inner {\n padding: 15px;\n }\n .header a {\n margin-right: 1em;\n }\n .header .github {\n display: none;\n }\n}\n.news-view {\n padding-top: 45px;\n}\n.news-list,\n.news-list-nav {\n background-color: #fff;\n border-radius: 2px;\n}\n.news-list-nav {\n padding: 15px 30px;\n position: fixed;\n text-align: center;\n top: 55px;\n left: 0;\n right: 0;\n z-index: 998;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n.news-list-nav .page-link {\n margin: 0 1em;\n}\n.news-list-nav .disabled {\n color: #aaa;\n}\n.news-list {\n position: absolute;\n margin: 30px 0;\n width: 100%;\n}\n.news-list ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n@media (max-width: 600px) {\n .news-list {\n margin: 10px 0;\n }\n}\n.news-item {\n background-color: #fff;\n padding: 20px 30px 20px 80px;\n border-bottom: 1px solid #eee;\n position: relative;\n line-height: 20px;\n}\n.news-item .score {\n color: #335d92;\n font-size: 1.1em;\n font-weight: 700;\n position: absolute;\n top: 50%;\n left: 0;\n width: 80px;\n text-align: center;\n margin-top: -10px;\n}\n.news-item .host,\n.news-item .meta {\n font-size: 0.85em;\n color: #626262;\n}\n.news-item .host a,\n.news-item .meta a {\n color: #626262;\n text-decoration: underline;\n}\n.news-item .host a:hover,\n.news-item .meta a:hover {\n color: #335d92;\n}\n.item-view-header {\n background-color: #fff;\n padding: 1.8em 2em 1em;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n.item-view-header h1 {\n display: inline;\n font-size: 1.5em;\n margin: 0;\n margin-right: 0.5em;\n}\n.item-view-header .host,\n.item-view-header .meta,\n.item-view-header .meta a {\n color: #626262;\n}\n.item-view-header .meta a {\n text-decoration: underline;\n}\n.item-view-comments {\n background-color: #fff;\n margin-top: 10px;\n padding: 0 2em 0.5em;\n}\n.item-view-comments-header {\n margin: 0;\n font-size: 1.1em;\n padding: 1em 0;\n position: relative;\n}\n.item-view-comments-header .spinner {\n display: inline-block;\n margin: -15px 0;\n}\n.comment-children {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n@media (max-width: 600px) {\n .item-view-header h1 {\n font-size: 1.25em;\n }\n}\n.comment-children .comment-children {\n margin-left: 1.5em;\n}\n.comment {\n border-top: 1px solid #eee;\n position: relative;\n}\n.comment .by,\n.comment .text,\n.comment .toggle {\n font-size: 0.9em;\n margin: 1em 0;\n}\n.comment .by {\n color: #626262;\n}\n.comment .by a {\n color: #626262;\n text-decoration: underline;\n}\n.comment .text {\n overflow-wrap: break-word;\n}\n.comment .text a:hover {\n color: #335d92;\n}\n.comment .text pre {\n white-space: pre-wrap;\n}\n.comment .toggle {\n background-color: #fffbf2;\n padding: 0.3em 0.5em;\n border-radius: 4px;\n}\n.comment .toggle a {\n color: #626262;\n cursor: pointer;\n}\n.comment .toggle.open {\n padding: 0;\n background-color: transparent;\n margin-bottom: -0.5em;\n}\n.user-view {\n background-color: #fff;\n box-sizing: border-box;\n padding: 2em 3em;\n}\n.user-view h1 {\n margin: 0;\n font-size: 1.5em;\n}\n.user-view .meta {\n list-style-type: none;\n padding: 0;\n}\n.user-view .label {\n display: inline-block;\n min-width: 4em;\n}\n.user-view .about {\n margin: 1em 0;\n}\n.user-view .links a {\n text-decoration: underline;\n}\n",{"path":"5q","code":"5r"},"import { HackerNews } from './app';\n\nexport const Root = () => {\n return (\n <>\n \n Hacker News\n \n \n \n

	
		OSZAR »

\n \n );\n};\n",{"path":"2q","code":"5t"},["5o","5p","5s","5u"],{"id":"5j","title":"5k","description":"5l","icon":"5m","inputs":"5v"},{"panelStore":"z!"},"\u0012#1o","\u0002q-q0YFrO62.js#s_AqHBIVNKf34[5y c! e!]","\u00031 3 5z #1n","\u0002q-q0YFrO62.js#s_eePwnt3YTI8[4! e!]","\u00031 4 61 #1n","\u0002q-q0YFrO62.js#s_ycCVz0gorPI[37 3f 3g]","\u0002q-B-Gbqhmj.js#s_VnRMo7OMXyo","s7pbyy-0","\u0002q-Bk7CedWW.js#s_rQT2WX0s7cQ","m9eern-0","\u0002q-q0YFrO62.js#s_jTsKhAld0Tw","\u0002q-q0YFrO62.js#s_rVWNrK4uTuI","6pna6-0","\u0001"],"subs":[["_1"],["1 #3 1f #2 href url","0 #2 url","0 #a url"],["0 1q"],["0 1q"],["_1","1 #6 1t #0 class headerMenuOpen","1 #6 1t #0 class sideMenuOpen","3 #m 1u #m theme","1 #n 1w #k aria-label theme"],["_1","0 #2"],["_1","0 #2"],["_1","0 #2"],["_1"],["_1","1 #3 1f #2 href canonical"],["_1","0 #2 title","0 #2 meta","0 #2 links","0 #2 styles","1 #3 1f #2 href frontmatter"],["0 #7"],["0 28 input","0 2a input","0 2a store"],["_1"],["_1","0 28 editor","0 2a editor"],["_1"],["_1"],["_1"],["_1","0 #16"],["_1","0 #16"],["_1"],["_1","0 #1h"],["_1","0 18 serverWindow","0 #11 selectedInputPath","0 #16 diagnostics","0 #16 monacoDiagnostics","0 #16 enableHtmlOutput","0 #16 enableClientOutput","0 #16 enableSsrOutput","0 #16 isLoading","0 #16 serverUrl","0 #16 selectedOutputPanel","1 #1e 22 #16 class selectedOutputPanel","0 #11 selectedOutputDetail","0 #1h events","0 2a selectedInputPath"],["_1","0 #11 hidden","0 #11 path"],["_1","0 #11 hidden","0 #11 path"],["_1","0 #11 hidden","0 #11 path"],["_1","0 #11"],["_1","0 12 appId","0 14 buildId","0 14 buildMode","0 14 entryStrategy","0 14 files","0 14 version","0 #8 appId","0 2i files","0 18 buildId","0 18 buildMode","0 18 entryStrategy","0 18 files","0 18 version","0 18 debug","0 #11 files","0 28 version","1 #1d 2j #16 class buildMode","1 #1d 2j #16 class buildMode","0 2a version","0 2a files"],["1 #q 32 #p class"],["_1"],["_1"],["_1"],["_1"],["0 #p","2 #s x #t bind:show","0 3i","0 3k","1 #1q 3l #1p data-state","1 #1q 3m #1p data-open","1 #1q 3n #1p data-closed"],["_1","0 #1i"],["_1","0 #8 active","0 #1i list","0 #1i active"],["0 #1h store"]]}

Introduction

Hello World

Runtime-less

Reactivity

Simple useTask()

Counter

Auto-complete

Visibility

Below the fold Clock

Partial

HackerNews