arrow-js

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:

<script type="module">
  import { html, reactive } from 'https://esm.sh/@arrow-js/core'
</script>

Core Example

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)

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:

• @arrow-js/core stays DOM-first and framework-agnostic.
• @arrow-js/framework adds async render tracking and boundaries.
• @arrow-js/ssr renders HTML and serializes async payloads on the server.
• @arrow-js/hydrate adopts existing SSR HTML instead of replacing it on the client.

Editor Support

Install the official ArrowJS Syntax extension for VSCode to get syntax highlighting and autocomplete inside html template literals.

Community

• Discord — ask questions, share what you’re building, and connect with other Arrow developers
• GitHub Issues — report bugs and request features
• Follow @jpschroeder on X for updates and releases

Monorepo Development

• pnpm dev: run the docs app locally
• pnpm test: run Vitest
• pnpm test:e2e: run Playwright tests
• pnpm typecheck: run TypeScript across the workspace