Built-in HTML Elements

The view! macro maps lowercase HTML tags to gpui element builders. Most elements expand to gpui::div() with appropriate default styling. This page lists every supported tag and its behavior.

Container Elements

All of these expand to gpui::div() with no additional default styling:

| Tag | Notes | | <div>, <span>, <p>, <output> | Generic containers. | | <header>, <footer>, <nav>, <main> | Semantic sectioning. | | <section>, <article>, <aside>, <address> | Semantic sectioning. | | <form> | Form context: on:submit / on:reset + child submit/reset buttons. | | <fieldset>, <legend> | Form containers (pure div aliases). | | <figure>, <figcaption> | Figure containers. | | <pre>, <blockquote>, <q> | Text containers. |

Text Elements

List Elements

gpui has no list-style; draw numbering or bullets with text prefixes yourself.

Link Elements

<a> supports the href attribute (accepted but not navigable in vgui v1 — use on:click for navigation actions).

Button Elements

<button> expands to gpui::div().cursor_pointer() and defaults to tabindex={0} so it is in Tab order. An explicit tabindex overrides that default. Keyboard activation of on:click is handled by gpui.

Media Elements

Void elements

No-op elements

<colgroup> and <col> are accepted (they compile) but render nothing (gpui::Empty). Column widths are controlled per-cell via class or style.

<datalist> renders nothing (gpui::Empty) but registers its id and options in a thread-local map so text inputs with list=<id> can show autocomplete suggestions. It requires an id attribute and accepts options={Vec<String>}. See Input Elements.

<option> and <optgroup> are accepted as standalone tags (they compile as pure <div> aliases) but are not read by <select>. Use the options or groups prop on <select> instead.

Tables

Tables use a flex-based layout — gpui has no native table layout:

colspan on <td>/<th> is mapped to flex_grow, so a cell with colspan={2} grows 2× relative to colspan=1 cells. rowspan is accepted but has no visual effect.

#![allow(unused)]
fn main() {
view! {
    <table class="w-full">
        <thead>
            <tr class="bg-[#333]">
                <th class="p-2 text-white">{"Name"}</th>
                <th class="p-2 text-white">{"Age"}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="p-2">{"Alice"}</td>
                <td class="p-2">{"30"}</td>
            </tr>
            <tr>
                <td class="p-2" colspan={2u32}>{"Bob (spanned)"}</td>
            </tr>
        </tbody>
    </table>
}
}

For specific column widths, apply class="w-[200px]" or a style width on individual cells.

Common Attributes

All built-in elements support these attributes:

Elements that have on:click, hover, active, focus, class, tabindex, or ref but no explicit id automatically receive a stable auto-generated id (see Auto IDs).

Radio Group

<radiogroup> wraps child <input type="radio"> elements and enables roving tabindex with arrow-key navigation. It has no attributes — it establishes a scope (via __radiogroup_scope_enter/__radiogroup_scope_exit) that child radio buttons read to coordinate focus and selection. See Input Elements for details.

Form

<form> wraps children in a form context. The on:submit and on:reset attributes take FnMut(&mut App) closures. Child submit/reset buttons auto-invoke the form handler when activated. Pressing Enter in a single-line text input triggers on:submit. See Input Elements for details.