standardagents/arrow-js

编码代理的用户界面框架

ArrowJS 是一个小巧、极快、类型安全的反应式 UI 运行时，围绕编程代理深度理解的平台原语构建：JavaScript 模块、模板字面量和 DOM。

当你希望直接响应式 DOM 更新且API表面积最小时，使用 @arrow-js/core。当你需要在同一组件模型上进行异步组件、服务器端渲染和客户端水合时，添加 @arrow-js/framework、@arrow-js/ssr 和 @arrow-js/hydrate。

文档 ·API参考 ·Playground ·Discord

核心包

• @arrow-js/core：反应状态、标签模板渲染、组件、pick() / props()和nextTick()

框架包

• @arrow-js/framework：异步组件运行时、boundary()、render()、toTemplate()及文档渲染辅助工具
• [@arrow-js/ssr：服务器输出的renderToString()和serializePayload()
• @arrow-js/hydrate：用于在浏览器中采用SSR输出的hydrate()和readPayload()
• @arrow-js/sandbox：QuickJS/WASM支持的沙箱运行时，用于在主window领域执行Arrow代码，同时渲染到真实DOM

The UI framework for coding agents

ArrowJS is a tiny, blazing-fast, type-safe reactive UI runtime built around platform primitives that coding agents deeply understand: JavaScript modules, template literals, and the DOM.

Use @arrow-js/core when you want direct reactive DOM updates with minimal API surface. Add @arrow-js/framework, @arrow-js/ssr, and @arrow-js/hydrate when you need async components, server-side rendering, and client-side hydration on top of the same component model.

Documentation · API Reference · Playground · Discord

Core Package

• @arrow-js/core: reactive state, tagged-template rendering, components, pick() / props(), and nextTick()

Framework Packages

• @arrow-js/framework: async component runtime, boundary(), render(), toTemplate(), and document rendering helpers
• @arrow-js/ssr: renderToString() and serializePayload() for server output
• @arrow-js/hydrate: hydrate() and readPayload() for adopting SSR output in the browser
• @arrow-js/sandbox: QuickJS/WASM-backed sandbox runtime for executing Arrow code off the host window realm while rendering into the real DOM
• @arrow-js/vite-plugin-arrow: Vite integration package included in the monorepo

Install

Scaffold a complete Vite 8 Arrow app with SSR, hydration, and the full framework stack:

pnpm create arrow-js@latest arrow-app

Agent skill: Equip your preferred coding agent to add Arrow to an existing project:

npx @arrow-js/skill

Core-only:

npm install @arrow-js/core

Full SSR + hydration stack:

pnpm add @arrow-js/core @arrow-js/framework @arrow-js/ssr @arrow-js/hydrate

No build step is required for the core runtime. You can also import it directly in the browser:

Core Example

import { component, html, reactive } from '@arrow-js/core'

const Counter = component(() => {
  const state = reactive({ count: 0 })

  return html` state.count++}">
    Clicked ${() => state.count} times
  `
})

html`${Counter()}`(document.body)

Async Components, SSR, and Hydration

Async components use the same component() API, but they require the async runtime from @arrow-js/framework, @arrow-js/ssr, or @arrow-js/hydrate to be imported before rendering.

The current project structure keeps that layering explicit: