Installation
This page does one job: get ansiq running from crates.io inside a brand new Cargo project.
If you do not have Rust installed yet, install the standard toolchain first and then come back here.
Prerequisites
Make sure both Rust and Cargo are available:
rustc --version
cargo --versionIf both commands print versions, you are ready to continue.
Create a project
Ansiq does not require a custom template. A normal binary crate is enough:
cargo new hello-ansiq
cd hello-ansiqAdd dependencies
Install ansiq and tokio:
cargo add ansiq
cargo add tokio --features macros,rt-multi-threadtokio is part of the normal path because Ansiq applications run inside an async runtime. That becomes important later when you add emitted messages, background tasks, and streaming output.
Paste your first app
Replace src/main.rs with:
use ansiq::prelude::*;
use ansiq::{run_app, view};
#[derive(Clone, Debug)]
enum Message {
Submit(String),
}
#[derive(Default)]
struct HelloApp {
submitted: String,
}
impl App for HelloApp {
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(HelloApp::default()).await
}This already contains the minimum real Ansiq path:
- one
App - one local
signal - one
Input - one
Message - one visible UI update
Run it
Now run:
cargo runIf everything is wired correctly, you will see a small terminal UI. Type something, press Enter, and the submitted value will appear below the input.
Next
- Want a stable example next? Continue to Quick Start
- Want to understand why this code is shaped this way? Continue to Your First App