Brua

One id for every image your product ships.

Design releases it. Your backend passes the id on. Every screen gets the right file: light or dark, still or moving, in the reader's language. Brua is Norwegian for the bridge, and that is the whole job.

Request access See how it works

Reference: Reading the asset…
Chosen
Alt text

This block is a real asset from Brua's own edge, read by the web SDK the way your pages would. Your browser's settings pick the file; the toggles only override them.

Three teams touch every image. Brua gives them one thing to hold.

Design releases it

bridgeanimated, 640×400

lightdarkstillmotionnben

Published from Figma, in the change set Spring campaign

Export once. Color schemes, scales and languages are slots on one asset, and Brua makes every size and format.

The backend passes the id on

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

An id, like a product code. Your API never stores an image URL, and a new release needs no deploy on your side.

Every screen renders it right

<BruaPicture id="bridge" />

The SDK asks the edge for the right file from what the device says: scheme, motion, size, format and language.

Plan, review, merge, roll back.

Changes travel in change sets, the way code does. An approver merges, and the new release reaches every app through the same id. A bad release is restored with one click.

A version that changes an asset's shape is flagged before it reaches a layout.
A library asset shows how many projects a merge reaches.
Merges can be scheduled for launch day.

Spring campaign

3 changes, opened by Mari

In review

bridgeShape changes from 16:10 to 3:2

6 → 7

app-iconfixed 28×28, light and dark

2 → 3

spinneranimated, Lottie with stills

new

Reaches 4 projects

Get started in an afternoon.

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, then ids.

Point the SDK at your organization. One base URL on the edge, set once where your app starts.
Render by id. The component reads the asset from the edge and picks the file from what the device says: scheme, motion, density, format and language. A merge in Brua reaches it within a minute, with no deploy of yours.
Keep the ids typed. The command line writes the released ids into your code as constants, so a missing asset is a compile error, and --check fails the build when they drift. The GitHub Actions push new versions from your pipeline.

SDKs for React, Vue, Svelte, SwiftUI, Jetpack Compose and .NET, for Blazor and server-rendered pages alike. The packages come with your access.

React; Vue and Svelte have the same provider and component

npm install @brua/web

import { BruaProvider, BruaPicture } from "@brua/web/react";

<BruaProvider base="https://cdn.brua.dev/assets/<your organization>">
  <BruaPicture id="bridge" sizes="(min-width: 600px) 50vw, 100vw" />
</BruaProvider>

SwiftUI, with the BruaKit package

let brua = BruaClient(base: URL(string: "https://cdn.brua.dev/assets/<your organization>")!)

BruaImage(id: "bridge", client: brua)

Jetpack Compose, with dev.brua:brua-android

val brua = BruaClient("https://cdn.brua.dev/assets/<your organization>", http = okHttpClient)

BruaImage(id = "bridge", client = brua, Modifier.fillMaxWidth())

Blazor, with the Brua.Web package

dotnet add package Brua.Web

builder.Services.AddBrua(new BruaOptions("https://cdn.brua.dev/assets/<your organization>"));

<BruaPicture Id="bridge" Sizes="(min-width: 60em) 50vw, 100vw" />

In your build, with a delivery key for the project

# The released ids as constants: assets.bridge === "bridge"
npx @brua/cli pull src/brua/assets.ts

# In CI: fails when the file has drifted from the releases
npx @brua/cli pull src/brua/assets.ts --check