Last Updated: November 21, 2025
Component Basics
component$(() => <div>Hello</div>)
Create Qwik component with $
export default component$
Export component as default
const count = useSignal(0)
Create reactive signal (like useState)
count.value = 5
Update signal value
useStore({ count: 0 })
Create reactive object store
useTask$(async ({ track }) => {})
Run side effects (like useEffect)
useVisibleTask$(() => {})
Run task when component visible (client-only)
useResource$(async () => data)
Fetch async data with SSR support
useContext(MyContext)
Access context value
createContextId('id')
Create context identifier
Event Handlers
onClick$={() => {}}
Click event handler (lazy loaded)
onInput$={(e) => {}}
Input event handler
onChange$={(e) => {}}
Change event handler
onSubmit$={(e) => {})
Form submit handler
onKeyDown$={(e) => {})
Keyboard event handler
preventdefault:click
Prevent default behavior attribute
window:onScroll$
Global window event handler
document:onClick$
Document-level event handler
Props & Attributes
interface Props { name: string }
Define component props interface
component$<Props>(({ name }) => {})
Type component props
class={{ active: true }}
Conditional class binding
style={{ color: 'red' }}
Inline style object
bind:value={signal}
Two-way binding for inputs
<Slot />
Render component children
<Slot name="header" />
Named slot for specific content
Optimization ($)
$(() => {})
Create lazy-loadable closure
component$()
Lazy-load component code
useTask$()
Lazy-load task code
onClick$()
Lazy-load event handler
const fn = $(() => {})
Create reusable lazy function
noSerialize(value)
Mark value as non-serializable
useServerData('key')
Access server-provided data
Routing (QwikCity)
src/routes/index.tsx
Create route at /
src/routes/about/index.tsx
Create route at /about
src/routes/[id]/index.tsx
Dynamic route parameter
useLocation()
Access current route location
useNavigate()
Programmatic navigation
<Link href="/about">
Client-side navigation link
export const onGet: RequestHandler
Server endpoint for GET requests
export const onPost: RequestHandler
Server endpoint for POST requests
routeLoader$(async () => {})
Load data for route on server
routeAction$(async () => {})
Define server action for route
Data Loading
export const useData = routeLoader$
Create route data loader
const data = useData()
Access route loader data
data.value
Get loader result value
resource.value
Access resource data
resource.loading
Check if resource is loading
<Resource value={resource} />
Render resource with loading states
server$(async () => {})
Create server-only function
Forms & Actions
export const useAction = routeAction$
Define form action
const action = useAction()
Access action in component
<Form action={action}>
Connect form to action
action.submit()
Programmatically trigger action
action.value
Get action result
action.isRunning
Check if action is executing
zod$(schema)
Validate form with Zod schema
globalAction$(async () => {})
Create global action (any route)
Lifecycle & Effects
track(() => signal.value)
Track signal for reactivity in useTask$
cleanup(() => {})
Register cleanup function
useOn('event', $(() => {}))
Register programmatic event listener
useOnWindow('scroll', $(() => {}))
Listen to window events
useOnDocument('click', $(() => {}))
Listen to document events
CLI Commands
npm create qwik@latest
Create new Qwik project
npm run dev
Start development server
npm run build
Build for production
npm run preview
Preview production build
npm run qwik add
Add integration (Tailwind, etc)
💡 Pro Tip:
Qwik's resumability means zero JavaScript is executed on page load. Use the $ suffix on functions to enable automatic code splitting and lazy loading!