Learn

Build a real Rux app from an empty file: layout, state, lists, and components, in about half an hour.

The reference tells you what Rux does. This tells you how to use it. By the end you will have built a working task list. You will have typed into a real text input, added rows, ticked them off and scrolled it, and met every idea Rux has.

There are five of them, and that is the whole language:

<template> says what the content is
<style> is literal CSS that says where it goes and how it looks
<script> holds signals, the state
directives (r-for, r-if, r-model) connect the two
components let you name a piece and reuse it

If you have written a web page, most of this is already familiar. The chapters are short and each one ends with a file you can run.

What you need

Rust, and about half an hour. No Node, no npm, no browser. Rux opens a native window and paints it on the GPU.

cargo install ruxlang

That takes a few minutes and gives you a rux command. Chapter 1 starts from an empty file, so nothing else is needed to follow along.

If you would rather have every finished example to hand, clone the repo as well:

git clone https://github.com/Aine-dickson/rux
cd rux
cargo run -p ruxlang -- examples/learn/01-hello.rux

Either way, edits to a .rux file reload in the open window without rebuilding anything.

If you would rather not install anything yet, the playground runs the same runtime in your browser. Every complete example in these chapters has a Try it button that opens it there, so you can follow along and change things without cloning a thing. It needs a browser with WebGPU, which means a recent Chrome, Edge, Firefox or Safari.

The finished app

Every chapter's checkpoint lives in examples/learn/, so you can skip ahead, or check your file against a working one when something looks wrong. The last chapter's version is 05-components.rux.

<view class="row" r-for="t in items" :class='#{ done: t.done }'
      @tap='for i in 0..items.len() { if items[i].label == t.label { items[i].done = !items[i].done; } }'>
  <view class="box" />
  <text class="label">{{ t.label }}</text>
</view>

That is the heart of it: a repeated row, a class bound to state, and a handler that writes back to the list. If that line looks slightly unusual, chapter 5 explains exactly why it is written that way, and what happens if you write the obvious thing instead.

A note on versions

This guide is written against the current release, and every snippet in it is checked by the test suite on each commit. Rux is 0.x and moves weekly, so a feature you read about elsewhere may be newer than this guide: the reference describes the tip and is the authority on what is built, and the blog tracks what changed in each release.

Once you have been through this, the recipes are the next thing to read. They are not more language: they are how to build a particular piece of an app, written around the part of each pattern that surprises people.