Skip to main content

Rich Display Rendering

The result renderer in Windmill supports rich display rendering, allowing you to customize the display format of your results. By leveraging specific formats, you can display images, files, tables, HTML, JSON, and more.

This feature is useful if you want to display an image, a GIF, a file, or specify the filename for a rich result.

If the result is an object/dict with a single key (except for approval, which needs 3), you can leverage the following rich results:

TypeDescriptionExample
jsonRender the value as a JSONreturn { "json": { "a": 1 } }
table-colRender the value as a column in a tablereturn { "table-col": { "foo": [42, 8], "bar": [38, 12] }}
table-rowRender the value as a row in a tablereturn { "table-row": [ "foo", "bar" ]}
htmlRender the value as HTMLreturn { "html": "<div>...</div>" }
pngRender the value as a PNG imagereturn { "png": { "content": encode(image) } } or return { "png": encode(image) }
fileRender an option to download the filereturn { "file": { "content": encode(file), "filename": "data.txt" } }
jpegRender the value as a JPEG imagereturn { "jpeg": { "content": encode(image) } } or return { "jpeg": encode(image) }
gifRender the value as a GIF imagereturn { "gif": { "content": encode(image) } } or return { "gif": encode(image) }
errorRender the value as an error messagereturn { "error": { "name": "418", "message": "I'm a teapot" }}
approvalRender an approval and buttons to Resume or Cancel the stepreturn { "resume": "https://example.com", "cancel": "https://example.com", "approvalPage": "https://example.com" }
svgRender the value as an SVG imagereturn { "svg": "<svg>...</svg>" }

Regarding the tables: If the result is a list whose first element is also a list, it will display the result as a table. If the result is a dict/object where every value is an array, it will also be displayed as a table, with the key as the column name.

For example:

import { encode } from 'https://deno.land/[email protected]/encoding/base64.ts';

export async function main() {
const url = 'https://source.unsplash.com/featured/300x201';
const resp = await fetch(url);
const buff = await resp.arrayBuffer();
const data = encode(buff);
return {
png: {
content: data
}
};
}