ᚱ Rune

Small primitives for the agentic web.

AI-native UI framework built on platform primitives.

No JSX. No compiler. No Virtual DOM.

Why Rune?

Modern frameworks optimize for developers. Rune optimizes for:

| Audience | Benefit | |----------|---------| | Developers | Tiny API surface. Five core functions. | | AI Agents | Entire docs fit in <10K tokens. | | Browsers | Zero build step. Native ES Modules. |

Developer + AI Agent + Browser

Instead of:

Developer + Compiler + Bundler + Virtual DOM

Installation

npm install @rune-ui/rune

Or use directly via ES Modules (no build step):

<script type="module">
  import { signal, view, mount } from "./src/core/index.js";
</script>

Quick Start

import { signal, view, mount } from "@rune-ui/rune";

const count = signal(0);

function increment() {
  count.update(v => v + 1);
}

const App = view(() => `

<h1>Rune</h1>

<button @click=${increment}>
  Count: ${count()}
</button>

`);

mount(document.body, App);

That's it. No JSX. No compiler. No build step.

Core APIs

Rune exposes only five core primitives:

signal()    // Reactive state
computed()  // Derived state
effect()    // Side effects
view()      // Create UI
mount()     // Attach to DOM

Signal

const count = signal(0);

count();                          // read (tracked)
count.set(5);                     // write
count.update(v => v + 1);         // update
count.peek();                     // read (untracked)

Computed

const first = signal("John");
const last  = signal("Doe");

const fullName = computed(
  () => `${first()} ${last()}`
);

Effect

effect(() => {
  console.log(count());
});
// Dependencies tracked automatically.

View

const App = view(() => `
  <h1>Count: ${count()}</h1>
  <button @click=${increment}>+1</button>
`);

Mount

mount(document.body, App);
mount("#app", App);

Components

Components are plain functions.

function Counter() {
  const count = signal(0);

  return view(() => `
    <button @click=${() => count.update(v => v + 1)}>
      Count ${count()}
    </button>
  `);
}

mount("#app", Counter);

Event Binding

<button @click=${handler}>      // click
<input  @input=${onInput}>      // input
<form   @submit=${onSubmit}>    // submit
<input  @change=${onChange}>    // change
<input  @keydown=${onKeyDown}>  // keydown

Packages

@rune-ui/rune             Core: signal, computed, effect, view, mount
@rune-ui/rune/router      Client-side routing
@rune-ui/rune/store       Global reactive store
@rune-ui/rune/server      Server actions (RPC)
@rune-ui/rune/agent       AI agent integration
@rune-ui/rune/sandbox     Secure code execution

Router

import { route, navigate, params } from "@rune-ui/rune/router";

route("/", Home);
route("/user/:id", UserPage);

navigate("/user/42");

// Inside UserPage:
params().id // "42"

Store

import { store } from "@rune-ui/rune/store";

const app = store({
  theme: "dark",
  user: null
});

app.theme();            // "dark"
app.theme.set("light"); // update
app.$patch({ theme: "dark", user: { name: "John" } });
app.$reset();

Agent

import { agent, tool } from "@rune-ui/rune/agent";

const weatherTool = tool({
  name: "weather",
  description: "Get weather for a city",
  execute: async ({ city }) => fetch(`/api/weather?city=${city}`)
});

const assistant = agent({
  model: "qwen3-4b",
  tools: [weatherTool]
});

await assistant.ask("What's the weather in Tokyo?");

Server Actions

import { server } from "@rune-ui/rune/server";

const createTodo = server(async (data) => {
  return await db.insert("todos", data);
});

// Client-side call — no REST boilerplate
await createTodo({ text: "Buy milk" });

Lifecycle

onMount(() => {
  // After component mounts
});

onCleanup(() => {
  // Cleanup on disposal
});

Web Components

import { define } from "@rune-ui/rune";

define("my-counter", Counter);

<my-counter></my-counter>

Design Goals

| Goal | Target | |------------- |----------| | Runtime | <10 KB | | Dependencies | 0 | | Compiler | No | | Virtual DOM | No | | Build Step | No | | SSR | Optional | | Hydration | Partial |

Architecture

signal → dependency graph → effect → DOM node

No Virtual DOM. No diffing algorithm. Signals directly update the DOM nodes that depend on them.

Folder Structure

src/
  main.js
  pages/
    home.js
    profile.js
  components/
    navbar.js
    card.js
  agents/
    assistant.js
  store/
    app.js

Examples

See the examples/ directory:

• Counter — Basic reactivity and events
• Todo — Lists, computed state, and components

Inspiration

• SolidJS — Fine-grained reactivity
• ArrowJS — Tagged template approach
• AlpineJS — Minimal footprint
• HTMX — HTML-first philosophy
• Web Components — Platform standard
• QuickJS — Embeddable runtime
• MCP — Model Context Protocol

Status

Rune is in v0.1 (experimental).

The long-term goal is to provide an AI-native foundation for the agentic web.

License

MIT