JavaScript frameworks

SolidJS, Preact & Qwik

Three lightweight React-alternatives. Preact is a 3KB React clone, Solid uses fine-grained signals with no virtual DOM, and Qwik is resumable — it ships almost zero JS until you interact.

Demo 01 · Preact

Preact — a real 3KB component

Preact mirrors React's API in a fraction of the size. Loaded here straight from CDN with htm (no build step), the counter below is a genuine live Preact component using useState.

● Real Preact via CDN

import { html, render } from 'htm/preact';
import { useState } from 'preact/hooks';

function Counter() {
  const [n, setN] = useState(0);
  return html`
    <button onClick=${() => setN(n - 1)}>–</button>
    <span>${n}</span>
    <button onClick=${() => setN(n + 1)}>+</button>
  `;
}

Demo 02 · Preact

Preact list rendering

Same component model as React: map an array to elements. Add colours to this live Preact list.

● Real Preact via CDN

const [items, setItems] = useState(['red', 'blue']);
html`<ul>${items.map(i => html`<li>${i}</li>`)}</ul>`;

Demo 03 · SolidJS

SolidJS — fine-grained signals

Solid's createSignal returns a getter/setter pair. Unlike React, the component function runs once; only the exact DOM text bound to a signal updates. The simulation below mimics that fine-grained reactivity, and a derived createMemo tracks the doubled value.

● Simulation (Solid needs a build)

doubled = 0

import { createSignal, createMemo } from 'solid-js';

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubled = createMemo(() => count() * 2);
  return (
    <div>
      <button onClick={() => setCount(count() + 1)}>
        {count()}
      </button>
      <span>doubled = {doubled()}</span>
    </div>
  );
}

Demo 04 · Qwik

Qwik — resumability & lazy events

Qwik ships HTML with almost no JavaScript, then lazily downloads a handler the first time you interact ($ marks a lazy boundary). The simulation logs that first-interaction "resume" moment.

● Simulation (Qwik needs a build)

// page loaded with 0 KB of handler JS — waiting…

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

export const Counter = component$(() => {
  const count = useSignal(0);
  // onClick$ handler is loaded lazily on first click
  return <button onClick$={() => count.value++}>
    {count.value}
  </button>;
});

Demos 1 & 2 use the real Preact library loaded from CDN with htm (no build step) — genuine live Preact components. Demos 3 (SolidJS) and 4 (Qwik) are labelled vanilla-JS simulations because both require an ahead-of-time build; their code blocks show the real Solid and Qwik source. The shared CSS shell provides page styling.

↑ All 64 tools