Arrow
NormalDescription
Arrow is the first UI framework for the agentic era, tiny and performant with built-in WASM sandboxes for safe code execution, purpose-built for building AI agent interfaces.
Key Features
- Tiny and blazing-fast reactive UI runtime built on JavaScript modules, template literals, and DOM primitives
- Built-in WASM sandbox via QuickJS for safe code execution isolated from the host window realm
- Full SSR and hydration support with `@arrow-js/ssr` and `@arrow-js/hydrate` packages
- Type-safe reactive state management with minimal API surface for coding agents
- Agent skill integration via `npx @arrow-js/skill` for adding Arrow to existing projects
- No build step required for core runtime — can be imported directly in the browser via ESM
Use Cases
💡 Building reactive AI agent interaction interfaces with minimal overhead
💡 Creating sandboxed code execution environments within web applications
💡 Server-side rendered applications requiring fast hydration and interactivity
💡 Developing lightweight frontend components for AI-powered dashboards
💡 Prototyping agent UIs with hot module replacement and instant feedback
Tags
Categories
Quick Start
1. Scaffold a full app: `pnpm create arrow-js@latest arrow-app`
2. Or install core only: `npm install @arrow-js/core`
3. Create a reactive component:
```ts
import { component, html, reactive } from '@arrow-js/core'
const Counter = component(() => {
const state = reactive({ count: 0 })
return html`<button @click="${() => state.count++}">Clicked ${() => state.count} times</button>`
})
html`${Counter()}`(document.body)
```
4. For agent skill: `npx @arrow-js/skill`