Refractv0.1.0 · cargo add refract

Learn by making

Small examples.
Real foundations.

Follow the state. See how the pieces fit.
The same Rust views, running in two places.

In this collection01Counter↘02Clock↘03Gallery↘04Chat↘
i

Run commands from your Refract checkout. Browser examples require the WASM toolchain; desktop examples have been tested on macOS. Set up once →

01 /

Counter

A tiny application. A reactive foundation.

Start here

Declare a value, read it in a view, and update it from an action. This is the smallest useful loop in Refract.

counter.rs · simplified view
use refract::prelude::*;

#[view]
fn counter(cx: &mut ViewContext<'_>) -> impl View {
    #[state]
    let count: u32 = 0;

    #[action(count)]
    let increment = |cx| {
        count.update(cx.runtime(), |n| *n += 1);
    };

    button(
        text(format!("Count: {}", cx.read(&count))),
        increment,
    )
    .padding(16.0)
}
Interactive sketch001
A little state goes a long way.
00

React illustration of the Rust example.
Run the real thing with the quick start below.

Run the counter
./scripts/build-web.sh
python3 scripts/serve.py
# Open http://127.0.0.1:4173
02 /

Clock

State that keeps time.

A shared clock model, a scoped timer, and two context consumers. The root owns the effect; the time and date views subscribe to the readings they need.

  • ↳Environment objects
  • ↳Effect cleanup
  • ↳Scoped updates

Source in your checkout
examples/clock/src/lib.rs

Run the clock
./scripts/build-web.sh clock
python3 scripts/serve.py --example clock
# Open http://127.0.0.1:4174
04 /

Chat

A few moving parts. One graph.

Searchable conversations, per-chat drafts, streaming local replies, and a multiline composer. A fuller application built from keyed views and scoped effects. Replies are scripted and session-only.

  • ↳Keyed composition
  • ↳Streaming updates
  • ↳Cancellation

Source in your checkout
examples/chat/src/lib.rs

Run the chat
./scripts/build-web.sh chat
python3 scripts/serve.py --example chat
# Open http://127.0.0.1:4176

Make it your own

Compose a little further.

Stacks, spacing, and paint are just Rust method calls. Start from an example, change a view, and build up from there.

Explore layout & styling
Your next view
v_stack()
    .gap(16.0)
    .child(text("Hello, Refract").font_size(28.0))
    .child(text("A shared view. A different host."))
    .padding(24.0)
    .background(Color::rgb(15, 30, 52))
    .foreground(Color::WHITE)
    .radius(12.0)