RavenRS · Rust GUI

SwatchGrid

Edit and run the SwatchGrid RavenRS example in your browser. Explore its Rust code and download a Cargo project for desktop and WebAssembly.

One declarative Rust interface, GPU rendering, reactive state and semantic design tokens. Free and open source under MIT OR Apache-2.0.

Rust source

fn swatch_grid() -> impl View {
    let (front, back) = (State::new(Color::hex(0xe11d48)), State::new(Color::hex(0x2563eb)));
    let (for_front, for_back, shown) = (front.clone(), back.clone(), front.clone());
    VStack::new((
        view_fn(move || {
            let (for_front, for_back) = (for_front.clone(), for_back.clone());
            SwatchGrid::new([
                (Color::hex(0xe11d48), "Rose"),
                (Color::hex(0xf59e0b), "Amber"),
                (Color::hex(0x16a34a), "Green"),
                (Color::hex(0x2563eb), "Blue"),
                (Color::hex(0x7c3aed), "Violet"),
                (Color::hex(0x111827), "Ink"),
            ])
            .columns(3)
            .selected(Some(shown.get()))
            .on_pick(move |color, held| {
                // With Cmd or Ctrl, the color goes to the background.
                if held.meta || held.ctrl { for_back.set(color) } else { for_front.set(color) }
            })
        }),
        Text::new("Click: foreground. Cmd or Ctrl and click: background.").style(TextStyle::Caption),
    ))
    .spacing(8.0)
}

The interactive preview loads when JavaScript and WebGPU or WebGL2 are available. You can read the guide and examples here at any time.

More examples