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.

Integrating? You don't need an account.

Your designer publishes in Brua. You get the organization's base URL and the asset ids, install the SDK for your stack and render by id. Brua picks the right file for each screen, appearance and language, and a new version reaches your app after review with no release of yours.

WebReact, Vue, Svelte, plain <picture> iOSSwift package, SwiftUI view AndroidKotlin, Compose .NETBlazor component, server HTML BackendsPass ids on, delivery API Build & CICLI pull, GitHub Actions

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, from Figma, the command line or the back office. 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. Each has a guide in the docs.

React; Vue and Svelte have the same provider and component

npm install @meginhufr/brua-web

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

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

Full guide

In your build, with a delivery key for the project

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

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

SwiftUI, with the BruaKit package

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

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

Full guide

In your build, with a delivery key for the project

# The released ids as constants: BruaAssets.bridge
npx @meginhufr/brua-cli pull Sources/App/BruaAssets.swift

# In CI: fails when the file has drifted from the releases
npx @meginhufr/brua-cli pull Sources/App/BruaAssets.swift --check

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())

Full guide

In your build, with a delivery key for the project

# The released ids as constants: BruaAssets.bridge
npx @meginhufr/brua-cli pull app/src/main/kotlin/com/example/app/BruaAssets.kt --namespace com.example.app

# In CI: fails when the file has drifted from the releases
npx @meginhufr/brua-cli pull app/src/main/kotlin/com/example/app/BruaAssets.kt --namespace com.example.app --check

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" />

Full guide

In your build, with a delivery key for the project

# The released ids as constants: BruaAssets.Bridge
npx @meginhufr/brua-cli pull Brua/BruaAssets.cs --namespace Example.App

# In CI: fails when the file has drifted from the releases
npx @meginhufr/brua-cli pull Brua/BruaAssets.cs --namespace Example.App --check

One id for every image your product ships.

Integrating? You don't need an account.

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

Design releases it

The backend passes the id on

Every screen renders it right

Plan, review, merge, roll back.

Get started in an afternoon.

Start with one asset.