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

# vuer.schemas.html_components

## Element

```python
class Element
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L10)

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/docs/v0.0.52/vuer/schemas/html_components.py#L20)

## Element.serialize

```python
def serialize(self)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L29)

Serialize the element to a dictionary for sending over the websocket.

:return: Dictionary representing the element.

## BlockElement

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L49)

## BlockElement.__init__

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L50)

## BlockElement.serialize

```python
def serialize(self)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L54)

### Inherited members

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

## AutoScroll

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L65)

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L69)

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L73)

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

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L82)

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.BlockElement`](/python-api/schemas/html_components#blockelement)
- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L86)

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

## InputBox.__init__

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L94)

### Inherited members

- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L98)

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

## Header1.__init__

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L106)

### Inherited members

- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L114)

Header 2

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.Header1`](/python-api/schemas/html_components#header1)
- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L120)

Header 2

### Inherited members

- `__init__` — from [`vuer.schemas.html_components.Header1`](/python-api/schemas/html_components#header1)
- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L126)

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

## Paragraph.__init__

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L134)

### Inherited members

- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L139)

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/docs/v0.0.52/vuer/schemas/html_components.py#L147)

### Inherited members

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

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

## Bold

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L152)

## Bold.__init__

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

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

### Inherited members

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

## Italic

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

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

## Italic.__init__

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L160)

### Inherited members

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

## Link

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L166)

## Link.__init__

```python
def __init__(self, text, src, **kwargs)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L169)

### Inherited members

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

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

## Button

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L173)

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

## Button.__init__

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

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

### Inherited members

- `serialize` — 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/docs/v0.0.52/vuer/schemas/html_components.py#L185)

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

## Slider.__init__

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L193)

: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

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

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

## Image

```python
class Image(Element)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L204)

An Image element is an element that displays an image.
It is represented by an img element in the DOM.

## Image.__init__

```python
def __init__(self, data: Union[str, 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/docs/v0.0.52/vuer/schemas/html_components.py#L212)

### Inherited members

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

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

## ImageUpload

```python
class ImageUpload(Element)
```

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L261)

A ImageUpload element is an element that allows the user to upload a file.
It is represented by a file upload element in the DOM.

## ImageUpload.__init__

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

[Source](https://github.com/vuer-ai/vuer-docs/blob/docs/v0.0.52/vuer/schemas/html_components.py#L269)

### Inherited members

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

```python
tag = 'ImageUpload'
```