Tabbed Code — A2UI Atomic Catalog

Renders multiple code snippets organized inside an interactive, multi-tab container component.

Surfaces

webapps-script-web

Degraded on

Surface	Note
meet-stage	Tab switching logic feels slow or becomes unresponsive.
googlechat	Displays all code blocks sequentially or drops all but the first tab.
email	Interactivity is broken so all snippet variations render stacked vertically.

Fields

Field	Type
tabs	array. Collection of objects containing the language identifier, tab label, and code string.	required

Example payload

{
  "type": "tabbed_code",
  "tabs": [
    {
      "label": "Tab 1",
      "content": "Content one."
    },
    {
      "label": "Tab 2",
      "content": "Content two."
    }
  ]
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:tabbed_code",
  "displayName": "Tabbed Code",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/tabbed_code",
  "capabilities": [
    "web",
    "apps-script-web"
  ],
  "description": "Renders multiple code snippets organized inside an interactive, multi-tab container component.",
  "representativeQueries": [
    "show a organize multiple programming language snippets inside an interactive tab container",
    "renders multiple code snippets organized inside an interactive, multi-tab container component.",
    "render a tabbed code"
  ]
}

Deploy your own renderer

The renderer is open source. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd apps-script-surface/gas-schema-renderer
clasp push && clasp deploy

Full deploy guide →