An html macro for dioxus applications.

Overview

dioxus html macro

This crate offers an html! like macro for dioxus applications. It expands to the equivalent rsx! macro call you would have made otherwise, so it does not rely on any dioxus' internals.

use dioxus::prelude::*; 
use dioxus_html_macro::html; 

fn app(cx: Scope) -> Element {
    let mut count = use_state(&cx, || 0);
    cx.render(html!(
        <h1>"High-Five counter: {count}"</h1>
        <button onclick={move |_| count += 1}>"Up high!"</button>
        <button onclick={move |_| count -= 1}>"Down low!"</button>
    ))
}

Note that unlike HTML and JSX, styling of html tags is done via attributes:

html!(
    <h1 color="red">"High-Five counter: {count}"</h1>
)
You might also like...
🧬 Material Icons for Dioxus

🧬 Dioxus Material Icons This project provides a simple but configurable component to render Google's Material Icons in Dioxus. πŸš€ How to get started

πŸ¦€πŸ”¨ DevBcn Workshop - Full Stack Rust - Actix - Postgres - Shuttle - Dioxus
πŸ¦€πŸ”¨ DevBcn Workshop - Full Stack Rust - Actix - Postgres - Shuttle - Dioxus

Building a Movie Collection Manager - Full Stack Workshop with Rust, Actix, SQLx, Dioxus, and Shuttle Welcome to the this workshop! In this hands-on w

Fully-typed, async, reusable state management and synchronization for Dioxus 🧬

dioxus-query πŸ¦€ ⚑ Fully-typed, async, reusable state management and synchronization for Dioxus 🧬. Inspired by TanStack Query. ⚠️ Work in progress ⚠️

Resize observer hooks for Dioxus 🧬

dioxus-resize-observer Resize observer hooks for Dioxus 🧬. Support 0.1.0 - Dioxus v0.4 🧬 git - Dioxus v0.5 Web renderer (WASM) Example use dioxus::p

Fully-typed global state management with a topics subscription system for Dioxus 🧬

dioxus-radio πŸ“‘πŸ¦€ ⚠️ Work in progress !! ⚠️ . Fully-typed global state management with a topics subscription system for Dioxus 🧬. Who is this for You

A cross-platofrm desktop app to manage your ports made with Dioxus and Rust.
A cross-platofrm desktop app to manage your ports made with Dioxus and Rust.

Port Manager A cross-platofrm desktop app to manage your ports made with Dioxus and Rust. This app has been tested only on macOS. Test on other platfo

Fermyon Spin + Dioxus - Client Side Rendering (CSR) template with TailwindCSS
Fermyon Spin + Dioxus - Client Side Rendering (CSR) template with TailwindCSS

spin-dioxus-csr Fermyon Spin + Dioxus - Client Side Rendering (CSR) template with Tailwind Setup Accomodate "chicken & egg" issue for https://github.c

Tools - The Rome Toolchain. A linter, compiler, bundler, and more for JavaScript, TypeScript, HTML, Markdown, and CSS.
Tools - The Rome Toolchain. A linter, compiler, bundler, and more for JavaScript, TypeScript, HTML, Markdown, and CSS.

Rome is currently being rewritten in Rust. Read more about it in our latest blog post. The documentation below is out of date and available for poster

Minimal Pandoc compiler - HTML

Minimal Pandoc compiler - HTML

Comments
  • RSX parser suggestion: `syn-rsx`

    RSX parser suggestion: `syn-rsx`

    ~~Hey, your macro is probably feature complete and there's no interest in changing it – but in case you have to expand functionality: I just wanted to leave an hint for my syn-rsx crate here. I think it'd be great to combine efforts for that basic building block, and others like sauron and leptos are successfully using it.~~

    ~~Sorry for the shameless plug and obviously feel free to close this issue.~~

    opened by stoically 1
Owner
Dioxus Labs
Friendly app development for every platform
Dioxus Labs
A template for starting a dioxus project to be used with dioxus-cli

A template for starting a dioxus project to be used with dioxus-cli

Dioxus 6 Nov 25, 2022
A library to provide abstractions to access common utilities when developing Dioxus applications.

?? Dioxus Standard Library ?? A platform agnostic library for supercharging your productivity with Dioxus. dioxus-std is a Dioxus standard library tha

Miles Murgaw 5 Nov 9, 2022
A HTML to node macro powered by rstml.

html-node A HTML to node macro powered by rstml. Features Text escaping Pretty-printing NEW: type-safe elements and attributes! (example) Example let

Vidhan Bhatt 6 Jul 28, 2023
An attribute macro to simplify writing simple command line applications.

fncli An attribute macro to simplify writing simple command line applications. Example #[fncli::cli] fn main(a: i32, b: i32) { println!("{}", a +

Vidhan Bhatt 29 Dec 15, 2022
global state management for dioxus built on the concept of atoms. currently under πŸ—

Fermi: A global state management solution for Dioxus, inspired by Recoil.Js Fermi provides primitives for managing global state in Dioxus applications

Dioxus 15 Feb 12, 2022
Deploy dioxus-web to Vercel.

Dioxus demo This demo shows how to use Dioxus to build a static web application and deploy it to Vercel. Local development To run the demo locally, yo

Zihua Wu 8 Dec 28, 2022
Make data-driven table rendering easy with Dioxus

Dioxus Table Make data-driven table rendering easy with Dioxus Installation Until the next release of Dioxus this requires Dioxus nightly from git. Th

null 9 Oct 9, 2022
Open source email client written in Rust and Dioxus. Under πŸ—οΈ

Blazemail A full-featued, beautiful, mail client that doesn't suck. Works on mac, windows, linux, mobile, web, etc. Features, status Blazemail is curr

Jon Kelley 13 Dec 19, 2022
(Pre-Release Software) Secure, Encrypted, P2P chat written atop Warp, IPFS, LibP2P, Dioxus and many more awesome projects and protocols.

Uplink Privacy First, Modular, P2P messaging client built atop Warp. Uplink is written in pure Rust with a UI in Dioxus (which is also written in Rust

Satellite 13 Jan 25, 2023
A gui tool written in Dioxus to make it easy to release a workspace of crates to crates.io

Easy-Release: a visual tool for releasing workspaces of libraries A work-in-progress GUI for releasing a large workspace of crates manually, but easil

Jon Kelley 13 Jan 18, 2023