or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-optimization.mdcli.mdcomponents.mdcontext.mdevent-handling.mdindex.mdjsx-elements.mdloader.mdqrl-system.mdserver-rendering.mdstate-management.mdstyling.mdtasks-resources.mdtesting.md
tile.json

tessl/npm-builder-io--qwik

An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and resumable architecture for instant-loading web applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@builder.io/qwik@1.16.x

To install, run

npx @tessl/cli install tessl/npm-builder-io--qwik@1.16.0

index.mddocs/

Qwik

Qwik is a revolutionary web framework that enables instant-loading web applications through resumable architecture and precision lazy-loading. Unlike traditional frameworks that rehydrate from scratch, Qwik resumes execution from where the server left off, allowing fully interactive sites to load with almost no JavaScript. It implements progressive loading where only the necessary parts of the application load on-demand as users interact with the site.

Package Information

  • Package Name: @builder.io/qwik
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @builder.io/qwik

Core Imports

import { component$, useSignal, useStore, $ } from "@builder.io/qwik";

For JSX runtime:

import { jsx, Fragment } from "@builder.io/qwik/jsx-runtime";

For server-side rendering:

import { renderToString, renderToStream } from "@builder.io/qwik/server";

For build tools:

import { qwikVite } from "@builder.io/qwik/optimizer";

For loader/preloading:

import { loadBundleGraph, preload } from "@builder.io/qwik/loader";

For runtime environment detection:

import { isBrowser, isServer, isDev } from "@builder.io/qwik/build";

CommonJS (limited support):

const { component$, useSignal } = require("@builder.io/qwik");

Basic Usage

import { component$, useSignal, $ } from "@builder.io/qwik";

// Create a component with automatic lazy loading
export const Counter = component$(() => {
  const count = useSignal(0);

  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick$={() => count.value++}>
        Increment
      </button>
    </div>
  );
});

// Use QRL system for lazy loading
const handleClick = $(() => {
  console.log("This function loads only when clicked");
});

Architecture

Qwik is built around several revolutionary concepts:

  • Resumable Architecture: Applications resume from server state without rehydration
  • QRL System: Qwik Resource Locators enable precise lazy loading of code
  • Fine-grained Reactivity: Only affected components re-render on state changes
  • Progressive Loading: Code loads incrementally as users interact with the application
  • SSR-first: Server-side rendering is built into the core framework
  • Build Integration: Deep integration with Vite and Rollup for optimal bundling

Capabilities

Components & Rendering

Core component system with automatic lazy loading and resumable architecture. Components are defined using the QRL system for optimal performance.

function component$<T>(onMount: OnRenderFn<T>): Component<T>;
function componentQrl<T>(onMount: QRL<OnRenderFn<T>>): Component<T>;

interface Component<T> {
  readonly [Symbol.toStringTag]: string;
}

type OnRenderFn<T> = (props: T) => JSXOutput;

Components & Rendering

QRL System

Qwik Resource Locators (QRLs) enable precise lazy loading by converting functions and expressions into loadable resources.

function $<T>(expression: T): QRL<T>;
function sync$<T>(expression: T): SyncQRL<T>;
function event$<T>(handler: T): QRL<T>;

interface QRL<T> {
  readonly __qrl__: true;
}

interface SyncQRL<T> extends QRL<T> {
  readonly __sync__: true;
}

QRL System

State Management

Reactive state management using signals and stores for fine-grained reactivity and optimal performance.

function useSignal<T>(initialValue?: T): Signal<T>;
function useStore<T>(initialState: T, opts?: UseStoreOptions): T;
function untrack<T>(fn: () => T): T;
function createSignal<T>(initialValue?: T): Signal<T>;
function isSignal(obj: any): obj is Signal<any>;
function noSerialize<T>(value: T): NoSerialize<T>;
function unwrapStore<T>(proxy: T): T;

interface Signal<T> {
  value: T;
}

interface ReadonlySignal<T> {
  readonly value: T;
}

interface UseStoreOptions {
  deep?: boolean;
}

interface NoSerialize<T> {
  readonly __no_serialize__: true;
  readonly __value__: T;
}

State Management

Context & Dependency Injection

Context system for dependency injection and sharing state across component boundaries.

function useContext<T>(id: ContextId<T>): T;
function useContextProvider<T>(id: ContextId<T>, value: T): void;
function createContextId<T>(name: string): ContextId<T>;

interface ContextId<T> {
  readonly __context__: T;
}

Context System

Utilities

Utility functions for component development and advanced use cases.

function useLexicalScope(): any[];
function useId(): string;
function useConstant<T>(fn: () => T): T;
function withLocale<T>(locale: string, fn: () => T): T;
function getLocale(): string;
function useServerData<T>(key: string): T | undefined;
function implicit$FirstArg<T>(fn: T): T;

Tasks & Resources

Asynchronous operations with server/client execution control and resource management for data fetching.

function useTask$(task: TaskFn): void;
function useTaskQrl(task: QRL<TaskFn>): void;
function useVisibleTask$(task: TaskFn): void;
function useVisibleTaskQrl(task: QRL<TaskFn>): void;
function useResource$<T>(resource: ResourceFn<T>, opts?: ResourceOptions): ResourceReturn<T>;
function useResourceQrl<T>(resource: QRL<ResourceFn<T>>, opts?: ResourceOptions): ResourceReturn<T>;
function useComputed$<T>(compute: ComputedFn<T>): Signal<T>;
function useComputedQrl<T>(compute: QRL<ComputedFn<T>>): Signal<T>;
function createComputed$<T>(compute: ComputedFn<T>): Signal<T>;
function createComputedQrl<T>(compute: QRL<ComputedFn<T>>): Signal<T>;
function useErrorBoundary(): ErrorBoundaryStore;

