nordisk/facett

facett-app — the application-framework — for idiots

Class: idiot. Every step, nothing assumed. Goal: get the facett-demo app-shell running on your own screen, then in a real web browser, from a cold shell. If you already know Rust and just want the commands, read app-guide.md instead.

What you need first

• A terminal (the black window where you type commands).
• The facett repo on disk. In the terminal, type this and press Enter:

cd /run/media/rickard/T9/git/facett

• Rust installed (cargo --version should print something, not "command not found"). If it prints "command not found", stop and install Rust first (https://rustup.rs) before continuing.

Part A — see the app on your own desktop

Step 1 — build and run it

Type and press Enter:

cargo run -p facett-demo

The first run downloads and compiles a lot of code — it can take several minutes. Wait until a window titled "facett-demo — every component, every palette" opens.

Step 2 — find the app-framework tabs

Along the top of the window is a row of tab names. Click through them (or scroll the row) and find these four — they are the ones this document is about:

• nav — a sidebar on the left with sections you can click to expand ("Data", "Visualise"), and leaf items ("Grid", "Table", "Settings") that change the text on the right when clicked. Back (←) and forward (→) buttons sit above the content; clicking a breadcrumb word also jumps.
• shell — same idea, but clicking a sidebar item swaps in a real spinning 3D model instead of plain text. Click "3D Models" to expand it, then click "Avocado", "Skull", and "Compare" (which shows both side by side). Press Ctrl+K while this tab is active — a search box pops up in the middle; type a few letters of "avocado" and press Enter to jump there.
• overlay — click "Open dialog" to see a confirm/cancel popup; click the other buttons ("Info", "Success", "Warn", "Error") to see coloured notification cards stack up in the top-right corner and disappear on their own after a few seconds (except the sticky red one — click its ✕ to dismiss it).
• widgets — a small tab strip at the top of this tab switches between: a stepper (+/− a number) and a paged list of 95 rows; a file-tree you can expand/collapse and click; a month calendar you can click a date on; a colour picker with preset swatches.

Step 3 — close it

Close the window like any other window, or go back to the terminal and press Ctrl+C.

Part B — see it running in a real web browser (the live demo)

This builds the same app to WebAssembly and serves it locally, exactly like the real published site does.

Step 4 — build the web version

Type and press Enter:

cargo xtask demo-wasm

This is slower than Step 1 the first time (it also installs a small helper tool called wasm-bindgen if you don't have it). Wait for it to finish without a red error message. When it's done, a new folder called dist exists inside the facett repo.

Step 5 — serve it locally

Type and press Enter:

cd dist
python3 -m http.server 8080

(If python3 isn't found, try python instead.) Leave this window running — it's now acting as a tiny web server.

Step 6 — open it in your browser

Open a web browser and go to:

http://localhost:8080

You should see the exact same app as Step 1, now running inside the browser tab. Click around the nav, shell, overlay, and widgets tabs the same way as Part A — they behave identically. Two things are intentionally different in the browser:

• the 🌍 Region picker (a separate, unrelated feature) shows a message saying it's desktop-only instead of doing anything — that's expected;
• 3D/map rendering uses a slightly different (but visually equivalent) drawing path under the hood; you won't notice a difference.

You can jump straight to one tab by adding # and its name to the URL, for example:

http://localhost:8080/#shell

Step 7 — stop the local server

Go back to the terminal from Step 5 and press Ctrl+C.

Part C — the real published site

The same build Steps 4 gets pushed to a public URL by whoever maintains the repo, using:

cargo xtask deploy-pages

(This pushes to a git branch that a hosting service auto-serves — you don't need to run this yourself just to look at the app; Parts A and B above are enough to see it working.) The published site is linked from the project's README under a "⚡ Live Web Demo" button.

That's the whole tour: one command for a native window (Step 1), three commands for a local browser copy (Steps 4-6), and clicking through four tabs (nav, shell, overlay, widgets) to see the whole app-framework in action.