BindJS native A2UI renderer for SwiftUI, Jetpack Compose and React

[djfumberger]

Hi all 👋

We’ve just open-sourced a2ui-bindjs, an A2UI renderer that lets you define a catalog once and use it across SwiftUI, Jetpack Compose, and React rendered as native UI.

The video below shows the same A2UI surface running side by side on iOS and Android. Both apps are using the same shared component definitions, with no separate catalog implementation for each platform.

A2UI.BindJS.mp4

Links

• Source: https://github.com/metabindai/a2ui-bindjs
• npm: @metabindai/a2ui-bindjs
• A2UI community renderer PR: docs(ecosystem): add a2ui-bindjs community renderer #2635

How it works

The catalog is written in BindJS. Components produce a platform-independent view tree, which each host renders using its native UI framework.

That gives us:

• One shared catalog. The same 18 Basic Catalog components power the React, SwiftUI, and Compose examples.
• Native controls. A Picker, for example, becomes the appropriate native control on each platform rather than a styled approximation.
• Shared custom components. Define something like a Rating component once and use the same implementation on web, iOS, and Android.
• Runtime-loaded catalogs. Component definitions can be fetched at runtime instead of being bundled into the app.
• One shared protocol engine. Parsing, data model handling, functions, and diffing live in a single dependency-free bundle.

A2UI support

It supports both A2UI v1.0 and v0.9.1, including all 18 Basic Catalog components and the standard function set.

Suite	Result
Official conformance suite	20 passed
43 official v1.0 examples	Rendered and schema-validated
43 official v0.9 examples	Rendered
iOS + Android	Examples decoded into native view trees

Try it

React

pnpm add @metabindai/a2ui-bindjs @metabindai/a2ui-bindjs-react

const { store } = useA2UIStore(messages)

return (
    <A2UIRenderer
        store={store}
        onAction={(action) => {
            // process actions
        }}
    />
)

SwiftUI

.package(url: "https://github.com/metabindai/a2ui-bindjs.git", from: "0.1.2")

import A2UI

let host = A2UIHost()

host.onAction = { action in
    // process action
}
host.apply(messagesFromTheAgent)

// in a SwiftUI body. `A2UIHost` is an ObservableObject, so it redraws from the store
A2UISurfaceView(host: host)

Jetpack Compose

implementation("ai.metabind:a2ui-bindjs-android:0.1.1")

val host = remember {
    A2UIHost(context)
}

LaunchedEffect(host) {
    host.apply(messagesFromTheAgent)
}

LaunchedEffect(host) {
    host.actions.collect { action ->
        // process actions
    }
}

A2UISurfaceView(host = host)

Would be great to hear any thoughts, feedback, or questions.