standardagents/arrow-js

エージェントのコーディング用UIフレームワーク

ArrowJSは、コーディングエージェントが深く理解できるプラットフォームプリミティブ(JavaScriptモジュール、テンプレートリテラル、DOMなど)を中心に構築された、小さくて高速かつ型安全なリアクティブUIランタイムです。

APIサーフェスを最小限に抑えて直接リアクティブDOM更新をしたい場合は@arrow-js/coreを使いましょう。非同期コンポーネント、サーバー側レンダリング、クライアント側のハイドレーションが必要な場合は、@arrow-js/framework、@arrow-js/ssr、@arrow-js/hydrateを追加してください。

ドキュメント ·API参照 ·遊び場 ·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: