ArrowJS — The first UI framework for the agentic era

npm install @arrow-js/core

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

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

const data = reactive({
  price: 25,
  quantity: 10
})

console.log(data.price) // 25

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

const props = reactive({ count: 2, multiplier: 10 })

const data = reactive({
  total: reactive(() => props.count * props.multiplier)
})

console.log(data.total) // 20
props.count = 3
console.log(data.total) // 30

Tip

data.total reads like a normal value even though it is backed by a tracked expression.

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

const data = reactive({ disabled: false })

html`<button disabled="${() => data.disabled}">
  Save
</button>`

Tip

Returning false from an attribute expression will remove the attribute. This makes it easy to toggle attributes.

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

const data = reactive({ disabled: false })

html`<button disabled="${() => data.disabled ? true : false}">
  Save
</button>`

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

const data = reactive({
  todos: [
    { id: 1, text: 'Write docs' },
    { id: 2, text: 'Ship app' },
  ],
})

html`<ul>
  ${() => data.todos.map((todo) =>
    html`<li>${todo.text}</li>`.key(todo.id)
  )}
</ul>`

Tip

Keys are only necessary if you want to preserve the DOM nodes and their state. Avoid using the index as a key.

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

const data = reactive({ tags: ['alpha', 'beta', 'gamma'] })

html`<ul>
  ${() => data.tags.map((tag) => html`<li>${tag}</li>`)}
</ul>`

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

html`<button @click="${(e) => console.log(e)}">Click</button>`

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

const parentState = reactive({ count: 1 })

const Counter = component((props: Props<{ count: number }>) => {
  const local = reactive({ clicks: 0 })
  const onResize = () => console.log(window.innerWidth)

  window.addEventListener('resize', onResize)
  onCleanup(() => window.removeEventListener('resize', onResize))

  return html`<button @click="${() => local.clicks++}">
    Root count ${() => props.count} | Local clicks ${() => local.clicks}
  </button>`
})

html`<section>
  <h3>Dashboard</h3>
  ${Counter(parentState)}
</section>`

Key concept

The component function itself is not rerun on every parent update. Arrow keeps the instance for that slot and retargets its props when needed. That makes local state stable across higher-order rerenders.

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

const state = reactive({ count: 1, theme: 'dark' })
const Counter = component((props) =>
  html`<strong>${() => props.count}</strong>`
)

html`<p>
  Current count:
  ${Counter(state)}
</p>`

Tip

Props stay live when you read them lazily. Avoid destructuring them once at component creation time if you expect updates.

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

type User = { id: string; name: string }

const UserName = component(
  async ({ id }: Props<{ id: string }>) => {
    const user = await fetch(`/api/users/${id}`)
      .then((r) => r.json() as Promise<User>)
    return user.name
  },
  { fallback: html`<span>Loading user…</span>` }
)

const UserCard = component((props: Props<{ id: string }>) =>
  html`<article>${UserName(props)}</article>`
)

Tip

Most async components need no extra options. Arrow assigns ids, snapshots JSON-safe results, and renders resolved values directly by default. Reach for fallback, render, serialize, deserialize, or idPrefix only when the default behavior is not enough.

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

const data = reactive({ price: 25, quantity: 10, logTotal: true })

watch(() => {
  if (data.logTotal) {
    console.log(`Total: ${data.price * data.quantity}`)
  }
})

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

const data = reactive({ price: 25, quantity: 10, logTotal: true })

watch(
  () => data.logTotal ? data.price * data.quantity : null,
  (total) => total !== null && console.log(`Total: ${total}`)
)

import { html } from '@arrow-js/core'
import { sandbox } from '@arrow-js/sandbox'

const root = document.getElementById('app')
if (!root) throw new Error('Missing #app root')

const source = {
  'main.ts': [
    "import { html, reactive } from '@arrow-js/core'",
    '',
    'const state = reactive({ count: 0 })',
    '',
    'export default html`<button @click="${() => state.count++}">',
    '  Count ${() => state.count}',
    '</button>`',
  ].join('\n'),
  'main.css': [
    'button {',
    '  font: inherit;',
    '  padding: 0.75rem 1rem;',
    '}',
  ].join('\n'),
}

html`<section>${sandbox({ source })}</section>`(root)

Build this UI as an Arrow sandbox payload. Return an object for sandbox({ source, ... }) with exactly one entry file named main.ts or main.js, plus main.css only if styles are needed. Use @arrow-js/core primitives directly: reactive(...) for state, html`...` for DOM, and component(...) only when reusable local state or composition is actually needed. Arrow expression slots are static by default, so any live value must be wrapped in a callable function like ${() => state.count}. Use event bindings like @click="${() => state.count++}", do not use JSX, React hooks, Vue directives, direct DOM mutation, or framework-specific render APIs.

Export a default Arrow template or component result from main.ts. Keep the example self-contained, prefer a single clear root view, and communicate back to the host with output(payload) when needed. Put CSS in main.css, keep payloads JSON-serializable, and only return the files that are necessary for the requested interface. If you create multiple files, make sure imports match the virtual filenames you place in source.

{
  "name": "create_arrow_sandbox",
  "description": "Produce arguments for @arrow-js/sandbox.",
  "inputSchema": {
    "type": "object",
    "additionalProperties": false,
    "properties": {
      "source": {
        "type": "object",
        "description": "Virtual files passed to sandbox({ source }). Must include main.ts or main.js. main.css is optional.",
        "additionalProperties": false,
        "properties": {
          "main.ts": {
            "type": "string",
            "description": "Main Arrow TypeScript entry file."
          },
          "main.js": {
            "type": "string",
            "description": "Main Arrow JavaScript entry file."
          },
          "main.css": {
            "type": "string",
            "description": "Optional stylesheet for the sandbox root."
          }
        },
        "anyOf": [
          { "required": ["main.ts"] },
          { "required": ["main.js"] }
        ]
      },
      "shadowDOM": {
        "type": "boolean",
        "description": "Whether the sandbox should render inside shadow DOM."
      },
      "debug": {
        "type": "boolean",
        "description": "Whether sandbox debug logging should be enabled."
      }
    },
    "required": ["source"]
  }
}

From the team behind FormKit, Tempo, AutoAnimate, and Drag and Drop — Standard Agents is an open standard for creating domain-specific agents you can distribute and compose together to form safe, efficient, and effective agents. Join the early access list.

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

export function routeToPage(url: string) {
  if (url === '/') {
    return {
      status: 200,
      title: 'Home',
      view: html`<main>Home</main>`,
    }
  }

  return {
    status: 404,
    title: 'Not Found',
    view: html`<main>Not found</main>`,
  }
}