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}" }

packages/core-macro/src/component_body/mod.rs

@@ -67,11 +67,11 @@
 //!
 //! #[name_changer(CoolName)]
 //! pub fn LameName() -> Element {
-//!     render! { "I want a cool name!" }
+//!     rsx! { "I want a cool name!" }
 //! }
 //!
 //! pub fn App() -> Element {
-//!     render! { CoolName {} } // Renders: "I want a cool name!"
+//!     rsx! { CoolName {} } // Renders: "I want a cool name!"
 //! }
 //! ```
 //! ## Implementing a component body deserializer

packages/core-macro/src/lib.rs

@@ -40,20 +40,21 @@ pub fn derive_typed_builder(input: TokenStream) -> TokenStream {
 /// The rsx! macro makes it easy for developers to write jsx-style markup in their components.
 #[proc_macro]
 pub fn rsx(tokens: TokenStream) -> TokenStream {
-    render(tokens)
-}
-
-/// The render! macro makes it easy for developers to write jsx-style markup in their components.
-///
-/// The render macro automatically renders rsx - making it unhygienic.
-#[proc_macro]
-pub fn render(s: TokenStream) -> TokenStream {
-    match syn::parse::<rsx::CallBody>(s) {
+    match syn::parse::<rsx::CallBody>(tokens) {
         Err(err) => err.to_compile_error().into(),
         Ok(body) => RenderCallBody(body).into_token_stream().into(),
     }
 }
 
+/// The rsx! macro makes it easy for developers to write jsx-style markup in their components.
+///
+/// The render macro automatically renders rsx - making it unhygienic.
+#[deprecated(note = "Use `rsx!` instead.")]
+#[proc_macro]
+pub fn render(tokens: TokenStream) -> TokenStream {
+    rsx(tokens)
+}
+
 /// Derive props for a component within the component definition.
 ///
 /// This macro provides a simple transformation from `Scope<{}>` to `Scope<P>`,
@@ -129,7 +130,7 @@ pub(crate) const COMPONENT_ARG_CASE_CHECK_OFF: &str = "no_case_check";
 /// ```rust,ignore
 /// #[component]
 /// fn GreetBob() -> Element {
-///     render! { "hello, bob" }
+///     rsx! { "hello, bob" }
 /// }
 ///
 /// // is equivalent to
@@ -139,7 +140,7 @@ pub(crate) const COMPONENT_ARG_CASE_CHECK_OFF: &str = "no_case_check";
 ///     #[warn(non_snake_case)]
 ///     #[inline(always)]
 ///     fn __dx_inner_comp() -> Element {
-///         render! { "hello, bob" }
+///         rsx! { "hello, bob" }
 ///     }
 ///     // There's no function call overhead since __dx_inner_comp has the #[inline(always)] attribute,
 ///     // so don't worry about performance.
@@ -150,7 +151,7 @@ pub(crate) const COMPONENT_ARG_CASE_CHECK_OFF: &str = "no_case_check";
 /// ```rust,ignore
 /// #[component(no_case_check)]
 /// fn GreetPerson(person: String) -> Element {
-///     render! { "hello, {person}" }
+///     rsx! { "hello, {person}" }
 /// }
 ///
 /// // is equivalent to
@@ -168,7 +169,7 @@ pub(crate) const COMPONENT_ARG_CASE_CHECK_OFF: &str = "no_case_check";
 ///     fn __dx_inner_comp(props: GreetPersonProps>e) -> Element {
 ///         let GreetPersonProps { person } = &cx.props;
 ///         {
-///             render! { "hello, {person}" }
+///             rsx! { "hello, {person}" }
 ///         }
 ///     }
 ///

packages/core/src/properties.rs

@@ -75,7 +75,7 @@ where
 ///
 /// ```rust
 /// fn app() -> Element {
-///     render! {
+///     rsx! {
 ///         div {}
 ///     }
 /// }
@@ -90,7 +90,7 @@ where
 /// }
 ///
 /// fn app(props: MyProps) -> Element {
-///     render! {
+///     rsx! {
 ///         div {
 ///             "{props.data}"
 ///         }
@@ -103,7 +103,7 @@ where
 /// ```rust
 /// #[component]
 /// fn app(data: String) -> Element {
-///     render! {
+///     rsx! {
 ///         div {
 ///             "{data}"
 ///         }

packages/core/src/runtime.rs

@@ -140,7 +140,7 @@ impl Runtime {
 /// }
 ///
 /// fn app() -> Element {
-///     render!{ Component { runtime: Runtime::current().unwrap() } }
+///     rsx!{ Component { runtime: Runtime::current().unwrap() } }
 /// }
 ///
 /// // In a dynamic library
@@ -158,7 +158,7 @@ impl Runtime {
 /// fn Component(cx: ComponentProps) -> Element {
 ///     cx.use_hook(|| RuntimeGuard::new(cx.runtime.clone()));
 ///
-///     render! { div {} }
+///     rsx! { div {} }
 /// }
 /// ```
 pub struct RuntimeGuard(());

packages/core/src/scope_context.rs

@@ -176,12 +176,12 @@ impl ScopeContext {
     ///
     /// static app: Component = |cx| {
     ///     cx.use_hook(|| cx.provide_context(SharedState("world")));
-    ///     render!(Child {})
+    ///     rsx!(Child {})
     /// }
     ///
     /// static Child: Component = |cx| {
     ///     let state = cx.consume_state::<SharedState>();
-    ///     render!(div { "hello {state.0}" })
+    ///     rsx!(div { "hello {state.0}" })
     /// }
     /// ```
     pub fn provide_context<T: 'static + Clone>(&self, value: T) -> T {

packages/core/tests/attr_cleanup.rs

@@ -10,8 +10,8 @@ fn attrs_cycle() {
     let mut dom = VirtualDom::new(|| {
         let id = generation();
         match id % 2 {
-            0 => render! { div {} },
-            1 => render! {
+            0 => rsx! { div {} },
+            1 => rsx! {
                 div { h1 { class: "{id}", id: "{id}" } }
             },
             _ => unreachable!(),

packages/core/tests/boolattrs.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 
 #[test]
 fn bool_test() {
-    let mut app = VirtualDom::new(|| render!(div { hidden: false }));
+    let mut app = VirtualDom::new(|| rsx!(div { hidden: false }));
 
     assert_eq!(
         app.rebuild_to_vec().santize().edits,

packages/core/tests/bubble_error.rs

@@ -11,7 +11,7 @@ fn app() -> Element {
 
     let value = raw.parse::<f32>().unwrap_or(123.123);
 
-    render! { div { "hello {value}" } }
+    rsx! { div { "hello {value}" } }
 }
 
 #[test]

packages/core/tests/context_api.rs

@@ -6,16 +6,16 @@ fn state_shares() {
     fn app() -> Element {
         provide_context(generation() as i32);
 
-        render!(child_1 {})
+        rsx!(child_1 {})
     }
 
     fn child_1() -> Element {
-        render!(child_2 {})
+        rsx!(child_2 {})
     }
 
     fn child_2() -> Element {
         let value = consume_context::<i32>().unwrap();
-        render!("Value is {value}")
+        rsx!("Value is {value}")
     }
 
     let mut dom = VirtualDom::new(app);

packages/core/tests/create_dom.rs

@@ -12,7 +12,7 @@ use dioxus_core::ElementId;
 #[test]
 fn test_original_diff() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div { div { "Hello, world!" } }
         }
     });
@@ -32,7 +32,7 @@ fn test_original_diff() {
 #[test]
 fn create() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div {
                 div {
                     "Hello, world!"
@@ -75,7 +75,7 @@ fn create() {
 
 #[test]
 fn create_list() {
-    let mut dom = VirtualDom::new(|| render! {{(0..3).map(|f| render!( div { "hello" } ))}});
+    let mut dom = VirtualDom::new(|| rsx! {{(0..3).map(|f| rsx!( div { "hello" } ))}});
 
     let _edits = dom.rebuild_to_vec().santize();
 
@@ -95,7 +95,7 @@ fn create_list() {
 #[test]
 fn create_simple() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div {}
             div {}
             div {}
@@ -122,7 +122,7 @@ fn create_simple() {
 #[test]
 fn create_components() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             Child { "abc1" }
             Child { "abc2" }
             Child { "abc3" }
@@ -135,7 +135,7 @@ fn create_components() {
     }
 
     fn Child(cx: ChildProps) -> Element {
-        render! {
+        rsx! {
             h1 {}
             div { {cx.children} }
             p {}
@@ -150,7 +150,7 @@ fn create_components() {
 #[test]
 fn anchors() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             if true {
                  div { "hello" }
             }

packages/core/tests/create_element.rs

@@ -4,7 +4,7 @@ use dioxus::prelude::*;
 #[test]
 fn multiroot() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div { "Hello a" }
             div { "Hello b" }
             div { "Hello c" }

packages/core/tests/create_fragments.rs

@@ -7,7 +7,7 @@ use dioxus_core::ElementId;
 #[test]
 fn empty_fragment_creates_nothing() {
     fn app() -> Element {
-        render!({ () })
+        rsx!({ () })
     }
 
     let mut vdom = VirtualDom::new(app);
@@ -25,7 +25,7 @@ fn empty_fragment_creates_nothing() {
 #[test]
 fn root_fragments_work() {
     let mut vdom = VirtualDom::new(|| {
-        render!(
+        rsx!(
             div { "hello" }
             div { "goodbye" }
         )
@@ -40,16 +40,16 @@ fn root_fragments_work() {
 #[test]
 fn fragments_nested() {
     let mut vdom = VirtualDom::new(|| {
-        render!(
+        rsx!(
             div { "hello" }
             div { "goodbye" }
-            {render! {
+            {rsx! {
                 div { "hello" }
                 div { "goodbye" }
-                {render! {
+                {rsx! {
                     div { "hello" }
                     div { "goodbye" }
-                    {render! {
+                    {rsx! {
                         div { "hello" }
                         div { "goodbye" }
                     }}
@@ -67,7 +67,7 @@ fn fragments_nested() {
 #[test]
 fn fragments_across_components() {
     fn app() -> Element {
-        render! {
+        rsx! {
             demo_child {}
             demo_child {}
             demo_child {}
@@ -77,7 +77,7 @@ fn fragments_across_components() {
 
     fn demo_child() -> Element {
         let world = "world";
-        render! { "hellO!", {world} }
+        rsx! { "hellO!", {world} }
     }
 
     assert_eq!(
@@ -89,9 +89,9 @@ fn fragments_across_components() {
 #[test]
 fn list_fragments() {
     fn app() -> Element {
-        render!(
+        rsx!(
             h1 { "hello" }
-            {(0..6).map(|f| render!( span { "{f}" }))}
+            {(0..6).map(|f| rsx!( span { "{f}" }))}
         )
     }
     assert_eq!(

packages/core/tests/create_lists.rs

@@ -5,11 +5,11 @@ use dioxus_core::ElementId;
 // A real-world usecase of templates at peak performance
 // In react, this would be a lot of node creation.
 //
-// In Dioxus, we memoize the render! body and simplify it down to a few template loads
+// In Dioxus, we memoize the rsx! body and simplify it down to a few template loads
 //
 // Also note that the IDs increase linearly. This lets us drive a vec on the renderer for O(1) re-indexing
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             for i in 0..3 {
                 div {

packages/core/tests/create_passthru.rs

@@ -6,7 +6,7 @@ use dioxus_core::ElementId;
 #[test]
 fn nested_passthru_creates() {
     fn app() -> Element {
-        render! {
+        rsx! {
             PassThru {
                 PassThru {
                     PassThru { div { "hi" } }
@@ -17,7 +17,7 @@ fn nested_passthru_creates() {
 
     #[component]
     fn PassThru(children: Element) -> Element {
-        render!({ children })
+        rsx!({ children })
     }
 
     let mut dom = VirtualDom::new(app);
@@ -38,7 +38,7 @@ fn nested_passthru_creates() {
 #[test]
 fn nested_passthru_creates_add() {
     fn app() -> Element {
-        render! {
+        rsx! {
             ChildComp {
                 "1"
                 ChildComp {
@@ -54,7 +54,7 @@ fn nested_passthru_creates_add() {
 
     #[component]
     fn ChildComp(children: Element) -> Element {
-        render! {{children}}
+        rsx! {{children}}
     }
 
     let mut dom = VirtualDom::new(app);
@@ -81,7 +81,7 @@ fn dynamic_node_as_root() {
     fn app() -> Element {
         let a = 123;
         let b = 456;
-        render! { "{a}", "{b}" }
+        rsx! { "{a}", "{b}" }
     }
 
     let mut dom = VirtualDom::new(app);

packages/core/tests/cycle.rs

@@ -5,8 +5,8 @@ use dioxus::prelude::*;
 #[test]
 fn cycling_elements() {
     let mut dom = VirtualDom::new(|| match generation() % 2 {
-        0 => render! { div { "wasd" } },
-        1 => render! { div { "abcd" } },
+        0 => rsx! { div { "wasd" } },
+        1 => rsx! { div { "abcd" } },
         _ => unreachable!(),
     });
 

packages/core/tests/diff_component.rs

@@ -13,46 +13,46 @@ fn component_swap() {
         render_phase += 1;
 
         match *render_phase() {
-            0 => render! {
+            0 => rsx! {
                 nav_bar {}
                 dash_board {}
             },
-            1 => render! {
+            1 => rsx! {
                 nav_bar {}
                 dash_results {}
             },
-            2 => render! {
+            2 => rsx! {
                 nav_bar {}
                 dash_board {}
             },
-            3 => render! {
+            3 => rsx! {
                 nav_bar {}
                 dash_results {}
             },
-            4 => render! {
+            4 => rsx! {
                 nav_bar {}
                 dash_board {}
             },
-            _ => render!("blah"),
+            _ => rsx!("blah"),
         }
     }
 
     fn nav_bar() -> Element {
-        render! {
-            h1 { "NavBar", {(0..3).map(|_| render!(nav_link {}))} }
+        rsx! {
+            h1 { "NavBar", {(0..3).map(|_| rsx!(nav_link {}))} }
         }
     }
 
     fn nav_link() -> Element {
-        render!( h1 { "nav_link" } )
+        rsx!( h1 { "nav_link" } )
     }
 
     fn dash_board() -> Element {
-        render!( div { "dashboard" } )
+        rsx!( div { "dashboard" } )
     }
 
     fn dash_results() -> Element {
-        render!( div { "results" } )
+        rsx!( div { "results" } )
     }
 
     let mut dom = VirtualDom::new(app);

packages/core/tests/diff_element.rs

@@ -6,7 +6,7 @@ use dioxus_core::{ElementId, NoOpMutations};
 fn text_diff() {
     fn app() -> Element {
         let gen = generation();
-        render!( h1 { "hello {gen}" } )
+        rsx!( h1 { "hello {gen}" } )
     }
 
     let mut vdom = VirtualDom::new(app);
@@ -37,8 +37,8 @@ fn element_swap() {
         let gen = generation();
 
         match gen % 2 {
-            0 => render!( h1 { "hello 1" } ),
-            1 => render!( h2 { "hello 2" } ),
+            0 => rsx!( h1 { "hello 1" } ),
+            1 => rsx!( h2 { "hello 2" } ),
             _ => unreachable!(),
         }
     }

packages/core/tests/diff_keyed_list.rs

@@ -17,7 +17,7 @@ fn keyed_diffing_out_of_order() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     {
@@ -59,7 +59,7 @@ fn keyed_diffing_out_of_order_adds() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -85,7 +85,7 @@ fn keyed_diffing_out_of_order_adds_3() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -111,7 +111,7 @@ fn keyed_diffing_out_of_order_adds_4() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -137,7 +137,7 @@ fn keyed_diffing_out_of_order_adds_5() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -162,7 +162,7 @@ fn keyed_diffing_additions() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -187,7 +187,7 @@ fn keyed_diffing_additions_and_moves_on_ends() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -216,7 +216,7 @@ fn keyed_diffing_additions_and_moves_in_middle() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -250,7 +250,7 @@ fn controlled_keyed_diffing_out_of_order() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -284,7 +284,7 @@ fn controlled_keyed_diffing_out_of_order_max_test() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -313,7 +313,7 @@ fn remove_list() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -338,7 +338,7 @@ fn no_common_keys() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);

packages/core/tests/diff_unkeyed_list.rs

@@ -7,7 +7,7 @@ fn list_creates_one_by_one() {
     let mut dom = VirtualDom::new(|| {
         let gen = generation();
 
-        render! {
+        rsx! {
             div {
                 for i in 0..gen {
                     div { "{i}" }
@@ -76,7 +76,7 @@ fn removes_one_by_one() {
     let mut dom = VirtualDom::new(|| {
         let gen = 3 - generation() % 4;
 
-        render! {
+        rsx! {
             div {
                 for i in 0..gen {
                     div { "{i}" }
@@ -151,7 +151,7 @@ fn removes_one_by_one() {
 #[test]
 fn list_shrink_multiroot() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div {
                 for i in 0..generation() {
                     div { "{i}" }
@@ -212,7 +212,7 @@ fn removes_one_by_one_multiroot() {
     let mut dom = VirtualDom::new(|| {
         let gen = 3 - generation() % 4;
 
-        render! {
+        rsx! {
             div {
                 {(0..gen).map(|i| rsx! {
                     div { "{i}" }
@@ -275,7 +275,7 @@ fn removes_one_by_one_multiroot() {
 #[test]
 fn two_equal_fragments_are_equal_static() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             for _ in 0..5 {
                 div { "hello" }
             }
@@ -289,7 +289,7 @@ fn two_equal_fragments_are_equal_static() {
 #[test]
 fn two_equal_fragments_are_equal() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             for i in 0..5 {
                 div { "hello {i}" }
             }
@@ -310,7 +310,7 @@ fn remove_many() {
             _ => unreachable!(),
         };
 
-        render! {
+        rsx! {
             for i in 0..num {
                 div { "hello {i}" }
             }

packages/core/tests/error_boundary.rs

@@ -9,7 +9,7 @@ fn catches_panic() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             h1 { "Title" }
 
@@ -28,5 +28,5 @@ fn ThrowChild() -> Element {
 
     let _g: i32 = "123123".parse().throw()?;
 
-    render! { div {} }
+    rsx! { div {} }
 }

packages/core/tests/event_propagation.rs

@@ -52,14 +52,14 @@ fn events_propagate() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div { onclick: move |_| {
                 println!("top clicked");
                 *CLICKS.lock().unwrap() += 1;
             },
 
             {vec![
-                render! {
+                rsx! {
                     problematic_child {}
                 }
             ].into_iter()}
@@ -68,7 +68,7 @@ fn app() -> Element {
 }
 
 fn problematic_child() -> Element {
-    render! {
+    rsx! {
         button { onclick: move |evt| {
                 println!("bottom clicked");
                 let mut clicks = CLICKS.lock().unwrap();

packages/core/tests/kitchen_sink.rs

@@ -5,7 +5,7 @@ fn basic_syntax_is_a_template() -> Element {
     let asd = 123;
     let var = 123;
 
-    render! {
+    rsx! {
         div { key: "12345", class: "asd", class: "{asd}", class: if true {
                 "{asd}"
             }, class: if false {

packages/core/tests/lifecycle.rs

@@ -19,7 +19,7 @@ fn manual_diffing() {
 
     fn app(cx: AppProps) -> Element {
         let val = cx.value.lock().unwrap();
-        render! { div { "{val}" } }
+        rsx! { div { "{val}" } }
     };
 
     let value = Arc::new(Mutex::new("Hello"));
@@ -46,7 +46,7 @@ fn events_generate() {
         let mut count = use_signal(|| 0);
 
         match *count() {
-            0 => render! {
+            0 => rsx! {
                 div { onclick: move |_| count += 1,
                     div { "nested" }
                     "Click me!"

packages/core/tests/miri_full_app.rs

@@ -27,7 +27,7 @@ fn app() -> Element {
     let mut idx = use_signal(|| 0);
     let onhover = |_| println!("go!");
 
-    render! {
+    rsx! {
         div {
             button {
                 onclick: move |_| {
@@ -48,5 +48,5 @@ fn app() -> Element {
 
 #[component]
 fn ChildExample(i: i32, onhover: EventHandler<MouseEvent>) -> Element {
-    render! { li { onmouseover: move |e| onhover.call(e), "{i}" } }
+    rsx! { li { onmouseover: move |e| onhover.call(e), "{i}" } }
 }

packages/core/tests/miri_simple.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 #[test]
 fn app_drops() {
     fn app() -> Element {
-        render! { div {} }
+        rsx! { div {} }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -21,7 +21,7 @@ fn hooks_drop() {
         use_hook(|| String::from("asd"));
         use_hook(|| String::from("asd"));
 
-        render! { div {} }
+        rsx! { div {} }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -36,7 +36,7 @@ fn contexts_drop() {
     fn app() -> Element {
         provide_context(String::from("asd"));
 
-        render! {
+        rsx! {
             div { ChildComp {} }
         }
     }
@@ -44,7 +44,7 @@ fn contexts_drop() {
     fn ChildComp() -> Element {
         let el = consume_context::<String>().unwrap();
 
-        render! { div { "hello {el}" } }
+        rsx! { div { "hello {el}" } }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -61,7 +61,7 @@ fn tasks_drop() {
             // tokio::time::sleep(std::time::Duration::from_millis(100000)).await;
         });
 
-        render! { div {} }
+        rsx! { div {} }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -77,7 +77,7 @@ fn root_props_drop() {
     struct RootProps(String);
 
     let mut dom = VirtualDom::new_with_props(
-        |cx| render!( div { "{cx.0}" } ),
+        |cx| rsx!( div { "{cx.0}" } ),
         RootProps("asdasd".to_string()),
     );
 
@@ -89,11 +89,11 @@ fn root_props_drop() {
 #[test]
 fn diffing_drops_old() {
     fn app() -> Element {
-        render! {
+        rsx! {
             div {
                 match generation() % 2 {
-                    0 => render!( ChildComp1 { name: "asdasd".to_string() }),
-                    1 => render!( ChildComp2 { name: "asdasd".to_string() }),
+                    0 => rsx!( ChildComp1 { name: "asdasd".to_string() }),
+                    1 => rsx!( ChildComp2 { name: "asdasd".to_string() }),
                     _ => todo!()
                 }
             }
@@ -102,12 +102,12 @@ fn diffing_drops_old() {
 
     #[component]
     fn ChildComp1(name: String) -> Element {
-        render! {"Hello {name}"}
+        rsx! {"Hello {name}"}
     }
 
     #[component]
     fn ChildComp2(name: String) -> Element {
-        render! {"Goodbye {name}"}
+        rsx! {"Goodbye {name}"}
     }
 
     let mut dom = VirtualDom::new(app);

packages/core/tests/miri_stress.rs

@@ -16,14 +16,14 @@ fn test_memory_leak() {
         spawn(async {});
 
         if val == 2 || val == 4 {
-            return render!({});
+            return rsx!({});
         }
 
         let mut name = use_hook(|| String::from("numbers: "));
 
         name.push_str("123 ");
 
-        render!(
+        rsx!(
             div { "Hello, world!" }
             Child {}
             Child {}
@@ -45,7 +45,7 @@ fn test_memory_leak() {
     }
 
     fn BorrowedChild(cx: BorrowedProps) -> Element {
-        render! {
+        rsx! {
             div {
                 "goodbye {cx.name}"
                 Child {}
@@ -55,7 +55,7 @@ fn test_memory_leak() {
     }
 
     fn Child() -> Element {
-        render!( div { "goodbye world" } )
+        rsx!( div { "goodbye world" } )
     }
 
     let mut dom = VirtualDom::new(app);
@@ -79,7 +79,7 @@ fn memo_works_properly() {
 
         let name = use_hook(|| String::from("asd"));
 
-        render!(
+        rsx!(
             div { "Hello, world! {name}" }
             Child { na: "asdfg".to_string() }
         )
@@ -91,7 +91,7 @@ fn memo_works_properly() {
     }
 
     fn Child(cx: ChildProps) -> Element {
-        render!( div { "goodbye world" } )
+        rsx!( div { "goodbye world" } )
     }
 
     let mut dom = VirtualDom::new(app);
@@ -119,11 +119,11 @@ fn free_works_on_root_hooks() {
 
     fn app(cx: AppProps) -> Element {
         let name: AppProps = use_hook(|| cx.clone());
-        render!(child_component { inner: name.inner.clone() })
+        rsx!(child_component { inner: name.inner.clone() })
     }
 
     fn child_component(props: AppProps) -> Element {
-        render!( div { "{props.inner}" } )
+        rsx!( div { "{props.inner}" } )
     }
 
     let ptr = Rc::new("asdasd".to_string());
@@ -176,7 +176,7 @@ fn supports_async() {
         let mid = colors[1];
         let small = colors[2];
 
-        render! {
+        rsx! {
             div { background: "{big}", height: "stretch", width: "stretch", padding: "50",
                 label { "hello" }
                 div { background: "{mid}", height: "auto", width: "stretch", padding: "{padding}",

packages/core/tests/safety.rs

@@ -5,7 +5,7 @@ use dioxus::prelude::*;
 /// Ensure no issues with not calling rebuild_to_vec
 #[test]
 fn root_node_isnt_null() {
-    let dom = VirtualDom::new(|| render!("Hello world!"));
+    let dom = VirtualDom::new(|| rsx!("Hello world!"));
 
     let scope = dom.base_scope();
 

packages/core/tests/suspense.rs

@@ -20,7 +20,7 @@ fn suspense_resolves() {
 }
 
 fn app() -> Element {
-    render!(
+    rsx!(
         div {
             "Waiting for... "
             suspended_child {}
@@ -38,5 +38,5 @@ fn suspended_child() -> Element {
         suspend()?;
     }
 
-    render!("child")
+    rsx!("child")
 }

packages/core/tests/task.rs

@@ -25,7 +25,7 @@ async fn it_works() {
             });
         });
 
-        render!({ () })
+        rsx!({ () })
     }
 
     let mut dom = VirtualDom::new(app);

packages/desktop/headless_tests/events.rs

@@ -209,7 +209,7 @@ fn app() -> Element {
         desktop_context.close();
     }
 
-    render! {
+    rsx! {
         div {
             div {
                 width: "100px",

packages/desktop/headless_tests/rendering.rs

@@ -75,7 +75,7 @@ fn check_html_renders() -> Element {
         }
     };
 
-    render! {
+    rsx! {
         div {
             id: "main_div",
             div {

packages/dioxus-lib/README.md

@@ -103,7 +103,7 @@ fn Example() -> Element {
     // both of these are equivalent
     rsx!("hello world"))
 
-    render!("hello world!")
+    rsx!("hello world!")
 }
 ```
 
@@ -246,7 +246,7 @@ use hooks to define the state and modify it from within listeners.
 fn App() -> Element {
     let name = use_signal(|| "world");
 
-    render!("hello {name}!")
+    rsx!("hello {name}!")
 }
 ```
 

packages/dioxus-tui/benches/update.rs

@@ -116,7 +116,7 @@ fn Grid(cx: Scope<GridProps>) -> Element {
         }
     }
 
-    render! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",