depreciate the render macro

examples/PWA-example/src/main.rs

@@ -9,7 +9,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! (
+    rsx! (
         div { style: "text-align: center;",
             h1 { "🌗 Dioxus 🚀" }
             h3 { "Frontend that scales." }

examples/all_css.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             align_content: "a",
             align_items: "a",

examples/all_events.rs

@@ -52,7 +52,7 @@ fn app() -> Element {
         events.push_back(event);
     };
 
-    render! {
+    rsx! {
         div { style: "{CONTAINER_STYLE}",
             div {
                 style: "{RECT_STYLE}",

examples/calculator.rs

@@ -57,7 +57,7 @@ fn app() -> Element {
         _ => {}
     };
 
-    render! {
+    rsx! {
         style { {include_str!("./assets/calculator.css")} }
         div { id: "wrapper",
             div { class: "app",

examples/clock.rs

@@ -16,7 +16,7 @@ fn app() -> Element {
         }
     });
 
-    render! {
+    rsx! {
         div { "High-Five counter: {count}" }
     }
 }

examples/compose.rs

@@ -27,7 +27,7 @@ fn app() -> Element {
         );
     };
 
-    render! {
+    rsx! {
         h1 { "This is your email" }
         button { onclick: open_compose_window, "Click to compose a new email" }
         ul {
@@ -44,7 +44,7 @@ fn app() -> Element {
 fn compose(send: Rc<dyn Fn(String)>) -> Element {
     let mut user_input = use_signal(String::new);
 
-    render! {
+    rsx! {
         div {
             h1 { "Compose a new email" }
 

examples/control_focus.rs

@@ -25,7 +25,7 @@ fn app() -> Element {
         }
     });
 
-    render! {
+    rsx! {
         div {
             h1 { "Input Roulette" }
             for i in 0..100 {

examples/counter.rs

@@ -11,7 +11,7 @@ fn app() -> Element {
     let mut counters = use_signal(|| vec![0, 0, 0]);
     let mut sum = use_selector(move || counters.read().iter().copied().sum::<usize>());
 
-    render! {
+    rsx! {
         div {
             button { onclick: move |_| counters.write().push(0), "Add counter" }
             button { onclick: move |_| { counters.write().pop(); }, "Remove counter" }

examples/crm.rs

@@ -14,7 +14,7 @@ type Clients = Signal<Vec<Client>>;
 fn app() -> Element {
     use_context_provider::<Clients>(|| Signal::new(vec![]));
 
-    render! {
+    rsx! {
         link {
             rel: "stylesheet",
             href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
@@ -60,7 +60,7 @@ pub struct Client {
 fn ClientList() -> Element {
     let mut clients = use_context::<Clients>();
 
-    render! {
+    rsx! {
         h2 { "List of Clients" }
         Link { to: Route::ClientAdd {}, class: "pure-button pure-button-primary", "Add Client" }
         Link { to: Route::Settings {}, class: "pure-button", "Settings" }
@@ -88,7 +88,7 @@ fn ClientAdd() -> Element {
         dioxus_router::router().push(Route::ClientList {});
     };
 
-    render! {
+    rsx! {
         h2 { "Add new Client" }
         form { class: "pure-form pure-form-aligned", onsubmit: submit_client,
 
@@ -138,7 +138,7 @@ fn ClientAdd() -> Element {
 
 #[component]
 fn Settings() -> Element {
-    render! {
+    rsx! {
         h2 { "Settings" }
 
         button {

examples/custom_assets.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             p {
                 "This should show an image:"

examples/custom_html.rs

@@ -30,7 +30,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div { h1 { "hello world!" } }
     }
 }

examples/disabled.rs

@@ -7,7 +7,7 @@ fn main() {
 fn app() -> Element {
     let mut disabled = use_signal(|| false);
 
-    render! {
+    rsx! {
         div {
             button { onclick: move |_| disabled.toggle(),
                 "click to "

examples/dog_app.rs

@@ -15,10 +15,10 @@ fn app() -> Element {
             .await;
 
         let Ok(breeds) = list else {
-            return render! { "error fetching breeds" };
+            return rsx! { "error fetching breeds" };
         };
 
-        render! {
+        rsx! {
             for cur_breed in breeds.message.keys().take(10).cloned() {
                 li { key: "{cur_breed}",
                     button { onclick: move |_| breed.set(cur_breed.clone()),
@@ -30,10 +30,10 @@ fn app() -> Element {
     });
 
     let Some(breed_list) = breed_list.value().cloned() else {
-        return render! { "loading breeds..." };
+        return rsx! { "loading breeds..." };
     };
 
-    render! {
+    rsx! {
         h1 { "Select a dog breed!" }
         div { height: "500px", display: "flex",
             ul { flex: "50%", {breed_list} }
@@ -53,13 +53,13 @@ fn BreedPic(breed: Signal<String>) -> Element {
     });
 
     match fut.value().read().as_ref() {
-        Some(Ok(resp)) => render! {
+        Some(Ok(resp)) => rsx! {
             div {
                 button { onclick: move |_| fut.restart(), "Click to fetch another doggo" }
                 img { max_width: "500px", max_height: "500px", src: "{resp.message}" }
             }
         },
-        _ => render! { "loading image..." },
+        _ => rsx! { "loading image..." },
     }
 }
 

examples/dynamic_asset.rs

@@ -17,7 +17,7 @@ fn app() -> Element {
         response.respond(Response::new(include_bytes!("./assets/logo.png").to_vec()));
     });
 
-    render! {
+    rsx! {
         div {
             img { src: "/logos/logo.png" }
         }

examples/error_handle.rs

@@ -5,9 +5,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         ErrorBoundary {
-            handle_error: |error: CapturedError| render! {"Found error {error}"},
+            handle_error: |error: CapturedError| rsx! {"Found error {error}"},
             DemoC { x: 1 }
         }
     }
@@ -19,7 +19,7 @@ fn DemoC(x: i32) -> Element {
 
     result.throw()?;
 
-    render! {
+    rsx! {
         h1 { "{x}" }
     }
 }

examples/eval.rs

@@ -23,7 +23,7 @@ fn app() -> Element {
     });
 
     match future.value().read().as_ref() {
-        Some(v) => render!( p { "{v}" } ),
-        _ => render!( p { "waiting.." } ),
+        Some(v) => rsx!( p { "{v}" } ),
+        _ => rsx!( p { "waiting.." } ),
     }
 }

examples/file_explorer.rs

@@ -22,7 +22,7 @@ const _STYLE: &str = manganis::mg!(file("./examples/assets/fileexplorer.css"));
 fn app() -> Element {
     let mut files = use_signal(Files::new);
 
-    render! {
+    rsx! {
         div {
             link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet" }
             header {
@@ -34,7 +34,7 @@ fn app() -> Element {
             main {
                 {files.read().path_names.iter().enumerate().map(|(dir_id, path)| {
                     let path_end = path.split('/').last().unwrap_or(path.as_str());
-                    render! (
+                    rsx! (
                         div {
                             class: "folder",
                             key: "{path}",

examples/file_upload.rs

@@ -30,7 +30,7 @@ fn App() -> Element {
         }
     };
 
-    render! {
+    rsx! {
         label {
             input {
                 r#type: "checkbox",

examples/filedragdrop.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render!(
+    rsx!(
         div { h1 { "drag a file here and check your console" } }
     )
 }

examples/flat_router.rs

@@ -32,7 +32,7 @@ enum Route {
 
 #[component]
 fn Footer() -> Element {
-    render! {
+    rsx! {
         div {
             Outlet::<Route> {}
 
@@ -60,20 +60,20 @@ fn Footer() -> Element {
 
 #[component]
 fn Home() -> Element {
-    render!("Home")
+    rsx!("Home")
 }
 
 #[component]
 fn Games() -> Element {
-    render!("Games")
+    rsx!("Games")
 }
 
 #[component]
 fn Play() -> Element {
-    render!("Play")
+    rsx!("Play")
 }
 
 #[component]
 fn Settings() -> Element {
-    render!("Settings")
+    rsx!("Settings")
 }

examples/form.rs

@@ -10,7 +10,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             h1 { "Form" }
             form {

examples/generic_component.rs

@@ -7,7 +7,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         generic_child { data: 0 }
     }
 }
@@ -18,7 +18,7 @@ struct GenericChildProps<T: Display + PartialEq + Clone + 'static> {
 }
 
 fn generic_child<T: Display + PartialEq + Clone>(props: GenericChildProps<T>) -> Element {
-    render! {
+    rsx! {
         div { "{props.data}" }
     }
 }

examples/hello_world.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div { "Hello, world!" }
     }
 }

examples/hydration.rs

@@ -27,7 +27,7 @@ fn main() {
 fn app() -> Element {
     let mut val = use_signal(|| 0);
 
-    render! {
+    rsx! {
         div {
             h1 { "hello world. Count: {val}" }
             button { onclick: move |_| val += 1, "click to increment" }

examples/inputs.rs

@@ -35,7 +35,7 @@ const FIELDS: &[(&str, &str)] = &[
 ];
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div { margin_left: "30px",
             {select_example()},
             div {
@@ -137,7 +137,7 @@ fn app() -> Element {
 }
 
 fn select_example() -> Element {
-    render! {
+    rsx! {
         div {
             select {
                 id: "selection",

examples/link.rs

@@ -7,7 +7,7 @@ fn main() {
 
 #[component]
 fn App() -> Element {
-    render! (
+    rsx! (
         div {
             p { a { href: "http://dioxuslabs.com/", "Default link - links outside of your app" } }
             p {
@@ -35,7 +35,7 @@ enum Route {
 
 #[component]
 fn Header() -> Element {
-    render! {
+    rsx! {
         h1 { "Your app here" }
         ul {
             li {
@@ -51,10 +51,10 @@ fn Header() -> Element {
 
 #[component]
 fn Home() -> Element {
-    render!( h1 { "Home" } )
+    rsx!( h1 { "Home" } )
 }
 
 #[component]
 fn Settings() -> Element {
-    render!( h1 { "Settings" } )
+    rsx!( h1 { "Settings" } )
 }

examples/login_form.rs

@@ -29,7 +29,7 @@ fn app() -> Element {
         }
     };
 
-    render! {
+    rsx! {
         h1 { "Login" }
         form { onsubmit,
             input { r#type: "text", id: "username", name: "username" }

examples/mobile_demo/src/lib.rs

@@ -63,7 +63,7 @@ fn app() -> Element {
 
     log::debug!("Hello from the app");
 
-    render! {
+    rsx! {
         div {
             h1 { "Hello, Mobile" }
             div {

examples/multiwindow.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             button {
                 onclick: move |_| {
@@ -19,7 +19,7 @@ fn app() -> Element {
 }
 
 fn popup() -> Element {
-    render! {
+    rsx! {
         div { "This is a popup!" }
     }
 }

examples/nested_listeners.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             onclick: move |_| println!("clicked! top"),
             "- div"

examples/openid_connect_demo/src/main.rs

@@ -49,7 +49,7 @@ fn App() -> Element {
     if fermi_auth_request.read().is_none() {
         *fermi_auth_request.write() = Some(stored_auth_request);
     }
-    render! { Router::<Route> {} }
+    rsx! { Router::<Route> {} }
 }
 
 fn main() {

examples/openid_connect_demo/src/views/header.rs

@@ -24,7 +24,7 @@ pub fn LogOut(cx: Scope<ClientProps>) -> Element {
                 Some(log_out_url_result) => match log_out_url_result {
                     Some(uri) => match uri {
                         Ok(uri) => {
-                            render! {
+                            rsx! {
                                 Link {
                                     onclick: move |_| {
                                         {
@@ -40,11 +40,11 @@ pub fn LogOut(cx: Scope<ClientProps>) -> Element {
                             }
                         }
                         Err(error) => {
-                            render! { div { "Failed to load disconnection url: {error:?}" } }
+                            rsx! { div { "Failed to load disconnection url: {error:?}" } }
                         }
                     },
                     None => {
-                        render! { div { "Loading... Please wait" } }
+                        rsx! { div { "Loading... Please wait" } }
                     }
                 },
                 None => {
@@ -59,15 +59,15 @@ pub fn LogOut(cx: Scope<ClientProps>) -> Element {
                         })
                     };
                     logout_url_task();
-                    render! { div { "Loading log out url... Please wait" } }
+                    rsx! { div { "Loading log out url... Please wait" } }
                 }
             },
             None => {
-                render! {{}}
+                rsx! {{}}
             }
         },
         None => {
-            render! {{}}
+            rsx! {{}}
         }
     })
 }
@@ -113,14 +113,14 @@ pub fn RefreshToken(cx: Scope<ClientProps>) -> Element {
                     })
                 };
                 exchange_refresh_token_spawn();
-                render! { div { "Refreshing session, please wait" } }
+                rsx! { div { "Refreshing session, please wait" } }
             }
             None => {
-                render! { div { "Id token expired and no refresh token found" } }
+                rsx! { div { "Id token expired and no refresh token found" } }
             }
         },
         None => {
-            render! {{}}
+            rsx! {{}}
         }
     })
 }
@@ -135,21 +135,21 @@ pub fn LoadClient() -> Element {
                 *fermi_client.write() = ClientState {
                     oidc_client: Some(ClientProps::new(client_id.clone(), client.clone())),
                 };
-                render! {
+                rsx! {
                     div { "Client successfully loaded" }
                     Outlet::<Route> {}
                 }
             }
             Err(error) => {
                 log::info! {"Failed to load client: {:?}", error};
-                render! {
+                rsx! {
                     div { "Failed to load client: {error:?}" }
                     Outlet::<Route> {}
                 }
             }
         },
         None => {
-            render! {
+            rsx! {
                 div {
                     div { "Loading client, please wait" }
                     Outlet::<Route> {}
@@ -180,7 +180,7 @@ pub fn AuthHeader() -> Element {
                                 auth_request.nonce.clone(),
                             ) {
                                 Ok(email) => {
-                                    render! {
+                                    rsx! {
                                         div {
                                             div { {email} }
                                             LogOut { client_id: client_props.client_id, client: client_props.client }
@@ -193,7 +193,7 @@ pub fn AuthHeader() -> Element {
                                     // Id token failed to be decoded because it expired, we refresh it
                                     openidconnect::ClaimsVerificationError::Expired(_message) => {
                                         log::info!("Token expired");
-                                        render! {
+                                        rsx! {
                                             div {
                                                 RefreshToken { client_id: client_props.client_id, client: client_props.client }
                                                 Outlet::<Route> {}
@@ -203,7 +203,7 @@ pub fn AuthHeader() -> Element {
                                     // Other issue with token decoding
                                     _ => {
                                         log::info!("Other issue with token");
-                                        render! {
+                                        rsx! {
                                             div {
                                                 div { "{error}" }
                                                 Outlet::<Route> {}
@@ -215,7 +215,7 @@ pub fn AuthHeader() -> Element {
                         }
                         // User is not logged in
                         None => {
-                            render! {
+                            rsx! {
                                 div {
                                     Link { to: auth_request.authorize_url.clone(), "Log in" }
                                     Outlet::<Route> {}
@@ -232,17 +232,17 @@ pub fn AuthHeader() -> Element {
                             auth_request: Some(auth_request),
                         }),
                     );
-                    render! { div { "Loading nonce" } }
+                    rsx! { div { "Loading nonce" } }
                 }
             }
         }
         // Client is not initialized yet, we need it for everything
         (None, _, _) => {
-            render! { LoadClient {} }
+            rsx! { LoadClient {} }
         }
         // We need everything loaded before doing anything
         (_client, _auth_request, _auth_token) => {
-            render! {{}}
+            rsx! {{}}
         }
     })
 }

examples/openid_connect_demo/src/views/home.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
 
 pub fn Home() -> Element {
-    render! { div { "Hello world" } }
+    rsx! { div { "Hello world" } }
 }

examples/openid_connect_demo/src/views/login.rs

@@ -21,14 +21,14 @@ pub fn Login(query_string: String) -> Element {
         (Some(client_props), Some(auth_token_read)) => {
             match (auth_token_read.id_token, auth_token_read.refresh_token) {
                 (Some(_id_token), Some(_refresh_token)) => {
-                    render! {
+                    rsx! {
                         div { "Sign in successful" }
                         Link { to: home_url, "Go back home" }
                     }
                 }
                 // If the refresh token is set but not the id_token, there was an error, we just go back home and reset their value
                 (None, Some(_)) | (Some(_), None) => {
-                    render! {
+                    rsx! {
                         div { "Error while attempting to log in" }
                         Link {
                             to: home_url,
@@ -70,17 +70,17 @@ pub fn Login(query_string: String) -> Element {
                             })
                         };
                         token_response_spawn();
-                        render!{ div {} }
+                        rsx!{ div {} }
                     }
                     None => {
-                        render! { div { "No code provided" } }
+                        rsx! { div { "No code provided" } }
                     }
                 }
                 }
             }
         }
         (_, _) => {
-            render! {{}}
+            rsx! {{}}
         }
     })
 }

examples/openid_connect_demo/src/views/not_found.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 
 #[component]
 pub fn NotFound(route: Vec<String>) -> Element {
-    render! {
+    rsx! {
         div{
             {route.join("")}
         }

examples/optional_props.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         Button {
             a: "asd".to_string(),
             c: "asd".to_string(),
@@ -52,7 +52,7 @@ struct ButtonProps {
 }
 
 fn Button(props: ButtonProps) -> Element {
-    render! {
+    rsx! {
         button {
             "{props.a} | "
             "{props.b:?} | "

examples/overlay.rs

@@ -6,7 +6,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",

examples/pattern_model.rs

@@ -40,7 +40,7 @@ const STYLE: &str = include_str!("./assets/calculator.css");
 fn app() -> Element {
     let mut state = use_signal(Calculator::new);
 
-    render! {
+    rsx! {
         style { {STYLE} }
         div { id: "wrapper",
             div { class: "app",
@@ -98,7 +98,7 @@ fn app() -> Element {
 
 #[component]
 fn CalculatorKey(name: String, onclick: EventHandler<MouseEvent>, children: Element) -> Element {
-    render! {
+    rsx! {
         button { class: "calculator-key {name}", onclick: move |e| onclick.call(e), {&children} }
     }
 }

examples/pattern_reducer.rs

@@ -14,7 +14,7 @@ fn main() {
 fn app() -> Element {
     let mut state = use_signal(|| PlayerState { is_playing: false });
 
-    render!(
+    rsx!(
         div {
             h1 {"Select an option"}
             h3 { "The radio is... ", {state.read().is_playing()}, "!" }

examples/query_segments_demo/src/main.rs

@@ -64,7 +64,7 @@ impl FromQuery for ManualBlogQuerySegments {
 
 #[component]
 fn BlogPost(query_params: ManualBlogQuerySegments) -> Element {
-    render! {
+    rsx! {
         div{"This is your blogpost with a query segment:"}
         div{ "{query_params:?}" }
     }
@@ -72,7 +72,7 @@ fn BlogPost(query_params: ManualBlogQuerySegments) -> Element {
 
 #[component]
 fn AutomaticBlogPost(name: String, surname: String) -> Element {
-    render! {
+    rsx! {
         div{"This is your blogpost with a query segment:"}
         div{ "name={name}&surname={surname}" }
     }
@@ -80,7 +80,7 @@ fn AutomaticBlogPost(name: String, surname: String) -> Element {
 
 #[component]
 fn App() -> Element {
-    render! { Router::<Route>{} }
+    rsx! { Router::<Route>{} }
 }
 
 fn main() {

examples/read_size.rs

@@ -38,7 +38,7 @@ fn app() -> Element {
         }
     };
 
-    render!(
+    rsx!(
         div {
             width: "50%",
             height: "50%",

examples/readme.rs

@@ -11,7 +11,7 @@ fn main() {
 fn app() -> Element {
     let mut count = use_signal(|| 0);
 
-    render! {
+    rsx! {
         h1 { "High-Five counter: {count}" }
         button { onclick: move |_| count += 1, "Up high!" }
         button { onclick: move |_| count -= 1, "Down low!" }

examples/router.rs

@@ -34,7 +34,7 @@ enum Route {
 
 #[component]
 fn NavBar() -> Element {
-    render! {
+    rsx! {
         nav {
             ul {
                 li {
@@ -51,12 +51,12 @@ fn NavBar() -> Element {
 
 #[component]
 fn Home() -> Element {
-    render! { h1 { "Welcome to the Dioxus Blog!" } }
+    rsx! { h1 { "Welcome to the Dioxus Blog!" } }
 }
 
 #[component]
 fn Blog() -> Element {
-    render! {
+    rsx! {
         h1 { "Blog" }
         Outlet::<Route> {}
     }
@@ -64,7 +64,7 @@ fn Blog() -> Element {
 
 #[component]
 fn BlogList() -> Element {
-    render! {
+    rsx! {
         h2 { "Choose a post" }
         ul {
             li {
@@ -89,12 +89,12 @@ fn BlogList() -> Element {
 
 #[component]
 fn BlogPost(name: String) -> Element {
-    render! { h2 { "Blog Post: {name}" } }
+    rsx! { h2 { "Blog Post: {name}" } }
 }
 
 #[component]
 fn PageNotFound(route: Vec<String>) -> Element {
-    render! {
+    rsx! {
         h1 { "Page not found" }
         p { "We are terribly sorry, but the page you requested doesn't exist." }
         pre { color: "red", "log:\nattemped to navigate to: {route:?}" }

examples/rsx_usage.rs

@@ -1,7 +1,7 @@
-//! A tour of the render! macro
+//! A tour of the rsx! macro
 //! ------------------------
 //!
-//! This example serves as an informal quick reference of all the things that the render! macro can do.
+//! This example serves as an informal quick reference of all the things that the rsx! macro can do.
 //!
 //! A full in-depth reference guide is available at: https://www.notion.so/rsx-macro-basics-ef6e367dec124f4784e736d91b0d0b19
 //!
@@ -55,7 +55,7 @@ fn main() {
 //     let formatting_tuple = ("a", "b");
 //     let lazy_fmt = format_args!("lazily formatted text");
 //     let asd = 123;
-//     render! {
+//     rsx! {
 //         div {
 //             // Elements
 //             div {}
@@ -95,10 +95,10 @@ fn main() {
 //             }
 
 //             // Expressions can be used in element position too:
-//             {render!(p { "More templating!" })},
+//             {rsx!(p { "More templating!" })},
 
 //             // Iterators
-//             {(0..10).map(|i| render!(li { "{i}" }))},
+//             {(0..10).map(|i| rsx!(li { "{i}" }))},
 
 //             // Iterators within expressions
 //             {
@@ -106,19 +106,19 @@ fn main() {
 //                 // Iterators *should* have keys when you can provide them.
 //                 // Keys make your app run faster. Make sure your keys are stable, unique, and predictable.
 //                 // Using an "ID" associated with your data is a good idea.
-//                 data.into_iter().map(|(k, v)| render!(li { key: "{k}", "{v}" }))
+//                 data.into_iter().map(|(k, v)| rsx!(li { key: "{k}", "{v}" }))
 //             }
 
 //             // Matching
 //             match true {
-//                 true => render!( h1 {"Top text"}),
-//                 false => render!( h1 {"Bottom text"})
+//                 true => rsx!( h1 {"Top text"}),
+//                 false => rsx!( h1 {"Bottom text"})
 //             }
 
 //             // Conditional rendering
 //             // Dioxus conditional rendering is based around None/Some. We have no special syntax for conditionals.
-//             // You can convert a bool condition to render! with .then and .or
-//             {true.then(|| render!(div {}))},
+//             // You can convert a bool condition to rsx! with .then and .or
+//             {true.then(|| rsx!(div {}))},
 
 //             // Alternatively, you can use the "if" syntax - but both branches must be resolve to Element
 //             if false {
@@ -130,7 +130,7 @@ fn main() {
 //             // Using optionals for diverging branches
 //             // Note that since this is wrapped in curlies, it's interpreted as an expression
 //             {if true {
-//                 Some(render!(h1 {"Top text"}))
+//                 Some(rsx!(h1 {"Top text"}))
 //             } else {
 //                 None
 //             }}
@@ -172,7 +172,7 @@ fn main() {
 //             // Can pass in props directly as an expression
 //             {
 //                 let props = TallerProps {a: "hello", children: None };
-//                 render!(Taller { ..props })
+//                 rsx!(Taller { ..props })
 //             }
 
 //             // Spreading can also be overridden manually
@@ -225,7 +225,7 @@ fn main() {
 // }
 
 // fn helper<'a>(cx: &'a ScopeState, text: &'a str) -> Element {
-//     render! {
+//     rsx! {
 //         p { "{text}" }
 //     }
 // }
@@ -235,7 +235,7 @@ fn main() {
 // // something like Clippy.
 // #[component(no_case_check)]
 // fn lowercase_helper() -> Element {
-//     render! {
+//     rsx! {
 //         "asd"
 //     }
 // }
@@ -254,18 +254,18 @@ fn main() {
 //     // something like Clippy.
 //     #[component(no_case_check)]
 //     pub fn lowercase_component() -> Element {
-//         render! { "look ma, no uppercase" }
+//         rsx! { "look ma, no uppercase" }
 //     }
 // }
 
 // /// Documention for this component is visible within the rsx macro
 // #[component]
 // pub fn Taller(
-//     /// Fields are documented and accessible in render!
+//     /// Fields are documented and accessible in rsx!
 //     a: &'static str,
 //     children: Element,
 // ) -> Element {
-//     render! { {&children} }
+//     rsx! { {&children} }
 // }
 
 // #[derive(Props, PartialEq, Eq)]
@@ -285,7 +285,7 @@ fn main() {
 
 // #[component]
 // fn WithInline(cx: Scope<'a>, text: &'a str) -> Element {
-//     render! {
+//     rsx! {
 //         p { "{text}" }
 //     }
 // }
@@ -295,7 +295,7 @@ fn main() {
 // where
 //     T: Display,
 // {
-//     render! {
+//     rsx! {
 //         p { "{text}" }
 //     }
 // }

examples/scroll_to_top.rs

@@ -7,7 +7,7 @@ fn main() {
 fn app() -> Element {
     let mut header_element = use_signal(|| None);
 
-    render! {
+    rsx! {
         div {
             h1 {
                 onmounted: move |cx| header_element.set(Some(cx.inner().clone())),

examples/shortcut.rs

@@ -10,5 +10,5 @@ fn app() -> Element {
 
     _ = use_global_shortcut("ctrl+s", move || toggled.toggle());
 
-    render!("toggle: {toggled}")
+    rsx!("toggle: {toggled}")
 }

examples/shorthand.rs

@@ -14,10 +14,10 @@ fn app() -> Element {
     // todo: i'd like it for children on elements to be inferred as the children of the element
     // also should shorthands understand references/dereferences?
     // ie **a, *a, &a, &mut a, etc
-    let children = render! { "Child" };
+    let children = rsx! { "Child" };
     let onclick = move |_| println!("Clicked!");
 
-    render! {
+    rsx! {
         div { class, id, {&children} }
         Component { a, b, c, children, onclick }
         Component { a, ..ComponentProps { a: 1, b: 2, c: 3, children: None, onclick: Default::default() } }
@@ -26,7 +26,7 @@ fn app() -> Element {
 
 #[component]
 fn Component(a: i32, b: i32, c: i32, children: Element, onclick: EventHandler<()>) -> Element {
-    render! {
+    rsx! {
         div { "{a}" }
         div { "{b}" }
         div { "{c}" }

examples/signals.rs

@@ -26,7 +26,7 @@ fn app() -> Element {
         }
     });
 
-    render! {
+    rsx! {
         h1 { "High-Five counter: {count}" }
         button { onclick: move |_| count += 1, "Up high!" }
         button { onclick: move |_| count -= 1, "Down low!" }

examples/simple_desktop.rs

@@ -32,7 +32,7 @@ enum Route {
 
 #[component]
 fn NavBar() -> Element {
-    render! {
+    rsx! {
         h1 { "Your app here" }
         ul {
             li {
@@ -73,20 +73,20 @@ fn NavBar() -> Element {
 #[component]
 fn Home() -> Element {
     log::debug!("rendering home {:?}", current_scope_id());
-    render! { h1 { "Home" } }
+    rsx! { h1 { "Home" } }
 }
 
 #[component]
 fn BlogList() -> Element {
     log::debug!("rendering blog list {:?}", current_scope_id());
-    render! { div { "Blog List" } }
+    rsx! { div { "Blog List" } }
 }
 
 #[component]
 fn BlogPost(post: String) -> Element {
     log::debug!("rendering blog post {}", post);
 
-    render! {
+    rsx! {
         div {
             h3 { "blog post: {post}" }
             Link { to: Route::BlogList {}, "back to blog list" }
@@ -96,5 +96,5 @@ fn BlogPost(post: String) -> Element {
 
 #[component]
 fn Oranges() -> Element {
-    render!("Oranges are not apples!")
+    rsx!("Oranges are not apples!")
 }

examples/simple_list.rs

@@ -5,20 +5,20 @@ fn main() {
 }
 
 fn app() -> Element {
-    render!(
+    rsx!(
         div {
             // Use Map directly to lazily pull elements
-            {(0..10).map(|f| render! { "{f}" })},
+            {(0..10).map(|f| rsx! { "{f}" })},
 
             // Collect into an intermediate collection if necessary, and call into_iter
             {["a", "b", "c", "d", "e", "f"]
                 .into_iter()
-                .map(|f| render! { "{f}" })
+                .map(|f| rsx! { "{f}" })
                 .collect::<Vec<_>>()
                 .into_iter()},
 
             // Use optionals
-            {Some(render! { "Some" })},
+            {Some(rsx! { "Some" })},
 
             // use a for loop where the body itself is RSX
             for name in 0..10 {

examples/simple_router.rs

@@ -14,12 +14,12 @@ enum Route {
 
 #[component]
 fn Homepage() -> Element {
-    render! { h1 { "Welcome home" } }
+    rsx! { h1 { "Welcome home" } }
 }
 
 #[component]
 fn Blog(id: String) -> Element {
-    render! {
+    rsx! {
         h1 { "How to make: " }
         p { "{id}" }
     }
@@ -27,7 +27,7 @@ fn Blog(id: String) -> Element {
 
 #[component]
 fn Nav() -> Element {
-    render! {
+    rsx! {
         nav {
             li {
                 Link { to: Route::Homepage {}, "Go home" }

examples/spread.rs

@@ -8,7 +8,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         spreadable_component {
             width: "10px",
             extra_data: "hello{1}",
@@ -20,7 +20,7 @@ fn app() -> Element {
 }
 
 fn spreadable_component(props: Props) -> Element {
-    render! {
+    rsx! {
         audio { ..props.attributes, "1: {props.extra_data}\n2: {props.extra_data2}" }
     }
 }

examples/ssr.rs

@@ -9,10 +9,10 @@ fn main() {
     let mut vdom = VirtualDom::prebuilt(app);
     println!("{}", dioxus_ssr::render(&vdom));
 
-    // Or we can render render! calls themselves
+    // Or we can render rsx! calls themselves
     println!(
         "{}",
-        dioxus_ssr::render_element(render! {
+        dioxus_ssr::render_element(rsx! {
             div {
                 h1 { "Hello, world!" }
             }
@@ -30,7 +30,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render!(
+    rsx!(
         div {
             h1 { "Title" }
             p { "Body" }

examples/streams.rs

@@ -18,7 +18,7 @@ fn app() -> Element {
         }
     });
 
-    render! {
+    rsx! {
         h1 { "High-Five counter: {count}" }
     }
 }

examples/suspense.rs

@@ -2,7 +2,7 @@
 
 //! Suspense in Dioxus
 //!
-//! Currently, `render!` does not accept futures as values. To achieve the functionality
+//! Currently, `rsx!` does not accept futures as values. To achieve the functionality
 //! of suspense, we need to make a new component that performs its own suspense
 //! handling.
 //!
@@ -29,7 +29,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             h1 { "Dogs are very important" }
             p {
@@ -64,11 +64,11 @@ fn Doggo() -> Element {
     });
 
     match fut.value().read().as_ref() {
-        Some(Ok(resp)) => render! {
+        Some(Ok(resp)) => rsx! {
             button { onclick: move |_| fut.restart(), "Click to fetch another doggo" }
             div { img { max_width: "500px", max_height: "500px", src: "{resp.message}" } }
         },
-        Some(Err(_)) => render! { div { "loading dogs failed" } },
-        None => render! { div { "loading dogs..." } },
+        Some(Err(_)) => rsx! { div { "loading dogs failed" } },
+        None => rsx! { div { "loading dogs..." } },
     }
 }

examples/svg.rs

@@ -8,7 +8,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div { user_select: "none", webkit_user_select: "none", margin_left: "10%", margin_right: "10%",
             h1 { "Click die to generate a new value" }
             div { cursor: "pointer", height: "100%", width: "100%", Dice {} }
@@ -33,7 +33,7 @@ fn Dice() -> Element {
     let mut value = use_signal(|| 5);
     let active_dots = use_selector(move || &DOTS_FOR_VALUE[(value() - 1) as usize]);
 
-    render! {
+    rsx! {
         svg {
             view_box: "-1000 -1000 2000 2000",
             prevent_default: "onclick",

examples/svg_basic.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn app() -> Element {
-    render! {
+    rsx! {
         svg {
             width: "200",
             height: "250",

examples/tailwind/src/main.rs

@@ -10,7 +10,7 @@ fn main() {
 
 pub fn app() -> Element {
     let grey_background = true;
-    render!(
+    rsx!(
         div {
             header {
                 class: "text-gray-400 body-font",
@@ -73,7 +73,7 @@ pub fn app() -> Element {
 }
 
 pub fn StacksIcon() -> Element {
-    render!(
+    rsx!(
         svg {
             fill: "none",
             stroke: "currentColor",
@@ -88,7 +88,7 @@ pub fn StacksIcon() -> Element {
 }
 
 pub fn RightArrowIcon() -> Element {
-    render!(
+    rsx!(
         svg {
             fill: "none",
             stroke: "currentColor",

examples/tasks.rs

@@ -19,7 +19,7 @@ fn app() -> Element {
         }
     });
 
-    render! {
+    rsx! {
         div {
             h1 { "Current count: {count}" }
             button { onclick: move |_| count.set(0), "Reset the count" }

examples/textarea.rs

@@ -9,7 +9,7 @@ fn main() {
 fn app() -> Element {
     let mut model = use_signal(|| String::from("asd"));
 
-    render! {
+    rsx! {
         textarea {
             class: "border",
             rows: "10",

examples/todomvc.rs

@@ -45,7 +45,7 @@ pub fn app() -> Element {
         filtered_todos
     });
 
-    render! {
+    rsx! {
         section { class: "todoapp",
             style { {include_str!("./assets/todomvc.css")} }
             TodoHeader { todos }
@@ -98,7 +98,7 @@ pub fn TodoHeader(mut todos: Signal<HashMap<u32, TodoItem>>) -> Element {
         }
     };
 
-    render! {
+    rsx! {
         header { class: "header",
             h1 { "todos" }
             input {
@@ -119,7 +119,7 @@ pub fn TodoEntry(mut todos: Signal<HashMap<u32, TodoItem>>, id: u32) -> Element
     let checked = use_selector(move || todos.read().get(&id).unwrap().checked);
     let contents = use_selector(move || todos.read().get(&id).unwrap().contents.clone());
 
-    render! {
+    rsx! {
         li { class: if checked() { "completed" }, class: if is_editing() { "editing" },
             div { class: "view",
                 input {
@@ -168,7 +168,7 @@ pub fn ListFooter(
 ) -> Element {
     let show_clear_completed = use_selector(move || todos.read().values().any(|todo| todo.checked));
 
-    render! {
+    rsx! {
         footer { class: "footer",
             span { class: "todo-count",
                 strong { "{active_todo_count} " }
@@ -209,7 +209,7 @@ pub fn ListFooter(
 }
 
 pub fn PageFooter() -> Element {
-    render! {
+    rsx! {
         footer { class: "info",
             p { "Double-click to edit a todo" }
             p {

examples/video_stream.rs

@@ -43,7 +43,7 @@ fn app() -> Element {
         });
     });
 
-    render! {
+    rsx! {
         div {
             video {
                 src: "/videos/test_video.mp4",

examples/web_component.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         web-component {
             "my-prop": "5%",
         }

examples/window_event.rs

@@ -18,7 +18,7 @@ fn app() -> Element {
     let mut always_on_top = use_signal(|| false);
     let mut decorations = use_signal(|| false);
 
-    render!(
+    rsx!(
         link {
             href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css",
             rel: "stylesheet"

examples/window_focus.rs

@@ -21,7 +21,7 @@ fn app() -> Element {
         _ => {}
     });
 
-    render! {
+    rsx! {
         div { width: "100%", height: "100%", display: "flex", flex_direction: "column", align_items: "center",
             if focused() {
                 "This window is focused!"

examples/window_zoom.rs

@@ -7,7 +7,7 @@ fn main() {
 fn app() -> Element {
     let mut level = use_signal(|| 1.0);
 
-    render! {
+    rsx! {
         input {
             r#type: "number",
             value: "{level}",

examples/xss_safety.rs

@@ -11,7 +11,7 @@ fn main() {
 fn app() -> Element {
     let mut contents = use_signal(|| String::from("<script>alert(\"hello world\")</script>"));
 
-    render! {
+    rsx! {
         div {
             h1 {"Dioxus is XSS-Safe"}
             h3 { "{contents}" }