Learn Qwik - 9 Code Examples & CST Typing Practice Test

Qwik is a next-generation, ultra-fast web framework designed around resumability instead of hydration, enabling instant loading, fine-grained lazy execution, and optimal performance for large-scale interactive applications.

View all 9 Qwik code examples →

Qwik Counter Component Qwik Counter with Max Limit Qwik Counter with Step Increment Qwik Counter with Auto-Increment Qwik Counter with Conditional Theme Qwik Counter with History Qwik Counter with Dark Mode Toggle Only Qwik Counter with Lambda Actions Qwik Full Featured Counter

Learn QWIK with Real Code Examples

Updated Nov 22, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Qwik Counter Component

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.

Let’s Try →

Qwik Counter with Max Limit

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.

Let’s Try →

Qwik Counter with Step Increment

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.

Let’s Try →

Qwik Counter with Auto-Increment

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$.

Let’s Try →

Qwik Counter with Conditional Theme

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.

Let’s Try →

Qwik Counter with History

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.

Let’s Try →

Qwik Counter with Dark Mode Toggle Only

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.

Let’s Try →

Qwik Counter with Lambda Actions

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.

Let’s Try →

Qwik Full Featured Counter

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.

Let’s Try →

Frequently Asked Questions about Qwik

What is Qwik?

What are the primary use cases for Qwik?

High-performance websites. SEO-critical pages. Large apps with heavy JS footprints. E-commerce storefronts. PWAs and edge-rendered apps

What are the strengths of Qwik?

Unmatched performance and startup times. Massive scalability with minimal JS cost. Great SEO via SSR and streaming. Excellent DX with Vite tooling. Automatic code-splitting and lazy loading

What are the limitations of Qwik?

Smaller ecosystem compared to React/Vue. Newer framework with growing community. Learning curve for the resumability model. Less plugin/module ecosystem than Next/Nuxt. Some tooling and library integrations still maturing

How can I practice Qwik typing speed?

CodeSpeedTest offers 9+ real Qwik code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Qwik Counter Component

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.

Let’s Try →

Qwik Counter with Max Limit

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.

Let’s Try →

Qwik Counter with Step Increment

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.

Let’s Try →

Qwik Counter with Auto-Increment

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$.

Let’s Try →

Qwik Counter with Conditional Theme

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.

Let’s Try →

Qwik Counter with History

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.

Let’s Try →

Qwik Counter with Dark Mode Toggle Only

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.

Let’s Try →

Qwik Counter with Lambda Actions

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.

Let’s Try →

Qwik Full Featured Counter

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.

Let’s Try →

Frequently Asked Questions about Qwik

What is Qwik?

What are the primary use cases for Qwik?

High-performance websites. SEO-critical pages. Large apps with heavy JS footprints. E-commerce storefronts. PWAs and edge-rendered apps

What are the strengths of Qwik?

Unmatched performance and startup times. Massive scalability with minimal JS cost. Great SEO via SSR and streaming. Excellent DX with Vite tooling. Automatic code-splitting and lazy loading

What are the limitations of Qwik?

How can I practice Qwik typing speed?

CodeSpeedTest offers 9+ real Qwik code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.