A2UI playground

Edit an A2UI document — JSON Lines of v0.9 messages, a JSON array of them, or a {"components":[…]} shorthand — and render it with A2UI basic catalog (Material 3)'s own components. Rendering an edited document is a live render, so it needs a signed-in session or a live agent grant. Open the A2uiDocumentPreview preview →

Auto-render Ctrl/⌘ + Enter renders Render

{"version":"v0.9","createSurface":{"surfaceId":"playground","catalogId":"https://a2ui.org/specification/v0_9/catalogs/basic/catalog.json"}} {"version":"v0.9","updateDataModel":{"surfaceId":"playground","path":"/","value":{"name":"Ada Lovelace","guests":2,"email":true}}} {"version":"v0.9","updateComponents":{"surfaceId":"playground","components":[{"id":"root","component":"Card","child":"body"},{"id":"body","component":"Column","align":"stretch","children":["title","subtitle","name","guests","email","actions"]},{"id":"title","component":"Text","text":"Weekend in Lisbon","variant":"h3"},{"id":"subtitle","component":"Text","text":"Two nights, flights included","variant":"caption"},{"id":"name","component":"TextField","label":"Full name","value":{"path":"/name"}},{"id":"guests","component":"Slider","label":"Guests","min":1,"max":6,"value":{"path":"/guests"}},{"id":"email","component":"CheckBox","label":"Email me a receipt","value":{"path":"/email"}},{"id":"actions","component":"Row","justify":"end","children":["book"]},{"id":"book","component":"Button","variant":"primary","child":"book_label","action":{"event":{"name":"book"}}},{"id":"book_label","component":"Text","text":"Book"}]}}