Renox 1.0: stable, with a design system and one real example

Renox 1.0 is out. Install it with one line:

cargo install renox-cli
rnx new shop --starter && cd shop
rnx serve

The --version you needed during the release candidates is gone. From 1.0 on, Renox follows semantic versioning: code that compiles on 1.0 keeps compiling on every 1.x.

#What 1.0 promises

The release candidates were for finding what was wrong before the promise was made. Six of them went out in a week. Each was tested end to end from crates.io: a new app, its tests, the tutorial followed as a reader would.

Then the work went into an example big enough to break things. It found bugs, and every one was fixed before 1.0. It found a performance problem too: one change made Renox 3.3× faster.

#A design system, taken from a real app

The bike shop needed parts the UI kit didn’t have, so it built them. For 1.0 those parts moved into Renox, so every app gets them.

• A new default look. The theme is called “editorial”: a cream page, a teal accent with a terracotta second accent, large headlines, and pill buttons. Inside an app shell with a sidebar, the buttons stay compact. Every text colour passes WCAG AA in light and dark mode. The previous look is one attribute away: data-rx-theme="warm".

• Icons. {{ icon("bike") }} draws one of 112 Lucide icons, in the text’s colour. Sidebar links, stat cards and empty states take an icon= too.

• A tab bar on phones. navbar(…, tabs=…) turns the main sections into a bar at the bottom of a phone screen, and search moves behind a button.

• renox-blocks. A new plugin with eleven components:

  • input: a quantity stepper, a two-handle range slider, a till’s keypad, colour and size swatches, a date-and-time range;
  • display: a photo gallery, a timeline, a pricing table;
  • scheduling: a month calendar, an availability timeline and a kanban board.

  A page loads a component’s code only when it uses that component.

• A lighter kit. Charts, wizards, repeaters and tags now load only on the pages that have them. A plain page’s script is 22% smaller.

• A starter that looks finished. rnx new --starter now comes with a public home page, a dashboard with a welcome card and stat cards, and branded sign-in pages. They are built from page patterns that live in your app, so you can change them.

#One example that explains itself

Renox used to ship sixteen small examples. Now it ships two:

• the bike shop, the complete use case;
• hello, the smallest app.

Everything the other fourteen examples showed is now a page of the bike shop:

• each store has a page on its own host;
• /about/fields shows every form input type with its Rust, SQLite and PostgreSQL types;
• /about/htmx runs every htmx recipe live.

Every page of the shop now explains itself beside its own code. On a wide screen, a panel sits next to the page. It says what the page is for and which Renox features it uses, and why. Below that are one to three code samples: the handler, the template, the query. These samples are cut from the real source files when the app is built, so they can’t go stale, and a test fails if a page has none.

Open the shop and pick any page.

#Upgrading from a release candidate

Two changes since rc.6 can touch your code:

• AppState is now one shared pointer, which made Renox 3.3× faster. Moving a field out of it no longer compiles: write state.db.clone() instead of state.db. The compiler points at each place.
• The default currency is USD. Money in templates now takes the currency’s smallest unit, as the data grid already did. If your app stores whole units, add divide_by=1. If it relied on the old default, set APP_CURRENCY=IDR.

The changelog lists everything else.

#What’s next

1.x adds without breaking. The next things we’re working on are the remaining Laravel parity items, and faster sessions. The benchmark showed that the session layer is now the largest cost left on a bare route. If you build something with Renox, tell us.