https://github.com/samoylenkodmitry/cranpose
Cranpose is a Jetpack Compose-inspired declarative Rust UI framework. https://crates.io/crates/cranpose
https://github.com/samoylenkodmitry/cranpose
jetpack-compose rust ui-framework
Last synced: 3 days ago
JSON representation
Cranpose is a Jetpack Compose-inspired declarative Rust UI framework. https://crates.io/crates/cranpose
- Host: GitHub
- URL: https://github.com/samoylenkodmitry/cranpose
- Owner: samoylenkodmitry
- License: apache-2.0
- Created: 2025-10-08T07:46:35.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-01-31T15:46:03.000Z (about 1 month ago)
- Last Synced: 2026-02-01T01:27:28.160Z (about 1 month ago)
- Topics: jetpack-compose, rust, ui-framework
- Language: Rust
- Homepage: https://samoylenkodmitry.github.io/Cranpose
- Size: 4.73 MB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE-APACHE
- Code of conduct: CODE_OF_CONDUCT.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
[https://codewiki.google/github.com/samoylenkodmitry/cranpose](https://codewiki.google/github.com/samoylenkodmitry/rs-compose)
[v0.0.40.webm](https://github.com/user-attachments/assets/df50209b-abfd-426a-b79c-a51a9543b385)
## 🌐 Live Demo
**[Try it in your browser!](https://samoylenkodmitry.github.io/Cranpose/)**
# Cranpose
Cranpose is a declarative UI framework for Rust, inspired by Jetpack Compose. It enables developers to build user interfaces for Desktop, Android, and Web (WASM) using a single Rust codebase.
## Quick Start via Isolated Demo
To get started, we recommend using the **Isolated Demo** template found in `apps/isolated-demo`. This project is pre-configured with the necessary dependencies and build scripts for all supported platforms.
```bash
# Clone the repository
git clone https://github.com/samoylenkodmitry/cranpose.git
cd cranpose/apps/isolated-demo
# Run on Desktop (Linux/macOS/Windows)
cargo run --features desktop,renderer-wgpu
```
## Example: Todo List Application
The following example demonstrates managing state, handling user input, and rendering a dynamic list.
```rust
use cranpose::prelude::*;
#[derive(Clone)]
struct TodoItem {
id: usize,
text: String,
done: bool,
}
#[composable]
fn TodoApp() {
// State management using useState
let items = useState(|| vec![
TodoItem { id: 0, text: "Buy milk".into(), done: false },
TodoItem { id: 1, text: "Walk the dog".into(), done: true },
]);
let input_text = useState(|| String::new());
let next_id = useState(|| 2);
Column(Modifier.fill_max_size().padding(20.0), || {
Text("My Todo List", Modifier.padding(10.0).font_size(24.0));
// Input Row
Row(Modifier.fill_max_width().padding(5.0), || {
BasicTextField(
value = input_text.value(),
on_value_change = move |new_text| input_text.set(new_text),
Modifier.weight(1.0).padding(5.0)
);
Button(
onClick = move || {
if !input_text.value().is_empty() {
let mut list = items.value();
list.push(TodoItem {
id: next_id.value(),
text: input_text.value(),
done: false,
});
items.set(list);
next_id.set(next_id.value() + 1);
input_text.set(String::new());
}
},
|| Text("Add")
);
});
// Dynamic List Rendering
LazyColumn(Modifier.weight(1.0), || {
items(items.value().len(), |i| {
let item = items.value()[i].clone();
Row(
Modifier
.fill_max_width()
.padding(5.0)
.clickable(move || {
// Toggle done status
let mut list = items.value();
if let Some(todo) = list.iter_mut().find(|t| t.id == item.id) {
todo.done = !todo.done;
}
items.set(list);
}),
|| {
Text(if item.done { "[x]" } else { "[ ]" });
Spacer(Modifier.width(10.0));
Text(
item.text,
Modifier.alpha(if item.done { 0.5 } else { 1.0 })
);
}
);
});
});
});
}
```
## Platform Support and Building
### Desktop
Supported on Linux, macOS, and Windows via `winit` and `wgpu`.
```bash
cargo run --bin desktop-app
```
### Android
Supported using `cargo-ndk` and `android-activity`.
```bash
# Prerequisites: cargo install cargo-ndk
cd apps/android-demo/android
./gradlew installDebug
```
Refer to [`apps/android-demo/README.md`](apps/android-demo/README.md) for full configuration details.
### Web (WASM)
Supported via `wasm-bindgen` and WebGL2.
```bash
# Prerequisites: cargo install wasm-pack
cd apps/desktop-demo
./build-web.sh
python3 -m http.server 8080
```
Refer to [`apps/desktop-demo/README.md`](apps/desktop-demo/README.md) for web build details.
## License
This project is available under the terms of the Apache License (Version 2.0). See [`LICENSE-APACHE`](LICENSE-APACHE) for the full license text.