io.display.object

A whole record, keys and values.

io.display.object shows the keys and values of a record in a page or in a step of an action. Nested objects and lists show under their key. Pass a record as your query returns it, with nothing to map first. It only displays and returns nothing.

Read the docs All components

The simplest one

The whole action file, and roughly what your team sees when it runs.

src/actions/accounts/showAccountAction.ts

import { app } from '../../app';

import { prisma } from '../../db';

export const showAccountAction = app.defineAction({

handler: async ({ io }) => {

const account = await prisma.account.findFirstOrThrow({

include: { plan: true },

});

await io.display.object('Account', { data: account });

});

The code. One call in an action, the whole file.

tools.example.com/actions/accounts/show_account

Show account

Account

{

id: 42

ownerEmail: "ana@northwind.example"

isActive: true

▾ plan: {

seats: 25

}

createdAt: "2026-10-16T09:30:00.000Z"

}

Continue

In the browser. Roughly what your team sees. Your theme decides the details.

What you can set

The settings you will reach for most, each with the line of code that turns it on.

data: await prisma.account.findFirst()

Straight from the database. Pass the record as your query returns it. Every key shows with its value.

include: { plan: true }

Relations included. Nested objects show under their key, such as the plan of an account.

data: await prisma.order.findMany()

Lists too. Pass a list and its items show under their position: 0, 1, 2.

createdAt: new Date()

Values in their colors. Strings, numbers and booleans each get their own color. A date arrives as its ISO string.

data: { owner: { address } }

Folds deep data. Nested data opens two levels deep. A click folds it or opens it again.

io.display.object('Account', { data })

Copy any value. Every value can be copied, such as an ID to paste into a support ticket.

More in the docs

This page shows the idea. The docs have every prop, the checks on the server and more examples.

docs.awaitio.com/io/display-objectDisplay ObjectThe data prop, how the tree looks and how to install and register it.docs.awaitio.com/core/display-componentsDisplay componentsWhere a record can go: a page, a step of an action or a group next to inputs.docs.awaitio.com/core/pagesPages and layoutsGive a folder a page that shows a record next to its tables.

Next components

Three more calls on io. Each one shows a control and hands your code a typed value.

Hi Ada, your order shipped.Track the package

io.display.htmlMore →

HTML markup, sanitized first

Company name

Acme Inc.

io.input.textMore →

One line of text

Work email

ada@acme.com

io.input.emailMore →

An email address

Write your first tool today.

An async function, a few await calls, and the form is in the browser.

Get started See the demo