The AI-native
UI framework

A complete UI framework that fits in a single AI context window. Signals for state. Functions for UI. That's it.

app.ts

import { signal, computed, component,
  div, button, span, ul, li,
  each, mount } from "@whisq/core";

const App = component(() => {
  const items = signal(["Learn signals", "Build UI"]);
  const total = computed(() => items.value.length);

  return div(
    span(() => `${total.value} items`),
    ul(each(() => items.value, t => li(t))),
    button({ onclick: () =>
      items.value = [...items.value, "New item"]
    }, "Add"),
  );
});

mount(App({}), document.getElementById("app"));

TS 100% TypeScript <5 <5KB gzipped 0 Zero build step 3 3 core concepts MIT Open source

Learn 3 functions. Build anything.

The entire Whisq mental model fits on an index card.
State, UI, and render. That's it.

signal() — State

Create reactive values. When they change, every piece of UI that reads them updates automatically.

const count = signal(0);
// Reactive. Fine-grained. Done.

div(), button()... — UI

Every HTML element is a function. Pass props, pass children. Fully typed, zero compilation required.

button(
  { onclick: () => count.value++ },
  () => `Clicked ${count.value} times`
);

mount() — Render

Attach your component to the DOM. One function call and your app is running.

mount(
  App({}),
  document.getElementById("app")
);

See it in action

A login form with reactive validation in 20 lines of plain JavaScript.
Signals, computed values, and DOM events — working together naturally.

import { signal, computed, component, form,
  input, button, label, div, p } from "@whisq/core";

const LoginForm = component(() => {
  const email = signal("");
  const password = signal("");
  const valid = computed(() =>
    email.value.includes("@") && password.value.length >= 8
  );

  return form({ onsubmit: (e) => e.preventDefault() },
    label("Email"),
    input({
      type: "email",
      oninput: (e) => email.value = e.target.value
    }),
    label("Password"),
    input({
      type: "password",
      oninput: (e) => password.value = e.target.value
    }),
    button({ disabled: () => !valid.value }, "Sign In"),
  );
});

Reactive validation

computed() derives valid state from email + password signals automatically

Standard DOM events

oninput, onsubmit — the same events you already know, working directly

Reactive disabled state

Pass () => !valid.value and the button enables itself when validation passes

See more examples

Data fetching, compared

Fetch users from an API with loading and error states. Same feature, different approaches.

React 30 lines

import { useState, useEffect } from "react";

export default function UserList() {
  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("/api/users")
      .then(r => r.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

Whisq 13 lines

import { resource, when, each,
  div, ul, li, p } from "@whisq/core";

const users = resource(() =>
  fetch("/api/users").then(r => r.json())
);

div(
  when(() => users.loading(), () => p("Loading...")),
  when(() => users.error(), () => p("Something went wrong")),
  when(() => users.data(), () =>
    ul(each(() => users.data(), u => li(u.name)))
  ),
);

Why Whisq?

Every framework makes trade-offs. Whisq is designed for the AI era.

Feature	React	Vue	Svelte	Whisq
Build step required	Yes (JSX)	Yes (SFC)	Yes (compiler)	No
AI generates correct code	~70%	~65%	~60%	~95%
API fits in context window	50K+ tokens	40K+ tokens	20K+ tokens	<5K tokens
Runtime reactivity	Virtual DOM	Proxies	Compiled	Signals
Bundle size (min+gz)	~45KB	~33KB	~2KB	<5KB

A great developer experience

From idea to running code with minimal friction.

Full TypeScript autocomplete

Every element function is fully typed. div() knows its props, button() knows onclick. Your editor helps you write correct code from the start.

Zero configuration

Create a .ts file, import Whisq, and start building. Works with Vite, esbuild, or even a plain script tag in your HTML.

Simple mental model

Signals are just values. Read .value, write .value. Computed values derive automatically. Effects run when dependencies change.

{}

Just JavaScript

If you know JavaScript, you know Whisq. Functions, objects, arrays — the patterns you already use every day.

CSS

Bring your own CSS

Whisq renders real DOM elements. Use Tailwind, UnoCSS, Bootstrap, or plain CSS — your existing CSS toolchain works out of the box.

Runs everywhere

Pure ES modules — works in any browser, Node.js, Bun, and Deno. No polyfills, no transpilation step, no runtime dependencies.

A complete ecosystem

Everything from routing to testing to server rendering — all designed to work together.

core

@whisq/core

Signals, elements, components, lifecycle, and styling — the foundation.

router

@whisq/router

Signal-based client-side routing with nested routes and lazy loading.

ssr

@whisq/ssr

Server-side rendering with streaming and hydration support.

test

@whisq/testing

Component testing utilities — render, query, and fire events.

dev

@whisq/devtools

Browser devtools for signal inspection, component tree, and effect tracking.

vite

@whisq/vite-plugin

Vite integration with file-based routing, HMR, and optimized builds.

mcp

@whisq/mcp-server

MCP server for AI assistants — component scaffolding and code validation.

box

@whisq/sandbox

Sandboxed code execution for interactive examples and playgrounds.

new

create-whisq

Project scaffolding — one command to a running app.

AI gets it right the first time

The entire API fits in a single context window. Every LLM can learn it, use it, and generate correct code.

<5K

Fits in any context window

The complete API reference is under 5,000 tokens — small enough for any model to hold alongside your project code.

~95%

First-attempt accuracy

Plain functions with consistent patterns. AI models generate working Whisq components on the first try.

MCP

Built-in AI tooling

Ships with AI context files and an MCP server for deep integration with any AI coding assistant.

The complete API <5K tokens

# Drop this into any AI assistant

import {
  signal, computed, effect, batch,
  div, span, button, input, form,
  h, when, each, mount,
  component, onMount, onCleanup,
  resource, sheet, styles,
} from "@whisq/core";

// This is the entire framework API.
// <5,000 tokens with full usage docs.

Everything you need. Nothing you don't.

A complete UI framework that fits in a single context window.

Signals

Fine-grained reactivity in one line. signal(0) creates a reactive value that automatically keeps your UI in sync.

f()

Hyperscript

div(), button(), input() — every HTML element is a typed function. Full autocomplete, zero compilation, instant feedback.

0ms

Zero Build

No JSX transform. No compiler step. Ship ES modules straight to the browser, or plug into Vite, esbuild, or any bundler.

AI-Native

Entire API fits in <5K tokens. Comes with CLAUDE.md, .cursorrules, and an MCP server for seamless AI-assisted development.

css

Scoped Styles

CSS-in-JS via sheet() and styles(). Scoped by default, themeable, and composable with cx(). Works alongside any CSS approach.

4.8

4.8KB gzipped

Signals, elements, components, lifecycle, and styling — the complete framework in a single lightweight package.

The AI-native UI framework