Islands

An island is a reusable, typed visual block. You don't write rendering code. You declare an island in the manifest, bind it to fields that exist in your data, and the runtime renders it. The same renderers the runtime ships power the live previews below: each tile is a real OpenIslands island, not a screenshot.

A metric, live

A metric.kpi reads the last row of its dataset for the value, the row before it for the delta, and draws a sparkline over the time axis it finds.

Net worth

€134,750

2.7%

{
  "type": "metric.kpi",
  "title": "Net worth",
  "dataset": "net_worth",
  "value": "net_worth_eur",
  "compareTo": "prev",
  "format": "eur"
}

A note, live

A note.card renders Markdown and binds to no data, handy for context, captions, and links right inside a dashboard.

Hello Live island.

The island registry

Every built-in island and the fields it requires. Pick the built-in that fits before reaching for a custom renderer.

Each type links to its section with a live preview and full configuration.

Type	Required fields	What it is
`metric.kpi`	`dataset`, `value`	A single number off the last row, with an optional delta and sparkline.
`metric.scorecard`	`dataset`, `stats`	A compact scorecard of several KPIs off the last row.
`gauge.rings`	`dataset`, `rings`	Concentric goal rings off the last row.
`gauge.goal`	`dataset`, `goals`	One ring per goal, each measured against a goal or band.
`gauge.meter`	`dataset`, `meters`	Horizontal usage bars off the last row.
`status.grid`	`dataset`, `label`, `state`	A responsive grid of service/check status tiles.
`timeseries.line`	`dataset`, `x`, `y`	A line chart over time; `y` may be one field or many.
`category.bar`	`dataset`, `x`, `y`	A bar chart, optionally grouped or stacked.
`category.combo`	`dataset`, `x`, `bars`, `lines`	Bars on a primary axis and lines on a secondary one.
`waterfall.bars`	`dataset`, `label`, `value`	A waterfall of signed steps to a running total.
`rank.list`	`dataset`, `label`, `value`	A ranked Top-N list with proportional bars.
`breakdown.treemap`	`dataset`, `label`, `value`	A treemap of parts of a whole.
`category.pie`	`dataset`, `label`, `value`	A pie or donut of one series' share across a few categories.
`correlation.scatter`	`dataset`, `x`, `y`	A scatter or bubble plot of two numeric fields.
`distribution.heatmap`	`dataset`, `x`, `y`, `value`	A matrix heatmap of a value across two category axes.
`activity.calendar`	`dataset`, `date`, `value`	A GitHub-style calendar heatmap of a daily value.
`funnel.steps`	`dataset`, `label`, `value`	A conversion funnel of sequential stages.
`compare.radar`	`dataset`, `metrics`	A radar chart comparing rows across several metrics.
`map.choropleth`	`dataset`, `region`, `value`	A geographic choropleth shading regions by a value.
`table.grid`	`dataset`	A data table with optional details, grouping, and drilldown.
`timeline.feed`	`dataset`, `ts`, `titleField`	A chronological feed of rows, plain or rich.
`search.box`	`dataset`, `fields`, `titleField`	A client-side search over a dataset.
`note.card`	`markdown`	Markdown content; no data.
`source.doc`	(none)	An embedded document or link (`file` or `href`).
`content.editor`	(none)	A full-page workspace to browse and edit markdown files (`file` or `dir`); no data.
`layout.row`	`islands`	A full-width structural row holding other islands.
`form.entry`	`action`	A data-entry form bound to an action; one typed input per field inserts a row. No data binding of its own.

Browse the per-category pages for the full picture: Metrics & Gauges, Charts, Tables & Feeds, Content & Layout, and Custom Islands.