Skip to Content
GuideInstallation

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 --version

If 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-ansiq

Add dependencies

Install ansiq and tokio:

cargo add ansiq cargo add tokio --features macros,rt-multi-thread

tokio 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 run

If 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
Last updated on