Vizzuality — Frontend Team

VizzJson

The @@ convention for turning static JSON into dynamic, parameterized configurations — library-agnostic, CMS-ready, runtime-resolved.

Try the Playground
localhost:3000/playground
Input
{
  "type": "raster",
  "paint": {
    "raster-opacity": "@@#params.opacity"
  },
  "layout": {
    "visibility": "@@#params.visible"
  }
}
Output
{
  "type": "raster",
  "paint": {
    "raster-opacity": 0.75
  },
  "layout": {
    "visibility": "visible"
  }
}
opacity
0.75
visible
The Problem

Static configs don't scale.

Every map team hits the same wall: JSON configs that are rigid, duplicated, and impossible to maintain as variations grow.

Static JSON has no feedback loop

Map configs are opaque until rendered. Changing an opacity or a color means editing raw JSON and refreshing — you can't see the effect until the whole cycle completes.

Tunable values are buried in config

Opacity, colors, radii — scattered across deeply nested JSON objects. There's no inventory of what's adjustable, no defined ranges, and no way to surface them as controls.

Designers can't experiment without developers

Trying a different palette or adjusting a radius requires someone comfortable editing raw JSON. Non-technical teammates are locked out of the exploration loop.

No clear boundary between template and state

When everything is hardcoded, there's no way to know what's configurable. With explicit parameters, you know exactly what to persist in a URL, save to a database, or sync across sessions.

The @@ Prefix Family

One convention, four capabilities.

@@#params.XRuntime parameter injection
@@function:Named function dispatch
@@type:Class or React component instantiation
@@=[...]Inline expression → function
How It Works

A single recursive pass.

@@Resolver@@#params.*runtime values@@type:*layer classes@@function:*registered fns@@=[expr]JS expressionsLayer Instancesnative JS objectsMapLibre Stylemap configurationLegend ConfigReact components

Every @@ prefix is resolved in a single pass — no multi-stage builds, no compilation step.