API › @builder.io/qwik
bind:value
Two-way binding attribute for inputs.
Build-time Variables
Variables prefixed with PUBLIC_ available on both client and server, powered by Vite.
Click to source
Hold Option or Alt and click an element to open its source code in your editor.
component$
Declares a Qwik component; components are functions that return JSX.
Console.log stack traces
Temporarily override console.log to include stack traces for debugging.
CSS Modules
Recommended way to style Qwik components using .module.css files.
Register DOM events declaratively
Register DOM events with useOn(), useOnWindow(), or useOnDocument() to avoid eager JavaScript.
Default Environment Variables
Built-in variables: BASE_URL, MODE, DEV, PROD, SSR.
Default MDX plugins
remarkGfm, rehypeSyntaxHighlight, and rehypeAutolinkHeadings, each disableable.
Delay core execution
Delay framework core execution at load time to free the main thread.
Directory-based routing
Routes must be defined as directory/index.(tsx,ts,js,jsx,md,mdx).
$(...) rules
The $ suffix marks lazy loading boundaries; first argument must be an imported top-level variable.
Dynamic Head
Export a head function to programmatically set title, meta, or link tags using routeLoader$ data.
Dynamic SSG Routes
Generate static HTML files for multiple route paths with dynamic params.
Endpoints
Endpoints export an onRequest, onGet, onPost, onPut, onDelete, onPatch, or onHead handler.
Smart entry strategy
Heuristic symbol lazy-loading, overridable with manual bundle config.
ESLint no-console rule
Configure ESLint to prevent console.log statements from being committed.
Faster Startup Times
Pre-rendered assets minimize processing overhead, allowing the app to launch quickly.
General-purpose
Qwik can be used to build any type of website or application.
Google Structured Data
Add structured data markup via head scripts, e.g. application/ld+json schema.org ItemList.
head export
A page can export a head property or function returning a DocumentHead with title, meta, and links.
Inline operations in templates
Inline operations in templates so the optimizer can better optimize reactivity.
LAUNCH_EDITOR environment variable
Set LAUNCH_EDITOR to tell Qwik which code editor to use, e.g. export LAUNCH_EDITOR=code.
Minimal Resource Usage
Efficient rendering keeps CPU and memory usage low.
Nested Layouts and Head
Layouts can read and modify the resolved document head, such as prefixing the page title.
No hydration
Qwik apps work instantly because they don't need hydration, regardless of size or complexity.
Offline Availability
Assets bundled within the app require no network connection to load the initial UI.
On-Device Hosting
Static assets are served directly from the device file system, eliminating the need for a remote server.
onClick$ handler
Client-only JSX event handler whose content is lazily loaded.
Pages
Pages are created by adding an index.tsx file in src/routes that default-exports a Qwik component.
"q:slot"
_qrlSync
qwikVite() plugin
Controls symbol distribution via entryStrategy in vite.config.ts.
Runtime analytics
Collects used symbols via the qsymbol event to inform bundling.
Server-side Variables
Runtime variables accessible only on the server via the RequestEvent env.
Service worker
Prefetches bundles into the browser cache; requires secure contexts.
Slot
Component exported from @builder.io/qwik for content projection; supports named slots via q:slot.
SSG Adapter
Built-in adapter to generate static HTML files from a Qwik application.
SSG Config
Configuration options such as origin and outDir for static site generation.
Sub-second loads
Qwik delivers sub-second full page loads by serving pure HTML and executing JS on opt-in.
Sub-second Page Loads
Delivers sub-second full page loads, even on mobile, by serving pure HTML and executing JavaScript on opt-in.
useSignal(initialValue?)
Hook used by components to create reactive state.
useStore(initialValue?)
Hook for creating reactive store state.
useTask$(() => { ... })
Hook for running tasks.
useVisibleTask$(() => { ... })
Hook for running tasks when visible.
useContent()
Retrieves the nearest content information for the current route.
useContent() hook
Retrieves nearest content info for the current route, including headings and menu.
useDocumentHead()
Reads the document head metadata.
useDocumentHead() hook
Exposes frontmatter keys for reading frontmatter data.
useLocation()
Retrieves a RouteLocation object for the current location.
Use useLocation() instead of window.location
Avoid accessing window.location directly; use the useLocation() hook to keep logic server-renderable.
useNavigate()
Returns a function that programmatically navigates without a full-page reload.
useSignal()
Creates a reactive signal with a single .value property.
useStore()
Like useSignal but takes an object; reactivity extends to nested objects and arrays.
useTask$()
Registers a hook run on component creation, at least once on server or browser.
useVisibleTask$()
Runs a task when the component becomes visible, with cleanup support.
Use useVisibleTask$() as a last resort
useVisibleTask$() runs eagerly and blocks the main thread; prefer useTask$, useOn, useOnWindow, useOnDocument.
"xlink:actuate"
"xlink:arcrole"
"xlink:href"
"xlink:role"
"xlink:show"
"xlink:title"
"xlink:type"
"xml:base"
"xml:lang"