interface ResourceReturn<T> {
  readonly loading: Signal<boolean>;
  readonly value: Signal<T | undefined>;
}

interface ErrorBoundaryStore {
  error: any;
}

// Component for resources
const Resource: FunctionComponent<ResourceProps<any>>;

interface ResourceProps<T> {
  value: ResourceReturn<T>;
  onPending?: () => JSXOutput;
  onRejected?: (error: any) => JSXOutput;
  onResolved: (value: T) => JSXOutput;
}

Tasks & Resources

JSX & Elements

JSX runtime and element creation with Qwik-specific optimizations and server-side rendering support.

function jsx(type: string, props: any, key?: string): JSXNode;
function jsxDEV(type: string, props: any, key?: string): JSXNode;
function jsxs(type: string, props: any, key?: string): JSXNode;
function h(type: string, props?: any, ...children: any[]): JSXNode;
function render(opts: RenderOptions): Promise<RenderResult>;
const Fragment: FunctionComponent<{ children?: any }>;
const HTMLFragment: FunctionComponent<{ children?: any }>;
const RenderOnce: FunctionComponent<{ children?: any }>;
const Slot: FunctionComponent<{ name?: string }>;
const SkipRender: JSXNode;

// SSR utilities
function SSRStreamBlock(props: { children?: any }): JSXNode;
function SSRRaw(props: { data: string }): JSXNode;
function SSRStream(props: SSRStreamProps): JSXNode;
function SSRComment(props: { data: string }): JSXNode;
function SSRHint(props: SSRHintProps): JSXNode;

interface JSXNode {
  readonly type: string | Function;
  readonly props: any;
  readonly key: string | null;
}

interface SSRStreamProps {
  children?: any;
}

interface SSRHintProps {
  element: string;
}

JSX & Elements

Server-Side Rendering

Comprehensive server-side rendering with streaming support and optimization features.

function renderToString(opts: RenderToStringOptions): Promise<RenderToStringResult>;
function renderToStream(opts: RenderToStreamOptions): Promise<RenderToStreamResult>;
function setServerPlatform(manifest?: QwikManifest): Promise<void>;

interface RenderToStringResult {
  html: string;
  timing: RenderTiming;
}

Server-Side Rendering

Build & Optimization

Build tools and optimization plugins for Vite and Rollup with comprehensive bundling strategies.

function qwikVite(opts?: QwikVitePluginOptions): QwikVitePlugin;
function qwikRollup(opts?: QwikRollupPluginOptions): any;
function createOptimizer(opts?: OptimizerOptions): Promise<Optimizer>;

interface QwikVitePluginOptions {
  target?: QwikBuildTarget;
  buildMode?: QwikBuildMode;
  forceFullBuild?: boolean;
}

Build & Optimization

Event Handling

Event system with lazy loading and server-side event handling capabilities.

function useOn(event: string, handler: QRL<(event: Event) => void>): void;
function useOnDocument(event: string, handler: QRL<(event: Event) => void>): void;
function useOnWindow(event: string, handler: QRL<(event: Event) => void>): void;

type EventHandler<T, E> = QRL<(event: E, element: T) => any>;

Event Handling

Styling

Dynamic and scoped styling with lazy loading and server-side rendering support.

function useStyles$(styles: string): void;
function useStylesScoped$(styles: string): void;
function useStylesQrl(styles: QRL<string>): void;
function useStylesScopedQrl(styles: QRL<string>): void;

Styling

Testing

Testing utilities for creating DOM environments and testing Qwik applications.

function createDOM(): any;

Testing

CLI Tools

Command-line interface for project management and development workflow.

# Available through package.json bin
npx qwik [command] [options]

CLI Tools

Loader & Preloading

Bundle preloading functionality for optimizing application loading performance.

function loadBundleGraph(bundleGraph: any): void;
function parseBundleGraph(data: any): any;
function preload(resources: any[]): void;
function handleBundle(bundle: any): void;

Loader & Preloading

Components

Built-in components for performance optimization and resource management.

const PrefetchServiceWorker: FunctionComponent<any>;
const PrefetchGraph: FunctionComponent<any>;

Types

Core Types

// Value that can be synchronous or promise-based
type ValueOrPromise<T> = T | Promise<T>;

// Non-serializable wrapper for client-side only data
interface NoSerialize<T> {
  readonly __no_serialize__: true;
  readonly __value__: T;
}

// ReadOnly signal interface
interface ReadonlySignal<T> {
  readonly value: T;
}

// Props extraction utility
type PropsOf<T> = T extends Component<infer P> ? P : never;

// Public props interface
type PublicProps<T> = T extends Record<string, any> ? T : {};

// Function component interface
interface FunctionComponent<T = {}> {
  (props: T): JSXNode | null;
}

// JSX output types
type JSXOutput = JSXNode | string | number | boolean | null | undefined | JSXNode[];

Platform Detection

// Runtime environment detection (from @builder.io/qwik/build)
const isBrowser: boolean;
const isServer: boolean;
const isDev: boolean;

// Framework version (exported from main package)
const version: string;

Usage Examples:

import { isBrowser, isServer, isDev } from "@builder.io/qwik/build";
import { version } from "@builder.io/qwik";

// Environment detection
if (isBrowser) {
  console.log("Running in browser");
}

if (isServer) {
  console.log("Running on server");
}

if (isDev) {
  console.log("Development mode");
}

console.log(`Qwik version: ${version}`);