xgpui / interactive examples
The complete browser collection · 24 demos

All demos.
One place to explore.

Every hosted WASM example, grouped by what you want to try. Desktop-only labs and their launch commands are listed separately below.

Brushes & paints

3 demos

Color fields, noise, text masks and vector surfaces.

Brush system

Universal brushes

Gradients, mesh color fields, noise, glyph masks and paths. Explore the same brush on different surfaces.

Live mesh editor

Hermite mesh editor

Edit 2×2 or 3×3 mesh points and U/V tangent angles and lengths. Compare direct and legacy rendering.

Paint producers

Gradient paints

Linear, radial, conic and diamond paints on rounded backgrounds, borders and paths.

Layer effects

1 demo

Filter and blend completed UI subtrees.

Composition

Layer effects

Blur a whole subtree, change its colors, or blend it into the scene. Compare each effect with the original.

Shaders & motion

6 demos

Six small experiments in light, movement and composition.

Instanced shaders

A custom fragment shader

Start small: a typed Rust instance, a rounded shape and a fragment shader.

Instanced shaders

Glowing badges

One hundred individual badges, sharing a shader program and one animated glow.

Instanced shaders

Particle field

Explore 100 to 10,000 particles. Adjust opacity and pause the motion.

Instanced shaders

Order, clipping & opacity

See how shader shapes interleave with native quads and respect a shared clip.

Instanced shaders

Gradient shadows

Compare native shadows with colored falloff. Adjust spread, offset and softness.

Instanced shaders

Soft animated borders

Orbiting highlights on an interactive pill, with a soft blue and peach glow.

Text

3 demos

Variable fonts, paragraph shaping, wrapping and editing.

Parley · Rust / Wasm

Variable fonts

Drag the desktop text lab’s weight, width, slant and optical-size sliders. Inspect real font axes, feature tags and changing advances.

Typography · kinetic text

Selectable typography

Style glyphs with gradients, glow and shadows. Reveal, float or scramble them while selection and copy keep the original source.

Typography

Text & paragraphs

Edit multilingual text, change wrapping and explore bidirectional selection and shaping.

SVG & color

5 demos

Explore vector artwork and color-space interpolation.

Vector artwork

Progressive SVG

Zoom into vector artwork. Compare texture scaling and sharp viewport rendering.

Color

Color & gamut

Compare color-space interpolation, gamut mapping and transparent stops side by side.

Color tasks · Wasm

Chromaticity & gamut

Compare gamut boundaries, filled colors and mapping with an explicitly sRGB preview.

Color tasks · Wasm

Pixels + metadata

Keep pixels fixed while switching named and ICC interpretations. Inspect real CPU-packed FP16 bytes.

Browser color · Rust/Wasm previews

Italy photo comparison

Compare WebKit’s sRGB, Display P3 and highlighted photographs. Switch the selected photo between original browser color and an explicit sRGB preview.

Media & paths

5 demos

Source textures, fragment color adjustments and contour effects.

Media & vector geometry

Image filters

Linear exposure, contrast, saturation and vignette, plus the earlier encoded filters. Share one source upload and preserve alpha.

Supplied pixels

RGBA16F / Display P3

High-precision linear P3 source textures, transparency and adjustments. Explicit clipped sRGB browser preview.

Large raster pages

Progressive tiled canvas

Explore a generated 72 MP source. Pan, zoom, replace assets and test cache pressure. Add bounded preview blur with adaptive or full-resolution quality.

Media & vector geometry

Mipmapping

Compare atlas minification with a dedicated trilinear mip chain. Animate zoom and inspect fine detail.

Media & vector geometry

Trim / dash

Compare original, trimmed and dashed curves. Animate contour effects before native tessellation.

Spatial canvas

2 demos

A shared spatial camera, two kinds of content. Read the extension guide →

xgpui-canvas

Spatial card canvas

Pan and zoom 10,000 or 100,000 retained cards. Select, move, snap, and navigate the minimap.

xgpui-canvas

Mandelbrot explorer

Explore shared f64 CPU fractal math with pointer-anchored zoom and progressive browser refinement.

Native labs

Run locally

These desktop views are not hosted WASM demos. Run commands from the repository root.

Desktop spatial lab

Canvas & Mandelbrot

Full native selection, snapping, geometry minimap and live preview; cached background CPU fractal tiles.

Show launch commands
just canvas-lab
just canvas-lab --mandelbrot
API, controls & evidence →
Desktop app

Full paint lab

The full desktop gallery and detailed path/batching comparisons. The live Hermite editor is also hosted above.

Show launch command
just paints
Launch instructions →
Desktop app

Native wide gamut

Compare actual wide SDR surfaces and ordinary sRGB controls on a supported display.

Show launch command
just gamut
Launch instructions →
Desktop app

Native text comparison

Compare native and Parley text backends, editing and virtualized scrolling.

Show launch command
just text
Launch instructions →
Desktop app

Desktop SVG lab

Desktop vector rendering, zoom and scheduling comparisons.

Show launch command
just svg
Launch instructions →
Source examples & developer harnesses

GPUI source-gallery demos

These examples are not published on this site. Links open their source in GitHub. The standalone gallery source contains the local build configuration.

Developer Wasm test harnesses

Source modules invoked by browser tests; these are not interactive hosted demos.

The Color / Gamut demo uses standalone xgpui-color math. Native wide-gamut presentation still requires Metal or D3D11.