dioxus/README.md

178 lines
6.4 KiB
Markdown
Raw Normal View History

<p align="center">
<img src="./notes/header.svg">
</p>
2021-01-16 15:31:17 +00:00
2021-07-12 16:20:58 +00:00
<div align="center">
<!-- Crates version -->
2021-09-07 22:25:57 +00:00
<a href="https://crates.io/crates/dioxus">
<img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
2021-07-12 16:20:58 +00:00
alt="Crates.io version" />
</a>
<!-- Downloads -->
2021-09-07 22:25:57 +00:00
<a href="https://crates.io/crates/dioxus">
<img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
2021-07-12 16:20:58 +00:00
alt="Download" />
</a>
<!-- docs -->
2021-09-07 22:25:57 +00:00
<a href="https://docs.rs/dioxus">
2021-07-12 16:20:58 +00:00
<img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
alt="docs.rs docs" />
</a>
<!-- CI -->
<a href="https://github.com/jkelleyrtp/dioxus/actions">
2021-12-29 04:48:25 +00:00
<img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
2021-07-12 16:20:58 +00:00
alt="CI status" />
</a>
<!--Awesome -->
2023-07-08 01:15:13 +00:00
<a href="https://dioxuslabs.com/awesome">
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
</a>
<!-- Discord -->
<a href="https://discord.gg/XgGxMSkvUM">
2022-01-25 18:17:43 +00:00
<img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
2021-07-12 16:20:58 +00:00
</a>
</div>
<div align="center">
<h3>
2021-12-29 04:48:25 +00:00
<a href="https://dioxuslabs.com"> Website </a>
2021-07-12 16:22:08 +00:00
<span> | </span>
2022-02-10 19:08:11 +00:00
<a href="https://github.com/DioxusLabs/example-projects"> Examples </a>
<span> | </span>
<a href="https://dioxuslabs.com/learn/0.4/guide"> Guide </a>
2022-01-13 04:16:17 +00:00
<span> | </span>
2022-01-13 14:30:18 +00:00
<a href="https://github.com/DioxusLabs/dioxus/blob/master/notes/README/ZH_CN.md"> 中文 </a>
<span> | </span>
<a href="https://github.com/DioxusLabs/dioxus/blob/master/translations/pt-br/README.md"> PT-BR </a>
<span> | </span>
<a href="https://github.com/DioxusLabs/dioxus/blob/master/translations/ja-jp/README.md"> 日本語 </a>
2022-01-13 04:16:17 +00:00
</h3>
</div>
2021-07-12 16:20:58 +00:00
<br/>
2021-12-29 04:48:25 +00:00
Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust.
```rust
2021-12-29 04:20:01 +00:00
fn app(cx: Scope) -> Element {
let mut count = use_state(cx, || 0);
2021-02-25 23:44:00 +00:00
2022-03-05 21:50:16 +00:00
cx.render(rsx! {
2021-07-11 23:31:07 +00:00
h1 { "High-Five counter: {count}" }
2022-03-05 22:07:34 +00:00
button { onclick: move |_| count += 1, "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" }
2022-03-05 21:50:16 +00:00
})
}
```
2023-06-19 13:46:52 +00:00
Dioxus can be used to deliver webapps, desktop apps, static sites, mobile apps, TUI apps, liveview apps, and more. Dioxus is entirely renderer agnostic and can be used as a platform for any renderer.
If you know React, then you already know Dioxus.
## Unique features:
2021-10-19 16:09:23 +00:00
- Desktop apps running natively (no Electron!) in less than 10 lines of code.
2021-12-01 03:48:05 +00:00
- Incredibly ergonomic and powerful state management.
2021-12-29 04:48:25 +00:00
- Comprehensive inline documentation - hover and guides for all HTML elements, listeners, and events.
- Blazingly fast 🔥🔥 and extremely memory efficient
- Integrated hot reloading for fast iteration
- First-class async support with coroutines and suspense
- And more! Read the [full release post](https://dioxuslabs.com/blog/introducing-dioxus/).
## Supported Platforms
2022-10-07 08:11:59 +00:00
<div align="center">
<table style="width:100%">
<tr>
<td><em>Web</em></td>
<td>
<ul>
<li>Render directly to the DOM using WebAssembly</li>
<li>Pre-render with SSR and rehydrate on the client</li>
<li>Simple "hello world" at about 65kb, comparable to React</li>
<li>Built-in dev server and hot reloading for quick iteration</li>
</ul>
</td>
</tr>
<tr>
<td><em>Desktop</em></td>
<td>
<ul>
<li>Render using Webview or - experimentally - with WGPU or Skia </li>
<li>Zero-config setup. Simply cargo-run to build your app </li>
<li>Full support for native system access without electron-esque IPC </li>
<li>Supports macOS, Linux, and Windows. Portable <3mb binaries </li>
</ul>
</td>
</tr>
<tr>
<td><em>Mobile</em></td>
<td>
<ul>
<li>Render using Webview or - experimentally - with WGPU or Skia </li>
<li>Support for iOS and Android </li>
<li><em>Significantly</em> more performant than React Native </li>
</ul>
</td>
</tr>
<tr>
<td><em>Liveview</em></td>
<td>
<ul>
<li>Render apps - or just a single component - entirely on the server</li>
<li>Integrations with popular Rust frameworks like Axum and Warp</li>
<li>Extremely low-latency and ability to support 10,000+ simultaneous apps</li>
</ul>
</td>
</tr>
<tr>
<td><em>Terminal</em></td>
<td>
<ul>
<li>Render apps directly into your terminal, similar to <a href="https://github.com/vadimdemedes/ink"> ink.js</a></li>
<li>Powered by the familiar flexbox and CSS model of the browser</li>
<li>Built-in widgets like text input, buttons, and focus system</li>
</ul>
</td>
</tr>
</table>
</div>
2021-09-07 22:32:47 +00:00
## Why Dioxus?
There's tons of options for building apps, so why would you choose Dioxus?
2021-12-01 03:48:05 +00:00
Well, first and foremost, Dioxus prioritizes developer experience. This is reflected in a variety of features unique to Dioxus:
2021-12-01 03:48:05 +00:00
- Autoformatting of our meta language (RSX) and accompanying VSCode extension
- Hotreloading using an interpreter of RSX for both desktop and web
- Emphasis on good docs - our guide is complete and our HTML elements are documented
- Significant research in simplifying
2021-12-01 03:48:05 +00:00
Dioxus is also a very extensible platform.
- Easily build new renderers by implementing a very simple optimized stack-machine
- Build and share components and even custom elements
2021-12-01 03:50:26 +00:00
So... Dioxus is great, but why won't it work for me?
- It's not fully mature yet. APIs are still shifting, things might break (though we try to avoid it)
- You need to run in a no-std environment.
- You don't like the React-hooks model of building UIs
2021-06-24 15:09:38 +00:00
## Contributing
- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).
- Join the discord and ask questions!
<a href="https://github.com/dioxuslabs/dioxus/graphs/contributors">
<img src="https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10" />
</a>
2021-11-12 21:06:33 +00:00
2021-09-20 16:36:43 +00:00
## License
This project is licensed under the [MIT license].
[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
2021-09-20 16:36:43 +00:00
Unless you explicitly state otherwise, any contribution intentionally submitted
2021-12-15 03:59:34 +00:00
for inclusion in Dioxus by you, shall be licensed as MIT, without any additional
2021-09-20 16:36:43 +00:00
terms or conditions.