xgpui / interactive examples
The complete browser collection · 19 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

2 demos

Paragraph shaping, wrapping and editing.

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

2 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.

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.

Native labs

Run locally

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

Desktop app

Pastel waves

Translucent ribbons, inward edge shading and reversible animation. Native-only performance experiment.

Show launch command
just paints --pastel-waves
Launch instructions →
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.