Skip to Content
GuideQuick Start

Quick Start

This page gives you two entry paths:

  • write a tiny app first
  • or run a stable example first

If you are completely new to Ansiq, the best order is usually: write the tiny app, then run the example.

If you have not installed ansiq from crates.io yet, start with Installation.

Path 1: write the smallest real app first

This example is not a showcase. It is just the smallest app that still demonstrates the real model:

use ansiq::prelude::*; use ansiq::{run_app, view}; #[derive(Clone, Debug)] enum Message { Submit(String), } #[derive(Default)] struct QuickStartApp { submitted: String, } impl App for QuickStartApp { type Message = Message; fn render(&mut self, cx: &mut ViewCtx<'_, Self::Message>) -> Element<Self::Message> { let draft = cx.signal(|| String::new()); let current = draft.get(); view! { <Paragraph text={"Type something and press Enter"} /> <Input value={current.clone()} on_change={{ let draft = draft.clone(); move |next| draft.set_if_changed(next) }} on_submit={|next| Some(Message::Submit(next))} /> <Paragraph text={format!("Last submit: {}", self.submitted)} /> } } fn update(&mut self, message: Self::Message, _handle: &RuntimeHandle<Self::Message>) { let Message::Submit(next) = message; self.submitted = next; } } #[tokio::main(flavor = "multi_thread")] async fn main() -> std::io::Result<()> { run_app(QuickStartApp::default()).await }

Even this tiny example already includes the key parts:

  • one App
  • one local signal
  • one Input
  • one message path
  • one visible UI update

If you want the smallest useful explanation of how Ansiq works, the next page, Your First App, expands exactly this pattern.

Path 2: run a stable example

The best ready-made entry point right now is the list_navigation example.

cargo run -p ansiq-examples --example list_navigation

This example is better for onboarding than activity_monitor or openapi_explorer because:

  • it is small
  • it exercises the real runtime path
  • it does not depend on system sampling or external input files
  • it already feels like an application, not a toy snippet

Before you run it

Make sure the workspace builds:

cargo check --workspace

If that passes, run the example.

What to look for

The example demonstrates:

  1. list selection via keyboard
  2. focus traversal through the runtime
  3. selection-driven footer updates
  4. widget interaction routed by the runtime instead of hardcoded local hacks

Try:

  • Up / Down to move selection
  • Tab to change focus
  • Shift-Tab to reverse focus

Read these files first

examples/examples/list_navigation.rs examples/src/scenarios/list_navigation.rs

The binary entry file only launches the app. The scenario file contains the actual app logic.

Why this is the right first example

Ansiq’s value is not visible in a trivial one-line hello world. It becomes visible when a small app already needs:

  • runtime routing
  • local interaction state
  • focus behavior
  • incremental redraw

list_navigation is currently the best balance between small size and real behavior.

Next

If you started by running the example, continue with Your First App and connect the ideas back to what you just saw.
If you already read that page first, come back here and treat list_navigation as the first complete example to inspect.

Last updated on