Brua

How Brua works

Three roles touch every image. Brua gives them one thing to hold, an id, and does the rest at the edge.

Three roles, one id

A designer publishes an image or an animation to Brua, from Figma, the command line or the back office, with alt text in each of the project's languages. Brua makes every size and format from it: the scales or the width ladder, AVIF, WebP and PNG, a still for every animation, and keeps light and dark, languages and motion as variants of one asset.

A backend passes the asset's id on, the way it passes a product code. It never stores an image URL, and a new release needs no deploy on its side:

JSON
{ "campaign": "spring", "hero": "bridge" }

An app renders the id. The SDK reads the asset from the edge and picks the file from what the device says: color scheme, motion, density, format and language.

React
<BruaPicture id="bridge" />

The edge

Released assets are public files on the edge, like any image on a CDN, so a page or an app needs no key: one base URL per organization, then ids. Under it, {id}.json is the asset's current release as JSON with every variant, which is what the SDKs read; {id} is one URL that negotiates the file from the request; and {id}/{version}/{file} are the files themselves, immutable and cached for a year.

URLs
https://cdn.brua.dev/assets/991ceed8-a70e-4a5f-b3d3-e0b6b3d93e44/bridge.json
https://cdn.brua.dev/assets/991ceed8-a70e-4a5f-b3d3-e0b6b3d93e44/bridge
https://cdn.brua.dev/assets/991ceed8-a70e-4a5f-b3d3-e0b6b3d93e44/bridge/1/en-light-still@2x.avif

What the SDK does

Each SDK has the same three parts: the AssetResponse model, the variant selection rule, and a component for its framework. The rule is one function, with shared test fixtures that every SDK and the edge run, so a Swift app and a web page choose the same file for the same conditions. The component reads the JSON once, keeps it for a minute, follows the system's appearance and motion settings live, and puts the alt text where the platform's accessibility reads it.

What needs a key

Nothing on the consumer side. Keys are for writing (a pipeline pushing new versions) and for reading the delivery API from a service, which is how a backend embeds a frozen snapshot for email or print. People sign in to the back office to review and merge; an app never does.

Next