Learn QWIK with Real Code Examples

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

export const Counter = component$(() => {
    const state = useStore({ count: 0, isDark: false });
    return (
        <div class={state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {state.count}</h2>
        <div>
        <button onClick$={() => state.count++}>+</button>
        <button onClick$={() => state.count--}>-</button>
        <button onClick$={() => state.count = 0}>Reset</button>
        </div>
        <button onClick$={() => state.isDark = !state.isDark}>
        Switch to {state.isDark ? 'Light' : 'Dark'} Theme
        </button>
        </div>
    );
});

Demonstrates a simple counter component using Qwik's reactive signals and resumable component architecture.

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

export const MaxCounter = component$(({ max = 5 }) => {
    const state = useStore({ count: 0 });
    return (
        <div>
        <h2>Counter: {state.count}</h2>
        <button onClick$={() => state.count < max && state.count++}>+</button>
        <button onClick$={() => state.count--}>-</button>
        <button onClick$={() => state.count = 0}>Reset</button>
        </div>
    );
});

A Qwik counter that stops incrementing after reaching a maximum value.

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

export const StepCounter = component$(({ step = 2 }) => {
    const state = useStore({ count: 0 });
    return (
        <div>
        <h2>Counter: {state.count}</h2>
        <button onClick$={() => state.count += step}>+</button>
        <button onClick$={() => state.count -= step}>-</button>
        <button onClick$={() => state.count = 0}>Reset</button>
        </div>
    );
});

A counter in Qwik that increments/decrements by a custom step value.

import { component$, useStore, useTask$ } from '@builder.io/qwik';

export const AutoCounter = component$(() => {
    const state = useStore({ count: 0 });
    useTask$(({ track }) => {
        track(() => state.count);
        const interval = setInterval(() => state.count++, 1000);
        return () => clearInterval(interval);
    });
    return <h2>Counter: {state.count}</h2>;
});

Automatically increments the counter every second using Qwik signals and useTask$.

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

export const ConditionalThemeCounter = component$(() => {
    const state = useStore({ count: 0 });
    const isDark = state.count % 2 === 0;
    return (
        <div class={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {state.count}</h2>
        <button onClick$={() => state.count++}>+</button>
        <button onClick$={() => state.count--}>-</button>
        <button onClick$={() => state.count = 0}>Reset</button>
        </div>
    );
});

Changes theme automatically based on whether the count is even or odd.

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

export const HistoryCounter = component$(() => {
    const state = useStore({ count: 0, history: [] });
    const updateHistory = (action) => state.history.push(action);
    return (
        <div>
        <h2>Counter: {state.count}</h2>
        <div>History: {state.history.join(', ')}</div>
        <button onClick$={() => { state.count++; updateHistory('Increment'); }}>+</button>
        <button onClick$={() => { state.count--; updateHistory('Decrement'); }}>-</button>
        <button onClick$={() => { state.count = 0; updateHistory('Reset'); }}>Reset</button>
        </div>
    );
});

Keeps a history of all increment and decrement actions.

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

export const DarkOnlyCounter = component$(() => {
    const state = useStore({ isDark: false });
    return (
        <div class={state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: 0</h2>
        <button onClick$={() => state.isDark = !state.isDark}>Toggle Theme</button>
        </div>
    );
});

A simple counter with a static count but theme toggling enabled.

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

export const LambdaCounter = component$(() => {
    const state = useStore({ count: 0 });
    return (
        <div>
        <h2>Counter: {state.count}</h2>
        <button onClick$={() => state.count = state.count + 1}>+</button>
        <button onClick$={() => state.count = state.count - 1}>-</button>
        <button onClick$={() => state.count = 0}>Reset</button>
        </div>
    );
});

Uses inline arrow functions for increment, decrement, and reset actions.

import { component$, useStore, useTask$ } from '@builder.io/qwik';

export const FullCounter = component$(({ step = 2, autoIncrement = true }) => {
    const state = useStore({ count: 0, history: [], isDark: false });
    const updateHistory = (action) => state.history.push(action);
    useTask$(() => {
        if(autoIncrement){
        const interval = setInterval(() => { state.count += step; updateHistory('Auto increment'); }, 1000);
        return () => clearInterval(interval);
        }
    });
    return (
        <div class={state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {state.count}</h2>
        <div>History: {state.history.join(', ')}</div>
        <button onClick$={() => { state.count += step; updateHistory('Increment'); }}>+</button>
        <button onClick$={() => { state.count -= step; updateHistory('Decrement'); }}>-</button>
        <button onClick$={() => { state.count = 0; updateHistory('Reset'); }}>Reset</button>
        <button onClick$={() => state.isDark = !state.isDark}>Toggle Theme</button>
        </div>
    );
});

Combines step, history, auto-increment, and theme toggle in a single Qwik component.