From 21506b2164111aeca742cdc7ff0ba79672077ee6 Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Fri, 24 Nov 2023 10:04:54 +0800
Subject: [PATCH] Feat/ssr (#25)

* feat: add ssr_axum template

* feat: demo added the ssr mode

* fix: demo ssr mode

* feat(ssr): mount_style

* pref: delete some useless fikes

* fix(ssr): problems caused by using wasm_bindgen

* feat: add hydrate

* pref: Demo component

* fix(hydrate): teleport component

* fix(hydrate): hydrate feature

* fix(hydrate): tabs component

* feat: GlobalStyle component margin style

* docs(ssr): static assets
---
 Cargo.toml                                    |  12 +-
 demo/Cargo.toml                               |  17 +-
 demo/index.html                               |   1 -
 demo/src/app.rs                               |   5 +-
 demo/src/assets/css/index.css                 |  19 --
 demo/src/components/demo.rs                   |  27 ++-
 demo/src/components/site_header.rs            |  15 +-
 demo/src/lib.rs                               |   5 +
 demo/src/main.rs                              |   6 +-
 demo/src/pages/alert/mod.rs                   |  12 +-
 demo/src/pages/auto_complete/mod.rs           |  14 +-
 demo/src/pages/avatar/mod.rs                  |  28 ++-
 demo/src/pages/badge/mod.rs                   |  58 +++---
 demo/src/pages/breadcrumb/mod.rs              |  78 ++++----
 demo/src/pages/button/mod.rs                  | 174 +++++++++---------
 demo/src/pages/card/mod.rs                    |  90 ++++-----
 demo/src/pages/checkbox/mod.rs                |  40 ++--
 demo/src/pages/color_picker/mod.rs            |  22 +--
 demo/src/pages/components.rs                  |   3 +-
 demo/src/pages/divider/mod.rs                 |  26 ++-
 demo/src/pages/grid/mod.rs                    | 102 +++++-----
 demo/src/pages/guide/installation.rs          |  13 +-
 demo/src/pages/guide/mod.rs                   |  16 +-
 demo/src/pages/guide/usage.rs                 |  64 +++----
 demo/src/pages/icon/mod.rs                    |  32 ++--
 demo/src/pages/image/mod.rs                   |  32 ++--
 demo/src/pages/input/mod.rs                   |  96 +++++-----
 demo/src/pages/input_number/mod.rs            |  39 ++--
 demo/src/pages/layout/mod.rs                  |  78 ++++----
 demo/src/pages/loading_bar/mod.rs             |  51 +++--
 demo/src/pages/menu/mod.rs                    |  34 ++--
 demo/src/pages/message/mod.rs                 |  70 +++----
 demo/src/pages/mobile.rs                      |   5 +-
 demo/src/pages/modal/mod.rs                   |  30 ++-
 demo/src/pages/nav_bar/mod.rs                 |  60 +++---
 demo/src/pages/progress/mod.rs                |  60 +++---
 demo/src/pages/radio/mod.rs                   |  26 ++-
 demo/src/pages/select/mod.rs                  |  26 ++-
 demo/src/pages/skeleton/mod.rs                |  24 ++-
 demo/src/pages/slider/mod.rs                  |  22 +--
 demo/src/pages/space/mod.rs                   |  88 +++++----
 demo/src/pages/switch/mod.rs                  |  26 ++-
 demo/src/pages/tabbar/mod.rs                  |  46 +++--
 demo/src/pages/table/mod.rs                   |  64 ++++---
 demo/src/pages/tabs/mod.rs                    |  36 ++--
 demo/src/pages/tag/mod.rs                     |  60 +++---
 demo/src/pages/theme/mod.rs                   | 122 ++++++------
 demo/src/pages/toast/mod.rs                   |  32 ++--
 demo/src/pages/upload/mod.rs                  | 104 +++++------
 examples/ssr_axum/.gitignore                  |  13 ++
 examples/ssr_axum/Cargo.toml                  | 120 ++++++++++++
 examples/ssr_axum/LICENSE                     |  21 +++
 examples/ssr_axum/README.md                   |  86 +++++++++
 examples/ssr_axum/end2end/package-lock.json   |  74 ++++++++
 examples/ssr_axum/end2end/package.json        |  13 ++
 .../ssr_axum/end2end/playwright.config.ts     | 107 +++++++++++
 .../ssr_axum/end2end/tests/example.spec.ts    |   9 +
 examples/ssr_axum/public/favicon.ico          | Bin 0 -> 23462 bytes
 examples/ssr_axum/public/thaw/grid_dot.svg    |   4 +
 examples/ssr_axum/public/thaw/logo.svg        |  11 ++
 examples/ssr_axum/src/fileserv.rs             |  40 ++++
 examples/ssr_axum/src/lib.rs                  |  17 ++
 examples/ssr_axum/src/main.rs                 |  43 +++++
 src/color_picker/mod.rs                       |  43 +++--
 src/components/binder/mod.rs                  |  25 +--
 src/components/teleport/mod.rs                |  48 +++--
 src/global_style/mod.rs                       |   1 +
 src/select/mod.rs                             |  42 +++--
 src/tabs/mod.rs                               | 134 ++++++++------
 src/utils/event_listener.rs                   |   2 +-
 src/utils/mod.rs                              |  12 ++
 src/utils/mount_style.rs                      |  46 +++--
 72 files changed, 1763 insertions(+), 1258 deletions(-)
 delete mode 100644 demo/src/assets/css/index.css
 create mode 100644 demo/src/lib.rs
 create mode 100644 examples/ssr_axum/.gitignore
 create mode 100644 examples/ssr_axum/Cargo.toml
 create mode 100644 examples/ssr_axum/LICENSE
 create mode 100644 examples/ssr_axum/README.md
 create mode 100644 examples/ssr_axum/end2end/package-lock.json
 create mode 100644 examples/ssr_axum/end2end/package.json
 create mode 100644 examples/ssr_axum/end2end/playwright.config.ts
 create mode 100644 examples/ssr_axum/end2end/tests/example.spec.ts
 create mode 100644 examples/ssr_axum/public/favicon.ico
 create mode 100644 examples/ssr_axum/public/thaw/grid_dot.svg
 create mode 100644 examples/ssr_axum/public/thaw/logo.svg
 create mode 100644 examples/ssr_axum/src/fileserv.rs
 create mode 100644 examples/ssr_axum/src/lib.rs
 create mode 100644 examples/ssr_axum/src/main.rs

diff --git a/Cargo.toml b/Cargo.toml
index 740f2b6..50742d0 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -13,13 +13,15 @@ license = "MIT"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.2", features = ["csr"] }
+leptos = { version = "0.5.2" }
+leptos_meta = { version = "0.5.2", optional = true }
 web-sys = { version = "0.3.63", features = [
     "DomRect",
     "File",
     "FileList",
     "DataTransfer",
 ] }
+wasm-bindgen = "0.2.88"
 icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
@@ -36,5 +38,11 @@ icondata_core = "0.0.2"
 uuid = { version = "1.5.0", features = ["v4"] }
 cfg-if = "1.0.0"
 
+[features]
+default = ["csr"]
+csr = ["leptos/csr"]
+ssr = ["leptos/ssr", "leptos_meta/ssr"]
+hydrate = ["leptos/hydrate"]
+
 [workspace]
-members = ["demo"]
+members = ["demo", "examples/*"]
diff --git a/demo/Cargo.toml b/demo/Cargo.toml
index 7f34678..630353f 100644
--- a/demo/Cargo.toml
+++ b/demo/Cargo.toml
@@ -7,11 +7,11 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.2", features = ["csr"] }
-leptos_meta = { version = "0.5.2", features = ["csr"] }
-leptos_router = { version = "0.5.2", features = ["csr"] }
+leptos = { version = "0.5.2" }
+leptos_meta = { version = "0.5.2" }
+leptos_router = { version = "0.5.2" }
 leptos_devtools = "0.0.1"
-thaw = { path = "../" }
+thaw = { path = "../", default-features = false }
 icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
@@ -21,4 +21,13 @@ icondata = { version = "0.1.0", features = [
 prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" }
 
 [features]
+default = ["csr"]
 tracing = ["leptos/tracing"]
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr", "thaw/csr"]
+ssr = ["leptos/ssr", "leptos_meta/ssr", "leptos_router/ssr", "thaw/ssr"]
+hydrate = [
+    "leptos/hydrate",
+    "leptos_meta/hydrate",
+    "leptos_router/hydrate",
+    "thaw/hydrate",
+]
diff --git a/demo/index.html b/demo/index.html
index 76d19a2..d0b683e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -10,7 +10,6 @@
             href="/thaw/favicon.ico"
             type="image/x-icon"
         />
-        <link data-trunk rel="css" href="./src/assets/css/index.css" />
         <link data-trunk rel="copy-file" href="./src/assets/svg/grid_dot.svg" />
         <link data-trunk rel="copy-file" href="./src/assets/favicon.ico" />
         <link data-trunk rel="copy-file" href="./src/assets/404.html" />
diff --git a/demo/src/app.rs b/demo/src/app.rs
index e731092..09d3e96 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -87,9 +87,8 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
 #[component]
 fn TheProvider(children: Children) -> impl IntoView {
     fn use_query_value(key: &str) -> Option<String> {
-        let href = window().location().href().ok()?;
-        let url = Url::try_from(href.as_str()).ok()?;
-        url.search_params.get(key).cloned()
+        let query_map = use_query_map();
+        query_map.with_untracked(|query| query.get(key).cloned())
     }
     let theme = use_query_value("theme").map_or_else(Theme::light, |name| {
         if name == "light" {
diff --git a/demo/src/assets/css/index.css b/demo/src/assets/css/index.css
deleted file mode 100644
index 0e03a75..0000000
--- a/demo/src/assets/css/index.css
+++ /dev/null
@@ -1,19 +0,0 @@
-body {
-    margin: 0;
-}
-
-.components-page-box {
-    display: flex;
-}
-
-.components-page-box aside {
-    width: 260px;
-}
-
-.components-page-box main {
-    flex: 1;
-}
-
-.token.operator {
-    background: hsla(0, 0%, 100%, 0) !important;
-}
diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs
index 710db99..2c96d86 100644
--- a/demo/src/components/demo.rs
+++ b/demo/src/components/demo.rs
@@ -4,8 +4,6 @@ use thaw::*;
 
 #[slot]
 pub struct DemoCode {
-    #[prop(optional)]
-    html: &'static str,
     children: Children,
 }
 
@@ -39,18 +37,27 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
         });
         style
     });
+
+    let frag = (demo_code.children)();
+    let mut html = String::new();
+    for node in frag.nodes {
+        match node {
+            View::Text(text) => html.push_str(&text.content),
+            _ => leptos::logging::warn!("Only text nodes are supported as children of <DemoCode />."),
+        }
+    }
+
     view! {
-        <Style>
-            {prisms::prism_css!()}
+        <Style id="leptos-thaw-prism-css">{prisms::prism_css!()}</Style>
+        <Style id="leptos-thaw-prism-css-fix">
+            ".token.operator {
+                background: hsla(0, 0%, 100%, 0) !important;
+            }"
         </Style>
-        <div style=move || style.get()>
-            {children()}
-        </div>
+        <div style=move || style.get()>{children()}</div>
         <div style=move || code_style.get()>
             <Code>
-                <pre style="margin: 0" inner_html=demo_code.html>
-                    {(demo_code.children)()}
-                </pre>
+                <pre style="margin: 0" inner_html=html></pre>
             </Code>
         </div>
     }
diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index 1233539..b5b17f9 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -91,26 +91,25 @@ pub fn SiteHeader() -> impl IntoView {
                 />
                 <Button
                     variant=ButtonVariant::Text
-                    on:click=move |_| {
+                    on_click=move |_| {
                         let navigate = use_navigate();
                         navigate("/guide/installation", Default::default());
                     }
                 >
+
                     "Guide"
                 </Button>
                 <Button
                     variant=ButtonVariant::Text
-                    on:click=move |_| {
+                    on_click=move |_| {
                         let navigate = use_navigate();
                         navigate("/components/button", Default::default());
                     }
                 >
+
                     "Components"
                 </Button>
-                <Button
-                    variant=ButtonVariant::Text
-                    on:click=on_theme
-                >
+                <Button variant=ButtonVariant::Text on_click=on_theme>
                     {move || theme_name.get()}
                 </Button>
                 <Button
@@ -121,8 +120,8 @@ pub fn SiteHeader() -> impl IntoView {
                     on:click=move |_| {
                         _ = window().open_with_url("http://github.com/thaw-ui/thaw");
                     }
-                >
-                </Button>
+                />
+
             </Space>
 
         </LayoutHeader>
diff --git a/demo/src/lib.rs b/demo/src/lib.rs
new file mode 100644
index 0000000..ff2be2f
--- /dev/null
+++ b/demo/src/lib.rs
@@ -0,0 +1,5 @@
+mod app;
+mod components;
+mod pages;
+
+pub use app::App;
diff --git a/demo/src/main.rs b/demo/src/main.rs
index c6cffba..36b75eb 100644
--- a/demo/src/main.rs
+++ b/demo/src/main.rs
@@ -1,8 +1,4 @@
-mod app;
-mod components;
-mod pages;
-
-use app::*;
+use demo::App;
 use leptos::*;
 
 fn main() {
diff --git a/demo/src/pages/alert/mod.rs b/demo/src/pages/alert/mod.rs
index deed410..eef247f 100644
--- a/demo/src/pages/alert/mod.rs
+++ b/demo/src/pages/alert/mod.rs
@@ -20,19 +20,17 @@ pub fn AlertPage() -> impl IntoView {
                         "error"
                     </Alert>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
                         <Alert variant=AlertVariant::Success title="title">"success"</Alert>
                         <Alert variant=AlertVariant::Warning title="title">"warning"</Alert>
                         <Alert variant=AlertVariant::Error title="title">"error"</Alert>
                 "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Alert Props"</h3>
@@ -49,7 +47,7 @@ pub fn AlertPage() -> impl IntoView {
                     <tr>
                         <td>"title"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Title of the alert."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/auto_complete/mod.rs b/demo/src/pages/auto_complete/mod.rs
index ae79132..4a5a70f 100644
--- a/demo/src/pages/auto_complete/mod.rs
+++ b/demo/src/pages/auto_complete/mod.rs
@@ -25,9 +25,9 @@ pub fn AutoCompletePage() -> impl IntoView {
             <h1>"AutoComplete"</h1>
             <Demo>
                 <AutoComplete value options placeholder="Email"/>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
                         let value = create_rw_signal(String::new());
                         let options =create_memo(|_| {
@@ -48,10 +48,8 @@ pub fn AutoCompletePage() -> impl IntoView {
                         }
                 "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"AutoComplete Props"</h3>
@@ -68,13 +66,13 @@ pub fn AutoCompletePage() -> impl IntoView {
                     <tr>
                         <td>"value"</td>
                         <td>"RwSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Input of autocomplete."</td>
                     </tr>
                     <tr>
                         <td>"placeholder"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Autocomplete's placeholder."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/avatar/mod.rs b/demo/src/pages/avatar/mod.rs
index 9c7aa64..5d39d15 100644
--- a/demo/src/pages/avatar/mod.rs
+++ b/demo/src/pages/avatar/mod.rs
@@ -14,21 +14,19 @@ pub fn AvatarPage() -> impl IntoView {
                     <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
                     <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Space>
-                        <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
-                        <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
-                        <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
-                    </Space>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Space>
+                            <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
+                            <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
+                            <Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
+                        </Space>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Avatar Props"</h3>
@@ -45,7 +43,7 @@ pub fn AvatarPage() -> impl IntoView {
                     <tr>
                         <td>"src"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Avatar's image source."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/badge/mod.rs b/demo/src/pages/badge/mod.rs
index 6fb07ad..60b5924 100644
--- a/demo/src/pages/badge/mod.rs
+++ b/demo/src/pages/badge/mod.rs
@@ -35,37 +35,35 @@ pub fn BadgePage() -> impl IntoView {
                     "value:"
                     {move || value.get()}
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let value = create_rw_signal(0);
-                    view! {
-                        <Space>
-                            <Badge value=value max=10>
-                                <Avatar />
-                            </Badge>
-                            <Badge variant=BadgeVariant::Success value=value max=10>
-                                <Avatar />
-                            </Badge>
-                            <Badge variant=BadgeVariant::Warning value=value max=10>
-                                <Avatar />
-                            </Badge>
-                            <Badge variant=BadgeVariant::Warning dot=true>
-                                <Avatar />
-                            </Badge>
-                            <Button on_click=move |_| value.update(|v| *v += 1)>"+1"</Button>
-                            <Button on_click=move |_| value.update(|v| if *v != 0 { *v -= 1 })>"-1"</Button>
-                            "value:"
-                            {move || value.get()}
-                        </Space>
-                    }
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let value = create_rw_signal(0);
+                        view! {
+                            <Space>
+                                <Badge value=value max=10>
+                                    <Avatar />
+                                </Badge>
+                                <Badge variant=BadgeVariant::Success value=value max=10>
+                                    <Avatar />
+                                </Badge>
+                                <Badge variant=BadgeVariant::Warning value=value max=10>
+                                    <Avatar />
+                                </Badge>
+                                <Badge variant=BadgeVariant::Warning dot=true>
+                                    <Avatar />
+                                </Badge>
+                                <Button on_click=move |_| value.update(|v| *v += 1)>"+1"</Button>
+                                <Button on_click=move |_| value.update(|v| if *v != 0 { *v -= 1 })>"-1"</Button>
+                                "value:"
+                                {move || value.get()}
+                            </Space>
+                        }
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Badge Props"</h3>
diff --git a/demo/src/pages/breadcrumb/mod.rs b/demo/src/pages/breadcrumb/mod.rs
index 56e5596..e347d8c 100644
--- a/demo/src/pages/breadcrumb/mod.rs
+++ b/demo/src/pages/breadcrumb/mod.rs
@@ -14,27 +14,25 @@ pub fn BreadcrumbPage() -> impl IntoView {
                     <BreadcrumbItem>"UI"</BreadcrumbItem>
                     <BreadcrumbItem>"Thaw"</BreadcrumbItem>
                 </Breadcrumb>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Breadcrumb>
-                        <BreadcrumbItem>
-                            "Leptos"
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            "UI"
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            "Thaw"
-                        </BreadcrumbItem>
-                    </Breadcrumb>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Breadcrumb>
+                            <BreadcrumbItem>
+                                "Leptos"
+                            </BreadcrumbItem>
+                            <BreadcrumbItem>
+                                "UI"
+                            </BreadcrumbItem>
+                            <BreadcrumbItem>
+                                "Thaw"
+                            </BreadcrumbItem>
+                        </Breadcrumb>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Separator"</h3>
@@ -44,27 +42,25 @@ pub fn BreadcrumbPage() -> impl IntoView {
                     <BreadcrumbItem>"UI"</BreadcrumbItem>
                     <BreadcrumbItem>"Thaw"</BreadcrumbItem>
                 </Breadcrumb>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Breadcrumb separator=">">
-                        <BreadcrumbItem>
-                            "Leptos"
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            "UI"
-                        </BreadcrumbItem>
-                        <BreadcrumbItem>
-                            "Thaw"
-                        </BreadcrumbItem>
-                    </Breadcrumb>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Breadcrumb separator=">">
+                            <BreadcrumbItem>
+                                "Leptos"
+                            </BreadcrumbItem>
+                            <BreadcrumbItem>
+                                "UI"
+                            </BreadcrumbItem>
+                            <BreadcrumbItem>
+                                "Thaw"
+                            </BreadcrumbItem>
+                        </Breadcrumb>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Breadcrumb Props"</h3>
@@ -81,7 +77,7 @@ pub fn BreadcrumbPage() -> impl IntoView {
                     <tr>
                         <td>"separator"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""/""#</td>
+                        <td>"/"</td>
                         <td>"Breadcrumb separator."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/button/mod.rs b/demo/src/pages/button/mod.rs
index ee3077c..675c374 100644
--- a/demo/src/pages/button/mod.rs
+++ b/demo/src/pages/button/mod.rs
@@ -15,28 +15,26 @@ pub fn ButtonPage() -> impl IntoView {
                     <Button variant=ButtonVariant::Text>"Text"</Button>
                     <Button variant=ButtonVariant::Link>"Link"</Button>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Button variant=ButtonVariant::Primary>
-                        "Primary"
-                    </Button>
-                    <Button variant=ButtonVariant::Solid>
-                        "Solid"
-                    </Button>
-                    <Button variant=ButtonVariant::Text>
-                        "Text"
-                    </Button>
-                    <Button variant=ButtonVariant::Link>
-                        "Link"
-                    </Button>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Button variant=ButtonVariant::Primary>
+                            "Primary"
+                        </Button>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                        <Button variant=ButtonVariant::Text>
+                            "Text"
+                        </Button>
+                        <Button variant=ButtonVariant::Link>
+                            "Link"
+                        </Button>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"color"</h3>
@@ -47,28 +45,26 @@ pub fn ButtonPage() -> impl IntoView {
                     <Button color=ButtonColor::Warning>"Warning Color"</Button>
                     <Button color=ButtonColor::Error>"Error Color"</Button>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Button color=ButtonColor::Primary>
-                        "Primary Color"
-                    </Button>
-                    <Button color=ButtonColor::Success>
-                        "Success Color"
-                    </Button>
-                    <Button color=ButtonColor::Warning>
-                        "Warning Color"
-                    </Button>
-                    <Button color=ButtonColor::Error>
-                        "Error Color"
-                    </Button>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Button color=ButtonColor::Primary>
+                            "Primary Color"
+                        </Button>
+                        <Button color=ButtonColor::Success>
+                            "Success Color"
+                        </Button>
+                        <Button color=ButtonColor::Warning>
+                            "Warning Color"
+                        </Button>
+                        <Button color=ButtonColor::Error>
+                            "Error Color"
+                        </Button>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"icon"</h3>
@@ -83,21 +79,19 @@ pub fn ButtonPage() -> impl IntoView {
                         round=true
                     />
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined>
-                        "Error Color Icon"
-                    </Button>
-                    <Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined round=true>
-                    </Button>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                <Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined>
+                    "Error Color Icon"
+                </Button>
+                <Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined round=true>
+                </Button>
+            "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <LoadingButton/>
@@ -107,18 +101,16 @@ pub fn ButtonPage() -> impl IntoView {
                     <Button style="background: blue;">"style blue"</Button>
                     <Button style="width: 40px; height: 20px">"size"</Button>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
                     <Button style="background: blue;">"style blue"</Button>
                     <Button style="width: 40px; height: 20px">"size"</Button>
                 "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Button Props"</h3>
@@ -135,7 +127,7 @@ pub fn ButtonPage() -> impl IntoView {
                     <tr>
                         <td>"style"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Button's style."</td>
                     </tr>
                     <tr>
@@ -215,36 +207,34 @@ fn LoadingButton() -> impl IntoView {
                     "Click Me"
                 </Button>
             </Space>
-            <DemoCode
-                slot
-                html=highlight_str!(
-                    r#"
-                let loading = create_rw_signal(false);
-                let on_click = move |_| {
-                    loading.set(true);
-                    set_timeout(
-                        move || {
-                            loading.set(false);
-                        },
-                        std::time::Duration::new(2, 0),
-                    );
-                };
-                view! {
-                    <Space>
-                        <Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
-                            "Click Me"
-                        </Button>
-                        <Button loading on_click>
-                            "Click Me"
-                        </Button>
-                    </Space>
-                }
-            "#,
-                    "rust"
-                )
-            >
+            <DemoCode slot>
+
+                {highlight_str!(
+                    r#"
+                    let loading = create_rw_signal(false);
+                    let on_click = move |_| {
+                        loading.set(true);
+                        set_timeout(
+                            move || {
+                                loading.set(false);
+                            },
+                            std::time::Duration::new(2, 0),
+                        );
+                    };
+                    view! {
+                        <Space>
+                            <Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
+                                "Click Me"
+                            </Button>
+                            <Button loading on_click>
+                                "Click Me"
+                            </Button>
+                        </Space>
+                    }
+                "#,
+                    "rust"
+                )}
 
-                ""
             </DemoCode>
         </Demo>
     }
diff --git a/demo/src/pages/card/mod.rs b/demo/src/pages/card/mod.rs
index 083b60f..276fb3e 100644
--- a/demo/src/pages/card/mod.rs
+++ b/demo/src/pages/card/mod.rs
@@ -10,67 +10,55 @@ pub fn CardPage() -> impl IntoView {
             <h1>"Card"</h1>
             <Demo>
                 <Space vertical=true>
+                    <Card title="title">"content"</Card>
                     <Card title="title">
+                        <CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
                         "content"
                     </Card>
                     <Card title="title">
-                        <CardHeaderExtra slot>
-                            "header-extra"
-                        </CardHeaderExtra>
+                        <CardHeader slot>"header"</CardHeader>
                         "content"
                     </Card>
                     <Card title="title">
-                        <CardHeader slot>
-                            "header"
-                        </CardHeader>
+                        <CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
                         "content"
-                    </Card>
-                    <Card title="title">
-                        <CardHeaderExtra slot>
-                            "header-extra"
-                        </CardHeaderExtra>
-                        "content"
-                        <CardFooter slot>
-                            "footer"
-                        </CardFooter>
+                        <CardFooter slot>"footer"</CardFooter>
                     </Card>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Space vertical=true> 
-                        <Card title="title">
-                            "content"
-                        </Card>
-                        <Card title="title">
-                            <CardHeaderExtra slot>
-                                "header-extra"
-                            </CardHeaderExtra>
-                            "content"
-                        </Card>
-                        <Card title="title">
-                            <CardHeader slot>
-                                "header"
-                            </CardHeader>
-                            "content"
-                        </Card>
-                        <Card title="title">
-                            <CardHeaderExtra slot>
-                                "header-extra"
-                            </CardHeaderExtra>
-                            "content"
-                            <CardFooter slot>
-                                "footer"
-                            </CardFooter>
-                        </Card>
-                    </Space>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Space vertical=true> 
+                            <Card title="title">
+                                "content"
+                            </Card>
+                            <Card title="title">
+                                <CardHeaderExtra slot>
+                                    "header-extra"
+                                </CardHeaderExtra>
+                                "content"
+                            </Card>
+                            <Card title="title">
+                                <CardHeader slot>
+                                    "header"
+                                </CardHeader>
+                                "content"
+                            </Card>
+                            <Card title="title">
+                                <CardHeaderExtra slot>
+                                    "header-extra"
+                                </CardHeaderExtra>
+                                "content"
+                                <CardFooter slot>
+                                    "footer"
+                                </CardFooter>
+                            </Card>
+                        </Space>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Card Props"</h3>
@@ -87,7 +75,7 @@ pub fn CardPage() -> impl IntoView {
                     <tr>
                         <td>"title"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Card title."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/checkbox/mod.rs b/demo/src/pages/checkbox/mod.rs
index 71f3495..1fb699c 100644
--- a/demo/src/pages/checkbox/mod.rs
+++ b/demo/src/pages/checkbox/mod.rs
@@ -14,9 +14,9 @@ pub fn CheckboxPage() -> impl IntoView {
             <h1>"Checkbox"</h1>
             <Demo>
                 <Checkbox value=checked>"Click"</Checkbox>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
                     let value = create_rw_signal(false);
 
@@ -27,10 +27,8 @@ pub fn CheckboxPage() -> impl IntoView {
                     }
                 "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"group"</h3>
@@ -41,25 +39,23 @@ pub fn CheckboxPage() -> impl IntoView {
                     <CheckboxItem label="c" key="c"/>
                 </CheckboxGroup>
                 <div style="margin-top: 1rem">"value: " {move || format!("{:?}", value.get())}</div>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                    let value = create_rw_signal(HashSet::new());
-
-                    view! {
-                        <CheckboxGroup value>
-                            <CheckboxItem label="apple" key="a" />
-                            <CheckboxItem label="b" key="b" />
-                            <CheckboxItem label="c" key="c" />
-                        </CheckboxGroup>
-                    }
-                "#,
+                        let value = create_rw_signal(HashSet::new());
+    
+                        view! {
+                            <CheckboxGroup value>
+                                <CheckboxItem label="apple" key="a" />
+                                <CheckboxItem label="b" key="b" />
+                                <CheckboxItem label="c" key="c" />
+                            </CheckboxGroup>
+                        }
+                    "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Checkbox Props"</h3>
diff --git a/demo/src/pages/color_picker/mod.rs b/demo/src/pages/color_picker/mod.rs
index f5e3988..257bcd3 100644
--- a/demo/src/pages/color_picker/mod.rs
+++ b/demo/src/pages/color_picker/mod.rs
@@ -12,21 +12,19 @@ pub fn ColorPickerPage() -> impl IntoView {
             <h1>"Color Picker"</h1>
             <Demo>
                 <ColorPicker value/>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                    let value = RGBA::default();
-
-                    view! {
-                        <ColorPicker value/>
-                    }
-                    "#,
+                        let value = RGBA::default();
+    
+                        view! {
+                            <ColorPicker value/>
+                        }
+                        "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"ColorPicker Props"</h3>
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 0cf8a8c..7a1db5b 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -54,8 +54,7 @@ impl IntoView for MenuGroupOption {
         let Self { label, children } = self;
         view! {
             <MenuGroup label=format!(
-                "{label} ({})",
-                children.len(),
+                "{label} ({})", children.len()
             )>
 
                 {children.into_iter().map(|v| v.into_view()).collect_view()}
diff --git a/demo/src/pages/divider/mod.rs b/demo/src/pages/divider/mod.rs
index 80169de..f588e51 100644
--- a/demo/src/pages/divider/mod.rs
+++ b/demo/src/pages/divider/mod.rs
@@ -9,22 +9,18 @@ pub fn DividerPage() -> impl IntoView {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Divider"</h1>
             <Demo>
-                "top"
-                <Divider />
-                "bottom"
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    "top"
-                    <Divider />
-                    "bottom"
-                "#,
-                        "rust"
-                    )
-                >
+                "top" <Divider/> "bottom"
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        "top"
+                        <Divider />
+                        "bottom"
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/demo/src/pages/grid/mod.rs b/demo/src/pages/grid/mod.rs
index ba0ff13..da508f2 100644
--- a/demo/src/pages/grid/mod.rs
+++ b/demo/src/pages/grid/mod.rs
@@ -8,7 +8,7 @@ use thaw::*;
 pub fn GridPage() -> impl IntoView {
     view! {
         <Style>
-            r#".thaw-grid-item {
+            ".thaw-grid-item {
                 height: 60px;
                 text-align: center;
                 line-height: 60px;
@@ -18,7 +18,7 @@ pub fn GridPage() -> impl IntoView {
             }
             .thaw-grid-item:nth-child(even) {
                 background-color: #0078ffaa;
-            }"#
+            }"
         </Style>
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Grid"</h1>
@@ -36,27 +36,25 @@ pub fn GridPage() -> impl IntoView {
                         <GridItem>"789"</GridItem>
                     </Grid>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                        <Grid>
-                            <GridItem>"123"</GridItem>
-                            <GridItem>"456"</GridItem>
-                            <GridItem>"789"</GridItem>
-                        </Grid>
-
-                        <Grid :cols=2>
-                            <GridItem>"123"</GridItem>
-                            <GridItem>"456"</GridItem>
-                            <GridItem>"789"</GridItem>
-                        </Grid>
-                "#,
+                            <Grid>
+                                <GridItem>"123"</GridItem>
+                                <GridItem>"456"</GridItem>
+                                <GridItem>"789"</GridItem>
+                            </Grid>
+    
+                            <Grid :cols=2>
+                                <GridItem>"123"</GridItem>
+                                <GridItem>"456"</GridItem>
+                                <GridItem>"789"</GridItem>
+                            </Grid>
+                    "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"gap"</h3>
@@ -73,28 +71,26 @@ pub fn GridPage() -> impl IntoView {
                     <GridItem>"567"</GridItem>
                     <GridItem>"567"</GridItem>
                 </Grid>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                        <Grid cols=3 x_gap=8 y_gap=8>
-                            <GridItem>"123"</GridItem>
-                            <GridItem>"321"</GridItem>
-                            <GridItem>"123"</GridItem>
-                            <GridItem>"456"</GridItem>
-                            <GridItem>"7"</GridItem>
-                            <GridItem>"123"</GridItem>
-                            <GridItem>"123"</GridItem>
-                            <GridItem column=2>"1234"</GridItem>
-                            <GridItem >"567"</GridItem>
-                            <GridItem >"567"</GridItem>
-                        </Grid>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                            <Grid cols=3 x_gap=8 y_gap=8>
+                                <GridItem>"123"</GridItem>
+                                <GridItem>"321"</GridItem>
+                                <GridItem>"123"</GridItem>
+                                <GridItem>"456"</GridItem>
+                                <GridItem>"7"</GridItem>
+                                <GridItem>"123"</GridItem>
+                                <GridItem>"123"</GridItem>
+                                <GridItem column=2>"1234"</GridItem>
+                                <GridItem >"567"</GridItem>
+                                <GridItem >"567"</GridItem>
+                            </Grid>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"gap"</h3>
@@ -103,20 +99,18 @@ pub fn GridPage() -> impl IntoView {
                     <GridItem offset=2>"123"</GridItem>
                     <GridItem>"456"</GridItem>
                 </Grid>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                        <Grid cols=4>
-                            <GridItem offset=2>"123"</GridItem>
-                            <GridItem>"456"</GridItem>
-                        </Grid>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                            <Grid cols=4>
+                                <GridItem offset=2>"123"</GridItem>
+                                <GridItem>"456"</GridItem>
+                            </Grid>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Grid Props"</h3>
diff --git a/demo/src/pages/guide/installation.rs b/demo/src/pages/guide/installation.rs
index d202b36..bd75d03 100644
--- a/demo/src/pages/guide/installation.rs
+++ b/demo/src/pages/guide/installation.rs
@@ -8,15 +8,12 @@ pub fn InstallationPage() -> impl IntoView {
             <h1>"Installation"</h1>
             <p>"Installation thaw"</p>
             <Demo>
-            ""
-            <DemoCode
-                slot
-                html="cargo add thaw"
-            >
-
                 ""
-            </DemoCode>
-        </Demo>
+                <DemoCode slot>
+
+                    "cargo add thaw"
+                </DemoCode>
+            </Demo>
         </div>
     }
 }
diff --git a/demo/src/pages/guide/mod.rs b/demo/src/pages/guide/mod.rs
index a2b011d..edb8cab 100644
--- a/demo/src/pages/guide/mod.rs
+++ b/demo/src/pages/guide/mod.rs
@@ -35,9 +35,9 @@ pub fn GuidePage() -> impl IntoView {
             <Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
                 <LayoutSider>
                     <Menu value=selected>
-                        {
-                            gen_guide_menu_data().into_view()
-                        }
+
+                        {gen_guide_menu_data().into_view()}
+
                     </Menu>
                 </LayoutSider>
                 <Layout style="padding: 8px 12px 28px; overflow-y: auto;">
@@ -58,9 +58,9 @@ impl IntoView for MenuGroupOption {
         let Self { label, children } = self;
         view! {
             <MenuGroup label=label>
-                {
-                    children.into_iter().map(|v| v.into_view()).collect_view()
-                }
+
+                {children.into_iter().map(|v| v.into_view()).collect_view()}
+
             </MenuGroup>
         }
     }
@@ -74,9 +74,7 @@ pub(crate) struct MenuItemOption {
 impl IntoView for MenuItemOption {
     fn into_view(self) -> View {
         let Self { label, value } = self;
-        view! {
-            <MenuItem key=value label/>
-        }
+        view! { <MenuItem key=value label/> }
     }
 }
 
diff --git a/demo/src/pages/guide/usage.rs b/demo/src/pages/guide/usage.rs
index 3b54ddf..7e93f51 100644
--- a/demo/src/pages/guide/usage.rs
+++ b/demo/src/pages/guide/usage.rs
@@ -10,47 +10,43 @@ pub fn UsagePage() -> impl IntoView {
             <p>"You just need to import thaw and use it."</p>
             <Demo>
                 ""
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                        // Import all
-                        use thaw::*;
-                        // Import on Demand
-                        use thaw::{Button, ButtonVariant};
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                            // Import all
+                            use thaw::*;
+                            // Import on Demand
+                            use thaw::{Button, ButtonVariant};
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <p>"A small example:"</p>
             <Demo>
                 ""
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                        use leptos::*;
-                        use thaw::*;
-                        
-                        fn main() {
-                            mount_to_body(App)
-                        }
-                        #[component]
-                        pub fn App() -> impl IntoView {
-                            view! {
-                                <Button variant=ButtonVariant::Primary>"Primary"</Button>
-                            }
-                        }
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                            use leptos::*;
+                            use thaw::*;
+                            
+                            fn main() {
+                                mount_to_body(App)
+                            }
+                            #[component]
+                            pub fn App() -> impl IntoView {
+                                view! {
+                                    <Button variant=ButtonVariant::Primary>"Primary"</Button>
+                                }
+                            }
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/demo/src/pages/icon/mod.rs b/demo/src/pages/icon/mod.rs
index 87acc19..865f99b 100644
--- a/demo/src/pages/icon/mod.rs
+++ b/demo/src/pages/icon/mod.rs
@@ -10,23 +10,21 @@ pub fn IconPage() -> impl IntoView {
             <h1>"Icon"</h1>
             <Demo>
                 <Space>
-                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined) />
-                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined) />
+                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/>
+                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined)/>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                <Space>
-                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined) />
-                    <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined) />
-                </Space>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                    <Space>
+                        <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined) />
+                        <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined) />
+                    </Space>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Icon Props"</h3>
@@ -49,13 +47,13 @@ pub fn IconPage() -> impl IntoView {
                     <tr>
                         <td>"width"</td>
                         <td>"Option<MaybeSignal<String>>"</td>
-                        <td>r#""1em""#</td>
+                        <td>"1em"</td>
                         <td>"The width of the icon."</td>
                     </tr>
                     <tr>
                         <td>"height"</td>
                         <td>"Option<MaybeSignal<String>>"</td>
-                        <td>r#""1em""#</td>
+                        <td>"1em"</td>
                         <td>"The height of the icon."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/image/mod.rs b/demo/src/pages/image/mod.rs
index 1069cbb..1b6e5a9 100644
--- a/demo/src/pages/image/mod.rs
+++ b/demo/src/pages/image/mod.rs
@@ -11,18 +11,16 @@ pub fn ImagePage() -> impl IntoView {
             <Demo>
                 <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
                 <Image width="200px" height="200px"/>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
-                    <Image width="200px" height="200px"/>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
+                        <Image width="200px" height="200px"/>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Image Props"</h3>
@@ -39,37 +37,37 @@ pub fn ImagePage() -> impl IntoView {
                     <tr>
                         <td>"src"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Image source."</td>
                     </tr>
                     <tr>
                         <td>"alt"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Image alt information."</td>
                     </tr>
                     <tr>
                         <td>"width"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Image width."</td>
                     </tr>
                     <tr>
                         <td>"height"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Image height."</td>
                     </tr>
                     <tr>
                         <td>"border_radius"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Image border radius."</td>
                     </tr>
                     <tr>
                         <td>"object_fit"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Object-fit type of the image in the container."</td>
                     </tr>
                 </tbody>
diff --git a/demo/src/pages/input/mod.rs b/demo/src/pages/input/mod.rs
index cf2dfd9..0825f54 100644
--- a/demo/src/pages/input/mod.rs
+++ b/demo/src/pages/input/mod.rs
@@ -14,25 +14,22 @@ pub fn InputPage() -> impl IntoView {
                     <Input value/>
                     <Input value variant=InputVariant::Password placeholder="Password"/>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                        let value = create_rw_signal(String::from("o"));
-
-                        view! {
-                            <Space vertical=true>
-                                <Input value/>
-                                <Input value variant=InputVariant::Password placeholder="Password"/>
-                            </Space>
-                        }
-                    "#,
+                            let value = create_rw_signal(String::from("o"));
+    
+                            view! {
+                                <Space vertical=true>
+                                    <Input value/>
+                                    <Input value variant=InputVariant::Password placeholder="Password"/>
+                                </Space>
+                            }
+                        "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
-                    ""
                 </DemoCode>
             </Demo>
             <h1>"Prefix & Suffix"</h1>
@@ -44,9 +41,7 @@ pub fn InputPage() -> impl IntoView {
                         </InputPrefix>
                     </Input>
                     <Input value>
-                        <InputSuffix slot>
-                            "$"
-                        </InputSuffix>
+                        <InputSuffix slot>"$"</InputSuffix>
                     </Input>
                     <Input value>
                         <InputSuffix slot>
@@ -54,38 +49,35 @@ pub fn InputPage() -> impl IntoView {
                         </InputSuffix>
                     </Input>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                        let value = create_rw_signal(String::from("o"));
-
-                        view! {
-                            <Space vertical=true>
-                                <Input value>
-                                    <InputPrefix slot>
-                                        <Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
-                                    </InputPrefix>
-                                </Input>
-                                <Input value>
-                                    <InputSuffix slot>
-                                        "$"
-                                    </InputSuffix>
-                                </Input>
-                                <Input value>
-                                    <InputSuffix slot>
-                                        <Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
-                                    </InputSuffix>
-                                </Input>
-                            </Space>
-                        }
-                    "#,
+                            let value = create_rw_signal(String::from("o"));
+    
+                            view! {
+                                <Space vertical=true>
+                                    <Input value>
+                                        <InputPrefix slot>
+                                            <Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
+                                        </InputPrefix>
+                                    </Input>
+                                    <Input value>
+                                        <InputSuffix slot>
+                                            "$"
+                                        </InputSuffix>
+                                    </Input>
+                                    <Input value>
+                                        <InputSuffix slot>
+                                            <Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
+                                        </InputSuffix>
+                                    </Input>
+                                </Space>
+                            }
+                        "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Input Props"</h3>
@@ -102,7 +94,7 @@ pub fn InputPage() -> impl IntoView {
                     <tr>
                         <td>"value"</td>
                         <td>"RwSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Set the input value"</td>
                     </tr>
                     <tr>
@@ -114,14 +106,16 @@ pub fn InputPage() -> impl IntoView {
                     <tr>
                         <td>"placeholder"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Placeholder of input."</td>
                     </tr>
                     <tr>
                         <td>"allow_value"</td>
                         <td>"Option<Callback<String, bool>>"</td>
                         <td>"None"</td>
-                        <td>"Check the incoming value, if it returns false, input will not be accepted."</td>
+                        <td>
+                            "Check the incoming value, if it returns false, input will not be accepted."
+                        </td>
                     </tr>
                     <tr>
                         <td>"on_focus"</td>
diff --git a/demo/src/pages/input_number/mod.rs b/demo/src/pages/input_number/mod.rs
index c718057..695229d 100644
--- a/demo/src/pages/input_number/mod.rs
+++ b/demo/src/pages/input_number/mod.rs
@@ -15,25 +15,22 @@ pub fn InputNumberPage() -> impl IntoView {
                     <InputNumber value step=1/>
                     <InputNumber value=value_f64 step=1.0/>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let value = create_rw_signal(0);
-                    let value_f64 = create_rw_signal(0.0);
-                    view! {
-                        <Space vertical=true>
-                            <InputNumber value step=1/>
-                            <InputNumber value=value_f64 step=1.0/>
-                        </Space>
-                    }
-                    "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let value = create_rw_signal(0);
+                        let value_f64 = create_rw_signal(0.0);
+                        view! {
+                            <Space vertical=true>
+                                <InputNumber value step=1/>
+                                <InputNumber value=value_f64 step=1.0/>
+                            </Space>
+                        }
+                        "#,
+                        "rust"
+                    )}
 
-                    ""
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"InputNumber Props"</h3>
@@ -56,14 +53,16 @@ pub fn InputNumberPage() -> impl IntoView {
                     <tr>
                         <td>"placeholder"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Placeholder of input number."</td>
                     </tr>
                     <tr>
                         <td>"step"</td>
                         <td>"MaybeSignal<T>"</td>
                         <td></td>
-                        <td>"The number which the current value is increased or decreased on key or button press."</td>
+                        <td>
+                            "The number which the current value is increased or decreased on key or button press."
+                        </td>
                     </tr>
                 </tbody>
             </Table>
diff --git a/demo/src/pages/layout/mod.rs b/demo/src/pages/layout/mod.rs
index 946a28b..b0bb3ba 100644
--- a/demo/src/pages/layout/mod.rs
+++ b/demo/src/pages/layout/mod.rs
@@ -10,51 +10,55 @@ pub fn LayoutPage() -> impl IntoView {
             <h1>"Layout"</h1>
             <Demo>
                 <Layout>
-                    <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                    <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
+                        "Header"
+                    </LayoutHeader>
                     <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
                 </Layout>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Layout>
-                        <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
-                        <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
-                    </Layout>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Layout>
+                            <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                            <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                        </Layout>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"sider"</h3>
             <Demo>
                 <Layout has_sider=true>
-                    <LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
+                    <LayoutSider style="background-color: #0078ff99; padding: 20px;">
+                        "Sider"
+                    </LayoutSider>
                     <Layout>
-                        <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
-                        <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
-                    </Layout>
-                </Layout>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Layout has_sider=true>
-                        <LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
-                        <Layout>
-                            <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
-                            <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                        <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
+                            "Header"
+                        </LayoutHeader>
+                        <Layout style="background-color: #0078ff88; padding: 20px;">
+                            "Content"
                         </Layout>
                     </Layout>
-                "#,
-                        "rust"
-                    )
-                >
+                </Layout>
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Layout has_sider=true>
+                            <LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
+                            <Layout>
+                                <LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
+                                <Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
+                            </Layout>
+                        </Layout>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Layout Props"</h3>
@@ -71,14 +75,16 @@ pub fn LayoutPage() -> impl IntoView {
                     <tr>
                         <td>"style"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Layout's style."</td>
                     </tr>
                     <tr>
                         <td>"position"</td>
                         <td>"LayoutPosition"</td>
                         <td>"LayoutPosition::Static"</td>
-                        <td>"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."</td>
+                        <td>
+                            "static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."
+                        </td>
                     </tr>
                     <tr>
                         <td>"has_sider"</td>
@@ -108,7 +114,7 @@ pub fn LayoutPage() -> impl IntoView {
                     <tr>
                         <td>"style"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"LayoutHeader's style."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/loading_bar/mod.rs b/demo/src/pages/loading_bar/mod.rs
index 1b0d6d9..738163e 100644
--- a/demo/src/pages/loading_bar/mod.rs
+++ b/demo/src/pages/loading_bar/mod.rs
@@ -27,34 +27,31 @@ pub fn LoadingBarPage() -> impl IntoView {
                     <Button on_click=finish>"finish"</Button>
                     <Button on_click=error>"error"</Button>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let loading_bar = use_loading_bar();
-                    let start = move |_| {
-                        loading_bar.start();
-                    };
-                    let finish = move |_| {
-                        loading_bar.finish();
-                    };
-                    let error = move |_| {
-                        loading_bar.error();
-                    };
-                    view! {
-                        <Space>
-                            <Button on_click=start>"start"</Button>
-                            <Button on_click=finish>"finish"</Button>
-                            <Button on_click=error>"error"</Button>
-                        </Space>
-                    }
-                    "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let loading_bar = use_loading_bar();
+                        let start = move |_| {
+                            loading_bar.start();
+                        };
+                        let finish = move |_| {
+                            loading_bar.finish();
+                        };
+                        let error = move |_| {
+                            loading_bar.error();
+                        };
+                        view! {
+                            <Space>
+                                <Button on_click=start>"start"</Button>
+                                <Button on_click=finish>"finish"</Button>
+                                <Button on_click=error>"error"</Button>
+                            </Space>
+                        }
+                        "#,
+                        "rust"
+                    )}
 
-                    ""
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"LoadingBar Injection Methods"</h3>
diff --git a/demo/src/pages/menu/mod.rs b/demo/src/pages/menu/mod.rs
index d77ffa7..f05c041 100644
--- a/demo/src/pages/menu/mod.rs
+++ b/demo/src/pages/menu/mod.rs
@@ -14,22 +14,20 @@ pub fn MenuPage() -> impl IntoView {
                     <MenuItem key="a" label="and"/>
                     <MenuItem key="o" label="or"/>
                 </Menu>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let value = create_rw_signal(String::from("o"));
-                            
-                    <Menu value>
-                        <MenuItem key="a" label="and"/>
-                        <MenuItem key="o" label="or"/>
-                    </Menu>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let value = create_rw_signal(String::from("o"));
+                                
+                        <Menu value>
+                            <MenuItem key="a" label="and"/>
+                            <MenuItem key="o" label="or"/>
+                        </Menu>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Menu Props"</h3>
@@ -46,7 +44,7 @@ pub fn MenuPage() -> impl IntoView {
                     <tr>
                         <td>"value"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"The selected item key of the menu."</td>
                     </tr>
                     <tr>
@@ -96,13 +94,13 @@ pub fn MenuPage() -> impl IntoView {
                     <tr>
                         <td>"label"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"The label of the menu item."</td>
                     </tr>
                     <tr>
                         <td>"key"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"The indentifier of the menu item."</td>
                     </tr>
                 </tbody>
diff --git a/demo/src/pages/message/mod.rs b/demo/src/pages/message/mod.rs
index 149ca03..608f65a 100644
--- a/demo/src/pages/message/mod.rs
+++ b/demo/src/pages/message/mod.rs
@@ -35,41 +35,39 @@ pub fn MessagePage() -> impl IntoView {
                     <Button on:click=warning>"Warning"</Button>
                     <Button on:click=error>"Error"</Button>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                        let message = use_message();
-                        let success = move |_| {
-                            message.create(
-                                "Success".into(),
-                                MessageVariant::Success,
-                                Default::default(),
-                            );
-                        };
-                        let warning = move |_| {
-                            message.create(
-                                "Warning".into(),
-                                MessageVariant::Warning,
-                                Default::default(),
-                            );
-                        };
-                        let error = move |_| {
-                            message.create("Error".into(), MessageVariant::Error, Default::default());
-                        };
-                        view! {
-                            <Space>
-                                <Button on:click=success>"Success"</Button>
-                                <Button on:click=warning>"Warning"</Button>
-                                <Button on:click=error>"Error"</Button>
-                            </Space>
-                        }
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                            let message = use_message();
+                            let success = move |_| {
+                                message.create(
+                                    "Success".into(),
+                                    MessageVariant::Success,
+                                    Default::default(),
+                                );
+                            };
+                            let warning = move |_| {
+                                message.create(
+                                    "Warning".into(),
+                                    MessageVariant::Warning,
+                                    Default::default(),
+                                );
+                            };
+                            let error = move |_| {
+                                message.create("Error".into(), MessageVariant::Error, Default::default());
+                            };
+                            view! {
+                                <Space>
+                                    <Button on:click=success>"Success"</Button>
+                                    <Button on:click=warning>"Warning"</Button>
+                                    <Button on:click=error>"Error"</Button>
+                                </Space>
+                            }
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"MessageProvider Injection Methods"</h3>
@@ -84,7 +82,9 @@ pub fn MessagePage() -> impl IntoView {
                 <tbody>
                     <tr>
                         <td>"create"</td>
-                        <td>"fn(&self, content: String, variant: MessageVariant, options: MessageOptions)"</td>
+                        <td>
+                            "fn(&self, content: String, variant: MessageVariant, options: MessageOptions)"
+                        </td>
                         <td>"The label of the menu item."</td>
                     </tr>
                 </tbody>
diff --git a/demo/src/pages/mobile.rs b/demo/src/pages/mobile.rs
index 3699d0e..cce333b 100644
--- a/demo/src/pages/mobile.rs
+++ b/demo/src/pages/mobile.rs
@@ -14,10 +14,7 @@ pub fn MobilePage(path: &'static str) -> impl IntoView {
     });
     view! {
         <div style="width: 400px; text-align: center">
-            <iframe
-                src=move || src.get()
-                style=move || style.get()
-            ></iframe>
+            <iframe src=move || src.get() style=move || style.get()></iframe>
         </div>
     }
 }
diff --git a/demo/src/pages/modal/mod.rs b/demo/src/pages/modal/mod.rs
index 45a7e1b..3a3575a 100644
--- a/demo/src/pages/modal/mod.rs
+++ b/demo/src/pages/modal/mod.rs
@@ -14,24 +14,22 @@ pub fn ModalPage() -> impl IntoView {
                 <Modal title="title" show>
                     "hello"
                 </Modal>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                    let show = create_rw_signal(false);
-
-                    <Button on:click=move |_| show.set(true)>
-                        "open modal"
-                    </Button>
-                    <Modal title="title" show>
-                        "hello"
-                    </Modal>
-                "#,
+                        let show = create_rw_signal(false);
+    
+                        <Button on:click=move |_| show.set(true)>
+                            "open modal"
+                        </Button>
+                        <Modal title="title" show>
+                            "hello"
+                        </Modal>
+                    "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Modal Props"</h3>
@@ -54,7 +52,7 @@ pub fn ModalPage() -> impl IntoView {
                     <tr>
                         <td>"title"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Modal title."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/nav_bar/mod.rs b/demo/src/pages/nav_bar/mod.rs
index 01aaad1..cf1652f 100644
--- a/demo/src/pages/nav_bar/mod.rs
+++ b/demo/src/pages/nav_bar/mod.rs
@@ -15,33 +15,31 @@ pub fn NavBarPage() -> impl IntoView {
                 <h1>"Navbar"</h1>
                 <Demo>
                     ""
-                    <DemoCode
-                        slot
-                        html=highlight_str!(
-                            r#"
-                            let click_text = create_rw_signal(String::from("none"));
-                            let on_click_left = move |_| click_text.set("left".to_string());
-                            let on_click_right = move |_| click_text.set("right".to_string());
-                        
-                            view! {
-                                <div style="height: 100vh; background: #f5f5f5">
-                                    <NavBar
-                                        title="Home"
-                                        left_arrow=true
-                                        left_text="back"
-                                        right_text="add"
-                                        on_click_left=on_click_left
-                                        on_click_right=on_click_right
-                                    />
-                                    <div style="padding-top: 50px">{move || click_text.get()}</div>
-                                </div>
-                            }
-                    "#,
-                            "rust"
-                        )
-                    >
+                    <DemoCode slot>
+
+                        {highlight_str!(
+                            r#"
+                                let click_text = create_rw_signal(String::from("none"));
+                                let on_click_left = move |_| click_text.set("left".to_string());
+                                let on_click_right = move |_| click_text.set("right".to_string());
+                            
+                                view! {
+                                    <div style="height: 100vh; background: #f5f5f5">
+                                        <NavBar
+                                            title="Home"
+                                            left_arrow=true
+                                            left_text="back"
+                                            right_text="add"
+                                            on_click_left=on_click_left
+                                            on_click_right=on_click_right
+                                        />
+                                        <div style="padding-top: 50px">{move || click_text.get()}</div>
+                                    </div>
+                                }
+                        "#,
+                            "rust"
+                        )}
 
-                        ""
                     </DemoCode>
                 </Demo>
                 <h3>"NavBar Props"</h3>
@@ -58,7 +56,7 @@ pub fn NavBarPage() -> impl IntoView {
                         <tr>
                             <td>"title"</td>
                             <td>"MaybeSignal<String>"</td>
-                            <td>r#""""#</td>
+                            <td>"Default::default()"</td>
                             <td>"NavBar title."</td>
                         </tr>
                         <tr>
@@ -70,25 +68,25 @@ pub fn NavBarPage() -> impl IntoView {
                         <tr>
                             <td>"left_text"</td>
                             <td>"MaybeSignal<String>"</td>
-                            <td>r#""""#</td>
+                            <td>"Default::default()"</td>
                             <td>"NavBar left text."</td>
                         </tr>
                         <tr>
                             <td>"on_click_left"</td>
                             <td>"MaybeSignal<String>"</td>
-                            <td>r#""""#</td>
+                            <td>"Default::default()"</td>
                             <td>"NavBar left click."</td>
                         </tr>
                         <tr>
                             <td>"right_text"</td>
                             <td>"MaybeSignal<String>"</td>
-                            <td>r#""""#</td>
+                            <td>"Default::default()"</td>
                             <td>"NavBar right text."</td>
                         </tr>
                         <tr>
                             <td>"on_click_right"</td>
                             <td>"MaybeSignal<String>"</td>
-                            <td>r#""""#</td>
+                            <td>"Default::default()"</td>
                             <td>"NavBar right click."</td>
                         </tr>
                     </tbody>
diff --git a/demo/src/pages/progress/mod.rs b/demo/src/pages/progress/mod.rs
index 2437e1b..59a8e25 100644
--- a/demo/src/pages/progress/mod.rs
+++ b/demo/src/pages/progress/mod.rs
@@ -12,50 +12,44 @@ pub fn ProgressPage() -> impl IntoView {
             <Demo>
                 <Space vertical=true>
                     <Progress percentage show_indicator=false/>
-                    <Progress percentage />
+                    <Progress percentage/>
                     <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
                     <Progress percentage color=ProgressColor::Success/>
                     <Progress percentage color=ProgressColor::Warning/>
                     <Progress percentage color=ProgressColor::Error/>
                     <Space>
-                        <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
-                            "-10%"
-                        </Button>
-                        <Button on_click=move |_| percentage.update(|v| *v += 10.0)>
-                            "+10%"
-                        </Button>
+                        <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>"-10%"</Button>
+                        <Button on_click=move |_| percentage.update(|v| *v += 10.0)>"+10%"</Button>
                     </Space>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                    let percentage = create_rw_signal(0.0f32);
-
-                    view! {
-                        <Space vertical=true>
-                            <Progress percentage show_indicator=false/>
-                            <Progress percentage />
-                            <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
-                            <Progress percentage color=ProgressColor::Success/>
-                            <Progress percentage color=ProgressColor::Warning/>
-                            <Progress percentage color=ProgressColor::Error/>
-                            <Space>
-                                <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
-                                    "-10%"
-                                </Button>
-                                <Button on_click=move |_| percentage.update(|v| *v += 10.0)>
-                                    "+10%"
-                                </Button>
+                        let percentage = create_rw_signal(0.0f32);
+    
+                        view! {
+                            <Space vertical=true>
+                                <Progress percentage show_indicator=false/>
+                                <Progress percentage />
+                                <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
+                                <Progress percentage color=ProgressColor::Success/>
+                                <Progress percentage color=ProgressColor::Warning/>
+                                <Progress percentage color=ProgressColor::Error/>
+                                <Space>
+                                    <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
+                                        "-10%"
+                                    </Button>
+                                    <Button on_click=move |_| percentage.update(|v| *v += 10.0)>
+                                        "+10%"
+                                    </Button>
+                                </Space>
                             </Space>
-                        </Space>
-                    }
-                "#,
+                        }
+                    "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Progress Props"</h3>
diff --git a/demo/src/pages/radio/mod.rs b/demo/src/pages/radio/mod.rs
index 893a787..bd031ae 100644
--- a/demo/src/pages/radio/mod.rs
+++ b/demo/src/pages/radio/mod.rs
@@ -11,23 +11,21 @@ pub fn RadioPage() -> impl IntoView {
             <h1>"Radio"</h1>
             <Demo>
                 <Radio value=checked>"Click"</Radio>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                    let value = create_rw_signal(false);
-
-                    view! {
-                        <Radio value>
-                            "Click"
-                        </Radio>
-                    }
-                "#,
+                        let value = create_rw_signal(false);
+    
+                        view! {
+                            <Radio value>
+                                "Click"
+                            </Radio>
+                        }
+                    "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Radio Props"</h3>
diff --git a/demo/src/pages/select/mod.rs b/demo/src/pages/select/mod.rs
index 7f3215b..61b9845 100644
--- a/demo/src/pages/select/mod.rs
+++ b/demo/src/pages/select/mod.rs
@@ -16,23 +16,21 @@ pub fn SelectPage() -> impl IntoView {
             <h1>"Select"</h1>
             <Demo>
                 <Select value=selected_value options/>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                    let selected_value = create_rw_signal(Some(String::from("apple")));
-                    let options = vec![SelectOption {
-                        label: String::from("apple"),
-                        value: String::from("apple"),
-                    }];
-
-                    <Select value=selected_value options/>
-                "#,
+                        let selected_value = create_rw_signal(Some(String::from("apple")));
+                        let options = vec![SelectOption {
+                            label: String::from("apple"),
+                            value: String::from("apple"),
+                        }];
+    
+                        <Select value=selected_value options/>
+                    "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Select Props"</h3>
diff --git a/demo/src/pages/skeleton/mod.rs b/demo/src/pages/skeleton/mod.rs
index 486fda7..0938194 100644
--- a/demo/src/pages/skeleton/mod.rs
+++ b/demo/src/pages/skeleton/mod.rs
@@ -9,20 +9,18 @@ pub fn SkeletonPage() -> impl IntoView {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Skeleton"</h1>
             <Demo>
-                <Skeleton repeat=2 text=true />
-                <Skeleton width="60%" text=true />
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                        <Skeleton repeat=2 text=true />
-                        <Skeleton width="60%" text=true />
-                "#,
-                        "rust"
-                    )
-                >
+                <Skeleton repeat=2 text=true/>
+                <Skeleton width="60%" text=true/>
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                            <Skeleton repeat=2 text=true />
+                            <Skeleton width="60%" text=true />
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Skeleton Props"</h3>
diff --git a/demo/src/pages/slider/mod.rs b/demo/src/pages/slider/mod.rs
index af29e2b..f9e9718 100644
--- a/demo/src/pages/slider/mod.rs
+++ b/demo/src/pages/slider/mod.rs
@@ -12,19 +12,17 @@ pub fn SliderPage() -> impl IntoView {
             <h1>"Slider"</h1>
             <Demo>
                 <Slider value/>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let value = create_rw_signal(0.0);
-                        
-                    <Slider value/>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let value = create_rw_signal(0.0);
+                            
+                        <Slider value/>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Slider Props"</h3>
diff --git a/demo/src/pages/space/mod.rs b/demo/src/pages/space/mod.rs
index 73874c1..2db6653 100644
--- a/demo/src/pages/space/mod.rs
+++ b/demo/src/pages/space/mod.rs
@@ -14,21 +14,19 @@ pub fn SpacePage() -> impl IntoView {
                     <Button>"2"</Button>
                     <Button>"3"</Button>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Space>
-                        <Button>"1"</Button>
-                        <Button>"2"</Button>
-                        <Button>"3"</Button>
-                    </Space>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Space>
+                            <Button>"1"</Button>
+                            <Button>"2"</Button>
+                            <Button>"3"</Button>
+                        </Space>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"vertical"</h3>
@@ -38,21 +36,19 @@ pub fn SpacePage() -> impl IntoView {
                     <Button>"2"</Button>
                     <Button>"3"</Button>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Space vertical=true>
-                        <Button>"1"</Button>
-                        <Button>"2"</Button>
-                        <Button>"3"</Button>
-                    </Space>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Space vertical=true>
+                            <Button>"1"</Button>
+                            <Button>"2"</Button>
+                            <Button>"3"</Button>
+                        </Space>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"gap"</h3>
@@ -67,26 +63,24 @@ pub fn SpacePage() -> impl IntoView {
                     <Button>"2"</Button>
                     <Button>"3"</Button>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Space gap=SpaceGap::Large>
-                        <Button>"1"</Button>
-                        <Button>"2"</Button>
-                        <Button>"3"</Button>
-                    </Space>
-                    <Space gap=SpaceGap::WH(36, 36)>
-                        <Button>"1"</Button>
-                        <Button>"2"</Button>
-                        <Button>"3"</Button>
-                    </Space>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Space gap=SpaceGap::Large>
+                            <Button>"1"</Button>
+                            <Button>"2"</Button>
+                            <Button>"3"</Button>
+                        </Space>
+                        <Space gap=SpaceGap::WH(36, 36)>
+                            <Button>"1"</Button>
+                            <Button>"2"</Button>
+                            <Button>"3"</Button>
+                        </Space>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Space Props"</h3>
diff --git a/demo/src/pages/switch/mod.rs b/demo/src/pages/switch/mod.rs
index 74e34bf..2f5d4c6 100644
--- a/demo/src/pages/switch/mod.rs
+++ b/demo/src/pages/switch/mod.rs
@@ -10,21 +10,19 @@ pub fn SwitchPage() -> impl IntoView {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Switch"</h1>
             <Demo>
-                <Switch value />
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let value = create_rw_signal(false);
-                    view! {
-                        <Switch value />
-                    }
-                "#,
-                        "rust"
-                    )
-                >
+                <Switch value/>
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let value = create_rw_signal(false);
+                        view! {
+                            <Switch value />
+                        }
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Swith Props"</h3>
diff --git a/demo/src/pages/tabbar/mod.rs b/demo/src/pages/tabbar/mod.rs
index 38da076..c9566f6 100644
--- a/demo/src/pages/tabbar/mod.rs
+++ b/demo/src/pages/tabbar/mod.rs
@@ -14,29 +14,27 @@ pub fn TabbarPage() -> impl IntoView {
                 <h1>"Tabbar"</h1>
                 <Demo>
                     ""
-                    <DemoCode
-                        slot
-                        html=highlight_str!(
-                            r#"
-                        let value = create_rw_signal(String::from("o"));
-                                
-                        <Tabbar value>
-                            <TabbarItem name="a">
-                                "and"
-                            </TabbarItem>
-                            <TabbarItem name="i">
-                                "if"
-                            </TabbarItem>
-                            <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
-                                "or"
-                            </TabbarItem>
-                        </Tabbar>
-                    "#,
-                            "rust"
-                        )
-                    >
+                    <DemoCode slot>
+
+                        {highlight_str!(
+                            r#"
+                            let value = create_rw_signal(String::from("o"));
+                                    
+                            <Tabbar value>
+                                <TabbarItem name="a">
+                                    "and"
+                                </TabbarItem>
+                                <TabbarItem name="i">
+                                    "if"
+                                </TabbarItem>
+                                <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
+                                    "or"
+                                </TabbarItem>
+                            </Tabbar>
+                        "#,
+                            "rust"
+                        )}
 
-                        ""
                     </DemoCode>
                 </Demo>
                 <h3>"Tabbar Props"</h3>
@@ -53,7 +51,7 @@ pub fn TabbarPage() -> impl IntoView {
                         <tr>
                             <td>"value"</td>
                             <td>"RwSignal<String>"</td>
-                            <td>r#""""#</td>
+                            <td>"Default::default()"</td>
                             <td>"Tabbar's value."</td>
                         </tr>
                         <tr>
@@ -78,7 +76,7 @@ pub fn TabbarPage() -> impl IntoView {
                         <tr>
                             <td>"key"</td>
                             <td>"MaybeSignal<String>"</td>
-                            <td>r#""""#</td>
+                            <td>"Default::default()"</td>
                             <td>"The indentifier of the tabbar item."</td>
                         </tr>
                         <tr>
diff --git a/demo/src/pages/table/mod.rs b/demo/src/pages/table/mod.rs
index 567a458..79c6e2c 100644
--- a/demo/src/pages/table/mod.rs
+++ b/demo/src/pages/table/mod.rs
@@ -30,37 +30,35 @@ pub fn TablePage() -> impl IntoView {
                         </tr>
                     </tbody>
                 </Table>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                        <Table>
-                            <thead>
-                                <tr>
-                                    <th>"tag"</th>
-                                    <th>"count"</th>
-                                    <th>"date"</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>"div"</td>
-                                    <td>"2"</td>
-                                    <td>"2023-10-08"</td>
-                                </tr>
-                                <tr>
-                                    <td>"span"</td>
-                                    <td>"2"</td>
-                                    <td>"2023-10-08"</td>
-                                </tr>
-                            </tbody>
-                        </Table>
-                        "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                            <Table>
+                                <thead>
+                                    <tr>
+                                        <th>"tag"</th>
+                                        <th>"count"</th>
+                                        <th>"date"</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>"div"</td>
+                                        <td>"2"</td>
+                                        <td>"2023-10-08"</td>
+                                    </tr>
+                                    <tr>
+                                        <td>"span"</td>
+                                        <td>"2"</td>
+                                        <td>"2023-10-08"</td>
+                                    </tr>
+                                </tbody>
+                            </Table>
+                            "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Table Props"</h3>
@@ -78,18 +76,18 @@ pub fn TablePage() -> impl IntoView {
                         <td>"single_row"</td>
                         <td>"MaybeSignal<bool>"</td>
                         <td>"true"</td>
-                        <td>""</td>
+                        <td>"Default::default()"</td>
                     </tr>
                     <tr>
                         <td>"single_column"</td>
                         <td>"MaybeSignal<bool>"</td>
                         <td>"false"</td>
-                        <td>""</td>
+                        <td>"Default::default()"</td>
                     </tr>
                     <tr>
                         <td>"style"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Table's style."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/tabs/mod.rs b/demo/src/pages/tabs/mod.rs
index 819d955..2945de1 100644
--- a/demo/src/pages/tabs/mod.rs
+++ b/demo/src/pages/tabs/mod.rs
@@ -18,25 +18,23 @@ pub fn TabsPage() -> impl IntoView {
                         "pear"
                     </Tab>
                 </Tabs>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let value = create_rw_signal("apple");
-                    <Tabs value>
-                        <Tab key="apple" label="Apple">
-                            "apple"
-                        </Tab>
-                        <Tab key="pear" label="Pear">
-                            "pear"
-                        </Tab>
-                    </Tabs>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let value = create_rw_signal("apple");
+                        <Tabs value>
+                            <Tab key="apple" label="Apple">
+                                "apple"
+                            </Tab>
+                            <Tab key="pear" label="Pear">
+                                "pear"
+                            </Tab>
+                        </Tabs>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Tabs Props"</h3>
@@ -53,7 +51,7 @@ pub fn TabsPage() -> impl IntoView {
                     <tr>
                         <td>"value"</td>
                         <td>"RwSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Tabs value."</td>
                     </tr>
                     <tr>
diff --git a/demo/src/pages/tag/mod.rs b/demo/src/pages/tag/mod.rs
index 568f44d..8164ef8 100644
--- a/demo/src/pages/tag/mod.rs
+++ b/demo/src/pages/tag/mod.rs
@@ -10,43 +10,33 @@ pub fn TagPage() -> impl IntoView {
             <h1>"Tag"</h1>
             <Demo>
                 <Space>
-                    <Tag>
-                        "default"
-                    </Tag>
-                    <Tag variant=TagVariant::Success>
-                        "success"
-                    </Tag>
-                    <Tag variant=TagVariant::Warning>
-                        "warning"
-                    </Tag>
-                    <Tag variant=TagVariant::Error>
-                        "error"
-                    </Tag>
+                    <Tag>"default"</Tag>
+                    <Tag variant=TagVariant::Success>"success"</Tag>
+                    <Tag variant=TagVariant::Warning>"warning"</Tag>
+                    <Tag variant=TagVariant::Error>"error"</Tag>
                 </Space>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    <Space>
-                        <Tag>
-                            "default"
-                        </Tag>
-                        <Tag variant=TagVariant::Success>
-                            "success"
-                        </Tag>
-                        <Tag variant=TagVariant::Warning>
-                            "warning"
-                        </Tag>
-                        <Tag variant=TagVariant::Error>
-                            "error"
-                        </Tag>
-                    </Space>
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        <Space>
+                            <Tag>
+                                "default"
+                            </Tag>
+                            <Tag variant=TagVariant::Success>
+                                "success"
+                            </Tag>
+                            <Tag variant=TagVariant::Warning>
+                                "warning"
+                            </Tag>
+                            <Tag variant=TagVariant::Error>
+                                "error"
+                            </Tag>
+                        </Space>
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Tag Props"</h3>
diff --git a/demo/src/pages/theme/mod.rs b/demo/src/pages/theme/mod.rs
index dd21ec6..6a28a61 100644
--- a/demo/src/pages/theme/mod.rs
+++ b/demo/src/pages/theme/mod.rs
@@ -27,52 +27,48 @@ pub fn ThemePage() -> impl IntoView {
                         </Space>
                     </Card>
                 </ThemeProvider>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
+                <DemoCode slot>
+
+                    {highlight_str!(
                         r#"
-                    let theme = create_rw_signal(Theme::light());
-
-                    view! {
-                        <ThemeProvider theme>
-                            <Card>
-                                <Space>
-                                    <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
-                                    <Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
-                                </Space>
-                            </Card>
-                        </ThemeProvider>
-                    }
-                "#,
+                        let theme = create_rw_signal(Theme::light());
+    
+                        view! {
+                            <ThemeProvider theme>
+                                <Card>
+                                    <Space>
+                                        <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
+                                        <Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
+                                    </Space>
+                                </Card>
+                            </ThemeProvider>
+                        }
+                    "#,
                         "rust"
-                    )
-                >
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"GlobalStyle"</h3>
             <p>"You can use GlobalStyle to sync common global style to the body element."</p>
             <Demo>
                 ""
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let theme = create_rw_signal(Theme::light());
-                    
-                    view! {
-                        <ThemeProvider theme>
-                            <GlobalStyle />
-                            "..."
-                        </ThemeProvider>
-                    }
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let theme = create_rw_signal(Theme::light());
+                        
+                        view! {
+                            <ThemeProvider theme>
+                                <GlobalStyle />
+                                "..."
+                            </ThemeProvider>
+                        }
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"CustomizeTheme"</h3>
@@ -87,35 +83,33 @@ pub fn ThemePage() -> impl IntoView {
                         </Space>
                     </Card>
                 </ThemeProvider>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r##"
-                    let customize_theme = create_rw_signal(Theme::light());
-                    let on_customize_theme = move |_| {
-                        customize_theme.update(|theme| {
-                            theme.common.color_primary = "#f5222d".to_string();
-                            theme.common.color_primary_hover = "#ff4d4f".to_string();
-                            theme.common.color_primary_active = "#cf1322".to_string();
-                        });
-                    };
-                    
-                    view! {
-                        <ThemeProvider theme=customize_theme>
-                            <Card>
-                                <Space>
-                                    <Button on_click=move |_| customize_theme.set(Theme::light())>"Light"</Button>
-                                    <Button on_click=on_customize_theme>"Customize Theme"</Button>
-                                </Space>
-                            </Card>
-                        </ThemeProvider>
-                    }
-                "##,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r##"
+                        let customize_theme = create_rw_signal(Theme::light());
+                        let on_customize_theme = move |_| {
+                            customize_theme.update(|theme| {
+                                theme.common.color_primary = "#f5222d".to_string();
+                                theme.common.color_primary_hover = "#ff4d4f".to_string();
+                                theme.common.color_primary_active = "#cf1322".to_string();
+                            });
+                        };
+                        
+                        view! {
+                            <ThemeProvider theme=customize_theme>
+                                <Card>
+                                    <Space>
+                                        <Button on_click=move |_| customize_theme.set(Theme::light())>"Light"</Button>
+                                        <Button on_click=on_customize_theme>"Customize Theme"</Button>
+                                    </Space>
+                                </Card>
+                            </ThemeProvider>
+                        }
+                    "##,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"ThemeProvider Props"</h3>
diff --git a/demo/src/pages/toast/mod.rs b/demo/src/pages/toast/mod.rs
index d8db637..29e368f 100644
--- a/demo/src/pages/toast/mod.rs
+++ b/demo/src/pages/toast/mod.rs
@@ -16,24 +16,22 @@ pub fn ToastPage() -> impl IntoView {
                 <h1>"Toast"</h1>
                 <Demo>
                     ""
-                    <DemoCode
-                        slot
-                        html=highlight_str!(
-                            r#"
-                        let count = create_rw_signal(0u32);
-                        let onclick = move |_| {
-                            show_toast(ToastOptions {
-                                message: format!("Hello {}", count.get_untracked()),
-                                duration: Duration::from_millis(2000),
-                            });
-                            count.set(count.get_untracked() + 1);
-                        };
-                    "#,
-                            "rust"
-                        )
-                    >
+                    <DemoCode slot>
+
+                        {highlight_str!(
+                            r#"
+                            let count = create_rw_signal(0u32);
+                            let onclick = move |_| {
+                                show_toast(ToastOptions {
+                                    message: format!("Hello {}", count.get_untracked()),
+                                    duration: Duration::from_millis(2000),
+                                });
+                                count.set(count.get_untracked() + 1);
+                            };
+                        "#,
+                            "rust"
+                        )}
 
-                        ""
                     </DemoCode>
                 </Demo>
                 <h3>"Toast Methods"</h3>
diff --git a/demo/src/pages/upload/mod.rs b/demo/src/pages/upload/mod.rs
index e1b058c..2e42bc2 100644
--- a/demo/src/pages/upload/mod.rs
+++ b/demo/src/pages/upload/mod.rs
@@ -18,69 +18,61 @@ pub fn UploadPage() -> impl IntoView {
             <h1>"Upload"</h1>
             <Demo>
                 <Upload custom_request>
-                    <Button>
-                        "Upload"
-                    </Button>
+                    <Button>"Upload"</Button>
                 </Upload>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let message = use_message();
-                    let custom_request = move |file_list: FileList| {
-                        message.create(
-                            format!("Number of uploaded files: {}", file_list.length()),
-                            MessageVariant::Success,
-                            Default::default(),
-                        );
-                    };
-                    view!{ 
-                        <Upload>
-                            <Button>
-                                "upload"
-                            </Button>
-                        </Upload>
-                    }
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let message = use_message();
+                        let custom_request = move |file_list: FileList| {
+                            message.create(
+                                format!("Number of uploaded files: {}", file_list.length()),
+                                MessageVariant::Success,
+                                Default::default(),
+                            );
+                        };
+                        view!{ 
+                            <Upload>
+                                <Button>
+                                    "upload"
+                                </Button>
+                            </Upload>
+                        }
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Drag to upload"</h3>
             <Demo>
                 <Upload custom_request>
-                    <UploadDragger>
-                        "Click or drag a file to this area to upload"
-                    </UploadDragger>
+                    <UploadDragger>"Click or drag a file to this area to upload"</UploadDragger>
                 </Upload>
-                <DemoCode
-                    slot
-                    html=highlight_str!(
-                        r#"
-                    let message = use_message();
-                    let custom_request = move |file_list: FileList| {
-                        message.create(
-                            format!("Number of uploaded files: {}", file_list.length()),
-                            MessageVariant::Success,
-                            Default::default(),
-                        );
-                    };
-                    view! {
-                        <Upload custom_request>
-                            <UploadDragger>
-                                "Click or drag a file to this area to upload"
-                            </UploadDragger>
-                        </Upload>
-                    }
-                "#,
-                        "rust"
-                    )
-                >
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        let message = use_message();
+                        let custom_request = move |file_list: FileList| {
+                            message.create(
+                                format!("Number of uploaded files: {}", file_list.length()),
+                                MessageVariant::Success,
+                                Default::default(),
+                            );
+                        };
+                        view! {
+                            <Upload custom_request>
+                                <UploadDragger>
+                                    "Click or drag a file to this area to upload"
+                                </UploadDragger>
+                            </Upload>
+                        }
+                    "#,
+                        "rust"
+                    )}
 
-                    ""
                 </DemoCode>
             </Demo>
             <h3>"Upload Props"</h3>
@@ -97,7 +89,7 @@ pub fn UploadPage() -> impl IntoView {
                     <tr>
                         <td>"accept"</td>
                         <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"The accept type of upload."</td>
                     </tr>
                     <tr>
@@ -109,7 +101,7 @@ pub fn UploadPage() -> impl IntoView {
                     <tr>
                         <td>"custom_request"</td>
                         <td>"Option<Callback<FileList, ()>>"</td>
-                        <td>r#""""#</td>
+                        <td>"Default::default()"</td>
                         <td>"Customize upload request."</td>
                     </tr>
                     <tr>
diff --git a/examples/ssr_axum/.gitignore b/examples/ssr_axum/.gitignore
new file mode 100644
index 0000000..8cdaa33
--- /dev/null
+++ b/examples/ssr_axum/.gitignore
@@ -0,0 +1,13 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+pkg
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# node e2e test tools and outputs
+node_modules/
+test-results/
+end2end/playwright-report/
+playwright/.cache/
diff --git a/examples/ssr_axum/Cargo.toml b/examples/ssr_axum/Cargo.toml
new file mode 100644
index 0000000..90136f8
--- /dev/null
+++ b/examples/ssr_axum/Cargo.toml
@@ -0,0 +1,120 @@
+[package]
+name = "ssr_axum"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+axum = { version = "0.6.4", optional = true }
+console_error_panic_hook = "0.1"
+console_log = "1"
+cfg-if = "1"
+leptos = { version = "0.5" }
+leptos_axum = { version = "0.5", optional = true }
+leptos_meta = { version = "0.5" }
+leptos_router = { version = "0.5" }
+log = "0.4"
+simple_logger = "4"
+tokio = { version = "1.25.0", optional = true }
+tower = { version = "0.4.13", optional = true }
+tower-http = { version = "0.4", features = ["fs"], optional = true }
+wasm-bindgen = "=0.2.88"
+thiserror = "1.0.38"
+tracing = { version = "0.1.37", optional = true }
+http = "0.2.8"
+demo = { path = "../../demo", default-features = false }
+
+[features]
+hydrate = [
+    "leptos/hydrate",
+    "leptos_meta/hydrate",
+    "leptos_router/hydrate",
+    "demo/hydrate",
+]
+ssr = [
+    "dep:axum",
+    "dep:tokio",
+    "dep:tower",
+    "dep:tower-http",
+    "dep:leptos_axum",
+    "leptos/ssr",
+    "leptos_meta/ssr",
+    "leptos_router/ssr",
+    "dep:tracing",
+    "demo/ssr",
+]
+
+# Defines a size-optimized profile for the WASM bundle in release mode
+[profile.wasm-release]
+inherits = "release"
+opt-level = 'z'
+lto = true
+codegen-units = 1
+panic = "abort"
+
+[package.metadata.leptos]
+# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
+output-name = "ssr_axum"
+
+# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
+site-root = "target/site"
+
+# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
+# Defaults to pkg
+site-pkg-dir = "thaw"
+
+# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
+# style-file = "style/main.scss"
+# Assets source dir. All files found here will be copied and synchronized to site-root.
+# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
+#
+# Optional. Env: LEPTOS_ASSETS_DIR.
+assets-dir = "public"
+
+# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
+site-addr = "127.0.0.1:3000"
+
+# The port to use for automatic reload monitoring
+reload-port = 3001
+
+# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+#   [Windows] for non-WSL use "npx.cmd playwright test"
+#   This binary name can be checked in Powershell with Get-Command npx
+end2end-cmd = "npx playwright test"
+end2end-dir = "end2end"
+
+#  The browserlist query used for optimizing the CSS.
+browserquery = "defaults"
+
+# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
+watch = false
+
+# The environment Leptos will run in, usually either "DEV" or "PROD"
+env = "DEV"
+
+# The features to use when compiling the bin target
+#
+# Optional. Can be over-ridden with the command line parameter --bin-features
+bin-features = ["ssr"]
+
+# If the --no-default-features flag should be used when compiling the bin target
+#
+# Optional. Defaults to false.
+bin-default-features = false
+
+# The features to use when compiling the lib target
+#
+# Optional. Can be over-ridden with the command line parameter --lib-features
+lib-features = ["hydrate"]
+
+# If the --no-default-features flag should be used when compiling the lib target
+#
+# Optional. Defaults to false.
+lib-default-features = false
+
+# The profile to use for the lib target when compiling for release
+#
+# Optional. Defaults to "release".
+lib-profile-release = "wasm-release"
diff --git a/examples/ssr_axum/LICENSE b/examples/ssr_axum/LICENSE
new file mode 100644
index 0000000..e869ce3
--- /dev/null
+++ b/examples/ssr_axum/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 henrik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/examples/ssr_axum/README.md b/examples/ssr_axum/README.md
new file mode 100644
index 0000000..b86386b
--- /dev/null
+++ b/examples/ssr_axum/README.md
@@ -0,0 +1,86 @@
+<picture>
+    <source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)">
+    <img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
+</picture>
+
+# Leptos Axum Starter Template
+
+This is a template for use with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool using [Axum](https://github.com/tokio-rs/axum).
+
+## Creating your template repo
+
+If you don't have `cargo-leptos` installed you can install it with
+
+```bash
+cargo install cargo-leptos
+```
+
+Then run
+```bash
+cargo leptos new --git leptos-rs/start-axum
+```
+
+to generate a new project template.
+
+```bash
+cd ssr_axum
+```
+
+to go to your newly created project.  
+Feel free to explore the project structure, but the best place to start with your application code is in `src/app.rs`.  
+Addtionally, Cargo.toml may need updating as new versions of the dependencies are released, especially if things are not working after a `cargo update`.
+
+## Running your project
+
+```bash
+cargo leptos watch
+```
+
+## Installing Additional Tools
+
+By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
+
+1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
+2. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
+3. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
+4. `npm install -g sass` - install `dart-sass` (should be optional in future
+
+## Compiling for Release
+```bash
+cargo leptos build --release
+```
+
+Will generate your server binary in target/server/release and your site package in target/site
+
+## Testing Your Project
+```bash
+cargo leptos end-to-end
+```
+
+```bash
+cargo leptos end-to-end --release
+```
+
+Cargo-leptos uses Playwright as the end-to-end test tool.  
+Tests are located in end2end/tests directory.
+
+## Executing a Server on a Remote Machine Without the Toolchain
+After running a `cargo leptos build --release` the minimum files needed are:
+
+1. The server binary located in `target/server/release`
+2. The `site` directory and all files within located in `target/site`
+
+Copy these files to your remote server. The directory structure should be:
+```text
+ssr_axum
+site/
+```
+Set the following environment variables (updating for your project as needed):
+```text
+LEPTOS_OUTPUT_NAME="ssr_axum"
+LEPTOS_SITE_ROOT="site"
+LEPTOS_SITE_PKG_DIR="pkg"
+LEPTOS_SITE_ADDR="127.0.0.1:3000"
+LEPTOS_RELOAD_PORT="3001"
+```
+Finally, run the server binary.
diff --git a/examples/ssr_axum/end2end/package-lock.json b/examples/ssr_axum/end2end/package-lock.json
new file mode 100644
index 0000000..f12af44
--- /dev/null
+++ b/examples/ssr_axum/end2end/package-lock.json
@@ -0,0 +1,74 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "end2end",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@playwright/test": "^1.28.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "node_modules/playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true,
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    }
+  },
+  "dependencies": {
+    "@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      }
+    },
+    "@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true
+    }
+  }
+}
diff --git a/examples/ssr_axum/end2end/package.json b/examples/ssr_axum/end2end/package.json
new file mode 100644
index 0000000..ed78585
--- /dev/null
+++ b/examples/ssr_axum/end2end/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.28.0"
+  }
+}
diff --git a/examples/ssr_axum/end2end/playwright.config.ts b/examples/ssr_axum/end2end/playwright.config.ts
new file mode 100644
index 0000000..e9891c0
--- /dev/null
+++ b/examples/ssr_axum/end2end/playwright.config.ts
@@ -0,0 +1,107 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./tests",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+      },
+    },
+
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;
diff --git a/examples/ssr_axum/end2end/tests/example.spec.ts b/examples/ssr_axum/end2end/tests/example.spec.ts
new file mode 100644
index 0000000..a461f35
--- /dev/null
+++ b/examples/ssr_axum/end2end/tests/example.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("homepage has title and links to intro page", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+
+  await expect(page).toHaveTitle("Welcome to Leptos");
+
+  await expect(page.locator("h1")).toHaveText("Welcome to Leptos!");
+});
diff --git a/examples/ssr_axum/public/favicon.ico b/examples/ssr_axum/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..100548a1e909d48f0c2a178b01cd2760b5c98732
GIT binary patch
literal 23462
zcmeI4TZ|Po7{@C_F;VdH;G^s9!558}7@u@sR7j8*jRuj#Yrq$bny6=wXm;^IH!<oa
z8f8IQ7W7rTJ!;$sT@V(15y2~qipChjJ)*2z|NrUfo|&_4r=97Xy}-cibb31d`u*l>
zr_+8NAx^`;#ft_0UL^XK3vq!E;&SYW60c)tJhxw$3UTR`YEL4j=#N}2I%HkkA-hB!
z`vCUOv44wwKlVe|W#h<m#`E_9Src8!bv1F}6cxR4v9d>;4L$FMzU!gu4>*!Vxt;mc
z#5&}&R6Zfjs$7W*1%S^S`INXBx@^LJv@{zx+at(-5c^G(TcKJ}vz9Bx>A2tbqTIVH
z=3}$VA0c-o%Mn$vh?ymJR2L7SoO`E;QI=gz{Dk`cfMjz$jW+qTxC(rRrv;<Qb#(;g
zx^Aj*$w$OI)VG&Vma!<Do;zR4PoJ0an-A2H=aY3W5_baSd=a*P##Ata><gjC)=0WY
z*}Xu@zkZaNjpyC-i?Fd>Ga{c9m$s7^I4uFAgV8wAc0PJMgK6UA!^doT7mKfn18B!?
zZ3i##xgYz9sGP`Z$D0#)G6BZNsfX!&*k-J(k{9x?VITJ@`<nBl{NNEOKVBo{+8fg4
zG>1n9GKeNl7@x<A`BM(%QEp!P=I^~#@Phnjz01(sA?2a{6Y9$GaVbB0MaueVc0G!)
zVt&k*`Rk2xDZk0X9j=L|WAZ}%Ug0g9W&G-GUGnU4>+5!2p{&S>`I$D#_hrR;f_`BP
zUTDW}gWRw_!5_O!8mKrMuMk!)PLx9V{;ZhxMA`P9&sXFV{=D1uo}CqcG4b+cmB)$s
z@7fZ|O2Q@%$Y;dGMeHkiuPfSr>bp|P6MwVR_N|qd4=W!|l-qYjI4fm`+l%y9VNWjy
z+HtmgZ{3p5Yx_F1Uvt!Td9283_*FZ5{xbHDl!HsM<p`^bw67OKYzyyq*ML)48)Yg}
z2rn0_c5zZVQ17dKcqQWnMeAM}UONZPHnVeMd+aG&cGkt*aj@Y2K~{#@{x>YjuaEy8
zGqbYA>(p$Yn7>asLegM7$7NfM_IxzDT$a(NK5G4ak1^UOJHLId@j@_q(8;N{L&`5V
ztNsh0%c0L3AN%s<RK%WGUY48vFX};k?5yzI5%-yFOWq~s;yTWmn6K|SN6Lf0WHsS^
z-FT}xy)B;@_Ep55OmYwZmiPX+$JB1&S-H^4iF)(B)U*}3zh&$zw!HUO<=yL>T5SuQ
z-gdJ3<T(>56&JhwHc3^;;rN8D4ygFSG%L=pAwB1f?AP^o+B8t{Rp^nHSVjIEpXk5Q
zuCwBC6!q|I%?pf{IXP*DpY^3nKRH~5K9o{bz8ufdy19>-u~!??zvXpJ(tmz!GNW`%
z?DjrZJDx5h!`s(4->=-9$g@AiYOfb7=IQ(X8rna!_S?~)&)21y#^<@w`re+O|Mz6Y
zafqO@XkNpS?Q3M9_0Fqv#^>vz(wO=Mt+|HTQ&TqQt?J@V@3N%J9J@Z2WmP37rT6XN
zw7L+h*!ES1RrQ=WR?`Je^kZq-T4*?yeHCTZ4o-^6063MOJC4Dt2&?vSqAk&1?mMep
zao(KszT4iA@{4}=&N0q^j<mL<*>m=jI5%p_>(6hqY4sW7P3f5r^K)%156fk`J{?E>
zsHfW>U=KL`Ze&Hji&p;vSGi`xZ`9ZBZ?Yep%<ndzzAziK57&WyI_5U}FyhVQ>bpM-
zmopo#pg)tD6*--<tMol~+tsP|O0&vuuiVc;`bBM9oBu4C(a%BXM?Lx6H`hPL^Enu)
ze^qjxv$FnGYQEOa!No}b#{N}=etSty)S(C~Ugy;xjlydHtV+HQM&MM2Rl9hp^(`gF
z86t5i%c?!RZZAH56_Ha6R#o%DdaGo-FJ!I5$v7^Gby5>!$ThJ6?Uruu?Z;$1A+kN?
z*+cB{d)=2x`!nU~j`d^{th&T<FIJrQaBWr1w^Ws{?>r9H^G&eo5evZTn3EUh(bE3D
zt<0*@N6V=qf9jL(Po9|{Oxmovc*n`=<ehikq-{zc!D*3`)ok@=pkA)_3hPBRBYkZ6
z$=Kfwd(MS_|F616sAE<0oLMQ8&tkRr^pmlV?UA9;Pln7e|HZYEcFw&W%FmzvOEc2{
z3jWdbCujM&UV!?z^u^jEZA-1k8R^#->i^|tlV-OMJ|E8YhL{I?IEQsQKfkcgyt&OU
z)E2L6W|8Nk4=;~(C-h?jt8LMEd5r_W55wxuun~U9k^KSkS$X*(vtEMJwb;$$@cD9@
zw&u%;>j7M2GBM^K{mbp`->%y*u<9#iTOpjNhl>?|Zx=7D-_{I#kBxQTI}7omzc1Sn
z*VgLSlgCQ);&rZ#aw*^6j+$xfVh8p1Wt2`=e4W=8mp0X}^ZNSTrvARnxX!CfT$0v5
zG>q%%OB2?1vHxP*TJ1^e;$v4jZQi&L<?FP5$1yzrmxQu0r4Q~$eD#i*l#LVh31P+b
zE?!~lQpt6dN$;X@$gkV`UiEfJ$@d4n@qM1-AJorwpF>$`UajLqq3fNoj=Lxm*LBd7
z>*($Jrhnsm7T-(hKc4Rw9d1`?S<HVLt)tfr!D@DVp8@YDTBj<H;KlY{fB($S&eC>Z
z3b*UKA6&nU_3l;jY0W$Nj$F)lA?x>Kob%>k_o*h>U%aeUmv)>d{Z-Y!{|{vdE4L{<
z+qj`#De2Ed|1bC0QiweEd0sBs&y2|u<+vJqdA|q~zp`<(rMkF2roLtKO2#MDc+SsJ
zY^*G!F0l`cR<K-Ub*t+7WV}#)ua7=BA@w9qT7G-3CLRT&Gpo`ucD~8@y;{G?b&2lz
zwDL^(oypB$v~W7xkq={hJ99qtxCcAuxA#V|H`<R{pSFzo`;=oQrb+xwxDE*4Q-Z$q
z{~AWy@&k^)Vb}dO9(n#fc78W;FiFqr3V!#cEGxXS9mlG0DMv9LDq+E*vk@Lc*7F+S
zg9zhYE=e<lFy0N5a1X<sNqC$=aZVEErM!3)c^*%~bCWQ$VMe2f$IdMY4<$j-J&N-l
z74BqM1w{wKDtib(SY;0ZE#c!rZF3Q?L_t_f7^iAO0RPp7z)&N|nHyWUN2j?+2%oS{
zJ{yic`liziX{GPC^BmP_5J-n@_bz>ZZ8ng$leGP0>}p5}?uJm=5X_@Y+ouwy>^5!B
gX**Y$D*Km10$ZbAFe6=Gc(JZW>H3A5(WrO-1Fx<e^8f$<

literal 0
HcmV?d00001

diff --git a/examples/ssr_axum/public/thaw/grid_dot.svg b/examples/ssr_axum/public/thaw/grid_dot.svg
new file mode 100644
index 0000000..bc909a3
--- /dev/null
+++ b/examples/ssr_axum/public/thaw/grid_dot.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="50" height="50" />
+  <rect x="23" y="23" width="4" height="4" rx="2" fill="#cbd5e1" />
+</svg>
\ No newline at end of file
diff --git a/examples/ssr_axum/public/thaw/logo.svg b/examples/ssr_axum/public/thaw/logo.svg
new file mode 100644
index 0000000..2f77189
--- /dev/null
+++ b/examples/ssr_axum/public/thaw/logo.svg
@@ -0,0 +1,11 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 24 24"
+>
+    <circle cx="12" cy="12" r="12" fill="#0078ff" />
+    <path
+        d="M21 11h-3.17l2.54-2.54a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0L15 11h-2V9l3.95-3.95c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0L13 6.17V3c0-.55-.45-1-1-1s-1 .45-1 1v3.17L8.46 3.63a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42L11 9v2H9L5.05 7.05c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41L6.17 11H3c-.55 0-1 .45-1 1s.45 1 1 1h3.17l-2.54 2.54a.996.996 0 0 0 0 1.41c.39.39 1.03.39 1.42 0L9 13h2v2l-3.95 3.95c-.39.39-.39 1.03 0 1.42c.39.39 1.02.39 1.41 0L11 17.83V21c0 .55.45 1 1 1s1-.45 1-1v-3.17l2.54 2.54c.39.39 1.02.39 1.41 0c.39-.39.39-1.03 0-1.42L13 15v-2h2l3.95 3.95c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41L17.83 13H21c.55 0 1-.45 1-1s-.45-1-1-1z"
+        fill="#fff">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/examples/ssr_axum/src/fileserv.rs b/examples/ssr_axum/src/fileserv.rs
new file mode 100644
index 0000000..eef7b71
--- /dev/null
+++ b/examples/ssr_axum/src/fileserv.rs
@@ -0,0 +1,40 @@
+use cfg_if::cfg_if;
+
+cfg_if! { if #[cfg(feature = "ssr")] {
+    use axum::{
+        body::{boxed, Body, BoxBody},
+        extract::State,
+        response::IntoResponse,
+        http::{Request, Response, StatusCode, Uri},
+    };
+    use axum::response::Response as AxumResponse;
+    use tower::ServiceExt;
+    use tower_http::services::ServeDir;
+    use leptos::*;
+    use demo::App;
+
+    pub async fn file_and_error_handler(uri: Uri, State(options): State<LeptosOptions>, req: Request<Body>) -> AxumResponse {
+        let root = options.site_root.clone();
+        let res = get_static_file(uri.clone(), &root).await.unwrap();
+
+        if res.status() == StatusCode::OK {
+            res.into_response()
+        } else {
+            let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{<App/>});
+            handler(req).await.into_response()
+        }
+    }
+
+    async fn get_static_file(uri: Uri, root: &str) -> Result<Response<BoxBody>, (StatusCode, String)> {
+        let req = Request::builder().uri(uri.clone()).body(Body::empty()).unwrap();
+        // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
+        // This path is relative to the cargo root
+        match ServeDir::new(root).oneshot(req).await {
+            Ok(res) => Ok(res.map(boxed)),
+            Err(err) => Err((
+                StatusCode::INTERNAL_SERVER_ERROR,
+                format!("Something went wrong: {err}"),
+            )),
+        }
+    }
+}}
diff --git a/examples/ssr_axum/src/lib.rs b/examples/ssr_axum/src/lib.rs
new file mode 100644
index 0000000..1bae92b
--- /dev/null
+++ b/examples/ssr_axum/src/lib.rs
@@ -0,0 +1,17 @@
+use cfg_if::cfg_if;
+pub mod fileserv;
+
+cfg_if! { if #[cfg(feature = "hydrate")] {
+    use leptos::*;
+    use wasm_bindgen::prelude::wasm_bindgen;
+    use demo::App;
+
+    #[wasm_bindgen]
+    pub fn hydrate() {
+        // initializes logging using the `log` crate
+        _ = console_log::init_with_level(log::Level::Debug);
+        console_error_panic_hook::set_once();
+
+        leptos::mount_to_body(App);
+    }
+}}
diff --git a/examples/ssr_axum/src/main.rs b/examples/ssr_axum/src/main.rs
new file mode 100644
index 0000000..8222418
--- /dev/null
+++ b/examples/ssr_axum/src/main.rs
@@ -0,0 +1,43 @@
+#[cfg(feature = "ssr")]
+#[tokio::main]
+async fn main() {
+    use axum::{routing::post, Router};
+    use demo::App;
+    use leptos::*;
+    use leptos_axum::{generate_route_list, LeptosRoutes};
+    use ssr_axum::fileserv::file_and_error_handler;
+
+    simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
+
+    // Setting get_configuration(None) means we'll be using cargo-leptos's env values
+    // For deployment these variables are:
+    // <https://github.com/leptos-rs/start-axum#executing-a-server-on-a-remote-machine-without-the-toolchain>
+    // Alternately a file can be specified such as Some("Cargo.toml")
+    // The file would need to be included with the executable when moved to deployment
+    let conf = get_configuration(None).await.unwrap();
+    let leptos_options = conf.leptos_options;
+    let addr = leptos_options.site_addr;
+    let routes = generate_route_list(App);
+
+    // build our application with a route
+    let app = Router::new()
+        .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
+        .leptos_routes(&leptos_options, routes, App)
+        .fallback(file_and_error_handler)
+        .with_state(leptos_options);
+
+    // run our app with hyper
+    // `axum::Server` is a re-export of `hyper::Server`
+    log::info!("listening on http://{}", &addr);
+    axum::Server::bind(&addr)
+        .serve(app.into_make_service())
+        .await
+        .unwrap();
+}
+
+#[cfg(not(feature = "ssr"))]
+pub fn main() {
+    // no client-side main function
+    // unless we want this to work with e.g., Trunk for a purely client-side app
+    // see lib.rs for hydration function instead
+}
diff --git a/src/color_picker/mod.rs b/src/color_picker/mod.rs
index 6897834..a046147 100644
--- a/src/color_picker/mod.rs
+++ b/src/color_picker/mod.rs
@@ -4,8 +4,8 @@ mod theme;
 use crate::components::{Binder, Follower, FollowerPlacement};
 use crate::{use_theme, utils::mount_style, Theme};
 pub use color::*;
+use leptos::leptos_dom::helpers::WindowListenerHandle;
 use leptos::*;
-use leptos::{leptos_dom::helpers::WindowListenerHandle, wasm_bindgen::__rt::IntoJsResult};
 pub use theme::ColorPickerTheme;
 
 #[component]
@@ -65,25 +65,30 @@ pub fn ColorPicker(#[prop(optional, into)] value: RwSignal<RGBA>) -> impl IntoVi
     let show_popover = move |_| {
         is_show_popover.set(true);
     };
-    let timer = window_event_listener(ev::click, move |ev| {
-        let el = ev.target();
-        let mut el: Option<web_sys::Element> =
-            el.into_js_result().map_or(None, |el| Some(el.into()));
-        let body = document().body().unwrap();
-        while let Some(current_el) = el {
-            if current_el == *body {
-                break;
-            };
-            if current_el == ***popover_ref.get().unwrap()
-                || current_el == ***trigger_ref.get().unwrap()
-            {
-                return;
+
+    #[cfg(any(feature = "csr", feature = "hydrate"))]
+    {
+        use leptos::wasm_bindgen::__rt::IntoJsResult;
+        let timer = window_event_listener(ev::click, move |ev| {
+            let el = ev.target();
+            let mut el: Option<web_sys::Element> =
+                el.into_js_result().map_or(None, |el| Some(el.into()));
+            let body = document().body().unwrap();
+            while let Some(current_el) = el {
+                if current_el == *body {
+                    break;
+                };
+                if current_el == ***popover_ref.get().unwrap()
+                    || current_el == ***trigger_ref.get().unwrap()
+                {
+                    return;
+                }
+                el = current_el.parent_element();
             }
-            el = current_el.parent_element();
-        }
-        is_show_popover.set(false);
-    });
-    on_cleanup(move || timer.remove());
+            is_show_popover.set(false);
+        });
+        on_cleanup(move || timer.remove());
+    }
 
     view! {
         <Binder target_ref=trigger_ref>
diff --git a/src/components/binder/mod.rs b/src/components/binder/mod.rs
index 36b7359..63b27cd 100644
--- a/src/components/binder/mod.rs
+++ b/src/components/binder/mod.rs
@@ -2,8 +2,8 @@ mod get_placement_style;
 
 use crate::{
     components::Teleport,
-    utils::mount_style,
     utils::{add_event_listener, EventListenerHandle},
+    utils::{mount_style, with_hydration_off},
 };
 use get_placement_style::get_follower_placement_style;
 pub use get_placement_style::FollowerPlacement;
@@ -194,16 +194,19 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
         is_show
     });
 
-    let children = html::div()
-        .classes("thaw-binder-follower-container")
-        .style("display", move || (!is_show.get()).then_some("none"))
-        .child(
-            html::div()
-                .classes("thaw-binder-follower-content")
-                .node_ref(content_ref)
-                .attr("style", move || content_style.get())
-                .child(children()),
-        );
+    let children = with_hydration_off(|| {
+        html::div()
+            .classes("thaw-binder-follower-container")
+            .style("display", move || (!is_show.get()).then_some("none"))
+            .child(
+                html::div()
+                    .classes("thaw-binder-follower-content")
+                    .node_ref(content_ref)
+                    .attr("style", move || content_style.get())
+                    .child(children()),
+            )
+    });
+
     view! { <Teleport element=children/> }
 }
 
diff --git a/src/components/teleport/mod.rs b/src/components/teleport/mod.rs
index cfa976e..4c48b97 100644
--- a/src/components/teleport/mod.rs
+++ b/src/components/teleport/mod.rs
@@ -1,5 +1,6 @@
 use cfg_if::cfg_if;
 use leptos::{html::AnyElement, *};
+
 /// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
 #[component]
 pub fn Teleport(
@@ -7,8 +8,11 @@ pub fn Teleport(
     #[prop(optional, into)] element: Option<HtmlElement<AnyElement>>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
-    cfg_if! { if #[cfg(target_arch = "wasm32")] {
+    cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] {
         use leptos::wasm_bindgen::JsCast;
+        use leptos::leptos_dom::Mountable;
+        use crate::utils::with_hydration_off;
+
         let mount = mount.unwrap_or_else(|| {
             document()
                 .body()
@@ -16,21 +20,41 @@ pub fn Teleport(
                 .unchecked_into()
         });
 
-        let render_root = if let Some(element) = element {
-            element
+        if let Some(element) = element {
+            let render_root = element;
+            let _  = mount.append_child(&render_root);
+            on_cleanup(move || {
+                let _ = mount.remove_child(&render_root);
+            });
         } else if let Some(children) =  children {
-            html::div().child(children()).into_any()
+            let container = document()
+                .create_element("div")
+                .expect("element creation to work");
+            with_hydration_off(|| {
+                let _ = container.append_child(&children().into_view().get_mountable_node());
+            });
+
+            let render_root = container;
+            let _  = mount.append_child(&render_root);
+            on_cleanup(move || {
+                let _ = mount.remove_child(&render_root);
+            });
         } else {
             return;
         };
-
-        _  = mount.append_child(&render_root);
-        on_cleanup(move || {
-            _ = mount.remove_child(&render_root);
-        });
     } else {
-        _ = mount;
-        _ = element;
-        _ = children;
+        let _ = mount;
+        #[cfg(not(feature = "ssr"))]
+        {
+            let _ = element;
+            let _ = children;
+        }
+        #[cfg(feature = "ssr")]
+        if element.is_none() {
+            if let Some(children) =  children {
+                // Consumed hydration `id`
+                let _  = children();
+            }
+        }
     }}
 }
diff --git a/src/global_style/mod.rs b/src/global_style/mod.rs
index 36d2e2f..58e42e5 100644
--- a/src/global_style/mod.rs
+++ b/src/global_style/mod.rs
@@ -20,6 +20,7 @@ pub fn GlobalStyle() -> impl IntoView {
                 _ = body
                     .style()
                     .set_property("color-scheme", &theme.common.color_scheme);
+                _ = body.style().set_property("margin", "0");
             }
         });
     });
diff --git a/src/select/mod.rs b/src/select/mod.rs
index 240bff7..011fe62 100644
--- a/src/select/mod.rs
+++ b/src/select/mod.rs
@@ -6,7 +6,6 @@ use crate::{
     utils::mount_style,
     Theme,
 };
-use leptos::wasm_bindgen::__rt::IntoJsResult;
 use leptos::*;
 use std::hash::Hash;
 pub use theme::SelectTheme;
@@ -73,25 +72,30 @@ where
     let show_menu = move |_| {
         is_show_menu.set(true);
     };
-    let timer = window_event_listener(ev::click, move |ev| {
-        let el = ev.target();
-        let mut el: Option<web_sys::Element> =
-            el.into_js_result().map_or(None, |el| Some(el.into()));
-        let body = document().body().unwrap();
-        while let Some(current_el) = el {
-            if current_el == *body {
-                break;
-            };
-            if current_el == ***menu_ref.get().unwrap()
-                || current_el == ***trigger_ref.get().unwrap()
-            {
-                return;
+
+    #[cfg(any(feature = "csr", feature = "hydrate"))]
+    {
+        use leptos::wasm_bindgen::__rt::IntoJsResult;
+        let timer = window_event_listener(ev::click, move |ev| {
+            let el = ev.target();
+            let mut el: Option<web_sys::Element> =
+                el.into_js_result().map_or(None, |el| Some(el.into()));
+            let body = document().body().unwrap();
+            while let Some(current_el) = el {
+                if current_el == *body {
+                    break;
+                };
+                if current_el == ***menu_ref.get().unwrap()
+                    || current_el == ***trigger_ref.get().unwrap()
+                {
+                    return;
+                }
+                el = current_el.parent_element();
             }
-            el = current_el.parent_element();
-        }
-        is_show_menu.set(false);
-    });
-    on_cleanup(move || timer.remove());
+            is_show_menu.set(false);
+        });
+        on_cleanup(move || timer.remove());
+    }
 
     let temp_options = options.clone();
     let select_option_label = create_memo(move |_| match value.get() {
diff --git a/src/tabs/mod.rs b/src/tabs/mod.rs
index 39e56b8..2cae306 100644
--- a/src/tabs/mod.rs
+++ b/src/tabs/mod.rs
@@ -13,6 +13,24 @@ pub use tab::*;
 pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView {
     mount_style("tabs", include_str!("./tabs.css"));
     let tab_options_vec = create_rw_signal(vec![]);
+
+    view! {
+        <Provider value=TabsInjection {
+            active_key: value,
+            tab_options_vec,
+        }>
+            <TabsInner value tab_options_vec children/>
+        </Provider>
+    }
+}
+
+#[component]
+fn TabsInner(
+    value: RwSignal<String>,
+    tab_options_vec: RwSignal<Vec<TabOption>>,
+    children: Children,
+) -> impl IntoView {
+    mount_style("tabs", include_str!("./tabs.css"));
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
@@ -35,72 +53,66 @@ pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children)
     });
     let label_list_ref = create_node_ref::<html::Div>();
 
+    let children = children();
     view! {
-        <Provider value=TabsInjection {
-            active_key: value,
-            tab_options_vec,
-        }>
-            <div class="thaw-tabs" style=move || css_vars.get()>
-                <div class="thaw-tabs__label-list" ref=label_list_ref>
-                    <For
-                        each=move || tab_options_vec.get()
-                        key=move |v| v.key.clone()
-                        children=move |option| {
-                            let label_ref = create_node_ref::<html::Span>();
-                            let TabOption { key, label } = option;
-                            create_effect({
-                                let key = key.clone();
-                                move |_| {
-                                    let Some(label) = label_ref.get() else {
-                                        return;
-                                    };
-                                    let Some(label_list) = label_list_ref.get() else {
-                                        return;
-                                    };
-                                    if key.clone() == value.get() {
-                                        request_animation_frame(move || {
-                                            let list_rect = label_list.get_bounding_client_rect();
-                                            let rect = label.get_bounding_client_rect();
-                                            label_line
-                                                .set(
-                                                    Some(TabsLabelLine {
-                                                        width: rect.width(),
-                                                        left: rect.left() - list_rect.left(),
-                                                    }),
-                                                );
-                                        });
-                                    }
+        <div class="thaw-tabs" style=move || css_vars.get()>
+            <div class="thaw-tabs__label-list" ref=label_list_ref>
+                <For
+                    each=move || tab_options_vec.get()
+                    key=move |v| v.key.clone()
+                    children=move |option| {
+                        let label_ref = create_node_ref::<html::Span>();
+                        let TabOption { key, label } = option;
+                        create_effect({
+                            let key = key.clone();
+                            move |_| {
+                                let Some(label) = label_ref.get() else { return;
+                            };
+                                let Some(label_list) = label_list_ref.get() else { return;
+                            };
+                                if key.clone() == value.get() {
+                                    request_animation_frame(move || {
+                                        let list_rect = label_list.get_bounding_client_rect();
+                                        let rect = label.get_bounding_client_rect();
+                                        label_line
+                                            .set(
+                                                Some(TabsLabelLine {
+                                                    width: rect.width(),
+                                                    left: rect.left() - list_rect.left(),
+                                                }),
+                                            );
+                                    });
                                 }
-                            });
-                            view! {
-                                <span
-                                    class="thaw-tabs__label"
-                                    class=(
-                                        "thaw-tabs__label--active",
-                                        {
-                                            let key = key.clone();
-                                            move || key == value.get()
-                                        },
-                                    )
-
-                                    on:click={
-                                        let key = key.clone();
-                                        move |_| value.set(key.clone())
-                                    }
-
-                                    ref=label_ref
-                                >
-                                    {label}
-                                </span>
                             }
-                        }
-                    />
+                        });
+                        view! {
+                            <span
+                                class="thaw-tabs__label"
+                                class=(
+                                    "thaw-tabs__label--active",
+                                    {
+                                        let key = key.clone();
+                                        move || key == value.get()
+                                    },
+                                )
 
-                    <span class="thaw-tabs-label__line" style=move || label_line_style.get()></span>
-                </div>
-                <div>{children()}</div>
+                                on:click={
+                                    let key = key.clone();
+                                    move |_| value.set(key.clone())
+                                }
+
+                                ref=label_ref
+                            >
+                                {label}
+                            </span>
+                        }
+                    }
+                />
+
+                <span class="thaw-tabs-label__line" style=move || label_line_style.get()></span>
             </div>
-        </Provider>
+            <div>{children}</div>
+        </div>
     }
 }
 
diff --git a/src/utils/event_listener.rs b/src/utils/event_listener.rs
index 0b9df50..8532e46 100644
--- a/src/utils/event_listener.rs
+++ b/src/utils/event_listener.rs
@@ -1,5 +1,5 @@
+use ::wasm_bindgen::{prelude::Closure, JsCast};
 use leptos::{html::AnyElement, *};
-use wasm_bindgen::{prelude::Closure, JsCast};
 
 pub fn add_event_listener<E: ev::EventDescriptor + 'static>(
     target: HtmlElement<AnyElement>,
diff --git a/src/utils/mod.rs b/src/utils/mod.rs
index 83bf0e2..9ca81a9 100644
--- a/src/utils/mod.rs
+++ b/src/utils/mod.rs
@@ -13,3 +13,15 @@ pub(crate) use mount_style::mount_style;
 pub(crate) use provider::Provider;
 pub use signal::SignalWatch;
 pub(crate) use stored_maybe_signal::*;
+
+pub(crate) fn with_hydration_off<T>(f: impl FnOnce() -> T) -> T {
+    #[cfg(feature = "hydrate")]
+    {
+        use leptos::leptos_dom::HydrationCtx;
+        HydrationCtx::with_hydration_off(f)
+    }
+    #[cfg(not(feature = "hydrate"))]
+    {
+        f()
+    }
+}
diff --git a/src/utils/mount_style.rs b/src/utils/mount_style.rs
index 3d7c6d4..4cf70ac 100644
--- a/src/utils/mount_style.rs
+++ b/src/utils/mount_style.rs
@@ -1,20 +1,34 @@
-use leptos::document;
+use cfg_if::cfg_if;
 
-pub fn mount_style(id: &str, content: &str) {
-    let head = document().head().expect("head no exist");
-    let style = head
-        .query_selector(&format!("style[csr-id=\"thaw-{id}\"]"))
-        .expect("query style element error");
+pub fn mount_style(id: &str, content: &'static str) {
+    cfg_if! {
+        if #[cfg(feature = "ssr")] {
+            use leptos::html::style;
+            use leptos_meta::use_head;
+            let meta = use_head();
+            let style_el = style().attr("csr-id", format!("thaw-{id}")).child(content);
+            meta.tags.register(format!("leptos-thaw-{id}").into(), style_el.into_any());
+        } else {
+            use leptos::document;
+            let head = document().head().expect("head no exist");
+            let style = head
+                .query_selector(&format!("style[csr-id=\"thaw-{id}\"]"))
+                .expect("query style element error");
 
-    if style.is_some() {
-        return;
+            #[cfg(feature = "hydrate")]
+            let _ = leptos::leptos_dom::HydrationCtx::id();
+
+            if style.is_some() {
+                return;
+            }
+
+            let style = document()
+                .create_element("style")
+                .expect("create style element error");
+            _ = style.set_attribute("csr-id", &format!("thaw-{id}"));
+            style.set_text_content(Some(content));
+
+            _ = head.append_child(&style);
+        }
     }
-
-    let style = document()
-        .create_element("style")
-        .expect("create style element error");
-    _ = style.set_attribute("csr-id", &format!("thaw-{id}"));
-    style.set_text_content(Some(content));
-
-    _ = head.append_child(&style);
 }