---
title: "vuer.schemas.html_components"
section: "Python API"
order: 23
description: "Python API reference for vuer.schemas.html_components"
---

# vuer.schemas.html_components

## omit

```python
def omit(d, *patterns)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L16)

Omit keys from dictionary that match any of the glob patterns.

:param d: Dictionary to filter
:param patterns: Glob patterns to match keys against (e.g., "_*", "tag")
:return: New dictionary with matching keys removed

Example::

    omit({"foo": 1, "_bar": 2, "tag": 3}, "_*", "tag")
    # Returns: {"foo": 1}

## Element

```python
class Element
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L35)

Base class for all elements

```python
tag: str = 'div'
```

## Element.__init__

```python
def __init__(self, *, key=None, **kwargs)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L45)

## BlockElement

```python
class BlockElement(Element)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L86)

```python
children: Tuple[Element]
```

## BlockElement.__init__

```python
def __init__(self, *children, **kwargs)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L89)

### Inherited members

- `tag` — from [`vuer.schemas.html_components.Element`](/python-api/schemas/html_components#element)

## Iframe

```python
class Iframe(BlockElement)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L102)

### Inherited members

- `children` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)

```python
tag = 'iframe'
```

## AutoScroll

```python
class AutoScroll(BlockElement)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L105)

### Inherited members

- `children` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)

```python
tag = 'AutoScroll'
```

## Markdown

```python
class Markdown(BlockElement)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L109)

### Inherited members

- `children` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)

```python
tag = 'Markdown'
```

## Page

```python
class Page(BlockElement)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L113)

A Page is an element that contains other elements.
It is represented by a div element in the DOM.

### Inherited members

- `children` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)

```python
tag = 'article'
```

## div

```python
class div(BlockElement)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L122)

### Inherited members

- `children` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)

```python
tag = 'Div'
```

## InputBox

```python
class InputBox(Element)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L126)

An InputBox is an element that allows the user to input text.
It is represented by an input element in the DOM.

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.Element`](/python-api/schemas/html_components#element)

```python
tag = 'Input'
```

## Header1

```python
class Header1(BlockElement)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L135)

A Text element is an element that displays text.
It is represented by a text, or p element in the DOM.

### Inherited members

- `children` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)

```python
tag = 'h1'
```

## Header2

```python
class Header2(Header1)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L147)

Header 2

### Inherited members

- `children` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)

```python
tag = 'h2'
```

## Header3

```python
class Header3(Header1)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L153)

Header 2

### Inherited members

- `children` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)

```python
tag = 'h3'
```

## Paragraph

```python
class Paragraph(BlockElement)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L159)

A Text element is an element that displays text.
It is represented by a text, or p element in the DOM.

### Inherited members

- `children` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)

```python
tag = 'p'
```

## span

```python
class span(Element)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L168)

A Text element is an element that displays text.
It is represented by a text, or p element in the DOM.

## span.__init__

```python
def __init__(self, *text, sep=' ', **kwargs)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L176)

```python
tag = 'Span'
```

## Bold

```python
class Bold(span)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L181)

### Inherited members

- `tag` — from [`vuer.schemas.html_components.span`](/python-api/schemas/html_components#span)
- `__init__` — from [`vuer.schemas.html_components.span`](/python-api/schemas/html_components#span)

## Italic

```python
class Italic(span)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L188)

### Inherited members

- `tag` — from [`vuer.schemas.html_components.span`](/python-api/schemas/html_components#span)
- `__init__` — from [`vuer.schemas.html_components.span`](/python-api/schemas/html_components#span)

## Link

```python
class Link(span)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L195)

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.span`](/python-api/schemas/html_components#span)

```python
tag = 'a'
```

## Button

```python
class Button(Element)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L199)

A Button element is an element that allows the user to click on it.
It is represented by a button element in the DOM.

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.Element`](/python-api/schemas/html_components#element)

```python
tag = 'Button'
```

## Slider

```python
class Slider(Element)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L208)

A Slider element is an element that allows the user to slide a value.
It is represented by a slider element in the DOM.

Args:
  :param min: Minimum value of the slider
  :param max: Maximum value of the slider
  :param step: Step size of the slider
  :param value: Initial value of the slider
  :param kwargs:

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.Element`](/python-api/schemas/html_components#element)

```python
tag = 'Slider'
```

## Img

```python
class Img(Element)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L224)

An Image element that displays an image in the DOM.

Supports multiple input formats: URL strings, local file paths, PIL Images,
and numpy arrays. The image data is automatically converted to binary for
efficient transfer.

:param data: Image data as a file path (str), numpy array, or PIL Image.
  - str: Local file path, will be read and converted to binary.
  - np.ndarray: Image array (H, W, C). If dtype is not uint8, values are
    scaled by 255 and converted.
  - PIL.Image: PIL Image object, saved to binary format.
:type data: str | np.ndarray | PIL.Image.Image, optional
:param src: Direct URL or binary data. Cannot be used together with `data`.
:type src: str | bytes, optional
:param format: Output format for encoding. Defaults to "png".
:type format: "png" | "jpeg" | "b64png" | "b64jpeg", optional
:param quality: JPEG quality (1-100). Only used with jpeg format.
:type quality: int, optional

.. note::
    When used in multiple inheritance (e.g., ``ImagePlane(Img, SceneElement)``),
    ``Img.__init__`` takes precedence due to Python's MRO (Method Resolution Order).
    This ensures image data is properly processed before being passed to parent classes.

Example Usage::

    from vuer.schemas import Img
    import numpy as np
    from PIL import Image as PILImage

    # From URL (pass directly to src)
    Img(src="https://example.com/image.png", key="url-img")

    # From local file path (reads and converts to binary)
    Img("/path/to/image.png", key="file-img")

    # From numpy array (H, W, C), uint8 or float [0-1]
    img_array = np.random.randint(0, 255, (480, 640, 3), dtype=np.uint8)
    Img(img_array, key="numpy-img")

    # From PIL Image
    pil_img = PILImage.open("/path/to/image.png")
    Img(pil_img, key="pil-img")

    # With JPEG format and quality
    Img(img_array, format="jpeg", quality=85, key="jpeg-img")

## Img.__init__

```python
def __init__(self, data: Union[str, Path, np.ndarray, pil_image.Image]=None, *, src: Union[str, bytes]=None, format: Literal['png', 'jpeg', 'b64png', 'b64jpeg']='png', quality: int=None, **kwargs)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/main/src/vuer/schemas/html_components.py#L276)

```python
tag = 'Img'
```

## Public imports

These symbols are available from this module. Their definitions are documented in the linked modules.

- [`Url`](/python-api/types#url) — `vuer.types.Url`