The renderer is a container you deploy once, then call with any payload from the catalog. Open source, MIT licensed. You own the URL — no dependency on the demo endpoint.
The renderer lives in apps-script-surface/gas-schema-renderer/ — 480 atoms, no CDN, no external dependencies.
# Clone and navigate to the renderer directory
git clone https://github.com/a2uicatalog/a2ui
cd apps-script-surface/gas-schema-renderer
clasp is Google's Apps Script CLI. One-time login — uses your Google account to deploy the renderer as a GAS web app.
npm install -g @google/clasp clasp login
Creates a new GAS project in your Google account and pushes all renderer files. Takes about 30 seconds.
clasp create --type webapp --title "My A2UI Renderer" clasp push
Deploy as a web app accessible to anyone. You'll get a URL — that's your renderer endpoint.
clasp deploy --description "A2UI Renderer v1"
# → https://script.google.com/macros/s/YOUR_ID/exec
Runs in your Google account. No dependency on the catalog's demo URL. Survives any catalog changes.
Every atom in the catalog works immediately — stat cards, charts, globes, animations, tables, forms.
Fork the renderer, add your own atoms, change the CSS, restrict to specific surfaces. It's your code.
Pull the latest from the repo and clasp push again when new atoms are added to the catalog.
Once deployed, use your renderer URL with any payload from the catalog.
// In any GAS project — call your renderer with atom blocks
function doGet() {
const blocks = [
{ type: "stat_card", value: "1,234", label: "Daily users", delta: "+12%", is_up: true },
{ type: "progress_bar", value: 75, label: "Q2 target" },
{ type: "globe_3d", theme: "earth", size: 300 }
];
const payload = Utilities.base64EncodeWebSafe(
Utilities.newBlob(JSON.stringify(blocks)).getBytes()
);
const url = "https://script.google.com/macros/s/YOUR_ID/exec?p=" + payload;
return HtmlService.createHtmlOutput(
'<script>window.location="' + url + '"</script>'
);
}