standardagents/arrow-js

에이전트 코딩을 위한 UI 프레임워크

ArrowJS는 코딩 에이전트가 깊이 이해하는 플랫폼 원시 요소들(JavaScript modules, template literal, DOMs)를 중심으로 구축된 작고 매우 빠르며 타입이 안전한 반응형 UI 런타임입니다.

API 표면적 최소화로 직접 반응 DOM 업데이트를 원할 때는 @arrow-js/core를 사용하세요. 비동기 컴포넌트, 서버 측 렌더링, 클라이언트 측 하이드레이션이 필요할 때는 @arrow-js/framework, @arrow-js/ssr, @arrow-js/hydrate를 추가하세요.

문서 · API 참고 · 놀이터 · 디스코드

핵심 패키지

• @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: 호스트 window 영역에서 Arrow 코드를 실행하며 실제 DOM으로 렌더링하는 QuickJS/WASM 지원 샌드박스 런타임

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: