Layout and rendering

Layout manifests describe how data turns into visual pages and cards. The bino CLI renders HTML layouts and uses a browser runtime to convert them into high-quality PDFs.

Why HTML and Chrome? Because CSS gives you the full power of modern typography, colour, and layout — flexbox, grid, custom fonts, SVG — while Chrome’s rendering engine guarantees the same output on macOS, Linux, and Windows. No platform-specific quirks, no custom PDF library limitations. For more on the design rationale, see How bino works.

Layout building blocks

bino distinguishes several layout-related kinds:

• LayoutPage – defines a page, including header/footer, page size/orientation, and a grid of child components.
• LayoutCard – defines a self-contained card with header/footer and its own grid of child components.
• ChartStructure – describes categorical charts such as rankings and structure charts.
• ChartTime – describes time-series charts.
• Table – describes tabular output.
• Text – describes text blocks, optionally bound to datasets.
• ComponentStyle – defines reusable style configuration for components.
• Internationalization – holds translations for text in a given language/namespace.
• Asset – registers images, fonts, and files used in layouts.
• ReportArtefact – describes PDF-level metadata (title, filename, language, signing profile).
• SigningProfile – configures digital signatures applied to PDFs.

From layout to PDF

At a high level, the rendering flow is:

1. bino build validates manifests and executes datasets in the query engine.
2. bino passes layout specs (LayoutPage, LayoutCard, child components) and data to the front-end renderer.
3. The renderer produces HTML for each report artefact.
4. The rendering engine uses Chrome headless shell to export HTML pages as PDFs.

This approach ensures consistent typography and layout across platforms. Use bino setup to install Chrome headless shell.

Choosing layouts

LayoutPage and LayoutCard provide built-in layout modes via pageLayout / cardLayout:

• full, split-vertical, split-horizontal
• Grid layouts like 2x2, 3x3, 4x4
• Stacked layouts like 1-over-2, 1-over-3, 2-over-1, 3-over-1
• custom-template for full control via CSS grid areas.

You place child components into these layouts using the children array. See LayoutPage and LayoutCard for examples and tips.

Screenshots and assets

You can capture individual components as images using ScreenshotArtefact. This is useful for embedding charts in presentations, dashboards, or documentation.

For images and fonts included in your report, register them as Asset manifests and reference them via the asset: URL scheme in Markdown fields.