Video yükleniyor...
Video Yüklenemedi
We’re open sourcing ArrowJS 1.0: the first UI framework for coding agents. Imagine React/Vue, but with no compiler, build process, or JSX transformer. It’s just TS/JS so LLMs are already *great* at it. AND run generated code securely w/ sandbox pkg. ➡️
241,151 görüntüleme • 7 ay önce •via X (Twitter)
54 Yorum

The sandbox works by parsing the TS AST for our html calls, then replacing the reactive portions with identifiers. It then spins up a new JS environment inside WASM using QuickJS and links the internal virtual DOM to the external references, events occurring externally are safely transmitted to the internal representation where full JavaScript and arrow runs. DOM changes are restricted to these “owned” html blocks and are send back via message. This means llm generated JS is never exposed to the window, cookies, DOM etc - only to the DOM nodes it defined. Those are then mounted inside a web component with shadow DOM enabled (by default) to allow style isolation, if you want it, if you don’t it can disable the shadow DOM. Any questions?

first? maybe tenth

Interesting. Please refer me to the other 9

@chriswallace • • • •

@jpschroeder thanks Matt, so at least fifth @jpschroeder

These are all exactly what Arrow tries to solve, none of them a new UI framework. Thats not a dis, they are all valuable in their own ways: - json-render: pre-defined catalog, rendered by other frameworks. arrow is a ui framework itself. - a2ui: pre-defined ui components. - open-json-ui: closer, but also pre-defined - ag-ui: not at all a ui framework its a ui interaction protocol Arrow, is unique. Its truly its own ui framework, similar to React or Vue, but shares no DNA. It is intentionally just typescript so agents dont need further learning, and it has its own security model from running real TS in a safe way while patching the DOM.

@chriswallace I really like your sandbox idea! Though, I don't think using React/Vue inherently imply forcing the models to learn anything they don't already know. I'm excited to try it out

@chriswallace Oh i agree, it already knows those really well. But if I introduced a new framework with a custom DSL it *would* be a problem. The "native ts" nature of arrow is the only reason it works so well day one.

@jpschroeder Great job on ArrowJS 1.0! Made you a full narrated FileCity tour + visual map of the reactive UI framework for coding agents:

@NewsworthyCLI

Why not

Just go read the docs

@nintharc ${Component()} instead of Lit’ <${Component} /> is cool btw (mixing $ with other characters is an unreadable mess, although in the age of AI it doesn't really matter)

@nintharc TypeScript alllllll the way down.

Very cool! I got away from HTML template literals though because agents are better at writing JSX. Nested backticks mean they have to have to be aware of other parts of the file since the back ticks can break the template. With JSX it doesn't have to be nearly as careful.

Try this. It works great

Just the other day I thought of Formkit, and how good positioned you are for what's happening. Cool!

more to come on that front too!

In the big 26…

oops! we'll get that forwarding

does this need an entirely new framework? you could do this with @solid_js

@solid_js Sure, but why? I love my little arrow, I love no build, I love how this sandbox worked, so I made it and published it.

@solid_js just checking, completely valid to build a custom framework if you want

Awesome, I cannot wait to combine this with the @stitchbygoogle SDK!

wondering how arrowjs handles code injection threats with the sandbox set up. with no compiler or build process, are common safeguards still in place?

pretty badass

Very cool

@jasonkneen interesting

literally was going to build this - we must get to a zero build future thanks man

what problems does it solve?

1. It's a novel no-build ui framework. You can literally run it off a CDN. 2. The sandbox provides a security model for running ai-generated code directly in the browser while patching the *actual* DOM. 3. Its totally native TypeScript so LLMs dont need to be trained on it.

Looks quite elegant I implemented a more basic UI/UX for my new agentic platform Will prototype Arrow instead

This might become the most used ui framework There is infinite software demand

Really cool. Question: *can* you support JSX, opt-in, for cleaner syntax? I like that it doesn't require it, but I'm not opposed to *having* it. Many SSR frameworks support returning jsx natively anyways nowadays.

I suppose you could, but it sorta defeats the purpose.

I have no clue why everyone uses react. The bloat is unbearable. Thanks for your service.

One quick suggestion - try to add open lang ( support along side JSON so that the framework becomes robust and won't break interms of partial responses and will actually reduce the toke cost as well (also increase speed)

Coool, I'll try it out

@jasonkneen Finally!

Love that you've kept this project going over the years!

Awesome job, been meaning to get to this. Will use yours structured data-to-ui Added a UI tab that generates UI with arrow to @apinowfun endpoints Can see an example here:

this is so amazing

Thanks!

Does i1.0 perform better than 1.0 alpha9

Muuuuuuuuuuuch better. Full mem pool recycling. Roughly equal to Vue 3 perf. Will post to framework benchmark soon

🚀

The LLM-friendly angle is brilliant. Been watching our corporate dev teams struggle with build toolchains for months - agents that can just write vanilla JS/TS without webpack nightmares could actually ship features instead of fighting configs.

The QuickJS WASM sandbox with AST-level isolation is the part that makes this production-viable, not just a demo. Running agent-generated UI without trusting the code is the hard problem everyone else punts on.

I legit thought it was related to the arrow, the svg LLM 😂

@grok why should I use that over React?

Interesting, testing it out now

@vercel_dev just launch Similar use case?

I know @RyanCarniato would find this interesting

@RyanCarniato I agree!

