Skip to content
forma.
v3.2.0-rc.2
☰
Browse documentation
Start here
Application guides
API reference

Docs/Start here

FORMA 3.2

Create a routed app

Build a typed Rust application with retained layouts and native islands.

View source ↗Markdown ↓Site guide · 3.2.0-rc.2 · release candidate
On this page

These guides target the 3.2.0-rc.2 release candidate. It is a prerelease; check the release record and qualify your application before rollout.

Start from the native-router template to connect a typed Rust shell, independent leaf pages and client navigation. Use the named candidate only after it appears in the release record. The commands below do not install Node.js or Rust for you.

Install the prerequisites#

Install Node.js 22 or later with npm and Rust 1.85 or later with Cargo. Check both toolchains before scaffolding:

sh
node --version
npm --version
rustc --version
cargo --version

Create, build and run#

sh
npx @getforma/create-app@3.2.0-rc.2 my-routed-app --template native-router
cd my-routed-app
cd admin
npm ci
npm run build
cd ..
cargo run --locked

Open http://localhost:3000. The frontend build emits the native modules, manifest and closed browser group before Rust loads them. Commit both admin/package-lock.json and Cargo.lock; install and rebuild the whole coordinated set when updating.

Before publication, this command is not an installation path. Framework contributors use the documented packed-candidate workflow with authenticated artifacts. The source template's lockfiles are release seeds until packing seals them.

Verify the retained layout#

Change the shell counter and write a note in its input. Follow Home and About, then use Back and Forward. The same shell keeps its nodes and state while the destination leaf changes. A leaf's state belongs to that leaf; it starts again after the owner is replaced. Refresh the page to see a complete Rust response and reset in-memory state.

Disable JavaScript and follow the same links. Rust still renders every direct destination; interactive island buttons require JavaScript. This is progressive enhancement of actual page responses.

For a second connected example, the website router project adds distinct destination islands and server-seed GET forms. Its live lab exposes document/reset controls and a curated source viewer.

Follow the files#

FileResponsibility
admin/build.tsCompile owner entries and declare the navigation group
admin/src/navigation.tsInitialize the public native adapter with the generated bootstrap
admin/src/shell/app.tsxDeclare shell props, persistent island and one empty child outlet
admin/src/home/app.tsx, admin/src/about/app.tsxDeclare independently compiled destinations
src/main.rsBind finalized typed handles, validate request data, negotiate complete document or owner-branch responses

Keep the outlet outside island-owned subtrees. Do not concatenate server fragments, reconstruct bootstrap records or mount a second runtime over adopted nodes. The routing guide explains the boundaries; the router API provides exact signatures.

Build the rest of the application#

Add ordinary Rust/Axum handlers for APIs, persistence and services. Declare enhanced actions only after supplying application authentication, authorization, CSRF and transaction rules. A transport failure after POST leaves an unknown outcome; it is not permission to retry the mutation.

Deploy the server, manifest and emitted assets as one result and retain a complete rollback. Test actual direct URLs, no-JS behavior, layout identity, leaf cleanup, focus and Back/Forward in the consuming application before rollout.

Find your next answer.

Search versioned Forma documentation, guides and examples.