Skip to content
NOEMATA

Blocks

Build a frame page from a tree of blocks and expressions. Blocks define the page structure and visualizations. Expressions provide data and values to blocks. Blocks can:

  • render their children in a specific layout (@block/tabs, @block/stack, @block/grid and more)
  • visualize XY charts, service maps, trace waterfalls, and more (@block/plot, @block/graph, @block/waterfall etc)
  • render content like text, markdown, and code (@block/text, @block/md, @block/code)
  • define controls such as a time range picker, filters, switches (@block/timerange, @block/field_filter, @block/switch)
  • express disclosure patterns like a drawer (@block/drawer)

Blocks are JSON definitions for page components. Noemata validates and inspects them with their expressions.

A block is just JSON: a single @block/<type> key with a set of properties.

{
  "@block/stat": {
    "title": "Error rate",
    "value": { "@expr/query": "SELECT error_rate FROM requests" },
    "format": "percent"
  }
}

Many properties are expressible — they can either be a literal (like { "page_size": 10}) or an expression ({ "page_size": { "@expr/context_state": "my_page_size" } }). Expressions are reactive — if your data or state changes, Noemata automatically re-runs queries and updates the UI where needed. Here title is a literal string and value is a query, so a static-looking block can still show live data.

Blocks can contain other blocks. A layout block uses items for its children:

{
  "@block/stack": {
    "direction": "row",
    "items": [
      {
        "@block/stat": {
          "title": "Requests",
          "value": { "@expr/query": "SELECT count() FROM requests" }
        }
      },
      {
        "@block/stat": {
          "title": "Errors",
          "value": { "@expr/query": "SELECT count() FROM errors" }
        }
      }
    ]
  }
}

Getting data into a block

Expressions provide blocks with database results, state, and other values. Query expressions read the frame’s view, where columns and metrics have their authored names. A query uses the current time range, active filters, and frame parameters when those values are in scope. Noemata reruns the query when a bound value changes.

Block categories

  • Layout & containers — arrange and group other blocks: stacks, grids, panels, tabs, drawers.
  • Visualization — draw your data: plots, stats, tables, arcs, treemaps, graphs.
  • Inputs & controls — let the reader steer: time ranges, search, filters, switches, buttons.
  • Content & media — text and static content: Markdown, code, icons, badges, tooltips, links.
  • Composition & reuse — embed frames and pull in reusable pieces and context.
  • Control flow — shape the tree itself: repeat per row, branch on a value, defer until scrolled to.

Next