kiaao

A framework is for expressing ideas, not hiding them.

kiaao is a pure-runtime, zero-virtual-DOM reactive UI framework. No Proxy objects intercept your property access, no auto-collected dependency graph, component functions never re-run. Everything is a function. Every signal is Signal<T> — read with no arguments, write with a value. No createSignal, no useState, no ref. No separate "side effect" API — any derivation that returns nothing is simply a derived signal.

If you have ever felt out of control because of your framework's "smartness", if you want transparency, predictability, and full control, kiaao is for you.

框架是用来表达思想的，不是用来隐藏它的。

kiaao 是一个纯运行时、零虚拟 DOM 的响应式 UI 框架。没有 Proxy 对象拦截你的属性访问，没有自动收集的依赖图，组件函数从不重新运行。一切皆函数。每个信号都是 Signal——无参读，有参写。没有 createSignal，没有 useState，没有 ref。没有独立的"副作用"API——任何无返回值的派生，就是一个值为 undefined 的派生信号。

如果你曾因框架的"智能"而感到失控，如果你想要的是透明、可预测和完全的掌控，kiaao 是为你准备的。

Quick Start / 快速开始

npm install kiaao

JSX/TSX setup — 配置 JSX/TSX

import type { Context } from "kiaao";

import { createApp, use } from "kiaao";

// Module-level — global state, outlives any component
// 模块级 — 全局状态，独立于组件
const theme = use("light");

function Counter(_, { use }: Context) {
  // Component-level definition — auto-cleaned on unmount; setter stores as-is
  // 组件级定义 — 可写，卸载自动清理；原样存储，传入函数不会调用
  const count = use(0);

  // Component-level derivation — also writable, write arg passed to compute
  // 组件级派生 — 可写，写入参数传入计算函数
  const double = use(count, v => count() * 2);

  // Derivation without return — runs on dependency change
  // 无返回值派生 — 依赖变化时执行
  use(count, () => {
    console.log("count is", count());
  });

  return (
    <div>
      <p>Theme: {theme}</p>
      <p>Count: {count}</p>
      <p>Double: {double}</p>
      <button onClick={() => count(count() + 1)}>+1</button>
    </div>
  );
}

createApp(Counter).mount("#app");

This example demonstrates module-level and component-level signals, definition, derivation (including no-return derivations), and setter behaviors: definition setters store as-is, and derivation setters trigger recomputation with the arg passed to compute. For full details, follow the guides linked below.

此示例演示了模块级与组件级信号、定义、派生（含无返回值派生），以及 setter 行为：定义 setter 原样存储，派生 setter 触发重算并将入参传入计算函数。详见下方文档。

AI Skill / AI 技能

Add kiaao support to any AI coding agent compatible with the Agent Skills standard. The skill is version-synced with the installed kiaao package.

为兼容 Agent Skills 标准的 AI 编码助手添加 kiaao 支持。skill 与已安装的 kiaao 包版本同步。

npx skills add Himavanta/kiaao

Comparison / 与其他框架的对比

	React	Vue	Solid	kiaao
Data transparency	clean	opaque (Proxy)	clean (two systems)	clean (one system)
Component runs	every update	once	once	once
Virtual DOM	yes	yes	no	no
Compiler dependency	none	optional	required	none
Reactivity model	none (full re-render)	Proxy auto-collect	compile-time expand	explicit declaration
Core concept count	10+	8+	6+	3
Update granularity	component	component/block	DOM node	derived signal
Control flow	ternary / map	v-if / v-for	`<Show>` / `<For>`	`<Show>` / `<Each>`
Context / provide-inject	yes	yes	yes	no (signals are the channel)

Documentation / 文档

License / 许可证

MIT