io.display.metadata

Totals at a glance, as tiles.

io.display.metadata shows label and value tiles. Put them on a page above a table, or in a step of an action. Numbers, dates and yes or no come out formatted. It only displays and returns nothing.

The simplest one

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

src/actions/users/userTotalsAction.ts
import { app } from '../../app';
import { prisma } from '../../db';
export const userTotalsAction = app.defineAction({
name: 'User totals',
handler: async ({ io }) => {
const users = await prisma.user.findMany();
const admins = users.filter((user) => user.isAdmin);
const invited = users.filter((user) => user.isInvited);
await io.display.metadata(null, {
items: [
{ label: 'Users', value: users.length },
{ label: 'Admins', value: admins.length },
{ label: 'Invited', value: invited.length },
],
});
},
});
The code. One call in an action, the whole file.
tools.example.com/actions/users/user_totals

User totals

Users542
Admins3
Invited18
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.

items: [{ label: 'Users', value: 542 }]

One tile per item. Each item has a label and a value. The value can be text, a number, true or false, or null.

description: 'Logins, runs and messages'

A line under the value. An optional description says what the number counts.

value: '2026-10-16'

Values people can read. Numbers get separators and dates are written out. true reads Yes, an empty value reads N/A.

io.display.metadata('This month', { items })

A heading, or none. The label is the heading above the tiles. Pass null for none.

children: [totals, usersTable]

Above a table on a page. On a folder page the tiles go into the layout. The totals sit right above the records.

summary: io.display.metadata(null, totals),

In a step, next to inputs. In io.group the tiles sit next to the fields. They answer undefined.

Write your first tool today.

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

AwaitIO is free for small teams, made possible by companies and people who sponsor it.