https://github.com/synphonyte/leptos-bevy-canvas
Embed an idiomatic Bevy app inside your Leptos app with ease.
https://github.com/synphonyte/leptos-bevy-canvas
Last synced: about 1 year ago
JSON representation
Embed an idiomatic Bevy app inside your Leptos app with ease.
- Host: GitHub
- URL: https://github.com/synphonyte/leptos-bevy-canvas
- Owner: Synphonyte
- License: apache-2.0
- Created: 2024-09-12T18:38:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-19T18:30:22.000Z (about 1 year ago)
- Last Synced: 2025-04-05T04:27:02.568Z (about 1 year ago)
- Language: Rust
- Size: 155 KB
- Stars: 72
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE-APACHE
Awesome Lists containing this project
README
# Leptos Bevy Canvas
[](https://crates.io/crates/leptos-bevy-canvas)
[](https://docs.rs/leptos-bevy-canvas/)
[](https://github.com/synphonyte/leptos-bevy-canvas#license)
[](https://github.com/synphonyte/leptos-bevy-canvas/actions/workflows/ci.yml)
[](https://codeium.com)
Embed an idiomatic Bevy app inside your Leptos app.
[Send and Receive Events ](https://github.com/Synphonyte/leptos-bevy-canvas/tree/main/examples/unidir_events)
[Sync Bevy Queries ](https://github.com/Synphonyte/leptos-bevy-canvas/tree/main/examples/synced_bevy_query)
## Features
- **Easy to use** - Simply embed your Bevy app inside your Leptos app with the
[`BevyCanvas`](fn@crate::prelude::BevyCanvas) component.
- **Idiomatic** - This crate doesn't want you to do anything differently in the way you write
your Bevy app or your Leptos app. It just gives you the tools for them to communicate.
- **Events** - Send events in either or both directions between your Bevy app and your Leptos app.
- **Resource signals** - Synchronize Bevy `Resource`s with `RwSignal`s in your Leptos app.
## Example
```rust
use bevy::prelude::*;
use leptos::prelude::*;
use leptos_bevy_canvas::prelude::*;
#[derive(Event)]
pub struct TextEvent {
pub text: String,
}
#[component]
pub fn App() -> impl IntoView {
// This initializes a sender for the Leptos app and
// a receiver for the Bevy app
let (text_event_sender, bevy_text_receiver) = event_l2b::();
let on_input = move |evt| {
// send the event over to Bevy
text_event_sender
.send(TextEvent { text: event_target_value(&evt) })
.ok();
};
view! {
}
}
// In Bevy it ends up just as a normal event
pub fn set_text(
mut event_reader: EventReader,
) {
for event in event_reader.read() {
// do something with the event
}
}
// This initializes a normal Bevy app
fn init_bevy_app( text_receiver: BevyEventReceiver) -> App {
let mut app = App::new();
app
.add_plugins(
DefaultPlugins.set(WindowPlugin {
primary_window: Some(Window {
// "#bevy_canvas" is the default and can be
// changed in the component
canvas: Some("#bevy_canvas".into()),
..default()
}),
..default()
}),
)
// import the event here into Bevy
.import_event_from_leptos(text_receiver)
.add_systems(Update, set_text);
app
}
```
Please check the examples to see how to synchronize a `Resource` or a `Query`.
## Compatibility
| Crate version | Compatible Leptos version | Compatible Bevy version |
|---------------|---------------------------|-------------------------|
| 0.1, 0.2 | 0.7 | 0.15 |