View Elements

A View Element defines how to interpret and display data in your Zeno Project. The following view elements can be used in your Zeno Projects.

Text

A plaintext view to display raw text data. See in this example.

Separated Values

{
  "type": "text",
  "label": string
}

Properties

Property	Type	Description
label	Optional[String]	Label to be added in front of the text data.

Image

A view to display image data. Expects a URL to fetch the image from as its data input. See in this example.

Separated Values

{
  "type": "image",
  "maxWidth": "small" | "medium" | "large" | "full" 
}

Audio

A view to display audio data. Expects a URL to fetch the audio data from as its input. See in this example.

Separated Values

{
  "type": "audio"
}

Code

A code-display with syntax highlighting. See in this example.

Separated Values

{
  "type": "code"
}

Markdown

Markdown visualization for a more flexible text display. See in this example.

Separated Values

{
  "type": "markdown"
}

3D

3D model rendering. Expects a URL to a glTF/GLB model. See in this example.

Separated Values

{
  "type": "3D"
}

Message

Visualization of data in message bubbles akin to a chat view. See in this example.

Separated Values

{
  "type": "message"
  "plain": boolean,
  "content": ViewElement | string,
  "ownMessage": boolean,
  "highlight": boolean
}

Properties

Property	Type	Description
content	ViewElement | String	Element to use to render the message content. If plain == true, this is interpreted as a String and displayed as plain text instead of a OpenAI-style message object.
plain	Optional[boolean]	How to render the content.
ownMessage	Optional[boolean]	Whether this message should be displayed as incoming or outgoing. Can also be specified in the data if plain == false. True for outgoing.
highlight	Optional[boolean]	Whether this message should be highlighted.

List

A list of ViewElements. Can be used to render multiple view elements at once. See in this example.

Separated Values

{
  "type": "list"
  "elements": ViewElement,
  "horizontal": boolean,
  "collapsible": "top" | "bottom",
  "border": boolean,
  "pad": boolean
}

Properties

Property	Type	Description
elements	ViewElement	Element used to render all the elements of the list.
horizontal	Optional[boolean]	If specified, renders list horizontally.
collapsible	Optional[String]	If specified, only renders four elements of the list per default but adds a show more button to expand. Can specify either "top" or "bottom".
border	Optional[boolean]	Whether to add a border around each list element.
pad	Optional[boolean]	Whether to add padding to each list element.

VStack

A vertical stack of keyed elements. Can be used to combine different element types. See in this example.

Separated Values

{
  "type": "vstack"
  "keys": Record<string, ViewElement>
}

Properties

Property	Type	Description
keys	Record<string:ViewElement>	List of objects mapping from a String key to a ViewElement used to render the content of the data behind the key.

Separated Values

Splitting the data into columns using a specified separator. See in this example.

Separated Values

{
  "type": "separatedValues",
  "separator": string,
  "header": string,
  "highlight": boolean
}

Properties

Property	Type	Description
separator	String	Character or sequence to separate the data with.
header	Optional[String]	The heading of the row of data. Ignored if not specified.
highlight	Optional[boolean]	Whether or not to highlight the data that is being separated. Can be used to create an alternating pattern of rows in a table. Default: false