standardagents/arrow-js

Фреймворк UI для агентов кода

ArrowJS — это крошечная, стремительно быстрая, типографически безопасная реактивная UI-среда, построенная вокруг примитивов платформы, которые агенты глубоко понимают: JavaScript-модули, шаблонные литералы и DOM.

Используйте @arrow-js/core, когда хотите прямые реактивные обновления DOM с минимальным покрытием API. Добавляйте @arrow-js/framework, @arrow-js/ssr и @arrow-js/hydrate, когда нужны асинхронные компоненты, серверный рендеринг и клиентская гидратация поверх одной и той же модели компонентов.

Документация · Ссылка API · Playground · Discord

Основной пакет

• @arrow-js/core: реактивное состояние, рендеринг с тегированным шаблоном, компоненты, pick() / props() и nextTick()

Фреймворк-пакеты

• @arrow-js/framework: асинхронные компонентные runtime, boundary(), render(), [toTemplate() и помощники рендеринга документов
• @arrow-js/ssr: renderToString() и serializePayload() для серверного вывода
• @arrow-js/hydrate: hydrate() и readPayload() для принятия SSR-вывода в браузере
• @arrow-js/sandbox: песочница с поддержкой QuickJS/WASM для выполнения кода Arrow с сервера хоста [window при рендеринге в реальный 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: