Qwik Cheat Sheet

Resumability-first framework syntax covering components, signals, $ lazy-loading boundaries, and routing in Qwik City.

2 PagesAdvancedMar 3, 2026

component$ and Signals

Define a resumable component using fine-grained signals instead of a virtual DOM diff.

typescript

import { component$, useSignal } from '@builder.io/qwik'export const Counter = component$(() => {  const count = useSignal(0)  return (    <button onClick$={() => count.value++}>      Count: {count.value}    </button>  )})

The $ Lazy-Load Convention

Every $ suffix marks a symbol Qwik can extract into its own chunk and defer until interaction.

typescript

import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'export const Widget = component$(() => {  const ready = useSignal(false)  // runs only once this component becomes visible client-side  useVisibleTask$(() => {    ready.value = true  })  return (    <div onClick$={() => console.log('lazy handler loaded on click')}>      {ready.value ? 'Hydrated' : 'Resumed, not hydrated'}    </div>  )})

Qwik City File-Based Route

Define a page and a server-side loader that streams data with zero client JS by default.

typescript

// src/routes/products/[id]/index.tsximport { component$ } from '@builder.io/qwik'import { routeLoader$ } from '@builder.io/qwik-city'export const useProduct = routeLoader$(async ({ params }) => {  const res = await fetch(`https://api.example.com/products/${params.id}`)  return res.json()})export default component$(() => {  const product = useProduct()  return <h1>{product.value.name}</h1>})

useStore and Context

Share deep reactive state across the tree without prop drilling.

typescript

import { component$, useStore, useContextProvider, createContextId, useContext } from '@builder.io/qwik'export const CartCtx = createContextId<{ items: string[] }>('cart')export const App = component$(() => {  const cart = useStore({ items: [] as string[] })  useContextProvider(CartCtx, cart)  return <Cart />})export const Cart = component$(() => {  const cart = useContext(CartCtx)  return <span>{cart.items.length} items</span>})

Core Qwik APIs

The hooks you'll reach for most.

component$- defines a lazy-loadable, resumable component boundary
useSignal- fine-grained reactive primitive, `.value` to read/write
useStore- deep reactive object for structured state
useTask$- server+client reactive side effect, runs during SSR and on dependency change
useVisibleTask$- client-only effect, runs when the element enters the viewport (use sparingly)
routeLoader$- server-only data loader colocated with a route, streamed to the client

Pro Tip

Avoid `useVisibleTask$` unless you truly need client-only DOM/browser APIs — it forces JS to download and run, defeating the resumability model that makes Qwik's TTI near-zero.

Was this cheat sheet helpful?

Vue Composition API Cheat Sheet

HTMX + Alpine.js Patterns Cheat Sheet