Qwik Cheat Sheet
Quick reference for Qwik: components, signals, routing, data loading, and resumability patterns. Build instant-loading web apps with zero hydration.
Components & JSX
| export default component$(() => { return <div>Hello</div>; }) | Define a Qwik component with component$ |
| <Slot /> | Render children (like React children / Vue slots) |
| component$<{ name: string }>(({ name }) => ...) | Typed component props with TypeScript |
| <div onClick$={() => console.log("clicked")}> | Event handler with $ suffix (lazy-loaded) |
| <div class={{ active: isActive, hidden: !show }}> | Conditional CSS classes with object syntax |
Signals & State
| const count = useSignal(0) | Create a reactive signal (primitive value) |
| const state = useStore({ name: "", age: 0 }) | Create a reactive store (object/array) |
| <span>{count.value}</span> | Read signal value in JSX (auto-tracks) |
| count.value++ | Update signal value (triggers re-render) |
| const doubled = useComputed$(() => count.value * 2) | Derived/computed value from signals |
Routing & Layout
| src/routes/index.tsx | Route: / (home page) |
| src/routes/about/index.tsx | Route: /about |
| src/routes/user/[id]/index.tsx | Dynamic route: /user/:id |
| src/routes/layout.tsx | Shared layout wrapping child routes |
| const loc = useLocation(); loc.params.id | Access route params and URL info |
Data Loading
| export const useData = routeLoader$(() => fetchData()) | Server-side data loader (runs before render) |
| const data = useData(); data.value | Consume loader data in component |
| export const useAction = routeAction$((form) => { ... }) | Server-side form action (mutations) |
| const action = useAction(); action.submit(formData) | Trigger a form action programmatically |
| export const useTask = routeLoader$(async ({ env }) => { ... }) | Access environment variables in loaders |
Optimization & Patterns
| useVisibleTask$(() => { ... }) | Run code only when component becomes visible in viewport |
| useTask$(({ track }) => { track(() => count.value); ... }) | Side effect that tracks signal changes |
| $(() => expression) | Mark any expression as lazy-loadable with $ |
| useResource$(async ({ track }) => { track(query); return fetch(...) }) | Async resource that re-fetches when tracked signals change |
| import { noSerialize } from "@builder.io/qwik" | Exclude non-serializable values from SSR snapshot |
Step-by-Step Guide
Read Guide →