Brua
Install
dotnet add package Brua.Web
GitHub: Meginhufr/brua-dotnet

.NET

Brua.Web for Blazor in every render mode, and <picture> HTML for Razor Pages, MVC views and emails rendered on the server.

Brua.Web is the consumer side for .NET: the AssetResponse record, the variant selection rule, <picture> HTML and a Blazor component. Its only dependency is Microsoft.AspNetCore.Components.Web, so it works in static server-side rendering, prerendering, Interactive Server, WebAssembly and Auto, inside any component library, and in Razor Pages, MVC views and server-rendered emails.

Install

Shell
dotnet add package Brua.Web

Point it at your organization

Register the client once with your organization's base URL on the edge. The examples use Brua's own organization; yours is on the Integrate page of the back office, or comes from the colleague who set Brua up.

C#
builder.Services.AddBrua(new BruaOptions("https://cdn.brua.dev/assets/991ceed8-a70e-4a5f-b3d3-e0b6b3d93e44", Lang: "en"));

BruaClient.GetAsync(id) reads {base}/{id}.json and reuses it for a minute, the edge's own lifetime, so a page with a hundred references makes one request per asset and a merge in Brua reaches it within the minute with no deploy of yours. It returns null when nothing is released under the id.

Render by id

Razor
@using Brua.Web

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

With Id, the component reads the asset through the registered client and renders nothing until it has loaded; static server-side rendering waits for it, so the page arrives complete. With Asset, it renders a snapshot your backend embedded in its own JSON:

C#
public record Page(string Title, AssetResponse Hero);
Razor
<BruaPicture Asset="page.Hero" Sizes="(min-width: 60em) 50vw, 100vw" class="hero" />

For Razor Pages, MVC views and emails:

Razor
@Html.Raw(Picture.Html(Model.Hero, new PictureOptions(Sizes: "100vw", Class: "hero")))

Where a <picture> can't go, such as an og:image tag or a PDF, pick one variant:

C#
var url = VariantSelector.Url(asset, new ClientState(["image/png", "image/jpeg"], ColorScheme: "light", Scale: 2));

What you get

  • A <picture> with the dark-mode files behind a media query, AVIF and WebP as sources, and alt, lang, width and height on the <img>; the browser picks the format and density and follows the system color scheme live. An app that switches themes itself passes ColorScheme.
  • The still of an animation, with Lottie and Rive left to their players.
  • Anything else on the tag, such as class, style or data- attributes, goes on the <img>.
  • A merge in Brua reaches the page within a minute, with no deploy of yours.

Next