# canvas — Examples

## basic

```html
<card-ui variant="outlined">
  <section>
    <col-ui gap="3">
      <text-ui strong>How it works</text-ui>
      <text-ui color="subtle">
        The canvas creates an internal
        <code>&lt;a2ui-root&gt;</code>
        element. Feed it A2UI protocol messages via
        <code>.process()</code>
        or
        <code>.processAll()</code>
        , and the root renders them into live AdiaUI components. User interactions (clicks, input changes) bubble up as
        <code>canvas-interaction</code>
        events.
      </text-ui>
    </col-ui>
  </section>
</card-ui>
```

## theme

```html
<card-ui variant="outlined">
  <section>
    <col-ui gap="2">
      <text-ui strong>Default</text-ui>
      <text-ui color="subtle">Inherits the page theme.</text-ui>
    </col-ui>
  </section>
</card-ui>
```

## Version History

```html
<card-ui variant="outlined">
  <section>
    <col-ui gap="3">
      <text-ui strong>Undo / Redo pattern</text-ui>
    </col-ui>
  </section>
</card-ui>
```
