Skip to main content

Examples

Every example on this page maps to a real crate under examples/. Use them as guided proofs for specific product problems. They are here to answer concrete questions about the framework and its targets, not to replace the docs or force you to reverse-engineer the architecture from application code alone.

The quickest way to learn Fission is to choose one question, run the example that already proves that part of the system, and then read the matching guide while the behavior is still fresh in your head. That keeps the examples grounded in explanation instead of turning them into a scavenger hunt through source files.

Choose the first host that matches the behavior you actually need to prove. Desktop is often the shortest local loop for shared runtime questions such as reducers, widgets, selectors, and layout. Browser and mobile examples are the right first stop when your question is really about browser hosting, Android packaging, iOS simulator behavior, viewport constraints, or another target-specific concern. The constant across all of them is one shared app model.

Start here

These three examples explain the shared app model most clearly

Counter explains the update loop, Widget Gallery shows how ordinary screens are composed, and Text Lab isolates the text and focus problems that often become fragile first.

counterexamples/counter

Counter

The smallest complete Fission app loop, plus a modal, checkbox, text input, selector, animation requests, and a small custom canvas example.

Open this example when you specifically want to study typed actions and reducers, selector-backed view model, and modal overlay and animation wiring. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • typed actions and reducers
  • selector-backed view model
  • modal overlay and animation wiring
cargo run -p counter
widget-galleryexamples/widget-gallery

Widget Gallery

A broad survey of the built-in widget surface, useful when you want to see how common controls, overlays, and data widgets already behave.

Open this example when you specifically want to study layout, input, navigation, and feedback widgets, and semantic tree and screenshot checks. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • layout, input, navigation, and feedback widgets
  • semantic tree and screenshot checks
cargo run -p widget-gallery
text-labexamples/text-lab

Text Lab

The focused proving ground for text input, comboboxes, menus, modal focus, and input method editor-sensitive flows.

Open this example when you specifically want to study single-line and multiline editing, combobox overlay teardown, and modal text flow and focus handling. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • single-line and multiline editing
  • combobox overlay teardown
  • modal text flow and focus handling
cargo run -p text-lab

Product-shaped examples

Use these when you need proof that the architecture scales into real application shells

These crates matter once you care about multi-panel navigation, longer-lived background work, custom rendering, richer input flows, and the kinds of interactions production teams actually have to maintain.

inboxexamples/inbox

Inbox

A product-like mail app that exercises portals, theme switching, locale switching, routing, and host capabilities in one shell.

Open this example when you specifically want to study translation bundles and locale sync, OPEN_URL host capability flow, and drawer and overlay-heavy navigation. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • translation bundles and locale sync
  • OPEN_URL host capability flow
  • drawer and overlay-heavy navigation
cargo run -p inbox
terminalexamples/terminal

Terminal

Proves `TerminalView`, timer-driven polling, and clipboard-sensitive keyboard flows for a long-lived embedded session.

Open this example when you specifically want to study long-lived session state, timer resource polling, and copy and paste behavior. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • long-lived session state
  • timer resource polling
  • copy and paste behavior
cargo run -p terminal
fission-editorexamples/editor

Fission Editor

The deepest example in the repo: custom editing surface, jobs, timers, portals, terminal panel, and extensive live tests.

Open this example when you specifically want to study custom render node path, resource-driven jobs and timers, and command palette, menus, hover interactions, and tabs. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • custom render node path
  • resource-driven jobs and timers
  • command palette, menus, hover interactions, and tabs
cargo run -p fission-editor -- .
chart-galleryexamples/chart-gallery

Chart Gallery

Combines chart widgets with the current 3D embed path through `Scene3D`.

Open this example when you specifically want to study chart series and dataset surface, and Scene3D embed example. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • chart series and dataset surface
  • Scene3D embed example
cargo run -p chart-gallery

Focused surfaces

Open these when you want one rendering or presentation question in isolation

Animation Gallery and Icons Gallery are narrower than the product-shaped apps, but that is exactly why they are useful. They let you inspect motion primitives and visual assets without the rest of an application shell getting in the way.

animation-galleryexamples/animation-gallery

Animation Gallery

Shows runtime-owned opacity, translation, scale, rotation, clip, and scroll-linked motion in isolation.

Open this example when you specifically want to study stable widget IDs, and Transition widget and raw animation requests. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • stable widget IDs
  • Transition widget and raw animation requests
cargo run -p animation-gallery
icons_galleryexamples/icons_gallery

Icons Gallery

Exercises the bundled Material icon set and gives you a fast visual pass over available icon assets.

Open this example when you specifically want to study bundled icon assets, and gallery-style inspection. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • bundled icon assets
  • gallery-style inspection
cargo run -p icons_gallery
embed-videoexamples/embed-video

Video Embed

A minimal app that isolates the host-backed video embed contract and its rendered surface placeholder.

Open this example when you specifically want to study video registration, bounded embed layout, and surface display op test. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • video registration
  • bounded embed layout
  • surface display op test
cargo run -p embed-video
embed-webviewexamples/embed-webview

WebView Embed

A minimal app that proves WebView registration, explicit embed sizing, and deterministic surface rendering.

Open this example when you specifically want to study web state registration, explicit embed size, and surface display op test. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • web state registration
  • explicit embed size
  • surface display op test
cargo run -p embed-webview
embed-3dexamples/embed-3d

3D Embed

A minimal app that isolates the Scene3D custom embed path inside ordinary Fission layout.

Open this example when you specifically want to study custom embed payload, bounded 3D viewport, and surface display op test. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • custom embed payload
  • bounded 3D viewport
  • surface display op test
cargo run -p embed-3d

Targets

Use these when the host itself is part of the problem you are solving

Web Smoke and Mobile Smoke prove that the same shared runtime can be packaged and launched through real browser, Android, and iOS host paths. Open them whenever you need to validate host setup, launch behavior, WebAssembly packaging, emulator or simulator flow, or another target-specific concern.

web-smokeexamples/web-smoke

Web Smoke

The checked-in WebAssembly and browser host path, plus the clearest reference for generated web launcher folders.

Open this example when you specifically want to study wasm-pack build script, and browser host bootstrap. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • wasm-pack build script
  • browser host bootstrap
cargo run -p web-smoke./examples/web-smoke/platforms/web/run-browser.sh
mobile-smokeexamples/mobile-smoke

Mobile Smoke

The checked-in host path for Android emulator and iOS simulator packaging and launch around shared app code.

Open this example when you specifically want to study shared mobile runtime host, test control port forwarding on Android, and generated host-folder reference. The goal is not to copy the crate line for line. The goal is to see how one question is solved in a running app that already matches the real runtime.

  • shared mobile runtime host
  • test control port forwarding on Android
  • generated host-folder reference
cargo run -p mobile-smoke./examples/mobile-smoke/platforms/ios/run-sim.sh./examples/mobile-smoke/platforms/android/run-emulator.sh