diff --git a/assets/dioxus/docsite.js b/assets/dioxus/docsite.js
index d12fd5737..63a1c6428 100644
--- a/assets/dioxus/docsite.js
+++ b/assets/dioxus/docsite.js
@@ -275,7 +275,7 @@ function __wbg_adapter_48(arg0, arg1, arg2) {
     try {
         _assertNum(arg0);
         _assertNum(arg1);
-        wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hde911a6e75dcdc70(arg0, arg1, addBorrowedObject(arg2));
+        wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h97d6720a74706a47(arg0, arg1, addBorrowedObject(arg2));
     } finally {
         heap[stack_pointer++] = undefined;
     }
@@ -284,7 +284,7 @@ function __wbg_adapter_48(arg0, arg1, arg2) {
 function __wbg_adapter_51(arg0, arg1) {
     _assertNum(arg0);
     _assertNum(arg1);
-    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h72b9046645733a63(arg0, arg1);
+    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he2e688f790950d0a(arg0, arg1);
 }
 
 function makeClosure(arg0, arg1, dtor, f) {
@@ -311,32 +311,32 @@ function makeClosure(arg0, arg1, dtor, f) {
 function __wbg_adapter_54(arg0, arg1, arg2) {
     _assertNum(arg0);
     _assertNum(arg1);
-    wasm._dyn_core__ops__function__Fn__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb0f44eaff47b8128(arg0, arg1, addHeapObject(arg2));
+    wasm._dyn_core__ops__function__Fn__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h636d870e09540d00(arg0, arg1, addHeapObject(arg2));
 }
 
 function __wbg_adapter_57(arg0, arg1) {
     _assertNum(arg0);
     _assertNum(arg1);
-    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h7ca6d453aefdf7f4(arg0, arg1);
+    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf8ff19922b96b6b0(arg0, arg1);
 }
 
 function __wbg_adapter_60(arg0, arg1, arg2) {
     _assertNum(arg0);
     _assertNum(arg1);
-    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1f5521e1a4df9ba4(arg0, arg1, addHeapObject(arg2));
+    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h20e8942ce11bde76(arg0, arg1, addHeapObject(arg2));
 }
 
 function __wbg_adapter_63(arg0, arg1, arg2) {
     _assertNum(arg0);
     _assertNum(arg1);
-    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h390745bdf35536ce(arg0, arg1, addHeapObject(arg2));
+    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h00cef57c0e55f896(arg0, arg1, addHeapObject(arg2));
 }
 
 function __wbg_adapter_66(arg0, arg1, arg2) {
     try {
         _assertNum(arg0);
         _assertNum(arg1);
-        wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd135f337b4766aa7(arg0, arg1, addBorrowedObject(arg2));
+        wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb43526dea1bbe3b1(arg0, arg1, addBorrowedObject(arg2));
     } finally {
         heap[stack_pointer++] = undefined;
     }
@@ -556,6 +556,11 @@ imports.wbg.__wbg_fetch_381efb5e862610fa = function() { return logError(function
     const ret = fetch(getObject(arg0));
     return addHeapObject(ret);
 }, arguments) };
+imports.wbg.__wbindgen_is_string = function(arg0) {
+    const ret = typeof(getObject(arg0)) === 'string';
+    _assertBoolean(ret);
+    return ret;
+};
 imports.wbg.__wbindgen_number_new = function(arg0) {
     const ret = arg0;
     return addHeapObject(ret);
@@ -578,11 +583,6 @@ imports.wbg.__wbindgen_cb_drop = function(arg0) {
     _assertBoolean(ret);
     return ret;
 };
-imports.wbg.__wbindgen_is_string = function(arg0) {
-    const ret = typeof(getObject(arg0)) === 'string';
-    _assertBoolean(ret);
-    return ret;
-};
 imports.wbg.__wbindgen_jsval_loose_eq = function(arg0, arg1) {
     const ret = getObject(arg0) == getObject(arg1);
     _assertBoolean(ret);
@@ -1515,24 +1515,24 @@ imports.wbg.__wbindgen_closure_wrapper574 = function() { return logError(functio
     const ret = makeMutClosure(arg0, arg1, 107, __wbg_adapter_51);
     return addHeapObject(ret);
 }, arguments) };
-imports.wbg.__wbindgen_closure_wrapper5893 = function() { return logError(function (arg0, arg1, arg2) {
-    const ret = makeClosure(arg0, arg1, 1652, __wbg_adapter_54);
+imports.wbg.__wbindgen_closure_wrapper5915 = function() { return logError(function (arg0, arg1, arg2) {
+    const ret = makeClosure(arg0, arg1, 1691, __wbg_adapter_54);
     return addHeapObject(ret);
 }, arguments) };
-imports.wbg.__wbindgen_closure_wrapper5952 = function() { return logError(function (arg0, arg1, arg2) {
-    const ret = makeMutClosure(arg0, arg1, 1674, __wbg_adapter_57);
+imports.wbg.__wbindgen_closure_wrapper5976 = function() { return logError(function (arg0, arg1, arg2) {
+    const ret = makeMutClosure(arg0, arg1, 1699, __wbg_adapter_57);
     return addHeapObject(ret);
 }, arguments) };
-imports.wbg.__wbindgen_closure_wrapper5975 = function() { return logError(function (arg0, arg1, arg2) {
-    const ret = makeMutClosure(arg0, arg1, 1682, __wbg_adapter_60);
+imports.wbg.__wbindgen_closure_wrapper6000 = function() { return logError(function (arg0, arg1, arg2) {
+    const ret = makeMutClosure(arg0, arg1, 1707, __wbg_adapter_60);
     return addHeapObject(ret);
 }, arguments) };
-imports.wbg.__wbindgen_closure_wrapper5991 = function() { return logError(function (arg0, arg1, arg2) {
-    const ret = makeMutClosure(arg0, arg1, 1693, __wbg_adapter_63);
+imports.wbg.__wbindgen_closure_wrapper6020 = function() { return logError(function (arg0, arg1, arg2) {
+    const ret = makeMutClosure(arg0, arg1, 1718, __wbg_adapter_63);
     return addHeapObject(ret);
 }, arguments) };
-imports.wbg.__wbindgen_closure_wrapper6232 = function() { return logError(function (arg0, arg1, arg2) {
-    const ret = makeMutClosure(arg0, arg1, 1772, __wbg_adapter_66);
+imports.wbg.__wbindgen_closure_wrapper6265 = function() { return logError(function (arg0, arg1, arg2) {
+    const ret = makeMutClosure(arg0, arg1, 1797, __wbg_adapter_66);
     return addHeapObject(ret);
 }, arguments) };
 imports['./snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js'] = __wbg_star0;
diff --git a/assets/dioxus/docsite_bg.wasm b/assets/dioxus/docsite_bg.wasm
index c38be0ff2..c0fbd6d9f 100644
Binary files a/assets/dioxus/docsite_bg.wasm and b/assets/dioxus/docsite_bg.wasm differ
diff --git a/assets/dioxus/snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js b/assets/dioxus/snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js
index ae773e21c..539a1512d 100644
--- a/assets/dioxus/snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js
+++ b/assets/dioxus/snippets/dioxus-interpreter-js-603636eeca72cf05/inline0.js
@@ -163,7 +163,19 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
       function truthy(val) {
         return val === "true" || val === true;
       }
-    let u32buf,u32bufp;let s = "";let lsp,sp,sl; let c = new TextDecoder();const evt = [];
+    const ns_cache = [];
+                    let ns_cache_tmp1, ns_cache_tmp2;
+                    function get_ns_cache() {
+                        ns_cache_tmp2 = u8buf[u8bufp++];
+                        if(ns_cache_tmp2 & 128){
+                            ns_cache_tmp1=s.substring(sp,sp+=u8buf[u8bufp++]);
+                            ns_cache[ns_cache_tmp2&4294967167]=ns_cache_tmp1;
+                            return ns_cache_tmp1;
+                        }
+                        else{
+                            return ns_cache[ns_cache_tmp2&4294967167];
+                        }
+                    }let s = "";let lsp,sp,sl; let c = new TextDecoder();let u32buf,u32bufp;let u8buf,u8bufp;const evt = [];
                     let evt_tmp1, evt_tmp2;
                     function get_evt() {
                         evt_tmp2 = u8buf[u8bufp++];
@@ -175,7 +187,7 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
                         else{
                             return evt[evt_tmp2&4294967167];
                         }
-                    }let u8buf,u8bufp;const attr = [];
+                    }const attr = [];
                     let attr_tmp1, attr_tmp2;
                     function get_attr() {
                         attr_tmp2 = u8buf[u8bufp++];
@@ -187,20 +199,8 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
                         else{
                             return attr[attr_tmp2&4294967167];
                         }
-                    }const ns_cache = [];
-                    let ns_cache_tmp1, ns_cache_tmp2;
-                    function get_ns_cache() {
-                        ns_cache_tmp2 = u8buf[u8bufp++];
-                        if(ns_cache_tmp2 & 128){
-                            ns_cache_tmp1=s.substring(sp,sp+=u8buf[u8bufp++]);
-                            ns_cache[ns_cache_tmp2&4294967167]=ns_cache_tmp1;
-                            return ns_cache_tmp1;
-                        }
-                        else{
-                            return ns_cache[ns_cache_tmp2&4294967167];
-                        }
                     }
-            let id,field,ns,bubbles,len,value,event_name,ptr;
+            let id,ns,event_name,ptr,len,field,value,bubbles;
             export function create(r){
                 d=r;
             }
@@ -213,10 +213,7 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
                     ls=m.getUint32(d+12*4,true);
                 }
                 p=ls;
-                if ((metaflags>>>3)&1){
-                u32buf=new Uint32Array(m.buffer,m.getUint32(d+3*4,true))
-            }
-            u32bufp=0;if (metaflags&1){
+                if (metaflags&1){
                 lsp = m.getUint32(d+1*4,true);
             }
             if ((metaflags>>>2)&1) {
@@ -242,7 +239,10 @@ let m,p,ls,d,t,op,i,e,z,metaflags;
                     s = c.decode(new DataView(m.buffer, lsp, sl));
                 }
             }
-            sp=0;if ((metaflags>>>5)&1){
+            sp=0;if ((metaflags>>>3)&1){
+                u32buf=new Uint32Array(m.buffer,m.getUint32(d+3*4,true))
+            }
+            u32bufp=0;if ((metaflags>>>5)&1){
                 u8buf=new Uint8Array(m.buffer,m.getUint32(d+5*4,true))
             }
             u8bufp=0;
diff --git a/learn/0.4/CLI/configure/index.html b/learn/0.4/CLI/configure/index.html
index c29a10ab6..0f14b03de 100644
--- a/learn/0.4/CLI/configure/index.html
+++ b/learn/0.4/CLI/configure/index.html
@@ -253,7 +253,7 @@
 </span><span style="color:#c0c5ce;">[[web.proxy]]
 </span><span style="color:#c0c5ce;">backend = &quot;</span><span style="color:#a3be8c;">http://localhost:8000/api/</span><span style="color:#c0c5ce;">&quot;
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=configure-project#configure-project"><!--#-->Configure Project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=structure#structure"><!--#-->Structure<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=application-🔒#application-🔒"><!--#-->Application 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.app-🔒#web.app-🔒"><!--#-->Web.App 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.watcher-🔒#web.watcher-🔒"><!--#-->Web.Watcher 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.resource-🔒#web.resource-🔒"><!--#-->Web.Resource 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.resource.dev-🔒#web.resource.dev-🔒"><!--#-->Web.Resource.Dev 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.proxy#web.proxy"><!--#-->Web.Proxy<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=config-example#config-example"><!--#-->Config example<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=configure-project#configure-project"><!--#-->Configure Project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=structure#structure"><!--#-->Structure<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=application-🔒#application-🔒"><!--#-->Application 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.app-🔒#web.app-🔒"><!--#-->Web.App 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.watcher-🔒#web.watcher-🔒"><!--#-->Web.Watcher 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.resource-🔒#web.resource-🔒"><!--#-->Web.Resource 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.resource.dev-🔒#web.resource.dev-🔒"><!--#-->Web.Resource.Dev 🔒<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web.proxy#web.proxy"><!--#-->Web.Proxy<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=config-example#config-example"><!--#-->Config example<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/CLI/creating/index.html b/learn/0.4/CLI/creating/index.html
index 074da2555..a90fc8c91 100644
--- a/learn/0.4/CLI/creating/index.html
+++ b/learn/0.4/CLI/creating/index.html
@@ -139,7 +139,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div></blockquote><p>Next, navigate into your new project using <code>cd project-name</code>, or simply opening it in an IDE.</p><blockquote><p>Make sure the WASM target is installed before running the projects.You can install the WASM target for rust using rustup:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">rustup target add wasm32-unknown-unknown
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div></blockquote><p>Finally, serve your project with <code>dx serve</code>!The CLI will tell you the address it is serving on, along with additional info such as code warnings.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=create-a-project#create-a-project"><!--#-->Create a Project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=initializing-a-project#initializing-a-project"><!--#-->Initializing a project<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div></blockquote><p>Finally, serve your project with <code>dx serve</code>!The CLI will tell you the address it is serving on, along with additional info such as code warnings.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=create-a-project#create-a-project"><!--#-->Create a Project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=initializing-a-project#initializing-a-project"><!--#-->Initializing a project<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/CLI/index.html b/learn/0.4/CLI/index.html
index 0dbf42218..9ef4915d4 100644
--- a/learn/0.4/CLI/index.html
+++ b/learn/0.4/CLI/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="introduction"><a class="header" href="#introduction">Introduction</a></h1><p>The ✨<strong>Dioxus CLI</strong>✨ is a tool to get Dioxus projects off the ground.</p><p>There&#x27;s no documentation for commands here,but you can see all commands using dx --help once you&#x27;ve installed the CLI!Furthermore, you can run dx &lt;command&gt; --help to get help with a specific command.</p><h2 id="features"><a class="header" href="#features">Features</a></h2><ul><li>Build and pack a Dioxus project.</li><li>Format rsx code.</li><li>Hot Reload for web platform.</li><li>Create a Dioxus project from a template repository.</li><li>And more!</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=introduction#introduction"><!--#-->Introduction<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=features#features"><!--#-->Features<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="introduction"><a class="header" href="#introduction">Introduction</a></h1><p>The ✨<strong>Dioxus CLI</strong>✨ is a tool to get Dioxus projects off the ground.</p><p>There&#x27;s no documentation for commands here,but you can see all commands using dx --help once you&#x27;ve installed the CLI!Furthermore, you can run dx &lt;command&gt; --help to get help with a specific command.</p><h2 id="features"><a class="header" href="#features">Features</a></h2><ul><li>Build and pack a Dioxus project.</li><li>Format rsx code.</li><li>Hot Reload for web platform.</li><li>Create a Dioxus project from a template repository.</li><li>And more!</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=introduction#introduction"><!--#-->Introduction<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=features#features"><!--#-->Features<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/CLI/installation/index.html b/learn/0.4/CLI/installation/index.html
index 16a19844d..3ab0c0d05 100644
--- a/learn/0.4/CLI/installation/index.html
+++ b/learn/0.4/CLI/installation/index.html
@@ -139,7 +139,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="install-the-latest-development-build-through-git"><a class="header" href="#install-the-latest-development-build-through-git">Install the latest development build through git</a></h2><p>To get the latest bug fixes and features, you can install the development version from git.However, this is not fully tested.That means you&#x27;re probably going to have more bugs despite having the latest bug fixes.</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">cargo install --git https:</span><span style="color:#65737e;">//github.com/DioxusLabs/dioxus dioxus-cli
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>This will download the CLI from the master branch,and install it in Cargo&#x27;s global binary directory (~/.cargo/bin/ by default).</p><p>Run <code>dx --help</code> for a list of all the available commands.Furthermore, you can run dx &lt;command&gt; --help to get help with a specific command.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=installation#installation"><!--#-->Installation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=install-the-stable-version-(recommended)#install-the-stable-version-(recommended)"><!--#-->Install the stable version (recommended)<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=install-the-latest-development-build-through-git#install-the-latest-development-build-through-git"><!--#-->Install the latest development build through git<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>This will download the CLI from the master branch,and install it in Cargo&#x27;s global binary directory (~/.cargo/bin/ by default).</p><p>Run <code>dx --help</code> for a list of all the available commands.Furthermore, you can run dx &lt;command&gt; --help to get help with a specific command.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=installation#installation"><!--#-->Installation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=install-the-stable-version-(recommended)#install-the-stable-version-(recommended)"><!--#-->Install the stable version (recommended)<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=install-the-latest-development-build-through-git#install-the-latest-development-build-through-git"><!--#-->Install the latest development build through git<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/contributing/guiding_principles/index.html b/learn/0.4/contributing/guiding_principles/index.html
index 6dec826e6..715ec0875 100644
--- a/learn/0.4/contributing/guiding_principles/index.html
+++ b/learn/0.4/contributing/guiding_principles/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="overall-goals"><a class="header" href="#overall-goals">Overall Goals</a></h1><p>This document outlines some of the overall goals for Dioxus. These goals are not set in stone, but they represent general guidelines for the project.</p><p>The goal of Dioxus is to make it easy to build <strong>cross-platform applications that scale</strong>.</p><h2 id="cross-platform"><a class="header" href="#cross-platform">Cross-Platform</a></h2><p>Dioxus is designed to be cross-platform by default. This means that it should be easy to build applications that run on the web, desktop, and mobile. However, Dioxus should also be flexible enough to allow users to opt into platform-specific features when needed. The <code>use_eval</code> is one example of this. By default, Dioxus does not assume that the platform supports JavaScript, but it does provide a hook that allows users to opt into JavaScript when needed.</p><h2 id="performance"><a class="header" href="#performance">Performance</a></h2><p>As Dioxus applications grow, they should remain relatively performant without the need for manual optimizations. There will be cases where manual optimizations are needed, but Dioxus should try to make these cases as rare as possible.</p><p>One of the benefits of the core architecture of Dioxus is that it delivers reasonable performance even when components are rerendered often. It is based on a Virtual Dom which performs diffing which should prevent unnecessary re-renders even when large parts of the component tree are rerun. On top of this, Dioxus groups static parts of the RSX tree together to skip diffing them entirely.</p><h2 id="type-safety"><a class="header" href="#type-safety">Type Safety</a></h2><p>As teams grow, the Type safety of Rust is a huge advantage. Dioxus should leverage this advantage to make it easy to build applications with large teams.</p><p>To take full advantage of Rust&#x27;s type system, Dioxus should try to avoid exposing public <code>Any</code> types and string-ly typed APIs where possible.</p><h2 id="developer-experience"><a class="header" href="#developer-experience">Developer Experience</a></h2><p>Dioxus should be easy to learn and ergonomic to use.</p><ul><li><p>The API of Dioxus attempts to remain close to React&#x27;s API where possible. This makes it easier for people to learn Dioxus if they already know React</p></li><li><p>We can avoid the tradeoff between simplicity and flexibility by providing multiple layers of API: One for the very common use case, one for low-level control</p><ul><li>Hooks: the hooks crate has the most common use cases, but cx.hook provides a way to access the underlying persistent reference if needed.</li><li>The builder pattern in platform Configs: The builder pattern is used to default to the most common use case, but users can change the defaults if needed.</li></ul></li><li><p>Documentation:</p><ul><li>All public APIs should have rust documentation</li><li>Examples should be provided for all public features. These examples both serve as documentation and testing. They are checked by CI to ensure that they continue to compile</li><li>The most common workflows should be documented in the guide</li></ul></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=overall-goals#overall-goals"><!--#-->Overall Goals<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=cross-platform#cross-platform"><!--#-->Cross-Platform<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=performance#performance"><!--#-->Performance<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=type-safety#type-safety"><!--#-->Type Safety<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=developer-experience#developer-experience"><!--#-->Developer Experience<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="overall-goals"><a class="header" href="#overall-goals">Overall Goals</a></h1><p>This document outlines some of the overall goals for Dioxus. These goals are not set in stone, but they represent general guidelines for the project.</p><p>The goal of Dioxus is to make it easy to build <strong>cross-platform applications that scale</strong>.</p><h2 id="cross-platform"><a class="header" href="#cross-platform">Cross-Platform</a></h2><p>Dioxus is designed to be cross-platform by default. This means that it should be easy to build applications that run on the web, desktop, and mobile. However, Dioxus should also be flexible enough to allow users to opt into platform-specific features when needed. The <code>use_eval</code> is one example of this. By default, Dioxus does not assume that the platform supports JavaScript, but it does provide a hook that allows users to opt into JavaScript when needed.</p><h2 id="performance"><a class="header" href="#performance">Performance</a></h2><p>As Dioxus applications grow, they should remain relatively performant without the need for manual optimizations. There will be cases where manual optimizations are needed, but Dioxus should try to make these cases as rare as possible.</p><p>One of the benefits of the core architecture of Dioxus is that it delivers reasonable performance even when components are rerendered often. It is based on a Virtual Dom which performs diffing which should prevent unnecessary re-renders even when large parts of the component tree are rerun. On top of this, Dioxus groups static parts of the RSX tree together to skip diffing them entirely.</p><h2 id="type-safety"><a class="header" href="#type-safety">Type Safety</a></h2><p>As teams grow, the Type safety of Rust is a huge advantage. Dioxus should leverage this advantage to make it easy to build applications with large teams.</p><p>To take full advantage of Rust&#x27;s type system, Dioxus should try to avoid exposing public <code>Any</code> types and string-ly typed APIs where possible.</p><h2 id="developer-experience"><a class="header" href="#developer-experience">Developer Experience</a></h2><p>Dioxus should be easy to learn and ergonomic to use.</p><ul><li><p>The API of Dioxus attempts to remain close to React&#x27;s API where possible. This makes it easier for people to learn Dioxus if they already know React</p></li><li><p>We can avoid the tradeoff between simplicity and flexibility by providing multiple layers of API: One for the very common use case, one for low-level control</p><ul><li>Hooks: the hooks crate has the most common use cases, but cx.hook provides a way to access the underlying persistent reference if needed.</li><li>The builder pattern in platform Configs: The builder pattern is used to default to the most common use case, but users can change the defaults if needed.</li></ul></li><li><p>Documentation:</p><ul><li>All public APIs should have rust documentation</li><li>Examples should be provided for all public features. These examples both serve as documentation and testing. They are checked by CI to ensure that they continue to compile</li><li>The most common workflows should be documented in the guide</li></ul></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=overall-goals#overall-goals"><!--#-->Overall Goals<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=cross-platform#cross-platform"><!--#-->Cross-Platform<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=performance#performance"><!--#-->Performance<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=type-safety#type-safety"><!--#-->Type Safety<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=developer-experience#developer-experience"><!--#-->Developer Experience<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/contributing/index.html b/learn/0.4/contributing/index.html
index dcc40ffd2..861cd944c 100644
--- a/learn/0.4/contributing/index.html
+++ b/learn/0.4/contributing/index.html
@@ -146,7 +146,7 @@
 <span style="color:#c0c5ce;">cargo miri test --package dioxus-core --test miri_stress
 </span><span style="color:#c0c5ce;">cargo miri test --package dioxus-native-core --test miri_native
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ul><li><a href="https://rust-analyzer.github.io/">Rust analyzer</a> can be very helpful for quick feedback in your IDE.</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=contributing#contributing"><!--#-->Contributing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=improving-docs#improving-docs"><!--#-->Improving Docs<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=working-on-the-ecosystem#working-on-the-ecosystem"><!--#-->Working on the Ecosystem<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=bugs-&-features#bugs-&-features"><!--#-->Bugs &amp; Features<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=tools#tools"><!--#-->Tools<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ul><li><a href="https://rust-analyzer.github.io/">Rust analyzer</a> can be very helpful for quick feedback in your IDE.</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=contributing#contributing"><!--#-->Contributing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=improving-docs#improving-docs"><!--#-->Improving Docs<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=working-on-the-ecosystem#working-on-the-ecosystem"><!--#-->Working on the Ecosystem<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=bugs-&-features#bugs-&-features"><!--#-->Bugs &amp; Features<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=tools#tools"><!--#-->Tools<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/contributing/project_structure/index.html b/learn/0.4/contributing/project_structure/index.html
index a2925bfce..13b128d90 100644
--- a/learn/0.4/contributing/project_structure/index.html
+++ b/learn/0.4/contributing/project_structure/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="project-structure"><a class="header" href="#project-structure">Project Structure</a></h1><p>There are many packages in the Dioxus organization. This document will help you understand the purpose of each package and how they fit together.</p><h2 id="renderers"><a class="header" href="#renderers">Renderers</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/desktop">Desktop</a>: A Render that Runs Dioxus applications natively, but renders them with the system webview</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/mobile">Mobile</a>: A Render that Runs Dioxus applications natively, but renders them with the system webview. This is currently a copy of the desktop render</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/Web">Web</a>: Renders Dioxus applications in the browser by compiling to WASM and manipulating the DOM</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/liveview">Liveview</a>: A Render that Runs on the server, and renders using a websocket proxy in the browser</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/rink">Rink</a>: A Renderer that renders a HTML-like tree into a terminal</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/dioxus-tui">TUI</a>: A Renderer that uses Rink to render a Dioxus application in a terminal</li><li><a href="https://github.com/DioxusLabs/blitz/tree/master/blitz-core">Blitz-Core</a>: An experimental native renderer that renders a HTML-like tree using WGPU.</li><li><a href="https://github.com/DioxusLabs/blitz">Blitz</a>: An experimental native renderer that uses Blitz-Core to render a Dioxus application using WGPU.</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/ssr">SSR</a>: A Render that Runs Dioxus applications on the server, and renders them to HTML</li></ul><h2 id="state-managementhooks"><a class="header" href="#state-managementhooks">State Management/Hooks</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/hooks">Hooks</a>: A collection of common hooks for Dioxus applications</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/signals">Signals</a>: A experimental state management library for Dioxus applications. This currently contains a Copy version of UseRef</li><li><a href="https://github.com/DioxusLabs/dioxus-std">Dioxus STD</a>: A collection of platform agnostic hooks to interact with system interfaces (The clipboard, camera, etc.).</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/fermi">Fermi</a>: A global state management library for Dioxus applications.<a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/router">Router</a>: A client-side router for Dioxus applications</li></ul><h2 id="core-utilities"><a class="header" href="#core-utilities">Core utilities</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/core">core</a>: The core virtual dom implementation every Dioxus application uses<ul><li>You can read more about the architecture of the core <a href="https://dioxuslabs.com/blog/templates-diffing/">in this blog post</a> and the <a href="../custom_renderer">custom renderer section of the guide</a></li></ul></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/RSX">RSX</a>: The core parsing for RSX used for hot reloading, autoformatting, and the macro</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/core-macro">core-macro</a>: The rsx! macro used to write Dioxus applications. (This is a wrapper over the RSX crate)</li><li><a href="https://github.com/DioxusLabs/dioxus-html-macro">HTML macro</a>: A html-like alternative to the RSX macro</li></ul><h2 id="native-renderer-utilities"><a class="header" href="#native-renderer-utilities">Native Renderer Utilities</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/native-core">native-core</a>: Incrementally computed tree of states (mostly styles)<ul><li>You can read more about how native-core can help you build native renderers in the <a href="../custom_renderer/index.html#native-core">custom renderer section of the guide</a></li></ul></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/native-core-macro">native-core-macro</a>: A helper macro for native core</li><li><a href="https://github.com/DioxusLabs/taffy">Taffy</a>: Layout engine powering Blitz-Core, Rink, and Bevy UI</li></ul><h2 id="web-renderer-tooling"><a class="header" href="#web-renderer-tooling">Web renderer tooling</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/html">HTML</a>: defines html specific elements, events, and attributes</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/interpreter">Interpreter</a>: defines browser bindings used by the web and desktop renderers</li></ul><h2 id="developer-tooling"><a class="header" href="#developer-tooling">Developer tooling</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/hot-reload">hot-reload</a>: Macro that uses the RSX crate to hot reload static parts of any rsx! macro. This macro works with any non-web renderer with an <a href="https://crates.io/crates/dioxus-hot-reload">integration</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/autofmt">autofmt</a>: Formats RSX code</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/RSX-rosetta">rsx-rosetta</a>: Handles conversion between HTML and RSX</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">CLI</a>: A Command Line Interface and VSCode extension to assist with Dioxus usage</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=project-structure#project-structure"><!--#-->Project Structure<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=renderers#renderers"><!--#-->Renderers<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=state-management/hooks#state-management/hooks"><!--#-->State Management/Hooks<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=core-utilities#core-utilities"><!--#-->Core utilities<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=native-renderer-utilities#native-renderer-utilities"><!--#-->Native Renderer Utilities<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=web-renderer-tooling#web-renderer-tooling"><!--#-->Web renderer tooling<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=developer-tooling#developer-tooling"><!--#-->Developer tooling<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="project-structure"><a class="header" href="#project-structure">Project Structure</a></h1><p>There are many packages in the Dioxus organization. This document will help you understand the purpose of each package and how they fit together.</p><h2 id="renderers"><a class="header" href="#renderers">Renderers</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/desktop">Desktop</a>: A Render that Runs Dioxus applications natively, but renders them with the system webview</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/mobile">Mobile</a>: A Render that Runs Dioxus applications natively, but renders them with the system webview. This is currently a copy of the desktop render</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/Web">Web</a>: Renders Dioxus applications in the browser by compiling to WASM and manipulating the DOM</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/liveview">Liveview</a>: A Render that Runs on the server, and renders using a websocket proxy in the browser</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/rink">Rink</a>: A Renderer that renders a HTML-like tree into a terminal</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/dioxus-tui">TUI</a>: A Renderer that uses Rink to render a Dioxus application in a terminal</li><li><a href="https://github.com/DioxusLabs/blitz/tree/master/blitz-core">Blitz-Core</a>: An experimental native renderer that renders a HTML-like tree using WGPU.</li><li><a href="https://github.com/DioxusLabs/blitz">Blitz</a>: An experimental native renderer that uses Blitz-Core to render a Dioxus application using WGPU.</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/ssr">SSR</a>: A Render that Runs Dioxus applications on the server, and renders them to HTML</li></ul><h2 id="state-managementhooks"><a class="header" href="#state-managementhooks">State Management/Hooks</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/hooks">Hooks</a>: A collection of common hooks for Dioxus applications</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/signals">Signals</a>: A experimental state management library for Dioxus applications. This currently contains a Copy version of UseRef</li><li><a href="https://github.com/DioxusLabs/dioxus-std">Dioxus STD</a>: A collection of platform agnostic hooks to interact with system interfaces (The clipboard, camera, etc.).</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/fermi">Fermi</a>: A global state management library for Dioxus applications.<a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/router">Router</a>: A client-side router for Dioxus applications</li></ul><h2 id="core-utilities"><a class="header" href="#core-utilities">Core utilities</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/core">core</a>: The core virtual dom implementation every Dioxus application uses<ul><li>You can read more about the architecture of the core <a href="https://dioxuslabs.com/blog/templates-diffing/">in this blog post</a> and the <a href="../custom_renderer">custom renderer section of the guide</a></li></ul></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/RSX">RSX</a>: The core parsing for RSX used for hot reloading, autoformatting, and the macro</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/core-macro">core-macro</a>: The rsx! macro used to write Dioxus applications. (This is a wrapper over the RSX crate)</li><li><a href="https://github.com/DioxusLabs/dioxus-html-macro">HTML macro</a>: A html-like alternative to the RSX macro</li></ul><h2 id="native-renderer-utilities"><a class="header" href="#native-renderer-utilities">Native Renderer Utilities</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/native-core">native-core</a>: Incrementally computed tree of states (mostly styles)<ul><li>You can read more about how native-core can help you build native renderers in the <a href="../custom_renderer/index.html#native-core">custom renderer section of the guide</a></li></ul></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/native-core-macro">native-core-macro</a>: A helper macro for native core</li><li><a href="https://github.com/DioxusLabs/taffy">Taffy</a>: Layout engine powering Blitz-Core, Rink, and Bevy UI</li></ul><h2 id="web-renderer-tooling"><a class="header" href="#web-renderer-tooling">Web renderer tooling</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/html">HTML</a>: defines html specific elements, events, and attributes</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/interpreter">Interpreter</a>: defines browser bindings used by the web and desktop renderers</li></ul><h2 id="developer-tooling"><a class="header" href="#developer-tooling">Developer tooling</a></h2><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/hot-reload">hot-reload</a>: Macro that uses the RSX crate to hot reload static parts of any rsx! macro. This macro works with any non-web renderer with an <a href="https://crates.io/crates/dioxus-hot-reload">integration</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/autofmt">autofmt</a>: Formats RSX code</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/RSX-rosetta">rsx-rosetta</a>: Handles conversion between HTML and RSX</li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">CLI</a>: A Command Line Interface and VSCode extension to assist with Dioxus usage</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=project-structure#project-structure"><!--#-->Project Structure<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=renderers#renderers"><!--#-->Renderers<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=state-management/hooks#state-management/hooks"><!--#-->State Management/Hooks<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=core-utilities#core-utilities"><!--#-->Core utilities<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=native-renderer-utilities#native-renderer-utilities"><!--#-->Native Renderer Utilities<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=web-renderer-tooling#web-renderer-tooling"><!--#-->Web renderer tooling<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=developer-tooling#developer-tooling"><!--#-->Developer tooling<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/contributing/roadmap/index.html b/learn/0.4/contributing/roadmap/index.html
index 13d8ebff5..2c5a3dfd5 100644
--- a/learn/0.4/contributing/roadmap/index.html
+++ b/learn/0.4/contributing/roadmap/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="roadmap--feature-set"><a class="header" href="#roadmap--feature-set">Roadmap &amp; Feature-set</a></h1><p>This feature set and roadmap can help you decide if what Dioxus can do today works for you.</p><p>If a feature that you need doesn&#x27;t exist or you want to contribute to projects on the roadmap, feel free to get involved by <a href="https://discord.gg/XgGxMSkvUM">joining the discord</a>.</p><p>Generally, here&#x27;s the status of each platform:</p><ul><li><p><strong>Web</strong>: Dioxus is a great choice for pure web-apps – especially for CRUD/complex apps. However, it does lack the ecosystem of React, so you might be missing a component library or some useful hook.</p></li><li><p><strong>SSR</strong>: Dioxus is a great choice for pre-rendering, hydration, and rendering HTML on a web endpoint. Be warned – the VirtualDom is not (currently) Send + Sync.</p></li><li><p><strong>Desktop</strong>: You can build very competent single-window desktop apps right now. However, multi-window apps require support from Dioxus core and are not ready.</p></li><li><p><strong>Mobile</strong>: Mobile support is very young. You&#x27;ll be figuring things out as you go and there are not many support crates for peripherals.</p></li><li><p><strong>LiveView</strong>: LiveView support is very young. You&#x27;ll be figuring things out as you go. Thankfully, none of it is too hard and any work can be upstreamed into Dioxus.</p></li></ul><h2 id="features"><a class="header" href="#features">Features</a></h2><hr/><table><thead><th>Feature</th><th>Status</th><th>Description</th></thead><tr><th>Conditional Rendering</th><th>x</th><th>if/then to hide/show component</th></tr><tr><th>Map, Iterator</th><th>x</th><th>map/filter/reduce to produce rsx!</th></tr><tr><th>Keyed Components</th><th>x</th><th>advanced diffing with keys</th></tr><tr><th>Web</th><th>x</th><th>renderer for web browser</th></tr><tr><th>Desktop (webview)</th><th>x</th><th>renderer for desktop</th></tr><tr><th>Shared State (Context)</th><th>x</th><th>share state through the tree</th></tr><tr><th>Hooks</th><th>x</th><th>memory cells in components</th></tr><tr><th>SSR</th><th>x</th><th>render directly to string</th></tr><tr><th>Component Children</th><th>x</th><th>cx.children() as a list of nodes</th></tr><tr><th>Headless components</th><th>x</th><th>components that don&#x27;t return real elements</th></tr><tr><th>Fragments</th><th>x</th><th>multiple elements without a real root</th></tr><tr><th>Manual Props</th><th>x</th><th>Manually pass in props with spread syntax</th></tr><tr><th>Controlled Inputs</th><th>x</th><th>stateful wrappers around inputs</th></tr><tr><th>CSS/Inline Styles</th><th>x</th><th>syntax for inline styles/attribute groups</th></tr><tr><th>Custom elements</th><th>x</th><th>Define new element primitives</th></tr><tr><th>Suspense</th><th>x</th><th>schedule future render from future/promise</th></tr><tr><th>Integrated error handling</th><th>x</th><th>Gracefully handle errors with ? syntax</th></tr><tr><th>NodeRef</th><th>x</th><th>gain direct access to nodes</th></tr><tr><th>Re-hydration</th><th>x</th><th>Pre-render to HTML to speed up first contentful paint</th></tr><tr><th>Jank-Free Rendering</th><th>x</th><th>Large diffs are segmented across frames for silky-smooth transitions</th></tr><tr><th>Effects</th><th>x</th><th>Run effects after a component has been committed to render</th></tr><tr><th>Portals</th><th>*</th><th>Render nodes outside of the traditional tree structure</th></tr><tr><th>Cooperative Scheduling</th><th>*</th><th>Prioritize important events over non-important events</th></tr><tr><th>Server Components</th><th>*</th><th>Hybrid components for SPA and Server</th></tr><tr><th>Bundle Splitting</th><th>i</th><th>Efficiently and asynchronously load the app</th></tr><tr><th>Lazy Components</th><th>i</th><th>Dynamically load the new components as the page is loaded</th></tr><tr><th>1st class global state</th><th>x</th><th>redux/recoil/mobx on top of context</th></tr><tr><th>Runs natively</th><th>x</th><th>runs as a portable binary w/o a runtime (Node)</th></tr><tr><th>Subtree Memoization</th><th>x</th><th>skip diffing static element subtrees</th></tr><tr><th>High-efficiency templates</th><th>x</th><th>rsx! calls are translated to templates on the DOM&#x27;s side</th></tr><tr><th>Compile-time correct</th><th>x</th><th>Throw errors on invalid template layouts</th></tr><tr><th>Heuristic Engine</th><th>x</th><th>track component memory usage to minimize future allocations</th></tr><tr><th>Fine-grained reactivity</th><th>i</th><th>Skip diffing for fine-grain updates</th></tr></table><ul><li>x = implemented and working</li><li><ul><li>= actively being worked on</li></ul></li><li>i = not yet implemented or being worked on</li></ul><h2 id="roadmap"><a class="header" href="#roadmap">Roadmap</a></h2><p>These Features are planned for the future of Dioxus:</p><h3 id="core"><a class="header" href="#core">Core</a></h3><ul><li>[x] Release of Dioxus Core</li><li>[x] Upgrade documentation to include more theory and be more comprehensive</li><li>[x] Support for HTML-side templates for lightning-fast dom manipulation</li><li>[ ] Support for multiple renderers for same virtualdom (subtrees)</li><li>[ ] Support for ThreadSafe (Send + Sync)</li><li>[ ] Support for Portals</li></ul><h3 id="ssr"><a class="header" href="#ssr">SSR</a></h3><ul><li>[x] SSR Support + Hydration</li><li>[ ] Integrated suspense support for SSR</li></ul><h3 id="desktop"><a class="header" href="#desktop">Desktop</a></h3><ul><li>[ ] Declarative window management</li><li>[ ] Templates for building/bundling</li><li>[ ] Access to Canvas/WebGL context natively</li></ul><h3 id="mobile"><a class="header" href="#mobile">Mobile</a></h3><ul><li>[ ] Mobile standard library<ul><li>[ ] GPS</li><li>[ ] Camera</li><li>[ ] filesystem</li><li>[ ] Biometrics</li><li>[ ] WiFi</li><li>[ ] Bluetooth</li><li>[ ] Notifications</li><li>[ ] Clipboard</li></ul></li><li>[ ] Animations</li></ul><h3 id="bundling-cli"><a class="header" href="#bundling-cli">Bundling (CLI)</a></h3><ul><li>[x] Translation from HTML into RSX</li><li>[x] Dev server</li><li>[x] Live reload</li><li>[x] Translation from JSX into RSX</li><li>[ ] Hot module replacement</li><li>[ ] Code splitting</li><li>[ ] Asset macros</li><li>[ ] Css pipeline</li><li>[ ] Image pipeline</li></ul><h3 id="essential-hooks"><a class="header" href="#essential-hooks">Essential hooks</a></h3><ul><li>[x] Router</li><li>[x] Global state management</li><li>[ ] Resize observer</li></ul><h2 id="work-in-progress"><a class="header" href="#work-in-progress">Work in Progress</a></h2><h3 id="build-tool"><a class="header" href="#build-tool">Build Tool</a></h3><p>We are currently working on our own build tool called <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">Dioxus CLI</a> which will support:</p><ul><li>an interactive TUI</li><li>on-the-fly reconfiguration</li><li>hot CSS reloading</li><li>two-way data binding between browser and source code</li><li>an interpreter for rsx!</li><li>ability to publish to github/netlify/vercel</li><li>bundling for iOS/Desktop/etc</li></ul><h3 id="server-component-support"><a class="header" href="#server-component-support">Server Component Support</a></h3><p>While not currently fully implemented, the expectation is that LiveView apps can be a hybrid between Wasm and server-rendered where only portions of a page are &quot;live&quot; and the rest of the page is either server-rendered, statically generated, or handled by the host SPA.</p><h3 id="native-rendering"><a class="header" href="#native-rendering">Native rendering</a></h3><p>We are currently working on a native renderer for Dioxus using WGPU called <a href="https://github.com/DioxusLabs/blitz/">Blitz</a>. This will allow you to build apps that are rendered natively for iOS, Android, and Desktop.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=roadmap-&-feature-set#roadmap-&-feature-set"><!--#-->Roadmap &amp; Feature-set<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=features#features"><!--#-->Features<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=roadmap#roadmap"><!--#-->Roadmap<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=core#core"><!--#-->Core<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=ssr#ssr"><!--#-->SSR<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=desktop#desktop"><!--#-->Desktop<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=mobile#mobile"><!--#-->Mobile<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=bundling-(cli)#bundling-(cli)"><!--#-->Bundling (CLI)<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=essential-hooks#essential-hooks"><!--#-->Essential hooks<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=work-in-progress#work-in-progress"><!--#-->Work in Progress<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=build-tool#build-tool"><!--#-->Build Tool<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=server-component-support#server-component-support"><!--#-->Server Component Support<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=native-rendering#native-rendering"><!--#-->Native rendering<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="roadmap--feature-set"><a class="header" href="#roadmap--feature-set">Roadmap &amp; Feature-set</a></h1><p>This feature set and roadmap can help you decide if what Dioxus can do today works for you.</p><p>If a feature that you need doesn&#x27;t exist or you want to contribute to projects on the roadmap, feel free to get involved by <a href="https://discord.gg/XgGxMSkvUM">joining the discord</a>.</p><p>Generally, here&#x27;s the status of each platform:</p><ul><li><p><strong>Web</strong>: Dioxus is a great choice for pure web-apps – especially for CRUD/complex apps. However, it does lack the ecosystem of React, so you might be missing a component library or some useful hook.</p></li><li><p><strong>SSR</strong>: Dioxus is a great choice for pre-rendering, hydration, and rendering HTML on a web endpoint. Be warned – the VirtualDom is not (currently) Send + Sync.</p></li><li><p><strong>Desktop</strong>: You can build very competent single-window desktop apps right now. However, multi-window apps require support from Dioxus core and are not ready.</p></li><li><p><strong>Mobile</strong>: Mobile support is very young. You&#x27;ll be figuring things out as you go and there are not many support crates for peripherals.</p></li><li><p><strong>LiveView</strong>: LiveView support is very young. You&#x27;ll be figuring things out as you go. Thankfully, none of it is too hard and any work can be upstreamed into Dioxus.</p></li></ul><h2 id="features"><a class="header" href="#features">Features</a></h2><hr/><table><thead><th>Feature</th><th>Status</th><th>Description</th></thead><tr><th>Conditional Rendering</th><th>x</th><th>if/then to hide/show component</th></tr><tr><th>Map, Iterator</th><th>x</th><th>map/filter/reduce to produce rsx!</th></tr><tr><th>Keyed Components</th><th>x</th><th>advanced diffing with keys</th></tr><tr><th>Web</th><th>x</th><th>renderer for web browser</th></tr><tr><th>Desktop (webview)</th><th>x</th><th>renderer for desktop</th></tr><tr><th>Shared State (Context)</th><th>x</th><th>share state through the tree</th></tr><tr><th>Hooks</th><th>x</th><th>memory cells in components</th></tr><tr><th>SSR</th><th>x</th><th>render directly to string</th></tr><tr><th>Component Children</th><th>x</th><th>cx.children() as a list of nodes</th></tr><tr><th>Headless components</th><th>x</th><th>components that don&#x27;t return real elements</th></tr><tr><th>Fragments</th><th>x</th><th>multiple elements without a real root</th></tr><tr><th>Manual Props</th><th>x</th><th>Manually pass in props with spread syntax</th></tr><tr><th>Controlled Inputs</th><th>x</th><th>stateful wrappers around inputs</th></tr><tr><th>CSS/Inline Styles</th><th>x</th><th>syntax for inline styles/attribute groups</th></tr><tr><th>Custom elements</th><th>x</th><th>Define new element primitives</th></tr><tr><th>Suspense</th><th>x</th><th>schedule future render from future/promise</th></tr><tr><th>Integrated error handling</th><th>x</th><th>Gracefully handle errors with ? syntax</th></tr><tr><th>NodeRef</th><th>x</th><th>gain direct access to nodes</th></tr><tr><th>Re-hydration</th><th>x</th><th>Pre-render to HTML to speed up first contentful paint</th></tr><tr><th>Jank-Free Rendering</th><th>x</th><th>Large diffs are segmented across frames for silky-smooth transitions</th></tr><tr><th>Effects</th><th>x</th><th>Run effects after a component has been committed to render</th></tr><tr><th>Portals</th><th>*</th><th>Render nodes outside of the traditional tree structure</th></tr><tr><th>Cooperative Scheduling</th><th>*</th><th>Prioritize important events over non-important events</th></tr><tr><th>Server Components</th><th>*</th><th>Hybrid components for SPA and Server</th></tr><tr><th>Bundle Splitting</th><th>i</th><th>Efficiently and asynchronously load the app</th></tr><tr><th>Lazy Components</th><th>i</th><th>Dynamically load the new components as the page is loaded</th></tr><tr><th>1st class global state</th><th>x</th><th>redux/recoil/mobx on top of context</th></tr><tr><th>Runs natively</th><th>x</th><th>runs as a portable binary w/o a runtime (Node)</th></tr><tr><th>Subtree Memoization</th><th>x</th><th>skip diffing static element subtrees</th></tr><tr><th>High-efficiency templates</th><th>x</th><th>rsx! calls are translated to templates on the DOM&#x27;s side</th></tr><tr><th>Compile-time correct</th><th>x</th><th>Throw errors on invalid template layouts</th></tr><tr><th>Heuristic Engine</th><th>x</th><th>track component memory usage to minimize future allocations</th></tr><tr><th>Fine-grained reactivity</th><th>i</th><th>Skip diffing for fine-grain updates</th></tr></table><ul><li>x = implemented and working</li><li><ul><li>= actively being worked on</li></ul></li><li>i = not yet implemented or being worked on</li></ul><h2 id="roadmap"><a class="header" href="#roadmap">Roadmap</a></h2><p>These Features are planned for the future of Dioxus:</p><h3 id="core"><a class="header" href="#core">Core</a></h3><ul><li>[x] Release of Dioxus Core</li><li>[x] Upgrade documentation to include more theory and be more comprehensive</li><li>[x] Support for HTML-side templates for lightning-fast dom manipulation</li><li>[ ] Support for multiple renderers for same virtualdom (subtrees)</li><li>[ ] Support for ThreadSafe (Send + Sync)</li><li>[ ] Support for Portals</li></ul><h3 id="ssr"><a class="header" href="#ssr">SSR</a></h3><ul><li>[x] SSR Support + Hydration</li><li>[ ] Integrated suspense support for SSR</li></ul><h3 id="desktop"><a class="header" href="#desktop">Desktop</a></h3><ul><li>[ ] Declarative window management</li><li>[ ] Templates for building/bundling</li><li>[ ] Access to Canvas/WebGL context natively</li></ul><h3 id="mobile"><a class="header" href="#mobile">Mobile</a></h3><ul><li>[ ] Mobile standard library<ul><li>[ ] GPS</li><li>[ ] Camera</li><li>[ ] filesystem</li><li>[ ] Biometrics</li><li>[ ] WiFi</li><li>[ ] Bluetooth</li><li>[ ] Notifications</li><li>[ ] Clipboard</li></ul></li><li>[ ] Animations</li></ul><h3 id="bundling-cli"><a class="header" href="#bundling-cli">Bundling (CLI)</a></h3><ul><li>[x] Translation from HTML into RSX</li><li>[x] Dev server</li><li>[x] Live reload</li><li>[x] Translation from JSX into RSX</li><li>[ ] Hot module replacement</li><li>[ ] Code splitting</li><li>[ ] Asset macros</li><li>[ ] Css pipeline</li><li>[ ] Image pipeline</li></ul><h3 id="essential-hooks"><a class="header" href="#essential-hooks">Essential hooks</a></h3><ul><li>[x] Router</li><li>[x] Global state management</li><li>[ ] Resize observer</li></ul><h2 id="work-in-progress"><a class="header" href="#work-in-progress">Work in Progress</a></h2><h3 id="build-tool"><a class="header" href="#build-tool">Build Tool</a></h3><p>We are currently working on our own build tool called <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">Dioxus CLI</a> which will support:</p><ul><li>an interactive TUI</li><li>on-the-fly reconfiguration</li><li>hot CSS reloading</li><li>two-way data binding between browser and source code</li><li>an interpreter for rsx!</li><li>ability to publish to github/netlify/vercel</li><li>bundling for iOS/Desktop/etc</li></ul><h3 id="server-component-support"><a class="header" href="#server-component-support">Server Component Support</a></h3><p>While not currently fully implemented, the expectation is that LiveView apps can be a hybrid between Wasm and server-rendered where only portions of a page are &quot;live&quot; and the rest of the page is either server-rendered, statically generated, or handled by the host SPA.</p><h3 id="native-rendering"><a class="header" href="#native-rendering">Native rendering</a></h3><p>We are currently working on a native renderer for Dioxus using WGPU called <a href="https://github.com/DioxusLabs/blitz/">Blitz</a>. This will allow you to build apps that are rendered natively for iOS, Android, and Desktop.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=roadmap-&-feature-set#roadmap-&-feature-set"><!--#-->Roadmap &amp; Feature-set<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=features#features"><!--#-->Features<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=roadmap#roadmap"><!--#-->Roadmap<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=core#core"><!--#-->Core<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=ssr#ssr"><!--#-->SSR<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=desktop#desktop"><!--#-->Desktop<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=mobile#mobile"><!--#-->Mobile<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=bundling-(cli)#bundling-(cli)"><!--#-->Bundling (CLI)<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=essential-hooks#essential-hooks"><!--#-->Essential hooks<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=work-in-progress#work-in-progress"><!--#-->Work in Progress<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=build-tool#build-tool"><!--#-->Build Tool<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=server-component-support#server-component-support"><!--#-->Server Component Support<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=native-rendering#native-rendering"><!--#-->Native rendering<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/contributing/walkthrough_readme/index.html b/learn/0.4/contributing/walkthrough_readme/index.html
index 0a965e8f9..8fd004429 100644
--- a/learn/0.4/contributing/walkthrough_readme/index.html
+++ b/learn/0.4/contributing/walkthrough_readme/index.html
@@ -277,7 +277,7 @@
 </span><span style="color:#c0c5ce;">    </span><span style="color:#b48ead;">pub</span><span style="color:#c0c5ce;">(crate) </span><span style="color:#bf616a;">mutations</span><span style="color:#c0c5ce;">: Mutations&lt;</span><span style="color:#b48ead;">&#39;static</span><span style="color:#c0c5ce;">&gt;,
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><blockquote><p>What is a <a href="https://docs.rs/slab/latest/slab/">slab</a>?</p><p>A slab acts like a hashmap with integer keys if you don&#x27;t care about the value of the keys. It is internally backed by a dense vector which makes it more efficient than a hashmap. When you insert a value into a slab, it returns an integer key that you can use to retrieve the value later.</p></blockquote><blockquote><p>How does Dioxus use slabs?</p><p>Dioxus uses &quot;synchronized slabs&quot; to communicate between the renderer and the VDOM. When a node is created in the Virtual DOM, an (elementId, mutation) pair is passed to the renderer to identify that node, which the renderer will then render in actual DOM. These ids are also used by the Virtual Dom to reference that node in future mutations, like setting an attribute on a node or removing a node. When the renderer sends an event to the Virtual Dom, it sends the ElementId of the node that the event was triggered on. The Virtual DOM uses this id to find that node in the slab and then run the necessary event handlers.</p></blockquote><p>The virtual DOM is a tree of scopes. A new <code>Scope</code> is created for every component when it is first rendered and recycled when the component is unmounted.</p><p>Scopes serve three main purposes:</p><ol><li>They store the state of hooks used by the component</li><li>They store the state for the context API (for example: using<a href="https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_shared_state_provider.html">use_shared_state_provider</a>).</li><li>They store the current and previous versions of the VNode that was rendered, so they can bediffed to generate the set of mutations needed to re-render it.</li></ol><h3 id="the-initial-render"><a class="header" href="#the-initial-render">The Initial Render</a></h3><p>The root scope is created and rebuilt:</p><ol><li>The root component is run</li><li>The root component returns a VNode</li><li>Mutations for this VNode are created and added to the mutation list (this may involve creating new child components)</li><li>The VNode is stored in the root&#x27;s Scope.</li></ol><p>After the root&#x27;s <code>Scope</code> is built, all generated mutations are sent to the renderer, which applies them to the DOM.</p><p>After the initial render, the root <code>Scope</code> looks like this:</p><p><a href="https://mermaid.live/edit#pako:eNqtVE1P4zAQ_SuzPrWikRpWXCLtBRDisItWsOxhCaqM7RKricdyJrQV8N93QtvQNCkfEnOynydv3nxkHoVCbUQipjnOVSYDwc_L1AFbWd3dB-kzuEQkuFLoDUwDFkCZAek9nGDh0RlHK__atA1GkUUHf45f0YbppAqB_aOzIAvz-t7-chN_Y-1bw1WSJKsglIu2w9tktWXxIIuHURT5XCqTYa5NmDguw2R8c5MKq2GcgF46WTB_jafi9rZL0yi5q4jQTSrf9altO4okCn1Ratwyz55Qxuku2ITlTMgs6HCQimsPmb3PvqVi-L5gjXP3QcnxWnL8JZLrwGvR31n0KV-Bx6-r-oVkT_-3G1S-NQLbk9i8rj7udP2cixed2QcDCitHJiQw7ub3EVlNecrPjudG2-6soFO5VbMECmR9T5OnlUY4-AFxfw9aTFst3McU9TK1Otm6NEn_DubBYlX2_dglLXOz48FgwJmJ5lZTlhz6xWgNaFnyDgpymcARHO0W2a9J_l5w2wYXvHuGPcqaQ-rESBQmFNJq3nCPNZoK3l4sUSR81DLMUpG6Z_aTFeHV0imRUKjMSFReSzKnVnKGhUimMi8ZNdoShl-rlfmyOUfCS_cPcePz_B_Wl4pc"><img src="https://mermaid.ink/img/pako:eNqtVE1P4zAQ_SuzPrWikRpWXCLtBRDisItWsOxhCaqM7RKricdyJrQV8N93QtvQNCkfEnOynydv3nxkHoVCbUQipjnOVSYDwc_L1AFbWd3dB-kzuEQkuFLoDUwDFkCZAek9nGDh0RlHK__atA1GkUUHf45f0YbppAqB_aOzIAvz-t7-chN_Y-1bw1WSJKsglIu2w9tktWXxIIuHURT5XCqTYa5NmDguw2R8c5MKq2GcgF46WTB_jafi9rZL0yi5q4jQTSrf9altO4okCn1Ratwyz55Qxuku2ITlTMgs6HCQimsPmb3PvqVi-L5gjXP3QcnxWnL8JZLrwGvR31n0KV-Bx6-r-oVkT_-3G1S-NQLbk9i8rj7udP2cixed2QcDCitHJiQw7ub3EVlNecrPjudG2-6soFO5VbMECmR9T5OnlUY4-AFxfw9aTFst3McU9TK1Otm6NEn_DubBYlX2_dglLXOz48FgwJmJ5lZTlhz6xWgNaFnyDgpymcARHO0W2a9J_l5w2wYXvHuGPcqaQ-rESBQmFNJq3nCPNZoK3l4sUSR81DLMUpG6Z_aTFeHV0imRUKjMSFReSzKnVnKGhUimMi8ZNdoShl-rlfmyOUfCS_cPcePz_B_Wl4pc?type=png" alt="" title=""/></a></p><h3 id="waiting-for-events"><a class="header" href="#waiting-for-events">Waiting for Events</a></h3><p>The Virtual DOM will only ever re-render a <code>Scope</code> if it is marked as dirty. Each hook is responsible for marking the <code>Scope</code> as dirty if the state has changed. Hooks can mark a scope as dirty by sending a message to the Virtual Dom&#x27;s channel. You can see the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/hooks">implementations</a> for the hooks dioxus includes by default on how this is done. Calling needs_update() on a hook will also cause it to mark its scope as dirty.</p><p>There are generally two ways a scope is marked as dirty:</p><ol><li>The renderer triggers an event: An event listener on this event may be called, which may mark acomponent as dirty, if processing the event resulted in any generated any mutations.</li><li>The renderer calls<a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.VirtualDom.html#method.wait_for_work"><code>wait_for_work</code></a>:This polls dioxus internal future queue. One of these futures may mark a component as dirty.</li></ol><p>Once at least one <code>Scope</code> is marked as dirty, the renderer can call <a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.VirtualDom.html#method.render_with_deadline"><code>render_with_deadline</code></a> to diff the dirty scopes.</p><h3 id="diffing-scopes"><a class="header" href="#diffing-scopes">Diffing Scopes</a></h3><p>When a user clicks the &quot;up high&quot; button, the root <code>Scope</code> will be marked as dirty by the <code>use_state</code> hook. The desktop renderer will then call <code>render_with_deadline</code>, which will diff the root <code>Scope</code>.</p><p>To start the diffing process, the component function is run. After the root component is run it, the root <code>Scope</code> will look like this:</p><p><a href="https://mermaid.live/edit#pako:eNrFVlFP2zAQ_iuen0BrpCaIl0i8AEJ72KQJtpcRFBnbJVYTn-U4tBXw33dpG5M2CetoBfdkny_ffb67fPIT5SAkjekkhxnPmHXk-3WiCVpZ3T9YZjJyDeDIDQcjycRCQVwmCTOGXEBhQEvtVvG1CWUldwo0-XX-6vVIF5W1GB9cWVbI1_PNL5v8jW3uPFbpmFOc2HK-GfA2WG1ZeJSFx0EQmJxxmUEupE01liEd394mVAkyjolYaFYgfu1P6N1dF8Yzua-cA51WphtTWzsLc872Zan9CnEGUkktuk6fFm_i5NxFRwn9bUimHrIvCT3-N2EBM70j5XBNOTwI5TrxmvQJkr7ELcHx67Jeggz0v92g8q0RaE-iP1193On6NyxecKUeJeFQaSdtTMLu_Xah5ctT_u94Nty2ZwU0zxWfxqQA5PecPq84kq9nfRw7SK0WDiEFZ4O37d34S_-08lFBVfb92KVb5HIrAp0WpjKYKeGyODLz0dohWIkaZNkiJqfkdLvIH6oRaTSoEmm0n06k0a5K0ZdpL61Io0Yt0nfpxc7UQ0_9cJrhyZ8syX-6brS706Mc489Vjja7fbWj3cxDqIdfJJqOaCFtwZTAV8hT7U0ovjBQRmiMS8HsNKGJfsE4Vjm4WWhOY2crOaKVEczJS8WwgAWNJywv0SuFcmB_rJ41y9fNiBqm_wA0MS9_AUuAiy0"><img src="https://mermaid.ink/img/pako:eNrFVlFP2zAQ_iuen0BrpCaIl0i8AEJ72KQJtpcRFBnbJVYTn-U4tBXw33dpG5M2CetoBfdkny_ffb67fPIT5SAkjekkhxnPmHXk-3WiCVpZ3T9YZjJyDeDIDQcjycRCQVwmCTOGXEBhQEvtVvG1CWUldwo0-XX-6vVIF5W1GB9cWVbI1_PNL5v8jW3uPFbpmFOc2HK-GfA2WG1ZeJSFx0EQmJxxmUEupE01liEd394mVAkyjolYaFYgfu1P6N1dF8Yzua-cA51WphtTWzsLc872Zan9CnEGUkktuk6fFm_i5NxFRwn9bUimHrIvCT3-N2EBM70j5XBNOTwI5TrxmvQJkr7ELcHx67Jeggz0v92g8q0RaE-iP1193On6NyxecKUeJeFQaSdtTMLu_Xah5ctT_u94Nty2ZwU0zxWfxqQA5PecPq84kq9nfRw7SK0WDiEFZ4O37d34S_-08lFBVfb92KVb5HIrAp0WpjKYKeGyODLz0dohWIkaZNkiJqfkdLvIH6oRaTSoEmm0n06k0a5K0ZdpL61Io0Yt0nfpxc7UQ0_9cJrhyZ8syX-6brS706Mc489Vjja7fbWj3cxDqIdfJJqOaCFtwZTAV8hT7U0ovjBQRmiMS8HsNKGJfsE4Vjm4WWhOY2crOaKVEczJS8WwgAWNJywv0SuFcmB_rJ41y9fNiBqm_wA0MS9_AUuAiy0?type=png" alt="" title=""/></a></p><p>Next, the Virtual DOM will compare the new VNode with the previous VNode and only update the parts of the tree that have changed. Because of this approach, when a component is re-rendered only the parts of the tree that have changed will be updated in the DOM by the renderer.</p><p>The diffing algorithm goes through the list of dynamic attributes and nodes and compares them to the previous VNode. If the attribute or node has changed, a mutation that describes the change is added to the mutation list.</p><p>Here is what the diffing algorithm looks like for the root <code>Scope</code> (red lines indicate that a mutation was generated, and green lines indicate that no mutation was generated)</p><p><a href="https://mermaid.live/edit#pako:eNrFlFFPwjAQx7_KpT7Kko2Elya8qCE-aGLAJ5khpe1Yw9Zbug4k4He3OJjbGPig0T5t17tf_nf777aEo5CEkijBNY-ZsfAwDjW4kxfzhWFZDGNECxOOmYTIYAo2lsCyDG4xzVBLbcv8_RHKSG4V6orSIN0Wxrh8b2RYKr_uTyubd1W92GiWKg7aac6bOU3G803HbVk82xfP_Ok0JEqAT-FeLWJvpFYSOBbaSkMhCMnra5MgtfhWFrPWqHlhL2urT6atbU-oa0PNE8WXFFJ0-nazXakRroddGk9IwYEUnCd5w7Pddr5UTT8ZuVJY5F0fM7ebRLYyXNDgUnprJWxM-9lb7xAQLHe-M2xDYQCD9pD_2hez_kVn-P_rjLq6n3qjYv2iO5qz9DyvPdyv1ETp5eTTJ_7BGvQq8v1TVtl5jXUcRRcrqFh-dI4VtFlBN6t_ynLNkh5JpUmZEm5rbvfhkLiN6H4BQt2jYGYZklC_uzxWWJxsNCfUmkL2SJEJZuWdYs4cKaERS3IXlUJZNI_lGv7cxj2SMf2CeMx5_wBcbK19"><img src="https://mermaid.ink/img/pako:eNrFlFFPwjAQx7_KpT7Kko2Elya8qCE-aGLAJ5khpe1Yw9Zbug4k4He3OJjbGPig0T5t17tf_nf777aEo5CEkijBNY-ZsfAwDjW4kxfzhWFZDGNECxOOmYTIYAo2lsCyDG4xzVBLbcv8_RHKSG4V6orSIN0Wxrh8b2RYKr_uTyubd1W92GiWKg7aac6bOU3G803HbVk82xfP_Ok0JEqAT-FeLWJvpFYSOBbaSkMhCMnra5MgtfhWFrPWqHlhL2urT6atbU-oa0PNE8WXFFJ0-nazXakRroddGk9IwYEUnCd5w7Pddr5UTT8ZuVJY5F0fM7ebRLYyXNDgUnprJWxM-9lb7xAQLHe-M2xDYQCD9pD_2hez_kVn-P_rjLq6n3qjYv2iO5qz9DyvPdyv1ETp5eTTJ_7BGvQq8v1TVtl5jXUcRRcrqFh-dI4VtFlBN6t_ynLNkh5JpUmZEm5rbvfhkLiN6H4BQt2jYGYZklC_uzxWWJxsNCfUmkL2SJEJZuWdYs4cKaERS3IXlUJZNI_lGv7cxj2SMf2CeMx5_wBcbK19?type=png" alt="" title=""/></a></p><h2 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h2><p>This is only a brief overview of how the Virtual Dom works. There are several aspects not yet covered in this guide including:</p><ul><li>How the Virtual DOM handles async-components</li><li>Keyed diffing</li><li>Using <a href="https://github.com/fitzgen/bumpalo">bump allocation</a> to efficiently allocate VNodes.</li></ul><p>If you need more information about the Virtual Dom, you can read the code of the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/core">core</a> crate or reach out to us on <a href="https://discord.gg/XgGxMSkvUM">Discord</a>.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=walkthrough-of-the-hello-world-example-internals#walkthrough-of-the-hello-world-example-internals"><!--#-->Walkthrough of the Hello World Example Internals<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-source-file#the-source-file"><!--#-->The Source File<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-rsx!-macro#the-rsx!-macro"><!--#-->The rsx! Macro<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=launching-the-app#launching-the-app"><!--#-->Launching the App<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-virtual-dom#the-virtual-dom"><!--#-->The Virtual DOM<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=the-initial-render#the-initial-render"><!--#-->The Initial Render<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=waiting-for-events#waiting-for-events"><!--#-->Waiting for Events<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=diffing-scopes#diffing-scopes"><!--#-->Diffing Scopes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><blockquote><p>What is a <a href="https://docs.rs/slab/latest/slab/">slab</a>?</p><p>A slab acts like a hashmap with integer keys if you don&#x27;t care about the value of the keys. It is internally backed by a dense vector which makes it more efficient than a hashmap. When you insert a value into a slab, it returns an integer key that you can use to retrieve the value later.</p></blockquote><blockquote><p>How does Dioxus use slabs?</p><p>Dioxus uses &quot;synchronized slabs&quot; to communicate between the renderer and the VDOM. When a node is created in the Virtual DOM, an (elementId, mutation) pair is passed to the renderer to identify that node, which the renderer will then render in actual DOM. These ids are also used by the Virtual Dom to reference that node in future mutations, like setting an attribute on a node or removing a node. When the renderer sends an event to the Virtual Dom, it sends the ElementId of the node that the event was triggered on. The Virtual DOM uses this id to find that node in the slab and then run the necessary event handlers.</p></blockquote><p>The virtual DOM is a tree of scopes. A new <code>Scope</code> is created for every component when it is first rendered and recycled when the component is unmounted.</p><p>Scopes serve three main purposes:</p><ol><li>They store the state of hooks used by the component</li><li>They store the state for the context API (for example: using<a href="https://docs.rs/dioxus/latest/dioxus/prelude/fn.use_shared_state_provider.html">use_shared_state_provider</a>).</li><li>They store the current and previous versions of the VNode that was rendered, so they can bediffed to generate the set of mutations needed to re-render it.</li></ol><h3 id="the-initial-render"><a class="header" href="#the-initial-render">The Initial Render</a></h3><p>The root scope is created and rebuilt:</p><ol><li>The root component is run</li><li>The root component returns a VNode</li><li>Mutations for this VNode are created and added to the mutation list (this may involve creating new child components)</li><li>The VNode is stored in the root&#x27;s Scope.</li></ol><p>After the root&#x27;s <code>Scope</code> is built, all generated mutations are sent to the renderer, which applies them to the DOM.</p><p>After the initial render, the root <code>Scope</code> looks like this:</p><p><a href="https://mermaid.live/edit#pako:eNqtVE1P4zAQ_SuzPrWikRpWXCLtBRDisItWsOxhCaqM7RKricdyJrQV8N93QtvQNCkfEnOynydv3nxkHoVCbUQipjnOVSYDwc_L1AFbWd3dB-kzuEQkuFLoDUwDFkCZAek9nGDh0RlHK__atA1GkUUHf45f0YbppAqB_aOzIAvz-t7-chN_Y-1bw1WSJKsglIu2w9tktWXxIIuHURT5XCqTYa5NmDguw2R8c5MKq2GcgF46WTB_jafi9rZL0yi5q4jQTSrf9altO4okCn1Ratwyz55Qxuku2ITlTMgs6HCQimsPmb3PvqVi-L5gjXP3QcnxWnL8JZLrwGvR31n0KV-Bx6-r-oVkT_-3G1S-NQLbk9i8rj7udP2cixed2QcDCitHJiQw7ub3EVlNecrPjudG2-6soFO5VbMECmR9T5OnlUY4-AFxfw9aTFst3McU9TK1Otm6NEn_DubBYlX2_dglLXOz48FgwJmJ5lZTlhz6xWgNaFnyDgpymcARHO0W2a9J_l5w2wYXvHuGPcqaQ-rESBQmFNJq3nCPNZoK3l4sUSR81DLMUpG6Z_aTFeHV0imRUKjMSFReSzKnVnKGhUimMi8ZNdoShl-rlfmyOUfCS_cPcePz_B_Wl4pc"><img src="https://mermaid.ink/img/pako:eNqtVE1P4zAQ_SuzPrWikRpWXCLtBRDisItWsOxhCaqM7RKricdyJrQV8N93QtvQNCkfEnOynydv3nxkHoVCbUQipjnOVSYDwc_L1AFbWd3dB-kzuEQkuFLoDUwDFkCZAek9nGDh0RlHK__atA1GkUUHf45f0YbppAqB_aOzIAvz-t7-chN_Y-1bw1WSJKsglIu2w9tktWXxIIuHURT5XCqTYa5NmDguw2R8c5MKq2GcgF46WTB_jafi9rZL0yi5q4jQTSrf9altO4okCn1Ratwyz55Qxuku2ITlTMgs6HCQimsPmb3PvqVi-L5gjXP3QcnxWnL8JZLrwGvR31n0KV-Bx6-r-oVkT_-3G1S-NQLbk9i8rj7udP2cixed2QcDCitHJiQw7ub3EVlNecrPjudG2-6soFO5VbMECmR9T5OnlUY4-AFxfw9aTFst3McU9TK1Otm6NEn_DubBYlX2_dglLXOz48FgwJmJ5lZTlhz6xWgNaFnyDgpymcARHO0W2a9J_l5w2wYXvHuGPcqaQ-rESBQmFNJq3nCPNZoK3l4sUSR81DLMUpG6Z_aTFeHV0imRUKjMSFReSzKnVnKGhUimMi8ZNdoShl-rlfmyOUfCS_cPcePz_B_Wl4pc?type=png" alt="" title=""/></a></p><h3 id="waiting-for-events"><a class="header" href="#waiting-for-events">Waiting for Events</a></h3><p>The Virtual DOM will only ever re-render a <code>Scope</code> if it is marked as dirty. Each hook is responsible for marking the <code>Scope</code> as dirty if the state has changed. Hooks can mark a scope as dirty by sending a message to the Virtual Dom&#x27;s channel. You can see the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/hooks">implementations</a> for the hooks dioxus includes by default on how this is done. Calling needs_update() on a hook will also cause it to mark its scope as dirty.</p><p>There are generally two ways a scope is marked as dirty:</p><ol><li>The renderer triggers an event: An event listener on this event may be called, which may mark acomponent as dirty, if processing the event resulted in any generated any mutations.</li><li>The renderer calls<a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.VirtualDom.html#method.wait_for_work"><code>wait_for_work</code></a>:This polls dioxus internal future queue. One of these futures may mark a component as dirty.</li></ol><p>Once at least one <code>Scope</code> is marked as dirty, the renderer can call <a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.VirtualDom.html#method.render_with_deadline"><code>render_with_deadline</code></a> to diff the dirty scopes.</p><h3 id="diffing-scopes"><a class="header" href="#diffing-scopes">Diffing Scopes</a></h3><p>When a user clicks the &quot;up high&quot; button, the root <code>Scope</code> will be marked as dirty by the <code>use_state</code> hook. The desktop renderer will then call <code>render_with_deadline</code>, which will diff the root <code>Scope</code>.</p><p>To start the diffing process, the component function is run. After the root component is run it, the root <code>Scope</code> will look like this:</p><p><a href="https://mermaid.live/edit#pako:eNrFVlFP2zAQ_iuen0BrpCaIl0i8AEJ72KQJtpcRFBnbJVYTn-U4tBXw33dpG5M2CetoBfdkny_ffb67fPIT5SAkjekkhxnPmHXk-3WiCVpZ3T9YZjJyDeDIDQcjycRCQVwmCTOGXEBhQEvtVvG1CWUldwo0-XX-6vVIF5W1GB9cWVbI1_PNL5v8jW3uPFbpmFOc2HK-GfA2WG1ZeJSFx0EQmJxxmUEupE01liEd394mVAkyjolYaFYgfu1P6N1dF8Yzua-cA51WphtTWzsLc872Zan9CnEGUkktuk6fFm_i5NxFRwn9bUimHrIvCT3-N2EBM70j5XBNOTwI5TrxmvQJkr7ELcHx67Jeggz0v92g8q0RaE-iP1193On6NyxecKUeJeFQaSdtTMLu_Xah5ctT_u94Nty2ZwU0zxWfxqQA5PecPq84kq9nfRw7SK0WDiEFZ4O37d34S_-08lFBVfb92KVb5HIrAp0WpjKYKeGyODLz0dohWIkaZNkiJqfkdLvIH6oRaTSoEmm0n06k0a5K0ZdpL61Io0Yt0nfpxc7UQ0_9cJrhyZ8syX-6brS706Mc489Vjja7fbWj3cxDqIdfJJqOaCFtwZTAV8hT7U0ovjBQRmiMS8HsNKGJfsE4Vjm4WWhOY2crOaKVEczJS8WwgAWNJywv0SuFcmB_rJ41y9fNiBqm_wA0MS9_AUuAiy0"><img src="https://mermaid.ink/img/pako:eNrFVlFP2zAQ_iuen0BrpCaIl0i8AEJ72KQJtpcRFBnbJVYTn-U4tBXw33dpG5M2CetoBfdkny_ffb67fPIT5SAkjekkhxnPmHXk-3WiCVpZ3T9YZjJyDeDIDQcjycRCQVwmCTOGXEBhQEvtVvG1CWUldwo0-XX-6vVIF5W1GB9cWVbI1_PNL5v8jW3uPFbpmFOc2HK-GfA2WG1ZeJSFx0EQmJxxmUEupE01liEd394mVAkyjolYaFYgfu1P6N1dF8Yzua-cA51WphtTWzsLc872Zan9CnEGUkktuk6fFm_i5NxFRwn9bUimHrIvCT3-N2EBM70j5XBNOTwI5TrxmvQJkr7ELcHx67Jeggz0v92g8q0RaE-iP1193On6NyxecKUeJeFQaSdtTMLu_Xah5ctT_u94Nty2ZwU0zxWfxqQA5PecPq84kq9nfRw7SK0WDiEFZ4O37d34S_-08lFBVfb92KVb5HIrAp0WpjKYKeGyODLz0dohWIkaZNkiJqfkdLvIH6oRaTSoEmm0n06k0a5K0ZdpL61Io0Yt0nfpxc7UQ0_9cJrhyZ8syX-6brS706Mc489Vjja7fbWj3cxDqIdfJJqOaCFtwZTAV8hT7U0ovjBQRmiMS8HsNKGJfsE4Vjm4WWhOY2crOaKVEczJS8WwgAWNJywv0SuFcmB_rJ41y9fNiBqm_wA0MS9_AUuAiy0?type=png" alt="" title=""/></a></p><p>Next, the Virtual DOM will compare the new VNode with the previous VNode and only update the parts of the tree that have changed. Because of this approach, when a component is re-rendered only the parts of the tree that have changed will be updated in the DOM by the renderer.</p><p>The diffing algorithm goes through the list of dynamic attributes and nodes and compares them to the previous VNode. If the attribute or node has changed, a mutation that describes the change is added to the mutation list.</p><p>Here is what the diffing algorithm looks like for the root <code>Scope</code> (red lines indicate that a mutation was generated, and green lines indicate that no mutation was generated)</p><p><a href="https://mermaid.live/edit#pako:eNrFlFFPwjAQx7_KpT7Kko2Elya8qCE-aGLAJ5khpe1Yw9Zbug4k4He3OJjbGPig0T5t17tf_nf777aEo5CEkijBNY-ZsfAwDjW4kxfzhWFZDGNECxOOmYTIYAo2lsCyDG4xzVBLbcv8_RHKSG4V6orSIN0Wxrh8b2RYKr_uTyubd1W92GiWKg7aac6bOU3G803HbVk82xfP_Ok0JEqAT-FeLWJvpFYSOBbaSkMhCMnra5MgtfhWFrPWqHlhL2urT6atbU-oa0PNE8WXFFJ0-nazXakRroddGk9IwYEUnCd5w7Pddr5UTT8ZuVJY5F0fM7ebRLYyXNDgUnprJWxM-9lb7xAQLHe-M2xDYQCD9pD_2hez_kVn-P_rjLq6n3qjYv2iO5qz9DyvPdyv1ETp5eTTJ_7BGvQq8v1TVtl5jXUcRRcrqFh-dI4VtFlBN6t_ynLNkh5JpUmZEm5rbvfhkLiN6H4BQt2jYGYZklC_uzxWWJxsNCfUmkL2SJEJZuWdYs4cKaERS3IXlUJZNI_lGv7cxj2SMf2CeMx5_wBcbK19"><img src="https://mermaid.ink/img/pako:eNrFlFFPwjAQx7_KpT7Kko2Elya8qCE-aGLAJ5khpe1Yw9Zbug4k4He3OJjbGPig0T5t17tf_nf777aEo5CEkijBNY-ZsfAwDjW4kxfzhWFZDGNECxOOmYTIYAo2lsCyDG4xzVBLbcv8_RHKSG4V6orSIN0Wxrh8b2RYKr_uTyubd1W92GiWKg7aac6bOU3G803HbVk82xfP_Ok0JEqAT-FeLWJvpFYSOBbaSkMhCMnra5MgtfhWFrPWqHlhL2urT6atbU-oa0PNE8WXFFJ0-nazXakRroddGk9IwYEUnCd5w7Pddr5UTT8ZuVJY5F0fM7ebRLYyXNDgUnprJWxM-9lb7xAQLHe-M2xDYQCD9pD_2hez_kVn-P_rjLq6n3qjYv2iO5qz9DyvPdyv1ETp5eTTJ_7BGvQq8v1TVtl5jXUcRRcrqFh-dI4VtFlBN6t_ynLNkh5JpUmZEm5rbvfhkLiN6H4BQt2jYGYZklC_uzxWWJxsNCfUmkL2SJEJZuWdYs4cKaERS3IXlUJZNI_lGv7cxj2SMf2CeMx5_wBcbK19?type=png" alt="" title=""/></a></p><h2 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h2><p>This is only a brief overview of how the Virtual Dom works. There are several aspects not yet covered in this guide including:</p><ul><li>How the Virtual DOM handles async-components</li><li>Keyed diffing</li><li>Using <a href="https://github.com/fitzgen/bumpalo">bump allocation</a> to efficiently allocate VNodes.</li></ul><p>If you need more information about the Virtual Dom, you can read the code of the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/core">core</a> crate or reach out to us on <a href="https://discord.gg/XgGxMSkvUM">Discord</a>.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=walkthrough-of-the-hello-world-example-internals#walkthrough-of-the-hello-world-example-internals"><!--#-->Walkthrough of the Hello World Example Internals<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-source-file#the-source-file"><!--#-->The Source File<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-rsx!-macro#the-rsx!-macro"><!--#-->The rsx! Macro<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=launching-the-app#launching-the-app"><!--#-->Launching the App<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-virtual-dom#the-virtual-dom"><!--#-->The Virtual DOM<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=the-initial-render#the-initial-render"><!--#-->The Initial Render<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=waiting-for-events#waiting-for-events"><!--#-->Waiting for Events<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=diffing-scopes#diffing-scopes"><!--#-->Diffing Scopes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/antipatterns/index.html b/learn/0.4/cookbook/antipatterns/index.html
index 53f7aa901..88e6026fe 100644
--- a/learn/0.4/cookbook/antipatterns/index.html
+++ b/learn/0.4/cookbook/antipatterns/index.html
@@ -184,7 +184,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">})
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="avoid-interior-mutability-in-props"><a class="header" href="#avoid-interior-mutability-in-props">Avoid Interior Mutability in Props</a></h2><p>While it is technically acceptable to have a <code>Mutex</code> or a <code>RwLock</code> in the props, they will be difficult to use.</p><p>Suppose you have a struct <code>User</code> containing the field <code>username: String</code>. If you pass a <code>Mutex&lt;User&gt;</code> prop to a <code>UserComponent</code> component, that component may wish to pass the username as a <code>&amp;str</code> prop to a child component. However, it cannot pass that borrowed field down, since it only would live as long as the <code>Mutex</code>&#x27;s lock, which belongs to the <code>UserComponent</code> function. Therefore, the component will be forced to clone the <code>username</code> field.</p><h2 id="avoid-updating-state-during-render"><a class="header" href="#avoid-updating-state-during-render">Avoid Updating State During Render</a></h2><p>Every time you update the state, Dioxus needs to re-render the component – this is inefficient! Consider refactoring your code to avoid this.</p><p>Also, if you unconditionally update the state during render, it will be re-rendered in an infinite loop.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=antipatterns#antipatterns"><!--#-->Antipatterns<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=unnecessarily-nested-fragments#unnecessarily-nested-fragments"><!--#-->Unnecessarily Nested Fragments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=incorrect-iterator-keys#incorrect-iterator-keys"><!--#-->Incorrect Iterator Keys<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=avoid-interior-mutability-in-props#avoid-interior-mutability-in-props"><!--#-->Avoid Interior Mutability in Props<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=avoid-updating-state-during-render#avoid-updating-state-during-render"><!--#-->Avoid Updating State During Render<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="avoid-interior-mutability-in-props"><a class="header" href="#avoid-interior-mutability-in-props">Avoid Interior Mutability in Props</a></h2><p>While it is technically acceptable to have a <code>Mutex</code> or a <code>RwLock</code> in the props, they will be difficult to use.</p><p>Suppose you have a struct <code>User</code> containing the field <code>username: String</code>. If you pass a <code>Mutex&lt;User&gt;</code> prop to a <code>UserComponent</code> component, that component may wish to pass the username as a <code>&amp;str</code> prop to a child component. However, it cannot pass that borrowed field down, since it only would live as long as the <code>Mutex</code>&#x27;s lock, which belongs to the <code>UserComponent</code> function. Therefore, the component will be forced to clone the <code>username</code> field.</p><h2 id="avoid-updating-state-during-render"><a class="header" href="#avoid-updating-state-during-render">Avoid Updating State During Render</a></h2><p>Every time you update the state, Dioxus needs to re-render the component – this is inefficient! Consider refactoring your code to avoid this.</p><p>Also, if you unconditionally update the state during render, it will be re-rendered in an infinite loop.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=antipatterns#antipatterns"><!--#-->Antipatterns<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=unnecessarily-nested-fragments#unnecessarily-nested-fragments"><!--#-->Unnecessarily Nested Fragments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=incorrect-iterator-keys#incorrect-iterator-keys"><!--#-->Incorrect Iterator Keys<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=avoid-interior-mutability-in-props#avoid-interior-mutability-in-props"><!--#-->Avoid Interior Mutability in Props<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=avoid-updating-state-during-render#avoid-updating-state-during-render"><!--#-->Avoid Updating State During Render<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/custom_renderer/index.html b/learn/0.4/cookbook/custom_renderer/index.html
index 6232b5786..5457482e5 100644
--- a/learn/0.4/cookbook/custom_renderer/index.html
+++ b/learn/0.4/cookbook/custom_renderer/index.html
@@ -642,7 +642,7 @@
 </span><span style="color:#c0c5ce;">    cursor.</span><span style="color:#96b5b4;">delete_selection</span><span style="color:#c0c5ce;">(&amp;</span><span style="color:#b48ead;">mut</span><span style="color:#c0c5ce;"> text);
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h2><p>That should be it! You should have nearly all the knowledge required on how to implement your renderer. We&#x27;re super interested in seeing Dioxus apps brought to custom desktop renderers, mobile renderers, video game UI, and even augmented reality! If you&#x27;re interested in contributing to any of these projects, don&#x27;t be afraid to reach out or join the <a href="https://discord.gg/XgGxMSkvUM">community</a>.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=custom-renderer#custom-renderer"><!--#-->Custom Renderer<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-specifics:#the-specifics:"><!--#-->The specifics:<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=templates#templates"><!--#-->Templates<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=mutations#mutations"><!--#-->Mutations<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=node-storage#node-storage"><!--#-->Node storage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=an-example#an-example"><!--#-->An Example<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=building-templates#building-templates"><!--#-->Building Templates<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=applying-mutations#applying-mutations"><!--#-->Applying Mutations<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=event-loop#event-loop"><!--#-->Event loop<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=custom-raw-elements#custom-raw-elements"><!--#-->Custom raw elements<!--#--></a></li><li class="pb-2 pl-2"><a href="?phantom=native-core#native-core"><!--#-->Native Core<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-realdom#the-realdom"><!--#-->The RealDom<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=example#example"><!--#-->Example<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=layout#layout"><!--#-->Layout<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=text-editing#text-editing"><!--#-->Text Editing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h2><p>That should be it! You should have nearly all the knowledge required on how to implement your renderer. We&#x27;re super interested in seeing Dioxus apps brought to custom desktop renderers, mobile renderers, video game UI, and even augmented reality! If you&#x27;re interested in contributing to any of these projects, don&#x27;t be afraid to reach out or join the <a href="https://discord.gg/XgGxMSkvUM">community</a>.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=custom-renderer#custom-renderer"><!--#-->Custom Renderer<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-specifics:#the-specifics:"><!--#-->The specifics:<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=templates#templates"><!--#-->Templates<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=mutations#mutations"><!--#-->Mutations<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=node-storage#node-storage"><!--#-->Node storage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=an-example#an-example"><!--#-->An Example<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=building-templates#building-templates"><!--#-->Building Templates<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=applying-mutations#applying-mutations"><!--#-->Applying Mutations<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=event-loop#event-loop"><!--#-->Event loop<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=custom-raw-elements#custom-raw-elements"><!--#-->Custom raw elements<!--#--></a></li><li class="pb-2 pl-2"><a href="?phantom=native-core#native-core"><!--#-->Native Core<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-realdom#the-realdom"><!--#-->The RealDom<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=example#example"><!--#-->Example<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=layout#layout"><!--#-->Layout<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=text-editing#text-editing"><!--#-->Text Editing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/error_handling/index.html b/learn/0.4/cookbook/error_handling/index.html
index 18fa978e0..fe801f51b 100644
--- a/learn/0.4/cookbook/error_handling/index.html
+++ b/learn/0.4/cookbook/error_handling/index.html
@@ -228,7 +228,7 @@
 </span><span style="color:#c0c5ce;">	})
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>This approach to error handling is best in apps that have &quot;well defined&quot; error states. Consider using a crate like <code>thiserror</code> or <code>anyhow</code> to simplify the generation of the error types.</p><p>This pattern is widely popular in many contexts and is particularly helpful whenever your code generates a non-recoverable error. You can gracefully capture these &quot;global&quot; error states without panicking or mucking up state.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=error-handling#error-handling"><!--#-->Error handling<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-simplest-–-returning-none#the-simplest-–-returning-none"><!--#-->The simplest – returning None<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=early-return-on-result#early-return-on-result"><!--#-->Early return on result<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=match-results#match-results"><!--#-->Match results<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=passing-error-states-through-components#passing-error-states-through-components"><!--#-->Passing error states through components<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=going-global#going-global"><!--#-->Going global<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>This approach to error handling is best in apps that have &quot;well defined&quot; error states. Consider using a crate like <code>thiserror</code> or <code>anyhow</code> to simplify the generation of the error types.</p><p>This pattern is widely popular in many contexts and is particularly helpful whenever your code generates a non-recoverable error. You can gracefully capture these &quot;global&quot; error states without panicking or mucking up state.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=error-handling#error-handling"><!--#-->Error handling<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-simplest-–-returning-none#the-simplest-–-returning-none"><!--#-->The simplest – returning None<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=early-return-on-result#early-return-on-result"><!--#-->Early return on result<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=match-results#match-results"><!--#-->Match results<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=passing-error-states-through-components#passing-error-states-through-components"><!--#-->Passing error states through components<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=going-global#going-global"><!--#-->Going global<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/examples/index.html b/learn/0.4/cookbook/examples/index.html
new file mode 100644
index 000000000..e22f12d29
--- /dev/null
+++ b/learn/0.4/cookbook/examples/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Dioxus | An elegant GUI library for Rust</title>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="UTF-8" />
+
+    <meta name="description" content="An elegant GUI library for Rust, inspired by React. Supports Web, Desktop, SSR, Liveview, and Mobile.">
+
+    <link rel="icon shortcut" type="image/png" href="/static/favicon.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="/static/prism/prism.css" />
+
+
+    <!-- Social meta stuff -->
+    <!-- open graph -->
+    <meta
+      property="og:title"
+      content="Dioxus - Reliable Rust apps that run anywhere"
+    />
+
+    <meta property="og:type" content="website" />
+
+    <meta
+      property="og:description"
+      content="An elegant GUI library for Rust, inspired by React. Supports Web, Desktop, SSR, Liveview, and Mobile."
+    />
+
+    <meta property="og:url" content="https://dioxuslabs.com/" />
+
+    <meta
+      property="og:image"
+      content="https://dioxuslabs.com/static/opengraph.png"
+    />
+
+    <!-- twitter -->
+    <meta
+      name="twitter:title"
+      content="Dioxus - Reliable Rust apps that run anywhere"
+    />
+    <meta
+      name="twitter:description"
+      content="An elegant GUI library for Rust, inspired by React. Supports Web, Desktop, SSR, Liveview, and Mobile."
+    />
+    <meta
+      name="twitter:image"
+      content="https://dioxuslabs.com/static/opengraph.png"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+
+    <!-- icons -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-EBE72MVZ1B"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-EBE72MVZ1B');
+    </script>
+
+    <!-- style stuff -->
+    <!-- <link data-trunk rel="css" href="/tailwind.css" /> -->
+    <link rel="stylesheet" href="/./tailwind.css" />
+    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
+    <!-- <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              ghmetal: "#24292f",
+              ghdarkmetal: "#161b22",
+              ideblack: "#0e1116",
+              // ideblack: "#0a0a0a",
+              // ideblack: "#0E1116",
+            },
+            fontFamily: {
+              sans: ["Lexend", "sans-serif"],
+              // sans: ["Inter var", "sans-serif"],
+            },
+            boxShadow: {
+              "3xl": "0 35px 60px -1ww5px rgba(0, 0, 0, 0.5)",
+              cutesy: "0px 0px 40px -5px rgba(255, 255, 255, 0.2)",
+              // cutesy: "0px 0px 30px -10px white",
+              // cutesy: "0px 0px 30px -10px red",
+              pop: "0px 0px 30px -10px rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+
+        // "3xl": "0 35px 60px -1ww5px rgba(0, 0, 0, 0.5)",
+        // theme: {
+        //   extend: {
+        //     colors: {
+        //       clifford: "#da373d",
+        //     },
+        //   },
+        // },
+      };
+    </script> -->
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css"
+    />
+
+    <style>
+      .markdown-body {
+        box-sizing: border-box;
+        min-width: 200px;
+        max-width: 980px;
+        margin: 0 10%;
+        /* padding: 45px; */
+        list-style: disc;
+      }
+      /* body {
+        font-family: 'Lexend', sans-serif;
+      } */
+
+      @media (max-width: 767px) {
+        .markdown-body {
+          /* padding: 15px; */
+        }
+      }
+    </style>
+    <script src="/./static/darktheme.js"></script>
+    
+  </head>
+
+  <body>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="examples"><a class="header" href="#examples">Examples</a></h1><p>There&#x27;s a <em>lot</em> of these, so if you&#x27;re having trouble implementing something, or you just want to see cool thingsthat you can do with Dioxus, make sure to give these a look!</p><p>Each of the examples in the main repository also has a permalink attached, in case the main one doesn&#x27;t work.However, permalinks lead to an older &quot;archived&quot; version, so if you&#x27;re reading this a long time in the future in a galaxy far, far away...The examples in the permalinks might not work.</p><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/examples">Main list</a> - <a href="(https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/examples)">permalink</a> - This is the largest list.</li><li>Package-specific examples from the <a href="https://github.com/DioxusLabs/dioxus/">main repository</a>. To learn more about these packages, search them up on <a href="https://crates.io/">crates.io</a>, or navigate from the examples to the root of the package.<ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/web/examples">dioxus-web</a> - <a href="https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/packages/web/examples">permalink</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/fullstack/examples">dioxus-fullstack</a> - <a href="https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/packages/fullstack/examples">permalink</a></li><li><a href="shttps://github.com/DioxusLabs/dioxus/tree/master/packages/liveview/examples">dioxus-liveview</a> - <a href="https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/packages/liveview/examples">permalink</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/router/examples">dioxus-router</a> - <a href="https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/packages/router/examples">permalink</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/dioxus-tui/examples">dioxus-tui</a> - <a href="https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/packages/dioxus-tui/examples">permalink</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/rink/examples">plasmo (&quot;rink&quot; is the old name, it will be updated)</a> - <a href="https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/packages/rink/examples">permalink</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/rsx-rosetta/examples">rsx-rosetta</a> - <a href="https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/packages/rsx-rosetta/examples">permalink</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/native-core/examples">native-core</a> - <a href="https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/packages/native-core/examples">permalink</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/signals/examples">signals</a> - <a href="https://github.com/DioxusLabs/dioxus/tree/60ee82942c4decf67b6ad263f639553d9b7e28a9/packages/signals/examples">permalink</a> - This is unreleased, but it&#x27;s a very exciting project, so stay tuned!</li></ul></li><li>The <a href="https://github.com/DioxusLabs/example-projects">example-projects</a> repository. It might be deprecated/removed in the future though. See <a href="https://github.com/DioxusLabs/example-projects/issues/25">#25</a>.</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=examples#examples"><!--#-->Examples<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <!-- Note the usage of `type=module` here as this is an ES6 module -->
+    <script type="module">
+      import init from "/./assets/dioxus/docsite.js";
+      init("/./assets/dioxus/docsite_bg.wasm").then((wasm) => {
+        if (wasm.__wbindgen_start == undefined) {
+          wasm.main();
+        }
+      });
+    </script>
+    <script src="/static/prism/prism.js"></script>
+    
+  </body>
+</html>
diff --git a/learn/0.4/cookbook/index.html b/learn/0.4/cookbook/index.html
index eff26f621..9b52012ad 100644
--- a/learn/0.4/cookbook/index.html
+++ b/learn/0.4/cookbook/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="cookbook"><a class="header" href="#cookbook">Cookbook</a></h1><p>The cookbook contains common recipes for different patterns within Dioxus.</p><p>There are a few different sections in the cookbook:</p><ul><li><a href="cookbook/antipatterns">Anti-patterns</a> talks about what ingredients to avoid when developing your application</li><li><a href="cookbook/error_handling">Error Handling</a> discusses best around about error handling in Dioxus</li><li><a href="cookbook/custom_renderer">Custom Renderer</a> walks through the process of building a custom renderer for Dioxus</li><li><a href="cookbook/state">State</a> discusses patterns around managing local, global, and external state in Dioxus</li><li><a href="cookbook/integrations">Integrations</a> contains walkthroughs about integrating with external libraries </li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=cookbook#cookbook"><!--#-->Cookbook<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="cookbook"><a class="header" href="#cookbook">Cookbook</a></h1><p>The cookbook contains common recipes for different patterns within Dioxus.</p><p>There are a few different sections in the cookbook:</p><ul><li><a href="cookbook/publishing">Publishing</a> will teach you how to present your app in a variety of delicious forms.</li><li>Explore the <a href="cookbook/antipatterns">Anti-patterns</a> section to discover what ingredients to avoid when preparing your application.</li><li>Within <a href="cookbook/error_handling">Error Handling</a>, we&#x27;ll master the fine art of managing spoiled ingredients in Dioxus.</li><li>Take a culinary journey through <a href="cookbook/state">State management</a>, where we&#x27;ll explore the world of handling local, global, and external state in Dioxus.</li><li><a href="cookbook/integrations">Integrations</a> will guide you how to seamlessly blend external libraries into your Dioxus culinary creations.</li><li><a href="cookbook/testing">Testing</a> explains how to examine the unique flavor of Dioxus-specific features, like components.</li><li><a href="cookbook/examples">Examples</a> is a curated list of delightful recipes that demonstrate the various ways of using Dioxus ingredients.</li><li><a href="cookbook/tailwind">Tailwind</a> reveals the secrets of combining your Tailwind and Dioxus ingredients into a complete meal. You will also learn about using other NPM ingredients (packages) with Dioxus.</li><li>In the <a href="cookbook/custom_renderer">Custom Renderer</a> section, we embark on a cooking adventure, inventing new ways to cook with Dioxus!</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=cookbook#cookbook"><!--#-->Cookbook<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/integrations/index.html b/learn/0.4/cookbook/integrations/index.html
index 89f82d93f..d502c4006 100644
--- a/learn/0.4/cookbook/integrations/index.html
+++ b/learn/0.4/cookbook/integrations/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><p>This section of the guide provides getting started guides for common tools used with Dioxus.</p><ul><li><a href="integrations/./logging">Logging</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/integrations/logging" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Logging<!--#--></li></a><a href="/learn/0.4/cookbook/integrations/internationalization" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Internationalization<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><pre></pre></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><p>This section of the guide provides getting started guides for common tools used with Dioxus.</p><ul><li><a href="integrations/./logging">Logging</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/integrations/logging" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Logging<!--#--></li></a><a href="/learn/0.4/cookbook/integrations/internationalization" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Internationalization<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><pre></pre></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/integrations/internationalization/index.html b/learn/0.4/cookbook/integrations/internationalization/index.html
index 29e9f9df1..de5a70e26 100644
--- a/learn/0.4/cookbook/integrations/internationalization/index.html
+++ b/learn/0.4/cookbook/integrations/internationalization/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="internationalization"><a class="header" href="#internationalization">Internationalization</a></h1><p>If you application supports multiple languages, the <a href="https://github.com/DioxusLabs/dioxus-std">Dioxus-std</a> crate contains helpers to make working with translations in your application easier.</p><p>A full example is available <a href="https://github.com/DioxusLabs/dioxus-std/blob/master/examples/i18n/src/main.rs">here</a></p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/integrations/logging" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Logging<!--#--></li></a><a href="/learn/0.4/cookbook/integrations/internationalization" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Internationalization<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=internationalization#internationalization"><!--#-->Internationalization<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="internationalization"><a class="header" href="#internationalization">Internationalization</a></h1><p>If you application supports multiple languages, the <a href="https://github.com/DioxusLabs/dioxus-std">Dioxus-std</a> crate contains helpers to make working with translations in your application easier.</p><p>A full example is available <a href="https://github.com/DioxusLabs/dioxus-std/blob/master/examples/i18n/src/main.rs">here</a></p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/integrations/logging" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Logging<!--#--></li></a><a href="/learn/0.4/cookbook/integrations/internationalization" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Internationalization<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=internationalization#internationalization"><!--#-->Internationalization<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/integrations/logging/index.html b/learn/0.4/cookbook/integrations/logging/index.html
index 0204d98e6..8c74becb2 100644
--- a/learn/0.4/cookbook/integrations/logging/index.html
+++ b/learn/0.4/cookbook/integrations/logging/index.html
@@ -211,7 +211,7 @@
 </span><span style="color:#c0c5ce;">    </span><span style="color:#65737e;">// Dioxus code
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h4 id="viewing-logs"><a class="header" href="#viewing-logs">Viewing Logs</a></h4><p>You can view the emitted logs in Xcode. </p><p>For more information, visit <a href="https://crates.io/crates/oslog">oslog</a>. </p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/integrations/logging" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Logging<!--#--></li></a><a href="/learn/0.4/cookbook/integrations/internationalization" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Internationalization<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=logging#logging"><!--#-->Logging<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=the-log-crate#the-log-crate"><!--#-->The Log Crate<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=dioxus-logger#dioxus-logger"><!--#-->Dioxus Logger<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=custom-format#custom-format"><!--#-->Custom Format<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=timestamps#timestamps"><!--#-->Timestamps<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=platform-intricacies#platform-intricacies"><!--#-->Platform Intricacies<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=final-notes#final-notes"><!--#-->Final Notes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=desktop-and-server#desktop-and-server"><!--#-->Desktop and Server<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=web#web"><!--#-->Web<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=platform-intricacies#platform-intricacies"><!--#-->Platform Intricacies<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=android#android"><!--#-->Android<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=viewing-logs#viewing-logs"><!--#-->Viewing Logs<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=ios#ios"><!--#-->iOS<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=viewing-logs#viewing-logs"><!--#-->Viewing Logs<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h4 id="viewing-logs"><a class="header" href="#viewing-logs">Viewing Logs</a></h4><p>You can view the emitted logs in Xcode. </p><p>For more information, visit <a href="https://crates.io/crates/oslog">oslog</a>. </p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/integrations/logging" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Logging<!--#--></li></a><a href="/learn/0.4/cookbook/integrations/internationalization" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Internationalization<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=logging#logging"><!--#-->Logging<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=the-log-crate#the-log-crate"><!--#-->The Log Crate<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=dioxus-logger#dioxus-logger"><!--#-->Dioxus Logger<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=custom-format#custom-format"><!--#-->Custom Format<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=timestamps#timestamps"><!--#-->Timestamps<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=platform-intricacies#platform-intricacies"><!--#-->Platform Intricacies<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=final-notes#final-notes"><!--#-->Final Notes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=desktop-and-server#desktop-and-server"><!--#-->Desktop and Server<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=web#web"><!--#-->Web<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=platform-intricacies#platform-intricacies"><!--#-->Platform Intricacies<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=android#android"><!--#-->Android<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=viewing-logs#viewing-logs"><!--#-->Viewing Logs<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=ios#ios"><!--#-->iOS<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=viewing-logs#viewing-logs"><!--#-->Viewing Logs<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/publishing/index.html b/learn/0.4/cookbook/publishing/index.html
index d84668081..378798b88 100644
--- a/learn/0.4/cookbook/publishing/index.html
+++ b/learn/0.4/cookbook/publishing/index.html
@@ -142,7 +142,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>Then build your app and publish it to Github:</p><ul><li>Make sure GitHub Pages is set up for your repo to publish any static files in the docs directory</li><li>Build your app with:</li></ul><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">dx build --release
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ul><li>Add and commit with git</li><li>Push to GitHub</li></ul><h2 id="desktop-creating-an-installer"><a class="header" href="#desktop-creating-an-installer">DESKTOP: Creating an Installer</a></h2><p>Dioxus desktop app uses your operating system&#x27;s WebView library, so it&#x27;s portable to be distributed for other platforms.</p><p>In this section, we&#x27;ll cover how to bundle your app for macOS, Windows, and Linux.</p><h2 id="install"><a class="header" href="#install">Install </a>dioxus CLI</h2><p>The first thing we&#x27;ll do is install the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">dioxus-cli</a>. This extension to cargo will make it very easy to package our app for the various platforms.</p><p>To install, simply run</p><p><code>cargo install dioxus-cli --locked</code></p><h2 id="building"><a class="header" href="#building">Building</a></h2><p>To bundle your application you can simply run <code>dx bundle --release</code> to produce a final app with all the optimizations and assets builtin.</p><p>Once you&#x27;ve ran <code>dx bundle --release</code>, your app should be accessible in</p><p><code>dist/bundle/</code>.</p><p>For example, a macOS app would look like this:</p><p><img src="/static/images/publish.png" alt="Published App" title=""/></p><p>Nice! And it&#x27;s only 4.8 Mb – extremely lean!! Because Dioxus leverages your platform&#x27;s native WebView, Dioxus apps are extremely memory efficient and won&#x27;t waste your battery.</p><blockquote><p>Note: not all CSS works the same on all platforms. Make sure to view your app&#x27;s CSS on each platform – or web browser (Firefox, Chrome, Safari) before publishing.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=publishing#publishing"><!--#-->Publishing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=web:-publishing-with-github-pages#web:-publishing-with-github-pages"><!--#-->WEB: Publishing with Github Pages<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=desktop:-creating-an-installer#desktop:-creating-an-installer"><!--#-->DESKTOP: Creating an Installer<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=install#install"><!--#-->Install <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=building#building"><!--#-->Building<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ul><li>Add and commit with git</li><li>Push to GitHub</li></ul><h2 id="desktop-creating-an-installer"><a class="header" href="#desktop-creating-an-installer">DESKTOP: Creating an Installer</a></h2><p>Dioxus desktop app uses your operating system&#x27;s WebView library, so it&#x27;s portable to be distributed for other platforms.</p><p>In this section, we&#x27;ll cover how to bundle your app for macOS, Windows, and Linux.</p><h2 id="install"><a class="header" href="#install">Install </a>dioxus CLI</h2><p>The first thing we&#x27;ll do is install the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">dioxus-cli</a>. This extension to cargo will make it very easy to package our app for the various platforms.</p><p>To install, simply run</p><p><code>cargo install dioxus-cli --locked</code></p><h2 id="building"><a class="header" href="#building">Building</a></h2><p>To bundle your application you can simply run <code>dx bundle --release</code> to produce a final app with all the optimizations and assets builtin.</p><p>Once you&#x27;ve ran <code>dx bundle --release</code>, your app should be accessible in</p><p><code>dist/bundle/</code>.</p><p>For example, a macOS app would look like this:</p><p><img src="/static/images/publish.png" alt="Published App" title=""/></p><p>Nice! And it&#x27;s only 4.8 Mb – extremely lean!! Because Dioxus leverages your platform&#x27;s native WebView, Dioxus apps are extremely memory efficient and won&#x27;t waste your battery.</p><blockquote><p>Note: not all CSS works the same on all platforms. Make sure to view your app&#x27;s CSS on each platform – or web browser (Firefox, Chrome, Safari) before publishing.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=publishing#publishing"><!--#-->Publishing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=web:-publishing-with-github-pages#web:-publishing-with-github-pages"><!--#-->WEB: Publishing with Github Pages<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=desktop:-creating-an-installer#desktop:-creating-an-installer"><!--#-->DESKTOP: Creating an Installer<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=install#install"><!--#-->Install <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=building#building"><!--#-->Building<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/state/custom_hooks/index.html b/learn/0.4/cookbook/state/custom_hooks/index.html
index 61ef437a0..0d6689922 100644
--- a/learn/0.4/cookbook/state/custom_hooks/index.html
+++ b/learn/0.4/cookbook/state/custom_hooks/index.html
@@ -299,7 +299,7 @@
 </span><span style="color:#c0c5ce;">	todo!()
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/state/external" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->External State<!--#--></li></a><a href="/learn/0.4/cookbook/state/custom_hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Custom Hooks<!--#--></li></a></ul><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=custom-hooks#custom-hooks"><!--#-->Custom Hooks<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=composing-hooks#composing-hooks"><!--#-->Composing Hooks<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=custom-hook-logic#custom-hook-logic"><!--#-->Custom Hook Logic<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hook-anti-patterns#hook-anti-patterns"><!--#-->Hook Anti-Patterns<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/state/external" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->External State<!--#--></li></a><a href="/learn/0.4/cookbook/state/custom_hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Custom Hooks<!--#--></li></a></ul><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=custom-hooks#custom-hooks"><!--#-->Custom Hooks<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=composing-hooks#composing-hooks"><!--#-->Composing Hooks<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=custom-hook-logic#custom-hook-logic"><!--#-->Custom Hook Logic<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hook-anti-patterns#hook-anti-patterns"><!--#-->Hook Anti-Patterns<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/state/external/index.html b/learn/0.4/cookbook/state/external/index.html
index 43b124df3..61a7fc3f2 100644
--- a/learn/0.4/cookbook/state/external/index.html
+++ b/learn/0.4/cookbook/state/external/index.html
@@ -173,7 +173,7 @@
 </span><span style="color:#65737e;">// Get the current state of the coroutine
 </span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> response = response_state.</span><span style="color:#96b5b4;">get</span><span style="color:#c0c5ce;">();
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="making-reactive-state-external"><a class="header" href="#making-reactive-state-external">Making Reactive State External</a></h2><p>If you have some reactive state (state that is rendered), that you want to modify from another thread, you can use the <a href="https://github.com/DioxusLabs/dioxus-std/blob/master/src/utils/rw/use_rw.rs">use_rw</a> hook in the <a href="https://github.com/DioxusLabs/dioxus-std">dioxus-std</a> crate. </p><p>The use_rw hook works like the use_ref hook, but it is Send + Sync which makes it possible to move the hook into another thread.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/state/external" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->External State<!--#--></li></a><a href="/learn/0.4/cookbook/state/custom_hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Hooks<!--#--></li></a></ul><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=working-with-external-state#working-with-external-state"><!--#-->Working with External State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=working-with-non-reactive-state#working-with-non-reactive-state"><!--#-->Working with non-reactive State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=making-reactive-state-external#making-reactive-state-external"><!--#-->Making Reactive State External<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="making-reactive-state-external"><a class="header" href="#making-reactive-state-external">Making Reactive State External</a></h2><p>If you have some reactive state (state that is rendered), that you want to modify from another thread, you can use the <a href="https://github.com/DioxusLabs/dioxus-std/blob/master/src/utils/rw/use_rw.rs">use_rw</a> hook in the <a href="https://github.com/DioxusLabs/dioxus-std">dioxus-std</a> crate. </p><p>The use_rw hook works like the use_ref hook, but it is Send + Sync which makes it possible to move the hook into another thread.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/state/external" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->External State<!--#--></li></a><a href="/learn/0.4/cookbook/state/custom_hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Hooks<!--#--></li></a></ul><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=working-with-external-state#working-with-external-state"><!--#-->Working with External State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=working-with-non-reactive-state#working-with-non-reactive-state"><!--#-->Working with non-reactive State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=making-reactive-state-external#making-reactive-state-external"><!--#-->Making Reactive State External<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/state/index.html b/learn/0.4/cookbook/state/index.html
index be5dcaf3d..afd96f870 100644
--- a/learn/0.4/cookbook/state/index.html
+++ b/learn/0.4/cookbook/state/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="state-cookbook"><a class="header" href="#state-cookbook">State Cookbook</a></h1><ul><li><a href="state/external">External State</a></li><li><a href="state/custom_hooks">Custom Hook</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/state/external" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->External State<!--#--></li></a><a href="/learn/0.4/cookbook/state/custom_hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Hooks<!--#--></li></a></ul><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=state-cookbook#state-cookbook"><!--#-->State Cookbook<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="state-cookbook"><a class="header" href="#state-cookbook">State Cookbook</a></h1><ul><li><a href="state/external">External State</a></li><li><a href="state/custom_hooks">Custom Hook</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/cookbook/state/external" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->External State<!--#--></li></a><a href="/learn/0.4/cookbook/state/custom_hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Hooks<!--#--></li></a></ul><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=state-cookbook#state-cookbook"><!--#-->State Cookbook<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/tailwind/index.html b/learn/0.4/cookbook/tailwind/index.html
index 410b57727..c33c2236a 100644
--- a/learn/0.4/cookbook/tailwind/index.html
+++ b/learn/0.4/cookbook/tailwind/index.html
@@ -225,7 +225,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div></li><li><p>Open the browser to <a href="http://localhost:8080">http://localhost:8080</a>.</p></li></ul><h3 id="desktop"><a class="header" href="#desktop">Desktop</a></h3><ul><li><p>Launch the dioxus desktop app:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">cargo run
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=tailwind#tailwind"><!--#-->Tailwind<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=bonus-steps#bonus-steps"><!--#-->Bonus Steps<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=development#development"><!--#-->Development<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web#web"><!--#-->Web<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=desktop#desktop"><!--#-->Desktop<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=tailwind#tailwind"><!--#-->Tailwind<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=bonus-steps#bonus-steps"><!--#-->Bonus Steps<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=development#development"><!--#-->Development<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=web#web"><!--#-->Web<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=desktop#desktop"><!--#-->Desktop<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/cookbook/testing/index.html b/learn/0.4/cookbook/testing/index.html
index d54117d0b..e45382d22 100644
--- a/learn/0.4/cookbook/testing/index.html
+++ b/learn/0.4/cookbook/testing/index.html
@@ -282,7 +282,7 @@
 </span><span style="color:#c0c5ce;">    },
 </span><span style="color:#c0c5ce;">],
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/playwright-tests/web">Web example</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/playwright-tests/liveview">Liveview example</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/playwright-tests/fullstack">Fullstack example</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=testing#testing"><!--#-->Testing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=component-testing#component-testing"><!--#-->Component Testing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hook-testing#hook-testing"><!--#-->Hook Testing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=end-to-end-testing#end-to-end-testing"><!--#-->End to End Testing<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ul><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/playwright-tests/web">Web example</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/playwright-tests/liveview">Liveview example</a></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/playwright-tests/fullstack">Fullstack example</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=testing#testing"><!--#-->Testing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=component-testing#component-testing"><!--#-->Component Testing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hook-testing#hook-testing"><!--#-->Hook Testing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=end-to-end-testing#end-to-end-testing"><!--#-->End to End Testing<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/getting_started/choosing_a_web_renderer/index.html b/learn/0.4/getting_started/choosing_a_web_renderer/index.html
index 9f8e8976b..9382109be 100644
--- a/learn/0.4/getting_started/choosing_a_web_renderer/index.html
+++ b/learn/0.4/getting_started/choosing_a_web_renderer/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="choosing-a-web-renderer"><a class="header" href="#choosing-a-web-renderer">Choosing a web renderer</a></h1><p>Dioxus has three different renderers that target the web:</p><ul><li><a href="wasm">dioxus-web</a> allows you to render your application to HTML with <a href="https://rustwasm.github.io/docs/book/">WebAssembly</a> on the client</li><li><a href="liveview">dioxus-liveview</a> allows you to run your application on the server and render it to HTML on the client with a websocket</li><li><a href="fullstack">dioxus-fullstack</a> allows you to initially render static HTML on the server and then update that HTML from the client with <a href="https://rustwasm.github.io/docs/book/">WebAssembly</a></li></ul><p>Each approach has its tradeoffs:</p><h3 id="dioxus-liveview"><a class="header" href="#dioxus-liveview">Dioxus Liveview</a></h3><ul><li><p>Liveview rendering communicates with the server over a WebSocket connection. It essentially moves all of the work that Client-side rendering does to the server.</p></li><li><p>This makes it <strong>easy to communicate with the server, but more difficult to communicate with the client/browser APIS</strong>.</p></li><li><p>Each interaction also requires a message to be sent to the server and back which can cause <strong>issues with latency</strong>.</p></li><li><p>Because Liveview uses a websocket to render, the page will be blank until the WebSocket connection has been established and the first renderer has been sent form the websocket. Just like with client side rendering, this can make the page <strong>less SEO-friendly</strong>.</p></li><li><p>Because the page is rendered on the server and the page is sent to the client piece by piece, you never need to send the entire application to the client. The initial load time can be faster than client-side rendering with large applications because Liveview only needs to send a constant small websocket script regardless of the size of the application.</p></li></ul><blockquote><p>Liveview is a good fit for applications that already need to communicate with the server frequently (like real time collaborative apps), but don&#x27;t need to communicate with as many client/browser APIs</p></blockquote><p><a href="https://mermaid.live/edit#pako:eNplULFOw0AM_RXLc7Mw3sBQVUIMRYgKdcli5ZzkRHIuPl8QqvrvXJICRXiy3nt-9-6dsRHP6DAZGe8CdUpjNd3VEcpsVT4SK1TVPRxYJ1YHL_yeOdkqWMGF3w4U32Y6nSQmXvknMQYNXW8g7bfk2JPBg0g3MCTmdH1rJhenx2is1FiYri43wJ8or3O2H1Liv0w3hw724kMb2MMzdcUYNziyjhR8-f15Pq3Reh65RldWzy3lwWqs46VIKZscPmODzjTzBvPJ__aFrqUhFZR9MNH92uhS7OULYSF1lw"><img src="https://mermaid.ink/img/pako:eNplULFOw0AM_RXLc7Mw3sBQVUIMRYgKdcli5ZzkRHIuPl8QqvrvXJICRXiy3nt-9-6dsRHP6DAZGe8CdUpjNd3VEcpsVT4SK1TVPRxYJ1YHL_yeOdkqWMGF3w4U32Y6nSQmXvknMQYNXW8g7bfk2JPBg0g3MCTmdH1rJhenx2is1FiYri43wJ8or3O2H1Liv0w3hw724kMb2MMzdcUYNziyjhR8-f15Pq3Reh65RldWzy3lwWqs46VIKZscPmODzjTzBvPJ__aFrqUhFZR9MNH92uhS7OULYSF1lw?type=png" alt="" title=""/></a></p><h3 id="dioxus-web"><a class="header" href="#dioxus-web">Dioxus Web</a></h3><ul><li><p>With Client side rendering, you send your application to the client, and then the client generates all of the HTML of the page dynamically.</p></li><li><p>This means that the page will be blank until the JavaScript bundle has loaded and the application has initialized. This can result in <strong>slower first render times and poor SEO performance</strong>.</p></li></ul><blockquote><p>SEO stands for Search Engine Optimization. It refers to the practice of making your website more likely to appear in search engine results. Search engines like Google and Bing use web crawlers to index the content of websites. Most of these crawlers are not able to run JavaScript, so they will not be able to index the content of your page if it is rendered client-side.</p></blockquote><ul><li>Client-side rendered applications need to use <strong>weakly typed requests to communicate with the server</strong></li></ul><blockquote><p>Client-side rendering is a good starting point for most applications. It is well supported and makes it easy to communicate with the client/browser APIs</p></blockquote><p><a href="https://mermaid.live/edit#pako:eNpVkDFPwzAQhf-KdXOzMHpgqJAQAwytEIsXK35JLBJfez4Xoar_HSemQtzke9_z2e-u1HMAWcrqFU_Rj-KX7vLgkqm1F_7KENN1j-YIuUCsOeBckLUZmrjx_ezT54rziVNG42-sMBLHSQ0Pd8vH5NU8M48zTAby71sr3CYdkAIEoen37h-y5n3910tSiO81cqIdLZDFx1DDXNerjnTCAke2HgMGX2Z15NKtWn1RPn6nnqxKwY7KKfzFJzv4OVcVISrLa1vQtqfbDzd0ZKY"><img src="https://mermaid.ink/img/pako:eNpVkDFPwzAQhf-KdXOzMHpgqJAQAwytEIsXK35JLBJfez4Xoar_HSemQtzke9_z2e-u1HMAWcrqFU_Rj-KX7vLgkqm1F_7KENN1j-YIuUCsOeBckLUZmrjx_ezT54rziVNG42-sMBLHSQ0Pd8vH5NU8M48zTAby71sr3CYdkAIEoen37h-y5n3910tSiO81cqIdLZDFx1DDXNerjnTCAke2HgMGX2Z15NKtWn1RPn6nnqxKwY7KKfzFJzv4OVcVISrLa1vQtqfbDzd0ZKY?type=png" alt="" title=""/></a></p><h3 id="dioxus-fullstack"><a class="header" href="#dioxus-fullstack">Dioxus Fullstack</a></h3><p>Fullstack rendering happens in two parts:</p><ol><li>The page is rendered on the server. This can include fetching any data you need to render the page.</li><li>The page is hydrated on the client. (Hydration is just taking the page from the server and adding all of the event listeners Dioxus needs on the client). Any updates to the page happen on the client after this point.</li></ol><p>Because the page is initially rendered on the server, the page will be fully rendered when it is sent to the client. This results in a faster first render time and makes the page more SEO-friendly.</p><ul><li><strong>Fast initial render</strong></li><li><strong>Works well with SEO</strong></li><li><strong>Type safe easy communication with the server</strong></li><li><strong>Access to the client/browser APIs</strong></li><li><strong>Fast interactivity</strong></li></ul><p>Finally, we can use <a href="../reference/fullstack/server_functions">server functions</a> to communicate with the server in a type-safe way.</p><p>This approach uses both the dioxus-web and dioxus-ssr crates. To integrate those two packages and <code>axum</code>, <code>warp</code>, or <code>salvo</code>, Dioxus provides the <code>dioxus-fullstack</code> crate.</p><p>There can be more complexity with fullstack applications because your code runs in two different places. Dioxus tries to mitigate this with server functions and other helpers.</p><p><a href="https://mermaid.live/edit#pako:eNpdkL1uwzAMhF9F4BwvHTV0KAIUHdohQdFFi2CdbQG2mFCUiyDIu9e2-hOUE3H34UDelVoOIEtZvWIffS9-auYHl8wyT8KfGWKa5tEcITPEmgPOBVkrUMXNPyAFCMJK5BOnjIq8scJI7Ac13N1RH4NX88zcjzAZyJX-8bfIl6QQ32qcv7PuhP-ANe_rpb8KJ9rRBJl8DMt71zXAkQ6Y4Mgua0Dny6iOXLotqC_Kx0tqyaoU7Kicwl8hZDs_5kVFiMryWivbmrt9AacxbGg"><img src="https://mermaid.ink/img/pako:eNpdkL1uwzAMhF9F4BwvHTV0KAIUHdohQdFFi2CdbQG2mFCUiyDIu9e2-hOUE3H34UDelVoOIEtZvWIffS9-auYHl8wyT8KfGWKa5tEcITPEmgPOBVkrUMXNPyAFCMJK5BOnjIq8scJI7Ac13N1RH4NX88zcjzAZyJX-8bfIl6QQ32qcv7PuhP-ANe_rpb8KJ9rRBJl8DMt71zXAkQ6Y4Mgua0Dny6iOXLotqC_Kx0tqyaoU7Kicwl8hZDs_5kVFiMryWivbmrt9AacxbGg?type=png" alt="" title=""/></a></p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=choosing-a-web-renderer#choosing-a-web-renderer"><!--#-->Choosing a web renderer<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=dioxus-liveview#dioxus-liveview"><!--#-->Dioxus Liveview<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=dioxus-web#dioxus-web"><!--#-->Dioxus Web<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=dioxus-fullstack#dioxus-fullstack"><!--#-->Dioxus Fullstack<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="choosing-a-web-renderer"><a class="header" href="#choosing-a-web-renderer">Choosing a web renderer</a></h1><p>Dioxus has three different renderers that target the web:</p><ul><li><a href="wasm">dioxus-web</a> allows you to render your application to HTML with <a href="https://rustwasm.github.io/docs/book/">WebAssembly</a> on the client</li><li><a href="liveview">dioxus-liveview</a> allows you to run your application on the server and render it to HTML on the client with a websocket</li><li><a href="fullstack">dioxus-fullstack</a> allows you to initially render static HTML on the server and then update that HTML from the client with <a href="https://rustwasm.github.io/docs/book/">WebAssembly</a></li></ul><p>Each approach has its tradeoffs:</p><h3 id="dioxus-liveview"><a class="header" href="#dioxus-liveview">Dioxus Liveview</a></h3><ul><li><p>Liveview rendering communicates with the server over a WebSocket connection. It essentially moves all of the work that Client-side rendering does to the server.</p></li><li><p>This makes it <strong>easy to communicate with the server, but more difficult to communicate with the client/browser APIS</strong>.</p></li><li><p>Each interaction also requires a message to be sent to the server and back which can cause <strong>issues with latency</strong>.</p></li><li><p>Because Liveview uses a websocket to render, the page will be blank until the WebSocket connection has been established and the first renderer has been sent form the websocket. Just like with client side rendering, this can make the page <strong>less SEO-friendly</strong>.</p></li><li><p>Because the page is rendered on the server and the page is sent to the client piece by piece, you never need to send the entire application to the client. The initial load time can be faster than client-side rendering with large applications because Liveview only needs to send a constant small websocket script regardless of the size of the application.</p></li></ul><blockquote><p>Liveview is a good fit for applications that already need to communicate with the server frequently (like real time collaborative apps), but don&#x27;t need to communicate with as many client/browser APIs</p></blockquote><p><a href="https://mermaid.live/edit#pako:eNplULFOw0AM_RXLc7Mw3sBQVUIMRYgKdcli5ZzkRHIuPl8QqvrvXJICRXiy3nt-9-6dsRHP6DAZGe8CdUpjNd3VEcpsVT4SK1TVPRxYJ1YHL_yeOdkqWMGF3w4U32Y6nSQmXvknMQYNXW8g7bfk2JPBg0g3MCTmdH1rJhenx2is1FiYri43wJ8or3O2H1Liv0w3hw724kMb2MMzdcUYNziyjhR8-f15Pq3Reh65RldWzy3lwWqs46VIKZscPmODzjTzBvPJ__aFrqUhFZR9MNH92uhS7OULYSF1lw"><img src="https://mermaid.ink/img/pako:eNplULFOw0AM_RXLc7Mw3sBQVUIMRYgKdcli5ZzkRHIuPl8QqvrvXJICRXiy3nt-9-6dsRHP6DAZGe8CdUpjNd3VEcpsVT4SK1TVPRxYJ1YHL_yeOdkqWMGF3w4U32Y6nSQmXvknMQYNXW8g7bfk2JPBg0g3MCTmdH1rJhenx2is1FiYri43wJ8or3O2H1Liv0w3hw724kMb2MMzdcUYNziyjhR8-f15Pq3Reh65RldWzy3lwWqs46VIKZscPmODzjTzBvPJ__aFrqUhFZR9MNH92uhS7OULYSF1lw?type=png" alt="" title=""/></a></p><h3 id="dioxus-web"><a class="header" href="#dioxus-web">Dioxus Web</a></h3><ul><li><p>With Client side rendering, you send your application to the client, and then the client generates all of the HTML of the page dynamically.</p></li><li><p>This means that the page will be blank until the JavaScript bundle has loaded and the application has initialized. This can result in <strong>slower first render times and poor SEO performance</strong>.</p></li></ul><blockquote><p>SEO stands for Search Engine Optimization. It refers to the practice of making your website more likely to appear in search engine results. Search engines like Google and Bing use web crawlers to index the content of websites. Most of these crawlers are not able to run JavaScript, so they will not be able to index the content of your page if it is rendered client-side.</p></blockquote><ul><li>Client-side rendered applications need to use <strong>weakly typed requests to communicate with the server</strong></li></ul><blockquote><p>Client-side rendering is a good starting point for most applications. It is well supported and makes it easy to communicate with the client/browser APIs</p></blockquote><p><a href="https://mermaid.live/edit#pako:eNpVkDFPwzAQhf-KdXOzMHpgqJAQAwytEIsXK35JLBJfez4Xoar_HSemQtzke9_z2e-u1HMAWcrqFU_Rj-KX7vLgkqm1F_7KENN1j-YIuUCsOeBckLUZmrjx_ezT54rziVNG42-sMBLHSQ0Pd8vH5NU8M48zTAby71sr3CYdkAIEoen37h-y5n3910tSiO81cqIdLZDFx1DDXNerjnTCAke2HgMGX2Z15NKtWn1RPn6nnqxKwY7KKfzFJzv4OVcVISrLa1vQtqfbDzd0ZKY"><img src="https://mermaid.ink/img/pako:eNpVkDFPwzAQhf-KdXOzMHpgqJAQAwytEIsXK35JLBJfez4Xoar_HSemQtzke9_z2e-u1HMAWcrqFU_Rj-KX7vLgkqm1F_7KENN1j-YIuUCsOeBckLUZmrjx_ezT54rziVNG42-sMBLHSQ0Pd8vH5NU8M48zTAby71sr3CYdkAIEoen37h-y5n3910tSiO81cqIdLZDFx1DDXNerjnTCAke2HgMGX2Z15NKtWn1RPn6nnqxKwY7KKfzFJzv4OVcVISrLa1vQtqfbDzd0ZKY?type=png" alt="" title=""/></a></p><h3 id="dioxus-fullstack"><a class="header" href="#dioxus-fullstack">Dioxus Fullstack</a></h3><p>Fullstack rendering happens in two parts:</p><ol><li>The page is rendered on the server. This can include fetching any data you need to render the page.</li><li>The page is hydrated on the client. (Hydration is just taking the page from the server and adding all of the event listeners Dioxus needs on the client). Any updates to the page happen on the client after this point.</li></ol><p>Because the page is initially rendered on the server, the page will be fully rendered when it is sent to the client. This results in a faster first render time and makes the page more SEO-friendly.</p><ul><li><strong>Fast initial render</strong></li><li><strong>Works well with SEO</strong></li><li><strong>Type safe easy communication with the server</strong></li><li><strong>Access to the client/browser APIs</strong></li><li><strong>Fast interactivity</strong></li></ul><p>Finally, we can use <a href="../reference/fullstack/server_functions">server functions</a> to communicate with the server in a type-safe way.</p><p>This approach uses both the dioxus-web and dioxus-ssr crates. To integrate those two packages and <code>axum</code>, <code>warp</code>, or <code>salvo</code>, Dioxus provides the <code>dioxus-fullstack</code> crate.</p><p>There can be more complexity with fullstack applications because your code runs in two different places. Dioxus tries to mitigate this with server functions and other helpers.</p><p><a href="https://mermaid.live/edit#pako:eNpdkL1uwzAMhF9F4BwvHTV0KAIUHdohQdFFi2CdbQG2mFCUiyDIu9e2-hOUE3H34UDelVoOIEtZvWIffS9-auYHl8wyT8KfGWKa5tEcITPEmgPOBVkrUMXNPyAFCMJK5BOnjIq8scJI7Ac13N1RH4NX88zcjzAZyJX-8bfIl6QQ32qcv7PuhP-ANe_rpb8KJ9rRBJl8DMt71zXAkQ6Y4Mgua0Dny6iOXLotqC_Kx0tqyaoU7Kicwl8hZDs_5kVFiMryWivbmrt9AacxbGg"><img src="https://mermaid.ink/img/pako:eNpdkL1uwzAMhF9F4BwvHTV0KAIUHdohQdFFi2CdbQG2mFCUiyDIu9e2-hOUE3H34UDelVoOIEtZvWIffS9-auYHl8wyT8KfGWKa5tEcITPEmgPOBVkrUMXNPyAFCMJK5BOnjIq8scJI7Ac13N1RH4NX88zcjzAZyJX-8bfIl6QQ32qcv7PuhP-ANe_rpb8KJ9rRBJl8DMt71zXAkQ6Y4Mgua0Dny6iOXLotqC_Kx0tqyaoU7Kicwl8hZDs_5kVFiMryWivbmrt9AacxbGg?type=png" alt="" title=""/></a></p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=choosing-a-web-renderer#choosing-a-web-renderer"><!--#-->Choosing a web renderer<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=dioxus-liveview#dioxus-liveview"><!--#-->Dioxus Liveview<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=dioxus-web#dioxus-web"><!--#-->Dioxus Web<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=dioxus-fullstack#dioxus-fullstack"><!--#-->Dioxus Fullstack<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/getting_started/desktop/index.html b/learn/0.4/getting_started/desktop/index.html
index c24744a74..8e8173e56 100644
--- a/learn/0.4/getting_started/desktop/index.html
+++ b/learn/0.4/getting_started/desktop/index.html
@@ -170,7 +170,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="hot-reload"><a class="header" href="#hot-reload">Hot Reload</a></h2><ol><li>Hot reloading allows much faster iteration times inside of rsx calls by interpreting them and streaming the edits.</li><li>It is useful when changing the styling/layout of a program, but will not help with changing the logic of a program.</li></ol><h3 id="setup"><a class="header" href="#setup">Setup</a></h3><p>Install <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">dioxus-cli</a>.</p><h3 id="usage"><a class="header" href="#usage">Usage</a></h3><ol><li>Run:</li></ol><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">dx serve --hot-reload --platform desktop
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=desktop-overview#desktop-overview"><!--#-->Desktop Overview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=examples#examples"><!--#-->Examples<!--#--></a></li><li class="pb-2 pl-2"><a href="?phantom=getting-started#getting-started"><!--#-->Getting started<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=platform-specific-dependencies#platform-specific-dependencies"><!--#-->Platform-Specific Dependencies<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=windows#windows"><!--#-->Windows<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=linux#linux"><!--#-->Linux<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=macos#macos"><!--#-->MacOS<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-a-project#creating-a-project"><!--#-->Creating a Project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=desktop-overview#desktop-overview"><!--#-->Desktop Overview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=examples#examples"><!--#-->Examples<!--#--></a></li><li class="pb-2 pl-2"><a href="?phantom=getting-started#getting-started"><!--#-->Getting started<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=platform-specific-dependencies#platform-specific-dependencies"><!--#-->Platform-Specific Dependencies<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=windows#windows"><!--#-->Windows<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=linux#linux"><!--#-->Linux<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=macos#macos"><!--#-->MacOS<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-a-project#creating-a-project"><!--#-->Creating a Project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/getting_started/fullstack/index.html b/learn/0.4/getting_started/fullstack/index.html
index 2b909d7a2..90cf62cfd 100644
--- a/learn/0.4/getting_started/fullstack/index.html
+++ b/learn/0.4/getting_started/fullstack/index.html
@@ -185,7 +185,7 @@
 <span style="color:#c0c5ce;">dx build --features web
 </span><span style="color:#c0c5ce;">dx serve --features ssr --hot-reload --platform desktop
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=fullstack#fullstack"><!--#-->Fullstack<!--#--></a></li><li class="pb-2 pl-2"><a href="?phantom=getting-started#getting-started"><!--#-->Getting Started<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=fullstack#fullstack"><!--#-->Fullstack<!--#--></a></li><li class="pb-2 pl-2"><a href="?phantom=getting-started#getting-started"><!--#-->Getting Started<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/getting_started/index.html b/learn/0.4/getting_started/index.html
index 87627c574..ba06b3eab 100644
--- a/learn/0.4/getting_started/index.html
+++ b/learn/0.4/getting_started/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="getting-started"><a class="header" href="#getting-started">Getting Started</a></h1><p>This section will help you set up your Dioxus project!</p><h2 id="prerequisites"><a class="header" href="#prerequisites">Prerequisites</a></h2><h3 id="an-editor"><a class="header" href="#an-editor">An Editor</a></h3><p>Dioxus integrates very well with the <a href="https://rust-analyzer.github.io">Rust-Analyzer LSP plugin</a> which will provide appropriate syntax highlighting, code navigation, folding, and more.</p><h3 id="rust"><a class="header" href="#rust">Rust</a></h3><p>Head over to <a href="http://rust-lang.org">https://rust-lang.org</a> and install the Rust compiler.</p><p>We strongly recommend going through the <a href="https://doc.rust-lang.org/book/ch01-00-getting-started.html">official Rust book</a> <em>completely</em>. However, we hope that a Dioxus app can serve as a great first Rust project. With Dioxus, you&#x27;ll learn about:</p><ul><li>Error handling</li><li>Structs, Functions, Enums</li><li>Closures</li><li>Macros</li></ul><p>We&#x27;ve put a lot of care into making Dioxus syntax familiar and easy to understand, so you won&#x27;t need deep knowledge of async, lifetimes, or smart pointers until you start building complex Dioxus apps.</p><h2 id="setup-guides"><a class="header" href="#setup-guides">Setup Guides</a></h2><p>Dioxus supports multiple platforms. Choose the platform you want to target below to get platform-specific setup instructions:</p><ul><li><a href="getting_started/choosing_a_web_renderer">Choosing a Web Renderer</a></li><li><a href="getting_started/wasm">Client Side</a>: runs in the browser through WebAssembly</li><li><a href="getting_started/liveview">Liveview</a>: runs on the server, renders in the browser using WebSockets</li><li><a href="getting_started/fullstack">Fullstack</a>: renders to HTML text on the server and hydrates it on the client</li><li><a href="getting_started/desktop">Desktop</a>: runs in a web view on desktop</li><li><a href="getting_started/mobile">Mobile</a>: runs in a web view on mobile</li><li><a href="getting_started/tui">Terminal UI</a>: renders text-based graphics in the terminal</li></ul><blockquote><p>More information on any platform you choose is available in the section of the same name in the <a href="getting_started/../reference">Reference</a></p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=getting-started#getting-started"><!--#-->Getting Started<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=prerequisites#prerequisites"><!--#-->Prerequisites<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=an-editor#an-editor"><!--#-->An Editor<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=rust#rust"><!--#-->Rust<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup-guides#setup-guides"><!--#-->Setup Guides<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="getting-started"><a class="header" href="#getting-started">Getting Started</a></h1><p>This section will help you set up your Dioxus project!</p><h2 id="prerequisites"><a class="header" href="#prerequisites">Prerequisites</a></h2><h3 id="an-editor"><a class="header" href="#an-editor">An Editor</a></h3><p>Dioxus integrates very well with the <a href="https://rust-analyzer.github.io">Rust-Analyzer LSP plugin</a> which will provide appropriate syntax highlighting, code navigation, folding, and more.</p><h3 id="rust"><a class="header" href="#rust">Rust</a></h3><p>Head over to <a href="http://rust-lang.org">https://rust-lang.org</a> and install the Rust compiler.</p><p>We strongly recommend going through the <a href="https://doc.rust-lang.org/book/ch01-00-getting-started.html">official Rust book</a> <em>completely</em>. However, we hope that a Dioxus app can serve as a great first Rust project. With Dioxus, you&#x27;ll learn about:</p><ul><li>Error handling</li><li>Structs, Functions, Enums</li><li>Closures</li><li>Macros</li></ul><p>We&#x27;ve put a lot of care into making Dioxus syntax familiar and easy to understand, so you won&#x27;t need deep knowledge of async, lifetimes, or smart pointers until you start building complex Dioxus apps.</p><h2 id="setup-guides"><a class="header" href="#setup-guides">Setup Guides</a></h2><p>Dioxus supports multiple platforms. Choose the platform you want to target below to get platform-specific setup instructions:</p><ul><li><a href="getting_started/choosing_a_web_renderer">Choosing a Web Renderer</a></li><li><a href="getting_started/wasm">Client Side</a>: runs in the browser through WebAssembly</li><li><a href="getting_started/liveview">Liveview</a>: runs on the server, renders in the browser using WebSockets</li><li><a href="getting_started/fullstack">Fullstack</a>: renders to HTML text on the server and hydrates it on the client</li><li><a href="getting_started/desktop">Desktop</a>: runs in a web view on desktop</li><li><a href="getting_started/mobile">Mobile</a>: runs in a web view on mobile</li><li><a href="getting_started/tui">Terminal UI</a>: renders text-based graphics in the terminal</li></ul><blockquote><p>More information on any platform you choose is available in the section of the same name in the <a href="getting_started/../reference">Reference</a></p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=getting-started#getting-started"><!--#-->Getting Started<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=prerequisites#prerequisites"><!--#-->Prerequisites<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=an-editor#an-editor"><!--#-->An Editor<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=rust#rust"><!--#-->Rust<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup-guides#setup-guides"><!--#-->Setup Guides<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/getting_started/liveview/index.html b/learn/0.4/getting_started/liveview/index.html
index 9ac139264..396a79815 100644
--- a/learn/0.4/getting_started/liveview/index.html
+++ b/learn/0.4/getting_started/liveview/index.html
@@ -209,7 +209,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>And that&#x27;s it!</p><h2 id="hot-reload"><a class="header" href="#hot-reload">Hot Reload</a></h2><ol><li>Hot reloading allows much faster iteration times inside of rsx calls by interpreting them and streaming the edits.</li><li>It is useful when changing the styling/layout of a program, but will not help with changing the logic of a program.</li></ol><h3 id="setup"><a class="header" href="#setup">Setup</a></h3><p>Install <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">dioxus-cli</a>.</p><h3 id="usage"><a class="header" href="#usage">Usage</a></h3><ol><li>Run:</li></ol><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">dx serve --hot-reload --platform desktop
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=liveview#liveview"><!--#-->Liveview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=support#support"><!--#-->Support<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=liveview#liveview"><!--#-->Liveview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=support#support"><!--#-->Support<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/getting_started/mobile/index.html b/learn/0.4/getting_started/mobile/index.html
index 1d2b4c8d4..ac826b496 100644
--- a/learn/0.4/getting_started/mobile/index.html
+++ b/learn/0.4/getting_started/mobile/index.html
@@ -229,7 +229,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>This will open an android studio project for this application.</p><p>Next we need to create a simulator in Android studio to run our app in. To create a simulator click on the phone icon in the top right of Android studio:</p><p><img src="/static/android-studio-simulator.png" alt="android studio manage devices" title=""/></p><p>Then click the <code>create a virtual device</code> button and follow the prompts:</p><p><img src="/static/android-studio-devices.png" alt="android studio devices" title=""/></p><p>Finally, launch your device by clicking the play button on the device you created:</p><p><img src="/static/android-studio-device.png" alt="android studio device" title=""/></p><p>Now you can start your application from your terminal by running:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">cargo android run
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p><img src="/static/Android-Dioxus-demo.png" alt="android_demo" title=""/></p><blockquote><p>More information is available in the Android docs:</p><ul><li>https://developer.android.com/ndk/guides</li><li>https://developer.android.com/studio/projects/install-ndk</li><li>https://source.android.com/docs/setup/build/rust/building-rust-modules/overview</li></ul></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=mobile-app#mobile-app"><!--#-->Mobile App<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=support#support"><!--#-->Support<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=getting-set-up#getting-set-up"><!--#-->Getting Set up<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setting-up-dependencies#setting-up-dependencies"><!--#-->Setting up dependencies<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=android#android"><!--#-->Android<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=ios#ios"><!--#-->IOS<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setting-up-your-project#setting-up-your-project"><!--#-->Setting up your project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=running#running"><!--#-->Running<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=ios#ios"><!--#-->IOS<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=android#android"><!--#-->Android<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p><img src="/static/Android-Dioxus-demo.png" alt="android_demo" title=""/></p><blockquote><p>More information is available in the Android docs:</p><ul><li>https://developer.android.com/ndk/guides</li><li>https://developer.android.com/studio/projects/install-ndk</li><li>https://source.android.com/docs/setup/build/rust/building-rust-modules/overview</li></ul></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=mobile-app#mobile-app"><!--#-->Mobile App<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=support#support"><!--#-->Support<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=getting-set-up#getting-set-up"><!--#-->Getting Set up<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setting-up-dependencies#setting-up-dependencies"><!--#-->Setting up dependencies<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=android#android"><!--#-->Android<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=ios#ios"><!--#-->IOS<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setting-up-your-project#setting-up-your-project"><!--#-->Setting up your project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=running#running"><!--#-->Running<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=ios#ios"><!--#-->IOS<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=android#android"><!--#-->Android<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/getting_started/tui/index.html b/learn/0.4/getting_started/tui/index.html
index 92af9b50f..c625ea24c 100644
--- a/learn/0.4/getting_started/tui/index.html
+++ b/learn/0.4/getting_started/tui/index.html
@@ -204,7 +204,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="hot-reload"><a class="header" href="#hot-reload">Hot Reload</a></h2><ol><li>Hot reloading allows much faster iteration times inside of rsx calls by interpreting them and streaming the edits.</li><li>It is useful when changing the styling/layout of a program, but will not help with changing the logic of a program.</li></ol><h3 id="setup"><a class="header" href="#setup">Setup</a></h3><p>Install <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">dioxus-cli</a>.</p><h3 id="usage"><a class="header" href="#usage">Usage</a></h3><ol><li>Run:</li></ol><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">dx serve --hot-reload --platform desktop
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=terminal-ui#terminal-ui"><!--#-->Terminal UI<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=support#support"><!--#-->Support<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=getting-set-up#getting-set-up"><!--#-->Getting Set up<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=terminal-ui#terminal-ui"><!--#-->Terminal UI<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=support#support"><!--#-->Support<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=getting-set-up#getting-set-up"><!--#-->Getting Set up<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/getting_started/wasm/index.html b/learn/0.4/getting_started/wasm/index.html
index ced269744..e7ddbda9b 100644
--- a/learn/0.4/getting_started/wasm/index.html
+++ b/learn/0.4/getting_started/wasm/index.html
@@ -173,7 +173,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>If you open the browser and navigate to <code>127.0.0.1</code> you should see an app that looks like this:</p><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div>Hello, world!</div></div><h2 id="hot-reload"><a class="header" href="#hot-reload">Hot Reload</a></h2><ol><li>Hot reloading allows much faster iteration times inside of rsx calls by interpreting them and streaming the edits.</li><li>It is useful when changing the styling/layout of a program, but will not help with changing the logic of a program.</li></ol><p>For the web renderer, you can use the dioxus cli to serve your application with hot reloading enabled.</p><h3 id="setup"><a class="header" href="#setup">Setup</a></h3><p>Install <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli">dioxus-cli</a>.</p><h3 id="usage"><a class="header" href="#usage">Usage</a></h3><ol><li>Run:</li></ol><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">dx serve --hot-reload
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Open your localhost in a browser</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=web#web"><!--#-->Web<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=support#support"><!--#-->Support<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=tooling#tooling"><!--#-->Tooling<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-a-project#creating-a-project"><!--#-->Creating a Project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><ol><li>Change some code within a rsx or render macro</li><li>Open your localhost in a browser</li><li>Save and watch the style change without recompiling</li></ol><h3 id="limitations"><a class="header" href="#limitations">Limitations</a></h3><ol><li>The interpreter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will require a full recompile to capture the expression.</li><li>Components, Iterators, and some attributes can contain arbitrary rust code and will trigger a full recompile when changed.</li></ol><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=web#web"><!--#-->Web<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=support#support"><!--#-->Support<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=tooling#tooling"><!--#-->Tooling<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-a-project#creating-a-project"><!--#-->Creating a Project<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=hot-reload#hot-reload"><!--#-->Hot Reload<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=usage#usage"><!--#-->Usage<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=limitations#limitations"><!--#-->Limitations<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/guide/data_fetching/index.html b/learn/0.4/guide/data_fetching/index.html
index 9334f442e..e726c4d1d 100644
--- a/learn/0.4/guide/data_fetching/index.html
+++ b/learn/0.4/guide/data_fetching/index.html
@@ -300,7 +300,7 @@
 </span><span style="color:#c0c5ce;">                    </span><span style="color:#65737e;">// ...
 </span><span style="color:#c0c5ce;">
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;">Loading items</div><div style="width:50%;">Hover over a story to preview it here</div></div></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=fetching-data#fetching-data"><!--#-->Fetching Data<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=defining-the-api#defining-the-api"><!--#-->Defining the API<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=working-with-async#working-with-async"><!--#-->Working with Async<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=lazily-fetching-data#lazily-fetching-data"><!--#-->Lazily Fetching Data<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;">Loading items</div><div style="width:50%;">Hover over a story to preview it here</div></div></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=fetching-data#fetching-data"><!--#-->Fetching Data<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=defining-the-api#defining-the-api"><!--#-->Defining the API<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=working-with-async#working-with-async"><!--#-->Working with Async<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=lazily-fetching-data#lazily-fetching-data"><!--#-->Lazily Fetching Data<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/guide/full_code/index.html b/learn/0.4/guide/full_code/index.html
index 9c053dbb7..4189c0239 100644
--- a/learn/0.4/guide/full_code/index.html
+++ b/learn/0.4/guide/full_code/index.html
@@ -441,7 +441,7 @@
 </span><span style="color:#c0c5ce;">}
 </span><span style="color:#c0c5ce;">
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=challenges#challenges"><!--#-->Challenges<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-full-code-for-the-hacker-news-project#the-full-code-for-the-hacker-news-project"><!--#-->The full code for the hacker news project<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=challenges#challenges"><!--#-->Challenges<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the-full-code-for-the-hacker-news-project#the-full-code-for-the-hacker-news-project"><!--#-->The full code for the hacker news project<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/guide/index.html b/learn/0.4/guide/index.html
index 3d359f019..bcbe0cc30 100644
--- a/learn/0.4/guide/index.html
+++ b/learn/0.4/guide/index.html
@@ -141,7 +141,7 @@
 </span><span style="color:#c0c5ce;">cargo add serde_json
 </span><span style="color:#c0c5ce;">cargo add async_recursion
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><pre></pre></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><pre></pre></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/guide/state/index.html b/learn/0.4/guide/state/index.html
index e4bea978f..025ff4836 100644
--- a/learn/0.4/guide/state/index.html
+++ b/learn/0.4/guide/state/index.html
@@ -216,7 +216,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;"><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0  points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/19/23 12:15 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0  comments<!--#--></div></div></div></div><div style="width:50%;">Hover over a story to preview it here</div></div></div><h2 id="event-handlers"><a class="header" href="#event-handlers">Event Handlers</a></h2><p>Next, we need to detect when the user hovers over a section or focuses a link. We can use an <a href="../reference/event_handlers">event listener</a> to listen for the hover and focus events.</p><p>Event handlers are similar to regular attributes, but their name usually starts with <code>on</code>- and they accept closures as values. The closure will be called whenever the event it listens for is triggered. When an event is triggered, information about the event is passed to the closure though the <a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.Event.html">Event</a> structure.</p><p>Let&#x27;s create a <a href="https://docs.rs/dioxus/latest/dioxus/events/fn.onmouseenter.html"><code>onmouseenter</code></a> event listener in the StoryListing component:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;"><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0  points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/20/23  7:41 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0  comments<!--#--></div></div></div></div><div style="width:50%;">Hover over a story to preview it here</div></div></div><h2 id="event-handlers"><a class="header" href="#event-handlers">Event Handlers</a></h2><p>Next, we need to detect when the user hovers over a section or focuses a link. We can use an <a href="../reference/event_handlers">event listener</a> to listen for the hover and focus events.</p><p>Event handlers are similar to regular attributes, but their name usually starts with <code>on</code>- and they accept closures as values. The closure will be called whenever the event it listens for is triggered. When an event is triggered, information about the event is passed to the closure though the <a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.Event.html">Event</a> structure.</p><p>Let&#x27;s create a <a href="https://docs.rs/dioxus/latest/dioxus/events/fn.onmouseenter.html"><code>onmouseenter</code></a> event listener in the StoryListing component:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">cx.</span><span style="color:#96b5b4;">render</span><span style="color:#c0c5ce;">(rsx! {
 </span><span style="color:#c0c5ce;">    div {
 </span><span style="color:#c0c5ce;">        padding: &quot;</span><span style="color:#a3be8c;">0.5rem</span><span style="color:#c0c5ce;">&quot;,
@@ -332,7 +332,7 @@
 </span><span style="color:#c0c5ce;">    </span><span style="color:#65737e;">// New
 </span><span style="color:#c0c5ce;">    </span><span style="color:#b48ead;">match </span><span style="color:#c0c5ce;">&amp;*preview_state.</span><span style="color:#96b5b4;">read</span><span style="color:#c0c5ce;">() {
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;"><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0  points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/19/23 12:15 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0  comments<!--#--></div></div></div></div><div style="width:50%;">Hover over a story to preview it here</div></div></div><blockquote><p>You can read more about Hooks in the <a href="../reference/hooks">Hooks reference</a></p></blockquote><h3 id="the-rules-of-hooks"><a class="header" href="#the-rules-of-hooks">The Rules of Hooks</a></h3><p>Hooks are a powerful way to manage state in Dioxus, but there are some rules you need to follow to insure they work as expected. Dioxus uses the order you call hooks to differentiate between hooks. Because the order you call hooks matters, you must follow these rules:</p><ol><li>Hooks may be only used in components or other hooks (we&#x27;ll get to that later)</li><li>On every call to the component function<ol><li>The same hooks must be called</li><li>In the same order</li></ol></li><li>Hooks name&#x27;s should start with use_ so you don&#x27;t accidentally confuse them with regular functions</li></ol><p>These rules mean that there are certain things you can&#x27;t do with hooks:</p><h4 id="no-hooks-in-conditionals"><a class="header" href="#no-hooks-in-conditionals">No Hooks in Conditionals</a></h4><div style="position: relative;"><div><pre style="background-color:#2b303b;">
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="display:flex;flex-direction:row;width:100%;"><div style="width:50%;"><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0  points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/20/23  7:41 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0  comments<!--#--></div></div></div></div><div style="width:50%;">Hover over a story to preview it here</div></div></div><blockquote><p>You can read more about Hooks in the <a href="../reference/hooks">Hooks reference</a></p></blockquote><h3 id="the-rules-of-hooks"><a class="header" href="#the-rules-of-hooks">The Rules of Hooks</a></h3><p>Hooks are a powerful way to manage state in Dioxus, but there are some rules you need to follow to insure they work as expected. Dioxus uses the order you call hooks to differentiate between hooks. Because the order you call hooks matters, you must follow these rules:</p><ol><li>Hooks may be only used in components or other hooks (we&#x27;ll get to that later)</li><li>On every call to the component function<ol><li>The same hooks must be called</li><li>In the same order</li></ol></li><li>Hooks name&#x27;s should start with use_ so you don&#x27;t accidentally confuse them with regular functions</li></ol><p>These rules mean that there are certain things you can&#x27;t do with hooks:</p><h4 id="no-hooks-in-conditionals"><a class="header" href="#no-hooks-in-conditionals">No Hooks in Conditionals</a></h4><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#65737e;">// ❌ don&#39;t call hooks in conditionals!
 </span><span style="color:#65737e;">// We must ensure that the same hooks will be called every time
 </span><span style="color:#65737e;">// But `if` statements only run if the conditional is true!
@@ -379,7 +379,7 @@
 </span><span style="color:#c0c5ce;">    println!(&quot;</span><span style="color:#a3be8c;">selected: </span><span style="color:#d08770;">{is_selected}</span><span style="color:#c0c5ce;">&quot;);
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=interactivity#interactivity"><!--#-->Interactivity<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-a-preview#creating-a-preview"><!--#-->Creating a Preview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=event-handlers#event-handlers"><!--#-->Event Handlers<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=state#state"><!--#-->State<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=the-rules-of-hooks#the-rules-of-hooks"><!--#-->The Rules of Hooks<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=no-hooks-in-conditionals#no-hooks-in-conditionals"><!--#-->No Hooks in Conditionals<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=no-hooks-in-closures#no-hooks-in-closures"><!--#-->No Hooks in Closures<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=no-hooks-in-loops#no-hooks-in-loops"><!--#-->No Hooks in Loops<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=interactivity#interactivity"><!--#-->Interactivity<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-a-preview#creating-a-preview"><!--#-->Creating a Preview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=event-handlers#event-handlers"><!--#-->Event Handlers<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=state#state"><!--#-->State<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=the-rules-of-hooks#the-rules-of-hooks"><!--#-->The Rules of Hooks<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=no-hooks-in-conditionals#no-hooks-in-conditionals"><!--#-->No Hooks in Conditionals<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=no-hooks-in-closures#no-hooks-in-closures"><!--#-->No Hooks in Closures<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=no-hooks-in-loops#no-hooks-in-loops"><!--#-->No Hooks in Loops<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/guide/your_first_component/index.html b/learn/0.4/guide/your_first_component/index.html
index b1abb9179..07c5fd729 100644
--- a/learn/0.4/guide/your_first_component/index.html
+++ b/learn/0.4/guide/your_first_component/index.html
@@ -153,7 +153,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><!--#-->title by author (0) 2023-09-19 12:15:02.366862438 UTC comments<!--#--></div><h2 id="creating-elements"><a class="header" href="#creating-elements">Creating Elements</a></h2><p>Next, let&#x27;s wrap our post description in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><code>div</code></a>. You can create HTML elements in Dioxus by putting a { after the element name and a } after the last child of the element:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><!--#-->title by author (0) 2023-09-20 19:41:31.190195462 UTC comments<!--#--></div><h2 id="creating-elements"><a class="header" href="#creating-elements">Creating Elements</a></h2><p>Next, let&#x27;s wrap our post description in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><code>div</code></a>. You can create HTML elements in Dioxus by putting a { after the element name and a } after the last child of the element:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#b48ead;">pub fn </span><span style="color:#8fa1b3;">App</span><span style="color:#c0c5ce;">(</span><span style="color:#bf616a;">cx</span><span style="color:#c0c5ce;">: Scope) -&gt; Element {
 </span><span style="color:#c0c5ce;">    </span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> title = &quot;</span><span style="color:#a3be8c;">title</span><span style="color:#c0c5ce;">&quot;;
 </span><span style="color:#c0c5ce;">    </span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> by = &quot;</span><span style="color:#a3be8c;">author</span><span style="color:#c0c5ce;">&quot;;
@@ -168,7 +168,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div><!--#-->title by author (0) 2023-09-19 12:15:02.366870339 UTC comments<!--#--></div></div><blockquote><p>You can read more about elements in the <a href="../reference/rsx">rsx reference</a>.</p></blockquote><h2 id="setting-attributes"><a class="header" href="#setting-attributes">Setting Attributes</a></h2><p>Next, let&#x27;s add some padding around our post listing with an attribute.</p><p>Attributes (and <a href="../reference/event_handlers">listeners</a>) modify the behavior or appearance of the element they are attached to. They are specified inside the {} brackets before any children, using the name: value syntax. You can format the text in the attribute as you would with a text node:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div><!--#-->title by author (0) 2023-09-20 19:41:31.190203663 UTC comments<!--#--></div></div><blockquote><p>You can read more about elements in the <a href="../reference/rsx">rsx reference</a>.</p></blockquote><h2 id="setting-attributes"><a class="header" href="#setting-attributes">Setting Attributes</a></h2><p>Next, let&#x27;s add some padding around our post listing with an attribute.</p><p>Attributes (and <a href="../reference/event_handlers">listeners</a>) modify the behavior or appearance of the element they are attached to. They are specified inside the {} brackets before any children, using the name: value syntax. You can format the text in the attribute as you would with a text node:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#b48ead;">pub fn </span><span style="color:#8fa1b3;">App</span><span style="color:#c0c5ce;">(</span><span style="color:#bf616a;">cx</span><span style="color:#c0c5ce;">: Scope) -&gt; Element {
 </span><span style="color:#c0c5ce;">    </span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> title = &quot;</span><span style="color:#a3be8c;">title</span><span style="color:#c0c5ce;">&quot;;
 </span><span style="color:#c0c5ce;">    </span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> by = &quot;</span><span style="color:#a3be8c;">author</span><span style="color:#c0c5ce;">&quot;;
@@ -185,7 +185,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="padding:0.5rem;position:relative;"><!--#-->title by author (0) 2023-09-19 12:15:02.366874439 UTC comments<!--#--></div></div><blockquote><p>Note: All attributes defined in <a href="https://docs.rs/dioxus-html/latest/dioxus_html/"><code>dioxus-html</code></a> follow the snake_case naming convention. They transform their snake_case names to HTML&#x27;s camelCase attributes.</p></blockquote><blockquote><p>Note: Styles can be used directly outside of the <code>style:</code> attribute. In the above example, <code>color: &quot;red&quot;</code> is turned into <code>style=&quot;color: red&quot;</code>.</p></blockquote><blockquote><p>You can read more about elements in the <a href="../reference/rsx">attribute reference</a></p></blockquote><h2 id="creating-a-component"><a class="header" href="#creating-a-component">Creating a Component</a></h2><p>Just like you wouldn&#x27;t want to write a complex program in a single, long, <code>main</code> function, you shouldn&#x27;t build a complex UI in a single <code>App</code> function. Instead, you should break down the functionality of an app in logical parts called components.</p><p>A component is a Rust function, named in UpperCamelCase, that takes a <code>Scope</code> parameter and returns an <code>Element</code> describing the UI it wants to render. In fact, our <code>App</code> function is a component!</p><p>Let&#x27;s pull our story description into a new component:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="padding:0.5rem;position:relative;"><!--#-->title by author (0) 2023-09-20 19:41:31.190207763 UTC comments<!--#--></div></div><blockquote><p>Note: All attributes defined in <a href="https://docs.rs/dioxus-html/latest/dioxus_html/"><code>dioxus-html</code></a> follow the snake_case naming convention. They transform their snake_case names to HTML&#x27;s camelCase attributes.</p></blockquote><blockquote><p>Note: Styles can be used directly outside of the <code>style:</code> attribute. In the above example, <code>color: &quot;red&quot;</code> is turned into <code>style=&quot;color: red&quot;</code>.</p></blockquote><blockquote><p>You can read more about elements in the <a href="../reference/rsx">attribute reference</a></p></blockquote><h2 id="creating-a-component"><a class="header" href="#creating-a-component">Creating a Component</a></h2><p>Just like you wouldn&#x27;t want to write a complex program in a single, long, <code>main</code> function, you shouldn&#x27;t build a complex UI in a single <code>App</code> function. Instead, you should break down the functionality of an app in logical parts called components.</p><p>A component is a Rust function, named in UpperCamelCase, that takes a <code>Scope</code> parameter and returns an <code>Element</code> describing the UI it wants to render. In fact, our <code>App</code> function is a component!</p><p>Let&#x27;s pull our story description into a new component:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#b48ead;">fn </span><span style="color:#8fa1b3;">StoryListing</span><span style="color:#c0c5ce;">(</span><span style="color:#bf616a;">cx</span><span style="color:#c0c5ce;">: Scope) -&gt; Element {
 </span><span style="color:#c0c5ce;">    </span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> title = &quot;</span><span style="color:#a3be8c;">title</span><span style="color:#c0c5ce;">&quot;;
 </span><span style="color:#c0c5ce;">    </span><span style="color:#b48ead;">let</span><span style="color:#c0c5ce;"> by = &quot;</span><span style="color:#a3be8c;">author</span><span style="color:#c0c5ce;">&quot;;
@@ -211,7 +211,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="padding:0.5rem;position:relative;"><!--#-->title by author (0) 2023-09-19 12:15:02.366882039 UTC comments<!--#--></div></div><blockquote><p>You can read more about elements in the <a href="../reference/components">component reference</a></p></blockquote><h2 id="creating-props"><a class="header" href="#creating-props">Creating Props</a></h2><p>Just like you can pass arguments to a function or attributes to an element, you can pass props to a component that customize its behavior!</p><p>We can define arguments that components can take when they are rendered (called <code>Props</code>) by adding the <code>#[inline_props]</code> macro before our function definition and adding extra function arguments.</p><p>Currently, our <code>StoryListing</code> component always renders the same story. We can modify it to accept a story to render as a prop.</p><p>We will also define what a post is and include information for how to transform our post to and from a different format using <a href="https://serde.rs">serde</a>. This will be used with the hackernews API in a later chapter:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="padding:0.5rem;position:relative;"><!--#-->title by author (0) 2023-09-20 19:41:31.190215564 UTC comments<!--#--></div></div><blockquote><p>You can read more about elements in the <a href="../reference/components">component reference</a></p></blockquote><h2 id="creating-props"><a class="header" href="#creating-props">Creating Props</a></h2><p>Just like you can pass arguments to a function or attributes to an element, you can pass props to a component that customize its behavior!</p><p>We can define arguments that components can take when they are rendered (called <code>Props</code>) by adding the <code>#[inline_props]</code> macro before our function definition and adding extra function arguments.</p><p>Currently, our <code>StoryListing</code> component always renders the same story. We can modify it to accept a story to render as a prop.</p><p>We will also define what a post is and include information for how to transform our post to and from a different format using <a href="https://serde.rs">serde</a>. This will be used with the hackernews API in a later chapter:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#b48ead;">use </span><span style="color:#c0c5ce;">chrono::{DateTime, Utc};
 </span><span style="color:#b48ead;">use </span><span style="color:#c0c5ce;">serde::{Deserialize, Serialize};
 </span><span style="color:#c0c5ce;">
@@ -302,7 +302,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="padding:0.5rem;position:relative;"><!--#-->hello hackernews by Author (0) 2023-09-19 12:15:02.366887639 UTC 0<!--#--></div></div><blockquote><p>You can read more about Props in the <a href="../reference/component_props">Props reference</a></p></blockquote><h2 id="cleaning-up-our-interface"><a class="header" href="#cleaning-up-our-interface">Cleaning Up Our Interface</a></h2><p>Finally, by combining elements and attributes, we can make our post listing much more appealing:</p><p>Full code up to this point:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="padding:0.5rem;position:relative;"><!--#-->hello hackernews by Author (0) 2023-09-20 19:41:31.190219364 UTC 0<!--#--></div></div><blockquote><p>You can read more about Props in the <a href="../reference/component_props">Props reference</a></p></blockquote><h2 id="cleaning-up-our-interface"><a class="header" href="#cleaning-up-our-interface">Cleaning Up Our Interface</a></h2><p>Finally, by combining elements and attributes, we can make our post listing much more appealing:</p><p>Full code up to this point:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#b48ead;">use </span><span style="color:#c0c5ce;">dioxus::prelude::*;
 </span><span style="color:#c0c5ce;">
 </span><span style="color:#65737e;">// Define the Hackernews types
@@ -443,7 +443,7 @@
 </span><span style="color:#c0c5ce;">    })
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0  points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/19/23 12:15 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0  comments<!--#--></div></div></div></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=your-first-component#your-first-component"><!--#-->Your First Component<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=dynamic-text#dynamic-text"><!--#-->Dynamic Text<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-elements#creating-elements"><!--#-->Creating Elements<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setting-attributes#setting-attributes"><!--#-->Setting Attributes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-a-component#creating-a-component"><!--#-->Creating a Component<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-props#creating-props"><!--#-->Creating Props<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=cleaning-up-our-interface#cleaning-up-our-interface"><!--#-->Cleaning Up Our Interface<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div style="padding:0.5rem;position:relative;"><div style="font-size:1.5rem;"><a href=""><!--#-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;"><!--#--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--#-->0  points<!--#--></div><div style="padding-left:0.5rem;"><!--#-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--#-->09/20/23  7:41 PM<!--#--></div><div style="padding-left:0.5rem;"><!--#-->0  comments<!--#--></div></div></div></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=your-first-component#your-first-component"><!--#-->Your First Component<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=dynamic-text#dynamic-text"><!--#-->Dynamic Text<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-elements#creating-elements"><!--#-->Creating Elements<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setting-attributes#setting-attributes"><!--#-->Setting Attributes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-a-component#creating-a-component"><!--#-->Creating a Component<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-props#creating-props"><!--#-->Creating Props<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=cleaning-up-our-interface#cleaning-up-our-interface"><!--#-->Cleaning Up Our Interface<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/index.html b/learn/0.4/index.html
index 4959c31f8..a1431ce22 100644
--- a/learn/0.4/index.html
+++ b/learn/0.4/index.html
@@ -147,7 +147,7 @@
 </span><span style="color:#c0c5ce;">}
 </span><span style="color:#c0c5ce;">
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><h1><!--#-->High-Five counter: 0<!--#--></h1><button>Up high!</button><button>Down low!</button></div><p>Dioxus is heavily inspired by React. If you know React, getting started with Dioxus will be a breeze.</p><blockquote><p>This guide assumes you already know some <a href="https://www.rust-lang.org/">Rust</a>! If not, we recommend reading <a href="https://doc.rust-lang.org/book/ch01-00-getting-started.html"><em>the book</em></a> to learn Rust first.</p></blockquote><h2 id="features"><a class="header" href="#features">Features</a></h2><ul><li>Desktop apps running natively (no Electron!) in less than 10 lines of code.</li><li>Incredibly ergonomic and powerful state management.</li><li>Comprehensive inline documentation – hover and guides for all HTML elements, listeners, and events.</li><li>Extremely memory efficient – 0 global allocations for steady-state components.</li><li>Multi-channel asynchronous scheduler for first-class async support.</li><li>And more! Read the <a href="https://dioxuslabs.com/blog/introducing-dioxus/">full release post</a>.</li></ul><h3 id="multiplatform"><a class="header" href="#multiplatform">Multiplatform</a></h3><p>Dioxus is a <em>portable</em> toolkit, meaning the Core implementation can run anywhere with no platform-dependent linking. Unlike many other Rust frontend toolkits, Dioxus is not intrinsically linked to WebSys. In fact, every element and event listener can be swapped out at compile time. By default, Dioxus ships with the html feature enabled, but this can be disabled depending on your target renderer.</p><p>Right now, we have several 1st-party renderers:</p><ul><li>WebSys (for WASM): Great support</li><li>Tao/Tokio (for Desktop apps): Good support</li><li>Tao/Tokio (for Mobile apps): Poor support</li><li>SSR (for generating static markup)</li><li>TUI/Rink (for terminal-based apps): Experimental</li></ul><h2 id="stability"><a class="header" href="#stability">Stability</a></h2><p>Dioxus has not reached a stable release yet.</p><p>Web: Since the web is a fairly mature platform, we expect there to be very little API churn for web-based features.</p><p>Desktop: APIs will likely be in flux as we figure out better patterns than our ElectronJS counterpart.</p><p>SSR: We don&#x27;t expect the SSR API to change drastically in the future.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=introduction#introduction"><!--#-->Introduction<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=features#features"><!--#-->Features<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=multiplatform#multiplatform"><!--#-->Multiplatform<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=stability#stability"><!--#-->Stability<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><h1><!--#-->High-Five counter: 0<!--#--></h1><button>Up high!</button><button>Down low!</button></div><p>Dioxus is heavily inspired by React. If you know React, getting started with Dioxus will be a breeze.</p><blockquote><p>This guide assumes you already know some <a href="https://www.rust-lang.org/">Rust</a>! If not, we recommend reading <a href="https://doc.rust-lang.org/book/ch01-00-getting-started.html"><em>the book</em></a> to learn Rust first.</p></blockquote><h2 id="features"><a class="header" href="#features">Features</a></h2><ul><li>Desktop apps running natively (no Electron!) in less than 10 lines of code.</li><li>Incredibly ergonomic and powerful state management.</li><li>Comprehensive inline documentation – hover and guides for all HTML elements, listeners, and events.</li><li>Extremely memory efficient – 0 global allocations for steady-state components.</li><li>Multi-channel asynchronous scheduler for first-class async support.</li><li>And more! Read the <a href="https://dioxuslabs.com/blog/introducing-dioxus/">full release post</a>.</li></ul><h3 id="multiplatform"><a class="header" href="#multiplatform">Multiplatform</a></h3><p>Dioxus is a <em>portable</em> toolkit, meaning the Core implementation can run anywhere with no platform-dependent linking. Unlike many other Rust frontend toolkits, Dioxus is not intrinsically linked to WebSys. In fact, every element and event listener can be swapped out at compile time. By default, Dioxus ships with the html feature enabled, but this can be disabled depending on your target renderer.</p><p>Right now, we have several 1st-party renderers:</p><ul><li>WebSys (for WASM): Great support</li><li>Tao/Tokio (for Desktop apps): Good support</li><li>Tao/Tokio (for Mobile apps): Poor support</li><li>SSR (for generating static markup)</li><li>TUI/Rink (for terminal-based apps): Experimental</li></ul><h2 id="stability"><a class="header" href="#stability">Stability</a></h2><p>Dioxus has not reached a stable release yet.</p><p>Web: Since the web is a fairly mature platform, we expect there to be very little API churn for web-based features.</p><p>Desktop: APIs will likely be in flux as we figure out better patterns than our ElectronJS counterpart.</p><p>SSR: We don&#x27;t expect the SSR API to change drastically in the future.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=introduction#introduction"><!--#-->Introduction<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=features#features"><!--#-->Features<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=multiplatform#multiplatform"><!--#-->Multiplatform<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=stability#stability"><!--#-->Stability<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/migration/hot_reload/index.html b/learn/0.4/migration/hot_reload/index.html
index 3fdd2224f..ce0693ced 100644
--- a/learn/0.4/migration/hot_reload/index.html
+++ b/learn/0.4/migration/hot_reload/index.html
@@ -147,7 +147,7 @@
 </div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>Now you can run your project with the dioxus CLI by passing the <code>--platform</code> flag:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">dx serve --platform desktop --hot-reload
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=hot-reloading#hot-reloading"><!--#-->Hot reloading<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=hot-reloading#hot-reloading"><!--#-->Hot reloading<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/migration/index.html b/learn/0.4/migration/index.html
index 4a6648433..d5f91acf2 100644
--- a/learn/0.4/migration/index.html
+++ b/learn/0.4/migration/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="03-migration-guide"><a class="header" href="#03-migration-guide">0.3 Migration Guide</a></h1><p>This guide will outline the API changes between the <code>0.3</code> and <code>0.4</code> releases. The two major breaking changes in this release are how hot reloading works on desktop platforms and how the router works:</p><ul><li><a href="migration/hot_reload">Hot reload</a></li><li><a href="migration/router">Router</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=0.3-migration-guide#0.3-migration-guide"><!--#-->0.3 Migration Guide<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="03-migration-guide"><a class="header" href="#03-migration-guide">0.3 Migration Guide</a></h1><p>This guide will outline the API changes between the <code>0.3</code> and <code>0.4</code> releases. The two major breaking changes in this release are how hot reloading works on desktop platforms and how the router works:</p><ul><li><a href="migration/hot_reload">Hot reload</a></li><li><a href="migration/router">Router</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=0.3-migration-guide#0.3-migration-guide"><!--#-->0.3 Migration Guide<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/migration/router/index.html b/learn/0.4/migration/router/index.html
index 19592cecc..66d50fc65 100644
--- a/learn/0.4/migration/router/index.html
+++ b/learn/0.4/migration/router/index.html
@@ -254,7 +254,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>You can read more about programmatic navigation in the <a href="../router/reference/navigation/programmatic">Router Book</a>.</p><h3 id="new-features"><a class="header" href="#new-features">New features</a></h3><p>In addition to these changes, there have been many new features added to the router:</p><ul><li><a href="../router/reference/static-generation">static generation support</a></li><li><a href="../router/reference/layouts">Layouts</a></li><li><a href="../router/reference/routes/nested">Nesting</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=router#router"><!--#-->Router<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=defining-your-router#defining-your-router"><!--#-->Defining Your Router<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=linking-to-routes#linking-to-routes"><!--#-->Linking to routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=external-links#external-links"><!--#-->External Links<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=use_router#use_router"><!--#-->use_router<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=use_route#use_route"><!--#-->use_route<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=use_navigator#use_navigator"><!--#-->use_navigator<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=new-features#new-features"><!--#-->New features<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>You can read more about programmatic navigation in the <a href="../router/reference/navigation/programmatic">Router Book</a>.</p><h3 id="new-features"><a class="header" href="#new-features">New features</a></h3><p>In addition to these changes, there have been many new features added to the router:</p><ul><li><a href="../router/reference/static-generation">static generation support</a></li><li><a href="../router/reference/layouts">Layouts</a></li><li><a href="../router/reference/routes/nested">Nesting</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=router#router"><!--#-->Router<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=defining-your-router#defining-your-router"><!--#-->Defining Your Router<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=linking-to-routes#linking-to-routes"><!--#-->Linking to routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=external-links#external-links"><!--#-->External Links<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=use_router#use_router"><!--#-->use_router<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=use_route#use_route"><!--#-->use_route<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=use_navigator#use_navigator"><!--#-->use_navigator<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=new-features#new-features"><!--#-->New features<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/component_props/index.html b/learn/0.4/reference/component_props/index.html
index e9d1dd874..cfa1cb0b4 100644
--- a/learn/0.4/reference/component_props/index.html
+++ b/learn/0.4/reference/component_props/index.html
@@ -339,7 +339,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">})
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><a href="https://www.youtube.com/watch?v=C-M2hs3sXGo" class="fancy-button">How to <i>not</i> be seen</a></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=component-props#component-props"><!--#-->Component Props<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=component-props-are-a-single-struct-annotated-with#component-props-are-a-single-struct-annotated-with"><!--#-->Component props are a single struct annotated with <!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=owned-props#owned-props"><!--#-->Owned Props<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=borrowed-props#borrowed-props"><!--#-->Borrowed Props<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=prop-options#prop-options"><!--#-->Prop Options<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=optional-props#optional-props"><!--#-->Optional Props<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=explicitly-required#explicitly-required"><!--#-->Explicitly Required <!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=default-props#default-props"><!--#-->Default Props<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=automatic-conversion-with#automatic-conversion-with"><!--#-->Automatic Conversion with <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=component-children#component-children"><!--#-->Component Children<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><a href="https://www.youtube.com/watch?v=C-M2hs3sXGo" class="fancy-button">How to <i>not</i> be seen</a></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=component-props#component-props"><!--#-->Component Props<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=component-props-are-a-single-struct-annotated-with#component-props-are-a-single-struct-annotated-with"><!--#-->Component props are a single struct annotated with <!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=owned-props#owned-props"><!--#-->Owned Props<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=borrowed-props#borrowed-props"><!--#-->Borrowed Props<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=prop-options#prop-options"><!--#-->Prop Options<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=optional-props#optional-props"><!--#-->Optional Props<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=explicitly-required#explicitly-required"><!--#-->Explicitly Required <!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=default-props#default-props"><!--#-->Default Props<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=automatic-conversion-with#automatic-conversion-with"><!--#-->Automatic Conversion with <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=component-children#component-children"><!--#-->Component Children<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/components/index.html b/learn/0.4/reference/components/index.html
index 7babfd90a..81a591f77 100644
--- a/learn/0.4/reference/components/index.html
+++ b/learn/0.4/reference/components/index.html
@@ -159,7 +159,7 @@
 </span><span style="color:#c0c5ce;">    })
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><p><b>Dioxus Labs</b> An Open Source project dedicated to making Rust UI wonderful.</p><p><b>Dioxus Labs</b> An Open Source project dedicated to making Rust UI wonderful.</p></div><blockquote><p>At this point, it might seem like components are nothing more than functions. However, as you learn more about the features of Dioxus, you&#x27;ll see that they are actually more powerful!</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=components#components"><!--#-->Components<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><p><b>Dioxus Labs</b> An Open Source project dedicated to making Rust UI wonderful.</p><p><b>Dioxus Labs</b> An Open Source project dedicated to making Rust UI wonderful.</p></div><blockquote><p>At this point, it might seem like components are nothing more than functions. However, as you learn more about the features of Dioxus, you&#x27;ll see that they are actually more powerful!</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=components#components"><!--#-->Components<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/context/index.html b/learn/0.4/reference/context/index.html
index 43283f791..35f2a55eb 100644
--- a/learn/0.4/reference/context/index.html
+++ b/learn/0.4/reference/context/index.html
@@ -256,7 +256,7 @@
 </span><span style="color:#c0c5ce;">    }))
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=sharing-state#sharing-state"><!--#-->Sharing State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=lifting-state#lifting-state"><!--#-->Lifting State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=using-shared-state#using-shared-state"><!--#-->Using Shared State<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=sharing-state#sharing-state"><!--#-->Sharing State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=lifting-state#lifting-state"><!--#-->Lifting State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=using-shared-state#using-shared-state"><!--#-->Using Shared State<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/desktop/index.html b/learn/0.4/reference/desktop/index.html
index 2f765b021..f8f5e3a5d 100644
--- a/learn/0.4/reference/desktop/index.html
+++ b/learn/0.4/reference/desktop/index.html
@@ -194,7 +194,7 @@
 </span><span style="color:#c0c5ce;">}
 </span><span style="color:#c0c5ce;">
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="integrating-with-wry"><a class="header" href="#integrating-with-wry">Integrating with Wry</a></h2><p>In cases where you need more low level control over your window, you can use wry APIs exposed through the <a href="https://docs.rs/dioxus-desktop/0.3.0/dioxus_desktop/struct.Config.html">Desktop Config</a> and the <a href="https://docs.rs/dioxus-desktop/0.4.0/dioxus_desktop/fn.use_window.html">use_window hook</a></p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=desktop#desktop"><!--#-->Desktop<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=running-javascript#running-javascript"><!--#-->Running Javascript<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=custom-assets#custom-assets"><!--#-->Custom Assets<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=integrating-with-wry#integrating-with-wry"><!--#-->Integrating with Wry<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="integrating-with-wry"><a class="header" href="#integrating-with-wry">Integrating with Wry</a></h2><p>In cases where you need more low level control over your window, you can use wry APIs exposed through the <a href="https://docs.rs/dioxus-desktop/0.3.0/dioxus_desktop/struct.Config.html">Desktop Config</a> and the <a href="https://docs.rs/dioxus-desktop/0.4.0/dioxus_desktop/fn.use_window.html">use_window hook</a></p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=desktop#desktop"><!--#-->Desktop<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=running-javascript#running-javascript"><!--#-->Running Javascript<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=custom-assets#custom-assets"><!--#-->Custom Assets<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=integrating-with-wry#integrating-with-wry"><!--#-->Integrating with Wry<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/dynamic_rendering/index.html b/learn/0.4/reference/dynamic_rendering/index.html
index 9d8558294..df33262b4 100644
--- a/learn/0.4/reference/dynamic_rendering/index.html
+++ b/learn/0.4/reference/dynamic_rendering/index.html
@@ -268,7 +268,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">))
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><form><input value=""/><input type="submit"/></form><pre></pre></div><h3 id="the"><a class="header" href="#the">The </a>key Attribute</h3><p>Every time you re-render your list, Dioxus needs to keep track of which items go where to determine what updates need to be made to the UI.</p><p>For example, suppose the <code>CommentComponent</code> had some state – e.g. a field where the user typed in a reply. If the order of comments suddenly changes, Dioxus needs to correctly associate that state with the same comment – otherwise, the user will end up replying to a different comment!</p><p>To help Dioxus keep track of list items, we need to associate each item with a unique key. In the example above, we dynamically generated the unique key. In real applications, it&#x27;s more likely that the key will come from e.g. a database ID. It doesn&#x27;t matter where you get the key from, as long as it meets the requirements:</p><ul><li>Keys must be unique in a list</li><li>The same item should always get associated with the same key</li><li>Keys should be relatively small (i.e. converting the entire Comment structure to a String would be a pretty bad key) so they can be compared efficiently</li></ul><p>You might be tempted to use an item&#x27;s index in the list as its key. That’s what Dioxus will use if you don’t specify a key at all. This is only acceptable if you can guarantee that the list is constant – i.e., no re-ordering, additions, or deletions.</p><blockquote><p>Note that if you pass the key to a component you&#x27;ve made, it won&#x27;t receive the key as a prop. It’s only used as a hint by Dioxus itself. If your component needs an ID, you have to pass it as a separate prop.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=dynamic-rendering#dynamic-rendering"><!--#-->Dynamic Rendering<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conditional-rendering#conditional-rendering"><!--#-->Conditional Rendering<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=improving-the#improving-the"><!--#-->Improving the <!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=inspecting#inspecting"><!--#-->Inspecting <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rendering-nothing#rendering-nothing"><!--#-->Rendering Nothing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rendering-lists#rendering-lists"><!--#-->Rendering Lists<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=inline-for-loops#inline-for-loops"><!--#-->Inline for loops<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><form><input value=""/><input type="submit"/></form><pre></pre></div><h3 id="the"><a class="header" href="#the">The </a>key Attribute</h3><p>Every time you re-render your list, Dioxus needs to keep track of which items go where to determine what updates need to be made to the UI.</p><p>For example, suppose the <code>CommentComponent</code> had some state – e.g. a field where the user typed in a reply. If the order of comments suddenly changes, Dioxus needs to correctly associate that state with the same comment – otherwise, the user will end up replying to a different comment!</p><p>To help Dioxus keep track of list items, we need to associate each item with a unique key. In the example above, we dynamically generated the unique key. In real applications, it&#x27;s more likely that the key will come from e.g. a database ID. It doesn&#x27;t matter where you get the key from, as long as it meets the requirements:</p><ul><li>Keys must be unique in a list</li><li>The same item should always get associated with the same key</li><li>Keys should be relatively small (i.e. converting the entire Comment structure to a String would be a pretty bad key) so they can be compared efficiently</li></ul><p>You might be tempted to use an item&#x27;s index in the list as its key. That’s what Dioxus will use if you don’t specify a key at all. This is only acceptable if you can guarantee that the list is constant – i.e., no re-ordering, additions, or deletions.</p><blockquote><p>Note that if you pass the key to a component you&#x27;ve made, it won&#x27;t receive the key as a prop. It’s only used as a hint by Dioxus itself. If your component needs an ID, you have to pass it as a separate prop.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=dynamic-rendering#dynamic-rendering"><!--#-->Dynamic Rendering<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conditional-rendering#conditional-rendering"><!--#-->Conditional Rendering<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=improving-the#improving-the"><!--#-->Improving the <!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=inspecting#inspecting"><!--#-->Inspecting <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rendering-nothing#rendering-nothing"><!--#-->Rendering Nothing<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rendering-lists#rendering-lists"><!--#-->Rendering Lists<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=inline-for-loops#inline-for-loops"><!--#-->Inline for loops<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/event_handlers/index.html b/learn/0.4/reference/event_handlers/index.html
index 492a2bf8b..1a41feae9 100644
--- a/learn/0.4/reference/event_handlers/index.html
+++ b/learn/0.4/reference/event_handlers/index.html
@@ -191,7 +191,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">})
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><blockquote><p>Note: just like any other attribute, you can name the handlers anything you want! Though they must start with <code>on</code>, for the prop to be automatically turned into an <code>EventHandler</code> at the call site.</p><p>You can also put custom data in the event, rather than e.g. <code>MouseData</code></p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=event-handlers#event-handlers"><!--#-->Event Handlers<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=event-propagation#event-propagation"><!--#-->Event propagation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=prevent-default#prevent-default"><!--#-->Prevent Default<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=handler-props#handler-props"><!--#-->Handler Props<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><blockquote><p>Note: just like any other attribute, you can name the handlers anything you want! Though they must start with <code>on</code>, for the prop to be automatically turned into an <code>EventHandler</code> at the call site.</p><p>You can also put custom data in the event, rather than e.g. <code>MouseData</code></p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=event-handlers#event-handlers"><!--#-->Event Handlers<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=event-propagation#event-propagation"><!--#-->Event propagation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=prevent-default#prevent-default"><!--#-->Prevent Default<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=handler-props#handler-props"><!--#-->Handler Props<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/fullstack/authentication/index.html b/learn/0.4/reference/fullstack/authentication/index.html
index 5b11dcd79..8ab835419 100644
--- a/learn/0.4/reference/fullstack/authentication/index.html
+++ b/learn/0.4/reference/fullstack/authentication/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="authentication"><a class="header" href="#authentication">Authentication</a></h1><p>You can use <a href="./extractors">extractors</a> to integrate auth with your Fullstack application.</p><p>You can create a custom extractors that extracts the auth session from the request. From that auth session, you can check if the user has the required privileges before returning the private data.</p><p>A <a href="https://github.com/dioxuslabs/dioxus/blob/master/packages/fullstack/examples/axum-auth/src/main.rs">full auth example</a> with the complete implementation is available in the fullstack examples.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=authentication#authentication"><!--#-->Authentication<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="authentication"><a class="header" href="#authentication">Authentication</a></h1><p>You can use <a href="./extractors">extractors</a> to integrate auth with your Fullstack application.</p><p>You can create a custom extractors that extracts the auth session from the request. From that auth session, you can check if the user has the required privileges before returning the private data.</p><p>A <a href="https://github.com/dioxuslabs/dioxus/blob/master/packages/fullstack/examples/axum-auth/src/main.rs">full auth example</a> with the complete implementation is available in the fullstack examples.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=authentication#authentication"><!--#-->Authentication<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/fullstack/extractors/index.html b/learn/0.4/reference/fullstack/extractors/index.html
index 39ed08820..88063909b 100644
--- a/learn/0.4/reference/fullstack/extractors/index.html
+++ b/learn/0.4/reference/fullstack/extractors/index.html
@@ -141,7 +141,7 @@
 </span><span style="color:#c0c5ce;">    Ok(())
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=extractors#extractors"><!--#-->Extractors<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=extractors#extractors"><!--#-->Extractors<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/fullstack/index.html b/learn/0.4/reference/fullstack/index.html
index 8e5cbc375..824add6dd 100644
--- a/learn/0.4/reference/fullstack/index.html
+++ b/learn/0.4/reference/fullstack/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="fullstack-development"><a class="header" href="#fullstack-development">Fullstack development</a></h1><p>Dioxus Fullstack contains helpers for:</p><ul><li>Incremental, static, and server side rendering</li><li>Hydrating your application on the Client</li><li>Communicating between a server and a client</li></ul><p>This guide will teach you everything you need to know about how to use the utilities in Dioxus fullstack to create amazing fullstack applications.</p><blockquote><p>In addition to this guide, you can find more examples of full-stack apps and information about how to integrate with other frameworks and desktop renderers in the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/fullstack/examples">dioxus-fullstack examples directory</a>.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=fullstack-development#fullstack-development"><!--#-->Fullstack development<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="fullstack-development"><a class="header" href="#fullstack-development">Fullstack development</a></h1><p>Dioxus Fullstack contains helpers for:</p><ul><li>Incremental, static, and server side rendering</li><li>Hydrating your application on the Client</li><li>Communicating between a server and a client</li></ul><p>This guide will teach you everything you need to know about how to use the utilities in Dioxus fullstack to create amazing fullstack applications.</p><blockquote><p>In addition to this guide, you can find more examples of full-stack apps and information about how to integrate with other frameworks and desktop renderers in the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/fullstack/examples">dioxus-fullstack examples directory</a>.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=fullstack-development#fullstack-development"><!--#-->Fullstack development<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/fullstack/middleware/index.html b/learn/0.4/reference/fullstack/middleware/index.html
index 882dc797f..f04f19e28 100644
--- a/learn/0.4/reference/fullstack/middleware/index.html
+++ b/learn/0.4/reference/fullstack/middleware/index.html
@@ -142,7 +142,7 @@
 </span><span style="color:#c0c5ce;">    Ok(())
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=middleware#middleware"><!--#-->Middleware<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=middleware#middleware"><!--#-->Middleware<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/fullstack/routing/index.html b/learn/0.4/reference/fullstack/routing/index.html
index 2908774ec..b042d1b82 100644
--- a/learn/0.4/reference/fullstack/routing/index.html
+++ b/learn/0.4/reference/fullstack/routing/index.html
@@ -228,7 +228,7 @@
 </span><span style="color:#c0c5ce;">}
 </span><span style="color:#c0c5ce;">
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><iframe style="border: 1px solid rgba(0, 0, 0, 0.1);border-radius:2px;" width="800" height="450" src="https://codesandbox.io/p/sandbox/dioxus-fullstack-router-s75v5q?file=%2Fsrc%2Fmain.rs%3A7%2C1?embed=1" allowfullscreen=true></iframe><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=routing#routing"><!--#-->Routing<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><iframe style="border: 1px solid rgba(0, 0, 0, 0.1);border-radius:2px;" width="800" height="450" src="https://codesandbox.io/p/sandbox/dioxus-fullstack-router-s75v5q?file=%2Fsrc%2Fmain.rs%3A7%2C1?embed=1" allowfullscreen=true></iframe><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=routing#routing"><!--#-->Routing<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/fullstack/server_functions/index.html b/learn/0.4/reference/fullstack/server_functions/index.html
index 5a5c7786e..a8ca88c1c 100644
--- a/learn/0.4/reference/fullstack/server_functions/index.html
+++ b/learn/0.4/reference/fullstack/server_functions/index.html
@@ -236,7 +236,7 @@
 </span><span style="color:#c0c5ce;">}
 </span><span style="color:#c0c5ce;">
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><blockquote><p>Notice the <code>?</code> after <code>use_server_future</code>. This is what tells Dioxus fullstack to wait for the future to resolve before continuing rendering. If you want to not wait for a specific future, you can just remove the ? and deal with the <code>Option</code> manually.</p></blockquote><p>Now when you load the page, you should see <code>server data is Ok(&quot;Hello from the server!&quot;)</code>. No need to wait for the <code>WASM</code> to load or wait for the request to finish!</p><iframe style="border: 1px solid rgba(0, 0, 0, 0.1);border-radius:2px;" width="800" height="450" src="https://codesandbox.io/p/sandbox/dioxus-fullstack-server-future-qwpp4p?file=/src/main.rs:3,24?embed=1" allowfullscreen=true></iframe><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=communicating-with-the-server#communicating-with-the-server"><!--#-->Communicating with the server<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=cached-data-fetching#cached-data-fetching"><!--#-->Cached data fetching<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><blockquote><p>Notice the <code>?</code> after <code>use_server_future</code>. This is what tells Dioxus fullstack to wait for the future to resolve before continuing rendering. If you want to not wait for a specific future, you can just remove the ? and deal with the <code>Option</code> manually.</p></blockquote><p>Now when you load the page, you should see <code>server data is Ok(&quot;Hello from the server!&quot;)</code>. No need to wait for the <code>WASM</code> to load or wait for the request to finish!</p><iframe style="border: 1px solid rgba(0, 0, 0, 0.1);border-radius:2px;" width="800" height="450" src="https://codesandbox.io/p/sandbox/dioxus-fullstack-server-future-qwpp4p?file=/src/main.rs:3,24?embed=1" allowfullscreen=true></iframe><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/reference/fullstack/server_functions" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Server Functions<!--#--></li></a><a href="/learn/0.4/reference/fullstack/extractors" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Extractors<!--#--></li></a><a href="/learn/0.4/reference/fullstack/middleware" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Middleware<!--#--></li></a><a href="/learn/0.4/reference/fullstack/authentication" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Authentication<!--#--></li></a><a href="/learn/0.4/reference/fullstack/routing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=communicating-with-the-server#communicating-with-the-server"><!--#-->Communicating with the server<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=cached-data-fetching#cached-data-fetching"><!--#-->Cached data fetching<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/hooks/index.html b/learn/0.4/reference/hooks/index.html
index 432a16039..fa2371926 100644
--- a/learn/0.4/reference/hooks/index.html
+++ b/learn/0.4/reference/hooks/index.html
@@ -273,7 +273,7 @@
 </span><span style="color:#c0c5ce;">    ))
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><p><!--#-->Current list: []<!--#--></p><button>Click me!</button></div><blockquote><p>The return values of <code>use_state</code> and <code>use_ref</code> (<a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.UseState.html"><code>UseState</code></a> and<a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.UseRef.html"><code>UseRef</code></a>, respectively) are insome ways similar to <a href="https://doc.rust-lang.org/std/cell/"><code>Cell</code></a> and<a href="https://doc.rust-lang.org/std/cell/struct.RefCell.html"><code>RefCell</code></a> – they provide interiormutability. However, these Dioxus wrappers also ensure that the component gets re-renderedwhenever you change the state.</p></blockquote><h2 id="additional-resources"><a class="header" href="#additional-resources">Additional Resources</a></h2><ul><li><a href="https://docs.rs/dioxus-hooks/latest/dioxus_hooks/"><strong>dioxus_hooks</strong> </a> rustdoc<ul><li>Documents all hook types included with dioxus by default Most of these are also covered inlater chapters of this guide.</li></ul></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/hooks">Hooks Package</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=hooks-and-component-state#hooks-and-component-state"><!--#-->Hooks and Component State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=use_state-hook#use_state-hook"><!--#-->use_state Hook<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=out-of-date-usestate#out-of-date-usestate"><!--#-->Out of Date UseState<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rules-of-hooks#rules-of-hooks"><!--#-->Rules of Hooks<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=no-hooks-in-conditionals#no-hooks-in-conditionals"><!--#-->No Hooks in Conditionals<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=no-hooks-in-closures#no-hooks-in-closures"><!--#-->No Hooks in Closures<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=no-hooks-in-loops#no-hooks-in-loops"><!--#-->No Hooks in Loops<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=use_ref-hook#use_ref-hook"><!--#-->use_ref Hook<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=additional-resources#additional-resources"><!--#-->Additional Resources<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><p><!--#-->Current list: []<!--#--></p><button>Click me!</button></div><blockquote><p>The return values of <code>use_state</code> and <code>use_ref</code> (<a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.UseState.html"><code>UseState</code></a> and<a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.UseRef.html"><code>UseRef</code></a>, respectively) are insome ways similar to <a href="https://doc.rust-lang.org/std/cell/"><code>Cell</code></a> and<a href="https://doc.rust-lang.org/std/cell/struct.RefCell.html"><code>RefCell</code></a> – they provide interiormutability. However, these Dioxus wrappers also ensure that the component gets re-renderedwhenever you change the state.</p></blockquote><h2 id="additional-resources"><a class="header" href="#additional-resources">Additional Resources</a></h2><ul><li><a href="https://docs.rs/dioxus-hooks/latest/dioxus_hooks/"><strong>dioxus_hooks</strong> </a> rustdoc<ul><li>Documents all hook types included with dioxus by default Most of these are also covered inlater chapters of this guide.</li></ul></li><li><a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/hooks">Hooks Package</a></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=hooks-and-component-state#hooks-and-component-state"><!--#-->Hooks and Component State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=use_state-hook#use_state-hook"><!--#-->use_state Hook<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=out-of-date-usestate#out-of-date-usestate"><!--#-->Out of Date UseState<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rules-of-hooks#rules-of-hooks"><!--#-->Rules of Hooks<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=no-hooks-in-conditionals#no-hooks-in-conditionals"><!--#-->No Hooks in Conditionals<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=no-hooks-in-closures#no-hooks-in-closures"><!--#-->No Hooks in Closures<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=no-hooks-in-loops#no-hooks-in-loops"><!--#-->No Hooks in Loops<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=use_ref-hook#use_ref-hook"><!--#-->use_ref Hook<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=additional-resources#additional-resources"><!--#-->Additional Resources<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/index.html b/learn/0.4/reference/index.html
index 3b3cb83b0..aaee3099c 100644
--- a/learn/0.4/reference/index.html
+++ b/learn/0.4/reference/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="dioxus-reference"><a class="header" href="#dioxus-reference">Dioxus Reference</a></h1><p>This Reference contains more detailed explanations for all concepts covered in the <a href="reference/../guide">guide</a> and more.</p><h2 id="rendering"><a class="header" href="#rendering">Rendering</a></h2><ul><li><a href="reference/rsx">RSX</a>: Rsx is a HTML-like macro that allows you to declare UI</li><li><a href="reference/components">Components</a>: Components are the building blocks of UI in Dioxus</li><li><a href="reference/component_props">Props</a>: Props allow you pass information to Components</li><li><a href="reference/event_handlers">Event Listeners</a>: Event listeners let you respond to user input</li><li><a href="reference/user_input">User Input</a>: How to handle User input in Dioxus</li><li><a href="reference/dynamic_rendering">Dynamic Rendering</a>: How to dynamically render data in Dioxus</li></ul><h2 id="state"><a class="header" href="#state">State</a></h2><ul><li><a href="reference/hooks">Hooks</a>: Hooks allow you to create components state</li><li><a href="reference/context">Context</a>: Context allows you to create state in a parent and consume it in children</li><li><a href="reference/router">Routing</a>: The router helps you manage the URL state</li><li><a href="reference/use_future">UseFuture</a>: Use future allows you to create an async task and monitor it&#x27;s state</li><li><a href="reference/use_coroutine">UseCoroutine</a>: Use coroutine helps you manage external state</li><li><a href="reference/spawn">Spawn</a>: Spawn creates an async task</li></ul><h2 id="platforms"><a class="header" href="#platforms">Platforms</a></h2><ul><li><a href="reference/desktop">Desktop</a>: Overview of desktop specific APIS</li><li><a href="reference/web">Web</a>: Overview of web specific APIS</li><li><a href="reference/ssr">SSR</a>: Overview of the SSR renderer</li><li><a href="reference/liveview">Liveview</a>: Overview of liveview specific APIS</li><li><a href="reference/fullstack">Fullstack</a>: Overview of Fullstack specific APIS<ul><li><a href="reference/fullstack/server_functions">Server Functions</a>: Server functions make it easy to communicate between your server and client</li><li><a href="reference/fullstack/extractors">Extractors</a>: Extractors allow you to get extra information out of the headers of a request</li><li><a href="reference/fullstack/middleware">Middleware</a>: Middleware allows you to wrap a server function request or response</li><li><a href="reference/fullstack/authentication">Authentication</a>: An overview of how to handle authentication with server functions</li><li><a href="reference/fullstack/routing">Routing</a>: An overview of how to work with the router in the fullstack renderer</li></ul></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=dioxus-reference#dioxus-reference"><!--#-->Dioxus Reference<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rendering#rendering"><!--#-->Rendering<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=state#state"><!--#-->State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=platforms#platforms"><!--#-->Platforms<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="dioxus-reference"><a class="header" href="#dioxus-reference">Dioxus Reference</a></h1><p>This Reference contains more detailed explanations for all concepts covered in the <a href="reference/../guide">guide</a> and more.</p><h2 id="rendering"><a class="header" href="#rendering">Rendering</a></h2><ul><li><a href="reference/rsx">RSX</a>: Rsx is a HTML-like macro that allows you to declare UI</li><li><a href="reference/components">Components</a>: Components are the building blocks of UI in Dioxus</li><li><a href="reference/component_props">Props</a>: Props allow you pass information to Components</li><li><a href="reference/event_handlers">Event Listeners</a>: Event listeners let you respond to user input</li><li><a href="reference/user_input">User Input</a>: How to handle User input in Dioxus</li><li><a href="reference/dynamic_rendering">Dynamic Rendering</a>: How to dynamically render data in Dioxus</li></ul><h2 id="state"><a class="header" href="#state">State</a></h2><ul><li><a href="reference/hooks">Hooks</a>: Hooks allow you to create components state</li><li><a href="reference/context">Context</a>: Context allows you to create state in a parent and consume it in children</li><li><a href="reference/router">Routing</a>: The router helps you manage the URL state</li><li><a href="reference/use_future">UseFuture</a>: Use future allows you to create an async task and monitor it&#x27;s state</li><li><a href="reference/use_coroutine">UseCoroutine</a>: Use coroutine helps you manage external state</li><li><a href="reference/spawn">Spawn</a>: Spawn creates an async task</li></ul><h2 id="platforms"><a class="header" href="#platforms">Platforms</a></h2><ul><li><a href="reference/desktop">Desktop</a>: Overview of desktop specific APIS</li><li><a href="reference/web">Web</a>: Overview of web specific APIS</li><li><a href="reference/ssr">SSR</a>: Overview of the SSR renderer</li><li><a href="reference/liveview">Liveview</a>: Overview of liveview specific APIS</li><li><a href="reference/fullstack">Fullstack</a>: Overview of Fullstack specific APIS<ul><li><a href="reference/fullstack/server_functions">Server Functions</a>: Server functions make it easy to communicate between your server and client</li><li><a href="reference/fullstack/extractors">Extractors</a>: Extractors allow you to get extra information out of the headers of a request</li><li><a href="reference/fullstack/middleware">Middleware</a>: Middleware allows you to wrap a server function request or response</li><li><a href="reference/fullstack/authentication">Authentication</a>: An overview of how to handle authentication with server functions</li><li><a href="reference/fullstack/routing">Routing</a>: An overview of how to work with the router in the fullstack renderer</li></ul></li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=dioxus-reference#dioxus-reference"><!--#-->Dioxus Reference<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rendering#rendering"><!--#-->Rendering<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=state#state"><!--#-->State<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=platforms#platforms"><!--#-->Platforms<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/liveview/index.html b/learn/0.4/reference/liveview/index.html
index 0972e2483..97d9df191 100644
--- a/learn/0.4/reference/liveview/index.html
+++ b/learn/0.4/reference/liveview/index.html
@@ -142,7 +142,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=liveview#liveview"><!--#-->Liveview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=router-integration#router-integration"><!--#-->Router Integration<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=managing-latency#managing-latency"><!--#-->Managing Latency<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=liveview#liveview"><!--#-->Liveview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=router-integration#router-integration"><!--#-->Router Integration<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=managing-latency#managing-latency"><!--#-->Managing Latency<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/router/index.html b/learn/0.4/reference/router/index.html
index f8a885eef..73a3de6e1 100644
--- a/learn/0.4/reference/router/index.html
+++ b/learn/0.4/reference/router/index.html
@@ -179,7 +179,7 @@
 </span><span style="color:#c0c5ce;">	}
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="more-reading"><a class="header" href="#more-reading">More reading</a></h2><p>This page is just a very brief overview of the router. For more information, check out <a href="../../router">the router book</a> or some of <a href="https://github.com/DioxusLabs/dioxus/blob/master/examples/router.rs">the router examples</a>.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=router#router"><!--#-->Router<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=what-is-it?#what-is-it?"><!--#-->What is it?<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=using-the-router#using-the-router"><!--#-->Using the router<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=links#links"><!--#-->Links<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=more-reading#more-reading"><!--#-->More reading<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="more-reading"><a class="header" href="#more-reading">More reading</a></h2><p>This page is just a very brief overview of the router. For more information, check out <a href="../../router">the router book</a> or some of <a href="https://github.com/DioxusLabs/dioxus/blob/master/examples/router.rs">the router examples</a>.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=router#router"><!--#-->Router<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=what-is-it?#what-is-it?"><!--#-->What is it?<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=using-the-router#using-the-router"><!--#-->Using the router<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=links#links"><!--#-->Links<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=more-reading#more-reading"><!--#-->More reading<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/rsx/index.html b/learn/0.4/reference/rsx/index.html
index 55f4701a1..2fa0c0f81 100644
--- a/learn/0.4/reference/rsx/index.html
+++ b/learn/0.4/reference/rsx/index.html
@@ -247,7 +247,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">})
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div>true</div></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=describing-the-ui#describing-the-ui"><!--#-->Describing the UI<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rsx-features#rsx-features"><!--#-->RSX Features<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=attributes#attributes"><!--#-->Attributes<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=custom-attributes#custom-attributes"><!--#-->Custom Attributes<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=special-attributes#special-attributes"><!--#-->Special Attributes<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=the-html-escape-hatch#the-html-escape-hatch"><!--#-->The HTML Escape Hatch<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=boolean-attributes#boolean-attributes"><!--#-->Boolean Attributes<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=interpolation#interpolation"><!--#-->Interpolation<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=children#children"><!--#-->Children<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=fragments#fragments"><!--#-->Fragments<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=expressions#expressions"><!--#-->Expressions<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=loops#loops"><!--#-->Loops<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=if-statements#if-statements"><!--#-->If statements<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-scroll text-black dioxus-demo" style="max-height:50vh;"><style>.dioxus-demo div { all: revert; }.dioxus-demo input { all: revert; }.dioxus-demo form { all: revert; }</style><div>true</div></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=describing-the-ui#describing-the-ui"><!--#-->Describing the UI<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=rsx-features#rsx-features"><!--#-->RSX Features<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=attributes#attributes"><!--#-->Attributes<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=custom-attributes#custom-attributes"><!--#-->Custom Attributes<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=special-attributes#special-attributes"><!--#-->Special Attributes<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=the-html-escape-hatch#the-html-escape-hatch"><!--#-->The HTML Escape Hatch<!--#--></a></li><li class="pb-2 pl-8"><a href="?phantom=boolean-attributes#boolean-attributes"><!--#-->Boolean Attributes<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=interpolation#interpolation"><!--#-->Interpolation<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=children#children"><!--#-->Children<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=fragments#fragments"><!--#-->Fragments<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=expressions#expressions"><!--#-->Expressions<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=loops#loops"><!--#-->Loops<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=if-statements#if-statements"><!--#-->If statements<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/spawn/index.html b/learn/0.4/reference/spawn/index.html
index 2cce646a8..df74da8af 100644
--- a/learn/0.4/reference/spawn/index.html
+++ b/learn/0.4/reference/spawn/index.html
@@ -178,7 +178,7 @@
 </span><span style="color:#c0c5ce;">    .await;
 </span><span style="color:#c0c5ce;">});
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=spawning-futures#spawning-futures"><!--#-->Spawning Futures<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=spawning-tokio-tasks#spawning-tokio-tasks"><!--#-->Spawning Tokio Tasks<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=spawning-futures#spawning-futures"><!--#-->Spawning Futures<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=spawning-tokio-tasks#spawning-tokio-tasks"><!--#-->Spawning Tokio Tasks<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/ssr/index.html b/learn/0.4/reference/ssr/index.html
index 641de3df3..23fd6b65a 100644
--- a/learn/0.4/reference/ssr/index.html
+++ b/learn/0.4/reference/ssr/index.html
@@ -194,7 +194,7 @@
 </span><span style="color:#c0c5ce;">	Html(dioxus_ssr::render_vdom(&amp;app))
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="multithreaded-support"><a class="header" href="#multithreaded-support">Multithreaded Support</a></h2><p>The Dioxus VirtualDom, sadly, is not currently <code>Send</code>. Internally, we use quite a bit of interior mutability which is not thread-safe.When working with web frameworks that require Send, it is possible to render a VirtualDom immediately to a String – but you cannot hold the VirtualDom across an await point. For retained-state SSR (essentially LiveView), you&#x27;ll need to spawn a VirtualDom on its own thread and communicate with it via channels or create a pool of VirtualDoms.You might notice that you cannot hold the VirtualDom across an await point. Because Dioxus is currently not ThreadSafe, it <em>must</em> remain on the thread it started. We are working on loosening this requirement.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=server-side-rendering#server-side-rendering"><!--#-->Server-Side Rendering<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=multithreaded-support#multithreaded-support"><!--#-->Multithreaded Support<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><h2 id="multithreaded-support"><a class="header" href="#multithreaded-support">Multithreaded Support</a></h2><p>The Dioxus VirtualDom, sadly, is not currently <code>Send</code>. Internally, we use quite a bit of interior mutability which is not thread-safe.When working with web frameworks that require Send, it is possible to render a VirtualDom immediately to a String – but you cannot hold the VirtualDom across an await point. For retained-state SSR (essentially LiveView), you&#x27;ll need to spawn a VirtualDom on its own thread and communicate with it via channels or create a pool of VirtualDoms.You might notice that you cannot hold the VirtualDom across an await point. Because Dioxus is currently not ThreadSafe, it <em>must</em> remain on the thread it started. We are working on loosening this requirement.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=server-side-rendering#server-side-rendering"><!--#-->Server-Side Rendering<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=setup#setup"><!--#-->Setup<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=multithreaded-support#multithreaded-support"><!--#-->Multithreaded Support<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/use_coroutine/index.html b/learn/0.4/reference/use_coroutine/index.html
index 3e0d2db32..b3519cc13 100644
--- a/learn/0.4/reference/use_coroutine/index.html
+++ b/learn/0.4/reference/use_coroutine/index.html
@@ -285,7 +285,7 @@
 </span><span style="color:#c0c5ce;">    sync_task.</span><span style="color:#96b5b4;">send</span><span style="color:#c0c5ce;">(SyncAction::SetUsername);
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=coroutines#coroutines"><!--#-->Coroutines<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=yielding-values#yielding-values"><!--#-->Yielding Values<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=sending-values#sending-values"><!--#-->Sending Values<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=automatic-injection-into-the-context-api#automatic-injection-into-the-context-api"><!--#-->Automatic injection into the Context API<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=coroutines#coroutines"><!--#-->Coroutines<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=the#the"><!--#-->The <!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=yielding-values#yielding-values"><!--#-->Yielding Values<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=sending-values#sending-values"><!--#-->Sending Values<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=automatic-injection-into-the-context-api#automatic-injection-into-the-context-api"><!--#-->Automatic injection into the Context API<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/use_future/index.html b/learn/0.4/reference/use_future/index.html
index 7f4c79ec0..06bc6023a 100644
--- a/learn/0.4/reference/use_future/index.html
+++ b/learn/0.4/reference/use_future/index.html
@@ -170,7 +170,7 @@
 </span><span style="color:#c0c5ce;">        .await
 </span><span style="color:#c0c5ce;">});
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=usefuture#usefuture"><!--#-->UseFuture<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=restarting-the-future#restarting-the-future"><!--#-->Restarting the Future<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=dependencies#dependencies"><!--#-->Dependencies<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=usefuture#usefuture"><!--#-->UseFuture<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=restarting-the-future#restarting-the-future"><!--#-->Restarting the Future<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=dependencies#dependencies"><!--#-->Dependencies<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/user_input/index.html b/learn/0.4/reference/user_input/index.html
index 76003469c..d62faa9bc 100644
--- a/learn/0.4/reference/user_input/index.html
+++ b/learn/0.4/reference/user_input/index.html
@@ -222,7 +222,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=user-input#user-input"><!--#-->User Input<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=controlled-inputs#controlled-inputs"><!--#-->Controlled Inputs<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=uncontrolled-inputs#uncontrolled-inputs"><!--#-->Uncontrolled Inputs<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=handling-files#handling-files"><!--#-->Handling files<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=user-input#user-input"><!--#-->User Input<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=controlled-inputs#controlled-inputs"><!--#-->Controlled Inputs<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=uncontrolled-inputs#uncontrolled-inputs"><!--#-->Uncontrolled Inputs<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=handling-files#handling-files"><!--#-->Handling files<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/reference/web/index.html b/learn/0.4/reference/web/index.html
index e36496317..5212d5f86 100644
--- a/learn/0.4/reference/web/index.html
+++ b/learn/0.4/reference/web/index.html
@@ -178,7 +178,7 @@
 </span><span style="color:#c0c5ce;">}
 </span><span style="color:#c0c5ce;">
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>If you are targeting web, but don&#x27;t plan on targeting any other Dioxus renderer you can also use the generated wrappers in the <a href="https://rustwasm.github.io/wasm-bindgen/web-sys/index.html">web-sys</a> and <a href="https://gloo-rs.web.app/">gloo</a> crates.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=web#web"><!--#-->Web<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=running-javascript#running-javascript"><!--#-->Running Javascript<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>If you are targeting web, but don&#x27;t plan on targeting any other Dioxus renderer you can also use the generated wrappers in the <a href="https://rustwasm.github.io/wasm-bindgen/web-sys/index.html">web-sys</a> and <a href="https://gloo-rs.web.app/">gloo</a> crates.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=web#web"><!--#-->Web<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=running-javascript#running-javascript"><!--#-->Running Javascript<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/example/building-a-nest/index.html b/learn/0.4/router/example/building-a-nest/index.html
index 29cfa05e9..ce754353b 100644
--- a/learn/0.4/router/example/building-a-nest/index.html
+++ b/learn/0.4/router/example/building-a-nest/index.html
@@ -242,7 +242,7 @@
 </span><span style="color:#c0c5ce;">    },
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>That&#x27;s it! If you head to <code>/blog/1</code> you should see our sample post.</p><h2 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h2><p>In this chapter, we utilized Dioxus Router&#x27;s Link, and Route Parameterfunctionality to build the blog portion of our application. In the next chapter,we will go over how navigation targets (like the one we passed to our links)work.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=building-a-nest#building-a-nest"><!--#-->Building a Nest<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=site-navigation#site-navigation"><!--#-->Site Navigation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=url-parameters-and-nested-routes#url-parameters-and-nested-routes"><!--#-->URL Parameters and Nested Routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>That&#x27;s it! If you head to <code>/blog/1</code> you should see our sample post.</p><h2 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h2><p>In this chapter, we utilized Dioxus Router&#x27;s Link, and Route Parameterfunctionality to build the blog portion of our application. In the next chapter,we will go over how navigation targets (like the one we passed to our links)work.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=building-a-nest#building-a-nest"><!--#-->Building a Nest<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=site-navigation#site-navigation"><!--#-->Site Navigation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=url-parameters-and-nested-routes#url-parameters-and-nested-routes"><!--#-->URL Parameters and Nested Routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/example/first-route/index.html b/learn/0.4/router/example/first-route/index.html
index 9fd7bbc5a..181da0ee8 100644
--- a/learn/0.4/router/example/first-route/index.html
+++ b/learn/0.4/router/example/first-route/index.html
@@ -180,7 +180,7 @@
 </span><span style="color:#c0c5ce;">    PageNotFound { route: Vec&lt;String&gt; },
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>Now when you go to a route that doesn&#x27;t exist, you should see the page not foundtext.</p><h2 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h2><p>In this chapter, we learned how to create a route and tell Dioxus Router whatcomponent to render when the URL path is /. We also created a 404 page tohandle when a route doesn&#x27;t exist. Next, we&#x27;ll create the blog portion of oursite. We will utilize nested routes and URL parameters.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=creating-our-first-route#creating-our-first-route"><!--#-->Creating Our First Route<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=fundamentals#fundamentals"><!--#-->Fundamentals<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-routes#creating-routes"><!--#-->Creating Routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=fallback-route#fallback-route"><!--#-->Fallback Route<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>Now when you go to a route that doesn&#x27;t exist, you should see the page not foundtext.</p><h2 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h2><p>In this chapter, we learned how to create a route and tell Dioxus Router whatcomponent to render when the URL path is /. We also created a 404 page tohandle when a route doesn&#x27;t exist. Next, we&#x27;ll create the blog portion of oursite. We will utilize nested routes and URL parameters.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=creating-our-first-route#creating-our-first-route"><!--#-->Creating Our First Route<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=fundamentals#fundamentals"><!--#-->Fundamentals<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-routes#creating-routes"><!--#-->Creating Routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=fallback-route#fallback-route"><!--#-->Fallback Route<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/example/full-code/index.html b/learn/0.4/router/example/full-code/index.html
index 2fd73c3ce..81e7c52e8 100644
--- a/learn/0.4/router/example/full-code/index.html
+++ b/learn/0.4/router/example/full-code/index.html
@@ -241,7 +241,7 @@
 </span><span style="color:#c0c5ce;">}
 </span><span style="color:#c0c5ce;">
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=full-code#full-code"><!--#-->Full Code<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=full-code#full-code"><!--#-->Full Code<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/example/index.html b/learn/0.4/router/example/index.html
index b7c756802..9d654fd35 100644
--- a/learn/0.4/router/example/index.html
+++ b/learn/0.4/router/example/index.html
@@ -133,7 +133,7 @@
   </head>
 
   <body>
-    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="overview"><a class="header" href="#overview">Overview</a></h1><p>In this guide, you&#x27;ll learn to effectively use Dioxus Router whether you&#x27;rebuilding a small todo app or the next FAANG company. We will create a smallwebsite with a blog, homepage, and more!</p><blockquote><p>To follow along with the router example, you&#x27;ll need a working Dioxus app.Check out the <a href="https://dioxuslabs.com/docs/0.3/guide/en/">Dioxus book</a> to get started.</p></blockquote><blockquote><p>Make sure to add Dioxus Router as a dependancy, as explained in the<a href="example/..">introduction</a>.</p></blockquote><h2 id="youll-learn-how-to"><a class="header" href="#youll-learn-how-to">You&#x27;ll learn how to</a></h2><ul><li>Create routes and render &quot;pages&quot;.</li><li>Utilize nested routes, create a navigation bar, and render content for aset of routes.</li><li>Parse URL parameters to dynamically display content.</li><li>Redirect visitors to different routes.</li></ul><blockquote><p><strong>Disclaimer</strong></p><p>The example will only display the features of Dioxus Router. It will notinclude any actual functionality. To keep things simple we will only be usinga single file, this is not the recommended way of doing things with a realapplication.</p></blockquote><p>You can find the complete application in the <a href="example/full-code">full code</a> chapter.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=overview#overview"><!--#-->Overview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=you'll-learn-how-to#you'll-learn-how-to"><!--#-->You&#x27;ll learn how to<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+    <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="overview"><a class="header" href="#overview">Overview</a></h1><p>In this guide, you&#x27;ll learn to effectively use Dioxus Router whether you&#x27;rebuilding a small todo app or the next FAANG company. We will create a smallwebsite with a blog, homepage, and more!</p><blockquote><p>To follow along with the router example, you&#x27;ll need a working Dioxus app.Check out the <a href="https://dioxuslabs.com/docs/0.3/guide/en/">Dioxus book</a> to get started.</p></blockquote><blockquote><p>Make sure to add Dioxus Router as a dependancy, as explained in the<a href="example/..">introduction</a>.</p></blockquote><h2 id="youll-learn-how-to"><a class="header" href="#youll-learn-how-to">You&#x27;ll learn how to</a></h2><ul><li>Create routes and render &quot;pages&quot;.</li><li>Utilize nested routes, create a navigation bar, and render content for aset of routes.</li><li>Parse URL parameters to dynamically display content.</li><li>Redirect visitors to different routes.</li></ul><blockquote><p><strong>Disclaimer</strong></p><p>The example will only display the features of Dioxus Router. It will notinclude any actual functionality. To keep things simple we will only be usinga single file, this is not the recommended way of doing things with a realapplication.</p></blockquote><p>You can find the complete application in the <a href="example/full-code">full code</a> chapter.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=overview#overview"><!--#-->Overview<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=you'll-learn-how-to#you'll-learn-how-to"><!--#-->You&#x27;ll learn how to<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/example/navigation-targets/index.html b/learn/0.4/router/example/navigation-targets/index.html
index ecdebc1c9..9ea4481ce 100644
--- a/learn/0.4/router/example/navigation-targets/index.html
+++ b/learn/0.4/router/example/navigation-targets/index.html
@@ -143,7 +143,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=navigation-targets#navigation-targets"><!--#-->Navigation Targets<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=what-is-a-navigation-target?#what-is-a-navigation-target?"><!--#-->What is a navigation target?<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=external-navigation#external-navigation"><!--#-->External navigation<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=navigation-targets#navigation-targets"><!--#-->Navigation Targets<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=what-is-a-navigation-target?#what-is-a-navigation-target?"><!--#-->What is a navigation target?<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=external-navigation#external-navigation"><!--#-->External navigation<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/example/redirection-perfection/index.html b/learn/0.4/router/example/redirection-perfection/index.html
index c4d5f0ab5..185174b2e 100644
--- a/learn/0.4/router/example/redirection-perfection/index.html
+++ b/learn/0.4/router/example/redirection-perfection/index.html
@@ -159,7 +159,7 @@
 </span><span style="color:#c0c5ce;">    },
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>That&#x27;s it! Now your users will be redirected to the blog.</p><h3 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h3><p>Well done! You&#x27;ve completed the Dioxus Router guide. You&#x27;ve built a smallapplication and learned about the many things you can do with Dioxus Router.To continue your journey, you attempt a challenge listed below, look at the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/router/examples">router examples</a>, orcan check out the <a href="https://docs.rs/dioxus-router/">API reference</a>.</p><h3 id="challenges"><a class="header" href="#challenges">Challenges</a></h3><ul><li>Organize your components into separate files for better maintainability.</li><li>Give your app some style if you haven&#x27;t already.</li><li>Build an about page so your visitors know who you are.</li><li>Add a user system that uses URL parameters.</li><li>Create a simple admin system to create, delete, and edit blogs.</li><li>If you want to go to the max, hook up your application to a rest API and database.</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=redirection-perfection#redirection-perfection"><!--#-->Redirection Perfection<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-redirects#creating-redirects"><!--#-->Creating Redirects<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=challenges#challenges"><!--#-->Challenges<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>That&#x27;s it! Now your users will be redirected to the blog.</p><h3 id="conclusion"><a class="header" href="#conclusion">Conclusion</a></h3><p>Well done! You&#x27;ve completed the Dioxus Router guide. You&#x27;ve built a smallapplication and learned about the many things you can do with Dioxus Router.To continue your journey, you attempt a challenge listed below, look at the <a href="https://github.com/DioxusLabs/dioxus/tree/master/packages/router/examples">router examples</a>, orcan check out the <a href="https://docs.rs/dioxus-router/">API reference</a>.</p><h3 id="challenges"><a class="header" href="#challenges">Challenges</a></h3><ul><li>Organize your components into separate files for better maintainability.</li><li>Give your app some style if you haven&#x27;t already.</li><li>Build an about page so your visitors know who you are.</li><li>Add a user system that uses URL parameters.</li><li>Create a simple admin system to create, delete, and edit blogs.</li><li>If you want to go to the max, hook up your application to a rest API and database.</li></ul><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/example/first-route" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Creating Our First Route<!--#--></li></a><a href="/learn/0.4/router/example/building-a-nest" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Building a Nest<!--#--></li></a><a href="/learn/0.4/router/example/navigation-targets" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Navigation Targets<!--#--></li></a><a href="/learn/0.4/router/example/redirection-perfection" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Redirection Perfection<!--#--></li></a><a href="/learn/0.4/router/example/full-code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=redirection-perfection#redirection-perfection"><!--#-->Redirection Perfection<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=creating-redirects#creating-redirects"><!--#-->Creating Redirects<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=conclusion#conclusion"><!--#-->Conclusion<!--#--></a></li><li class="pb-2 pl-6"><a href="?phantom=challenges#challenges"><!--#-->Challenges<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/index.html b/learn/0.4/router/index.html
index 3f672ddb2..007090f2f 100644
--- a/learn/0.4/router/index.html
+++ b/learn/0.4/router/index.html
@@ -136,7 +136,7 @@
     <div id="main"><div><pre></pre><header class="sticky top-0 z-30 bg-white shadow dark:text-gray-200 dark:bg-ideblack dark:border-b border-stone-600 "><div class="py-3 px-12 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6"><button class="bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100] "><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->menu<!--#--></span></button><div class="flex z-50 flex-1"><a href="/" dioxus-prevent-default="onclick" class="flex title-font font-medium items-center text-gray-900" id="" rel="" target=""><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-5 w-auto"/><span class="ml-3 text-xl dark:text-white font-mono">Dioxus Labs</span></a></div><div class="relative md:w-full max-w-[30rem] xl:max-w-[30rem] 2xl:max-w-[30rem] sm:mx-auto sm:flex-1"><button class="bg-gray-100 rounded-lg px-3 py-3 sm:w-full text-left text-gray-400 my-auto sm:flex sm:flex-row sm:align-middle sm:justify-between"><div class="h-full my-auto flex flex-row align-middle justify-between"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: 24px; color: rgba(0, 0, 0, 0.54); user-select: none;"><!--#-->search<!--#--></span><span class="hidden sm:block pl-2">Search the docs</span></div><div class="hidden sm:block border border-gray-300 rounded-lg p-1 text-xs text-gray-400">CTRL + /</div></button></div><div class="hidden xl:flex h-full justify-end ml-2 flex-1"><div class="hidden md:flex items-center font-semibold"><nav><ul class="flex items-center space-x-2"><li><a href="/awesome" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Awesome<!--#--></a></li><li><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Docs<!--#--></a></li><li><a href="/blog" dioxus-prevent-default="onclick" class="ml-[-3.8em] md:ml-0 md:py-2 md:px-2 hover:text-sky-500 dark:hover:text-sky-400 dark:hover:bg-gray-500 hover:bg-gray-200 rounded text-lg md:text-sm" id="" rel="" target=""><!--#-->Blog<!--#--></a></li></ul></nav><div class="flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="https://discord.gg/XgGxMSkvUM" dioxus-prevent-default="" class="block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on Discord</span><svg width="24" height="24" viewBox="0 -28.5 256 256" preserveAspectRatio="xMidYMid"><g><path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="currentColor" fill-rule="nonzero"></path></g></svg></a><a href="https://github.com/dioxuslabs/dioxus" dioxus-prevent-default="" class="ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" id="" rel="noopener noreferrer" target=""><span class="sr-only">Dioxus on GitHub</span><svg class="w-5 h-5" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div class="flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800"><label class="sr-only" id="headlessui-listbox-label-2">Theme</label><a href="/deploy" dioxus-prevent-default="onclick" class="md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold" id="" rel="" target="">DEPLOY</a><pre></pre></div></div></div></div></header><div class="w-full pt-12 text-sm dark:bg-ideblack" style="min-height:100vh;"><div class="max-w-screen-2xl flex flex-row justify-between mx-auto dark:text-white"><section class="text-gray-600 body-font overflow-hidden dark:bg-ideblack mx-auto container pt-6 pb-12 max-w-screen-lg"><div class="-py-8 "><div class="flex w-full mb-20 flex-wrap list-none"><style>.markdown-body ul { list-style: disc; }.markdown-body ol { list-style: decimal; }.markdown-body li { display: list-item; }.markdown-body button { display: inline-block; background-color: rgba(209, 213, 219, 0.3); border-radius: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; margin: 0.25rem; }.markdown-body .header { color: inherit }</style><article class="markdown-body pt-1"><h1 id="introduction"><a class="header" href="#introduction">Introduction</a></h1><blockquote><p>If you are not familiar with Dioxus itself, check out the <a href="router/../guide">Dioxus guide</a> first.</p></blockquote><p>Whether you are building a website, desktop app, or mobile app, splitting your app&#x27;s views into &quot;pages&quot; can be an effective method for organization and maintainability.</p><p>For this purpose, Dioxus provides a router. Use the <code>cargo add</code> command to add the dependancy:</p><div style="position: relative;"><div><pre style="background-color:#2b303b;">
 <span style="color:#c0c5ce;">cargo add dioxus-router
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>This book is intended to get you up to speed with Dioxus Router. It is splitinto two sections:</p><ol><li>The <a href="router/reference">reference</a> section explains individual features in depth. You can read it from start to finish, or you can read individual chapters in whatever order you want.</li><li>If you prefer a learning-by-doing approach, you can check out the <em><a href="router/example">example project</a></em>. It guides you through creating a dioxus app, setting up the router, and using some of its functionality.</li></ol><blockquote><p>Please note that this is not the only documentation for the Dioxus Router. Youcan also check out the <a href="https://docs.rs/dioxus-router/">API Docs</a>.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=introduction#introduction"><!--#-->Introduction<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>This book is intended to get you up to speed with Dioxus Router. It is splitinto two sections:</p><ol><li>The <a href="router/reference">reference</a> section explains individual features in depth. You can read it from start to finish, or you can read individual chapters in whatever order you want.</li><li>If you prefer a learning-by-doing approach, you can check out the <em><a href="router/example">example project</a></em>. It guides you through creating a dioxus app, setting up the router, and using some of its functionality.</li></ol><blockquote><p>Please note that this is not the only documentation for the Dioxus Router. Youcan also check out the <a href="https://docs.rs/dioxus-router/">API Docs</a>.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=introduction#introduction"><!--#-->Introduction<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/history-buttons/index.html b/learn/0.4/router/reference/history-buttons/index.html
index 30bec5c04..1d758b5f5 100644
--- a/learn/0.4/router/reference/history-buttons/index.html
+++ b/learn/0.4/router/reference/history-buttons/index.html
@@ -145,7 +145,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>As you might know, browsers usually disable the back and forward buttons ifthere is no history to navigate to. The router&#x27;s history buttons try to do thattoo, but depending on the [history provider] that might not be possible.</p><p>Importantly, neither [<code>WebHistory</code>] supports that feature.This is due to limitations of the browser History API.</p><p>However, in both cases, the router will just ignore button presses, if there isno history to navigate to.</p><p>Also, when using [<code>WebHistory</code>], the history buttons mightnavigate a user to a history entry outside your app.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=history-buttons#history-buttons"><!--#-->History Buttons<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>As you might know, browsers usually disable the back and forward buttons ifthere is no history to navigate to. The router&#x27;s history buttons try to do thattoo, but depending on the [history provider] that might not be possible.</p><p>Importantly, neither [<code>WebHistory</code>] supports that feature.This is due to limitations of the browser History API.</p><p>However, in both cases, the router will just ignore button presses, if there isno history to navigate to.</p><p>Also, when using [<code>WebHistory</code>], the history buttons mightnavigate a user to a history entry outside your app.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=history-buttons#history-buttons"><!--#-->History Buttons<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/history-providers/index.html b/learn/0.4/router/reference/history-providers/index.html
index 4059efa3b..80bc247b4 100644
--- a/learn/0.4/router/reference/history-providers/index.html
+++ b/learn/0.4/router/reference/history-providers/index.html
@@ -143,7 +143,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=history-providers#history-providers"><!--#-->History Providers<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=history-providers#history-providers"><!--#-->History Providers<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/index.html b/learn/0.4/router/reference/index.html
index 0439d41f1..9b025d09b 100644
--- a/learn/0.4/router/reference/index.html
+++ b/learn/0.4/router/reference/index.html
@@ -157,7 +157,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=adding-the-router-to-your-application#adding-the-router-to-your-application"><!--#-->Adding the Router to Your Application<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=adding-the-router-to-your-application#adding-the-router-to-your-application"><!--#-->Adding the Router to Your Application<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/layouts/index.html b/learn/0.4/router/reference/layouts/index.html
index 971c5e214..a60f9865a 100644
--- a/learn/0.4/router/reference/layouts/index.html
+++ b/learn/0.4/router/reference/layouts/index.html
@@ -172,7 +172,7 @@
 </span><span style="color:#c0c5ce;">&lt;h1&gt;Index&lt;</span><span style="background-color:#bf616a;color:#2b303b;">/</span><span style="color:#c0c5ce;">h1&gt;
 </span><span style="color:#c0c5ce;">&lt;footer&gt;footer&lt;</span><span style="background-color:#bf616a;color:#2b303b;">/</span><span style="color:#c0c5ce;">footer&gt;
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=layouts#layouts"><!--#-->Layouts<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=layouts#layouts"><!--#-->Layouts<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/navigation/index.html b/learn/0.4/router/reference/navigation/index.html
index c006360a3..440df3c36 100644
--- a/learn/0.4/router/reference/navigation/index.html
+++ b/learn/0.4/router/reference/navigation/index.html
@@ -156,7 +156,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>The <code>target</code> in the example above is similar to the <code>href</code> of a regular anchorelement. However, it tells the router more about what kind of navigation itshould perform. It accepts something that can be converted into a[NavigationTarget]:</p><ul><li>The example uses a Internal route. This is the most common type of navigation.It tells the router to navigate to a page within our app by passing a variant of a [Routable] enum. This type of navigation can never fail if the link component is used inside a router component.</li><li>[External] allows us to navigate to URLs outside of our app. This is usefulfor links to external websites. NavigationTarget::External accepts an URL to navigate to. This type of navigation can fail if the URL is invalid.</li></ul><blockquote><p>The [<code>Link</code>] accepts several props that modify its behavior. See the API docsfor more details.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/reference/navigation/programmatic" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Programmatic Navigation<!--#--></li></a></ul><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=links-&-navigation#links-&-navigation"><!--#-->Links &amp; Navigation<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>The <code>target</code> in the example above is similar to the <code>href</code> of a regular anchorelement. However, it tells the router more about what kind of navigation itshould perform. It accepts something that can be converted into a[NavigationTarget]:</p><ul><li>The example uses a Internal route. This is the most common type of navigation.It tells the router to navigate to a page within our app by passing a variant of a [Routable] enum. This type of navigation can never fail if the link component is used inside a router component.</li><li>[External] allows us to navigate to URLs outside of our app. This is usefulfor links to external websites. NavigationTarget::External accepts an URL to navigate to. This type of navigation can fail if the URL is invalid.</li></ul><blockquote><p>The [<code>Link</code>] accepts several props that modify its behavior. See the API docsfor more details.</p></blockquote><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/reference/navigation/programmatic" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Programmatic Navigation<!--#--></li></a></ul><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=links-&-navigation#links-&-navigation"><!--#-->Links &amp; Navigation<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/navigation/programmatic/index.html b/learn/0.4/router/reference/navigation/programmatic/index.html
index 535895052..1ccfad1c0 100644
--- a/learn/0.4/router/reference/navigation/programmatic/index.html
+++ b/learn/0.4/router/reference/navigation/programmatic/index.html
@@ -155,7 +155,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>You might have noticed that, like [<code>Link</code>], the [<code>Navigator</code>]s <code>push</code> andreplace functions take a [NavigationTarget]. This means we can use either[Internal], or [External] targets.</p><h2 id="external-navigation-targets"><a class="header" href="#external-navigation-targets">External Navigation Targets</a></h2><p>Unlike a [<code>Link</code>], the [<code>Navigator</code>] cannot rely on the browser (or webview) tohandle navigation to external targets via a generated anchor element.</p><p>This means, that under certain conditions, navigation to external targets canfail.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/reference/navigation/programmatic" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Programmatic Navigation<!--#--></li></a></ul><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=programmatic-navigation#programmatic-navigation"><!--#-->Programmatic Navigation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=using-a-navigator#using-a-navigator"><!--#-->Using a Navigator<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=external-navigation-targets#external-navigation-targets"><!--#-->External Navigation Targets<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><p>You might have noticed that, like [<code>Link</code>], the [<code>Navigator</code>]s <code>push</code> andreplace functions take a [NavigationTarget]. This means we can use either[Internal], or [External] targets.</p><h2 id="external-navigation-targets"><a class="header" href="#external-navigation-targets">External Navigation Targets</a></h2><p>Unlike a [<code>Link</code>], the [<code>Navigator</code>] cannot rely on the browser (or webview) tohandle navigation to external targets via a generated anchor element.</p><p>This means, that under certain conditions, navigation to external targets canfail.</p><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/reference/navigation/programmatic" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Programmatic Navigation<!--#--></li></a></ul><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=programmatic-navigation#programmatic-navigation"><!--#-->Programmatic Navigation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=using-a-navigator#using-a-navigator"><!--#-->Using a Navigator<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=external-navigation-targets#external-navigation-targets"><!--#-->External Navigation Targets<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/routes/index.html b/learn/0.4/router/reference/routes/index.html
index e479f612d..d8f76ecf0 100644
--- a/learn/0.4/router/reference/routes/index.html
+++ b/learn/0.4/router/reference/routes/index.html
@@ -262,7 +262,7 @@
 </span><span style="color:#c0c5ce;">
 </span><span style="color:#b48ead;">fn </span><span style="color:#8fa1b3;">main</span><span style="color:#c0c5ce;">() {}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/reference/routes/nested" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Nested Routes<!--#--></li></a></ul><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=defining-routes#defining-routes"><!--#-->Defining Routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=route-segments#route-segments"><!--#-->Route Segments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=static-segments#static-segments"><!--#-->Static segments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=dynamic-segments#dynamic-segments"><!--#-->Dynamic Segments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=catch-all-segments#catch-all-segments"><!--#-->Catch All Segments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=query-segments#query-segments"><!--#-->Query Segments<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/reference/routes/nested" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Nested Routes<!--#--></li></a></ul><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=defining-routes#defining-routes"><!--#-->Defining Routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=route-segments#route-segments"><!--#-->Route Segments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=static-segments#static-segments"><!--#-->Static segments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=dynamic-segments#dynamic-segments"><!--#-->Dynamic Segments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=catch-all-segments#catch-all-segments"><!--#-->Catch All Segments<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=query-segments#query-segments"><!--#-->Query Segments<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/routes/nested/index.html b/learn/0.4/router/reference/routes/nested/index.html
index 60ac60a09..ab561021f 100644
--- a/learn/0.4/router/reference/routes/nested/index.html
+++ b/learn/0.4/router/reference/routes/nested/index.html
@@ -178,7 +178,7 @@
 </span><span style="color:#c0c5ce;">    todo!()
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/reference/routes/nested" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Nested Routes<!--#--></li></a></ul><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=nested-routes#nested-routes"><!--#-->Nested Routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=nesting#nesting"><!--#-->Nesting<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><a href="/learn/0.4/router/reference/routes/nested" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Nested Routes<!--#--></li></a></ul><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=nested-routes#nested-routes"><!--#-->Nested Routes<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=nesting#nesting"><!--#-->Nesting<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/routing-update-callback/index.html b/learn/0.4/router/reference/routing-update-callback/index.html
index 942d438b6..9d0b8e784 100644
--- a/learn/0.4/router/reference/routing-update-callback/index.html
+++ b/learn/0.4/router/reference/routing-update-callback/index.html
@@ -168,7 +168,7 @@
 </span><span style="color:#c0c5ce;">    }
 </span><span style="color:#c0c5ce;">}
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=routing-update-callback#routing-update-callback"><!--#-->Routing Update Callback<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=how-does-the-callback-behave?#how-does-the-callback-behave?"><!--#-->How does the callback behave?<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=code-example#code-example"><!--#-->Code Example<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=routing-update-callback#routing-update-callback"><!--#-->Routing Update Callback<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=how-does-the-callback-behave?#how-does-the-callback-behave?"><!--#-->How does the callback behave?<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=code-example#code-example"><!--#-->Code Example<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";
diff --git a/learn/0.4/router/reference/static-generation/index.html b/learn/0.4/router/reference/static-generation/index.html
index c8fd84665..dd18aadc1 100644
--- a/learn/0.4/router/reference/static-generation/index.html
+++ b/learn/0.4/router/reference/static-generation/index.html
@@ -239,7 +239,7 @@
 </span><span style="color:#c0c5ce;">}
 </span><span style="color:#c0c5ce;">
 </span></pre>
-</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=static-generation#static-generation"><!--#-->Static Generation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=getting-the-sitemap#getting-the-sitemap"><!--#-->Getting the Sitemap<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=generating-a-sitemap#generating-a-sitemap"><!--#-->Generating a Sitemap<!--#--></a></li></ul><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
+</div><button style="position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: white; border: 1px solid white; padding: 0.25em;" onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)">Copy</button></div><script></script></article></div></div></section><nav class="bg-white dark:bg-ideblack lg:bg-inherit pl-6 z-20 text-base lg:block fixed top-0 pt-36 pb-16 lg:-ml-3.5 w-[calc(100%-1rem)] md:w-60 h-screen max-h-screen lg:text-[13px] text-navy content-start overflow-y-auto leading-5  hidden"><div class="pb-4"><a href="/learn/0.4/" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Introduction<!--#--></h2></a><ul class="pl-2"><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/getting_started" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Getting Started<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/getting_started/choosing_a_web_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Choosing A Web Renderer<!--#--></li></a><a href="/learn/0.4/getting_started/wasm" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/getting_started/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><a href="/learn/0.4/getting_started/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Fullstack<!--#--></li></a><a href="/learn/0.4/getting_started/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/getting_started/mobile" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Mobile<!--#--></li></a><a href="/learn/0.4/getting_started/tui" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Terminal UI<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/guide" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Guide<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/guide/your_first_component" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Your First Component<!--#--></li></a><a href="/learn/0.4/guide/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->State<!--#--></li></a><a href="/learn/0.4/guide/data_fetching" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Data Fetching<!--#--></li></a><a href="/learn/0.4/guide/full_code" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Full Code<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Reference<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/reference/rsx" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->RSX<!--#--></li></a><a href="/learn/0.4/reference/components" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Components<!--#--></li></a><a href="/learn/0.4/reference/component_props" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Props<!--#--></li></a><a href="/learn/0.4/reference/event_handlers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Event Handlers<!--#--></li></a><a href="/learn/0.4/reference/hooks" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hooks<!--#--></li></a><a href="/learn/0.4/reference/user_input" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->User Input<!--#--></li></a><a href="/learn/0.4/reference/context" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Context<!--#--></li></a><a href="/learn/0.4/reference/dynamic_rendering" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Dynamic Rendering<!--#--></li></a><a href="/learn/0.4/reference/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing<!--#--></li></a><a href="/learn/0.4/reference/use_future" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseFuture<!--#--></li></a><a href="/learn/0.4/reference/use_coroutine" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->UseCoroutine<!--#--></li></a><a href="/learn/0.4/reference/spawn" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Spawn<!--#--></li></a><a href="/learn/0.4/reference/desktop" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Desktop<!--#--></li></a><a href="/learn/0.4/reference/web" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Web<!--#--></li></a><a href="/learn/0.4/reference/ssr" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->SSR<!--#--></li></a><a href="/learn/0.4/reference/liveview" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Liveview<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/reference/fullstack" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Fullstack<!--#--></a></li><pre></pre></ul></div><div class="pb-4"><a href="/learn/0.4/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Router<!--#--></h2></a><ul class="pl-2"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/example" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Example Project<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Reference<!--#--></a></li><ul class="ml-6 border-l border-gray-300 py-1"><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/routes" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Defining Routes<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/layouts" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Layouts<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/router/reference/navigation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Navigation<!--#--></a></li><pre></pre><a href="/learn/0.4/router/reference/history-providers" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Providers<!--#--></li></a><a href="/learn/0.4/router/reference/history-buttons" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->History Buttons<!--#--></li></a><a href="/learn/0.4/router/reference/static-generation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 bg-gray-200 dark:bg-gray-800"><!--#-->Static Generation<!--#--></li></a><a href="/learn/0.4/router/reference/routing-update-callback" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Routing Update Callback<!--#--></li></a></ul></ul></div><div class="pb-4"><a href="/learn/0.4/cookbook" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Cookbook<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/cookbook/publishing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Publishing<!--#--></li></a><a href="/learn/0.4/cookbook/antipatterns" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Anti-patterns<!--#--></li></a><a href="/learn/0.4/cookbook/error_handling" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Error Handling<!--#--></li></a><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/integrations" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->Integrations<!--#--></a></li><pre></pre><li class="m-1 rounded-md ml-[-1px] hover:bg-gray-200 hover:dark:bg-gray-800"><button><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_right<!--#--></span></button><a href="/learn/0.4/cookbook/state" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><!--#-->State Management<!--#--></a></li><pre></pre><a href="/learn/0.4/cookbook/testing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Testing<!--#--></li></a><a href="/learn/0.4/cookbook/examples" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Examples<!--#--></li></a><a href="/learn/0.4/cookbook/tailwind" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Tailwind<!--#--></li></a><a href="/learn/0.4/cookbook/custom_renderer" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Custom Renderer<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/CLI" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->CLI<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/CLI/installation" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Installation<!--#--></li></a><a href="/learn/0.4/CLI/creating" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Create a Project<!--#--></li></a><a href="/learn/0.4/CLI/configure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Configure Project<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/contributing" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Contributing<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/contributing/project_structure" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Project Structure<!--#--></li></a><a href="/learn/0.4/contributing/walkthrough_readme" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Walkthrough of Internals<!--#--></li></a><a href="/learn/0.4/contributing/guiding_principles" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Guiding Principles<!--#--></li></a><a href="/learn/0.4/contributing/roadmap" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Roadmap<!--#--></li></a></ul></div><div class="pb-4"><a href="/learn/0.4/migration" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><h2 class="font-semibold"><!--#-->Migration<!--#--></h2></a><ul class="pl-2"><a href="/learn/0.4/migration/router" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Router<!--#--></li></a><a href="/learn/0.4/migration/hot_reload" dioxus-prevent-default="onclick" class="" id="" rel="" target=""><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800 "><!--#-->Hot Reload<!--#--></li></a></ul></div></nav><div class="overflow-y-auto hidden xl:block fixed top-0 pt-36 pb-16 pl-3.5 -ml-3.5 w-60 h-full md:text-[13px] leading-5 text-navy docs-right-sidebar " style="left:calc(100vw - 15rem);"><h2 class="pb-4 font-semibold">On this page</h2><ul class=""><li class="pb-2 pl-2"><a href="?phantom=static-generation#static-generation"><!--#-->Static Generation<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=getting-the-sitemap#getting-the-sitemap"><!--#-->Getting the Sitemap<!--#--></a></li><li class="pb-2 pl-4"><a href="?phantom=generating-a-sitemap#generating-a-sitemap"><!--#-->Generating a Sitemap<!--#--></a></li></ul><h2 class="py-4 font-semibold"><a href="https://github.com/DioxusLabs/docsite">Edit this page!</a></h2><h2 class="py-4 font-semibold">Go to version</h2><div class="pb-4"><ul class="pl-2"><li class="m-1 rounded-md pl-2 hover:bg-gray-200 hover:dark:bg-gray-800"><a href="/learn/0.3"><span class="material-icons material-icons-outlined material-icons-round material-icons-sharp material-icons-two-tone md-48" style="font-size: inherit; color: gray; user-select: none;"><!--#-->chevron_left<!--#--></span>0.3</a></li></ul></div></div></div></div><footer class="sticky z-30 text-gray-400 bg-ghmetal body-font "><div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col"><div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left"><a class="flex title-font font-medium items-center md:justify-start justify-center text-white" href="https://github.com/DioxusLabs/dioxus"><img src="https://avatars.githubusercontent.com/u/79236386?s=200&v=4" class="h-8 w-auto" alt="Dioxus Labs Icon"/><span class="ml-3 text-xl">Dioxus Labs</span></a><p class="mt-2 text-sm text-gray-500">An Open Source project dedicated to making Rust UI wonderful.</p></div><div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center"><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Community<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/dioxuslabs"><!--#-->Github<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://twitter.com/dioxuslabs"><!--#-->Twitter<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://discord.gg/XgGxMSkvUM"><!--#-->Discord<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Learning<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://docs.rs/dioxus"><!--#-->docs.rs<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/learn/0.4/guide"><!--#-->Guide<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="/awesome"><!--#-->Awesome<!--#--></a></li></ul></nav></div><div class="lg:w-1/4 md:w-1/2 w-full px-4"><h2 class="title-font font-medium text-white tracking-widest text-sm mb-3"><!--#-->Projects<!--#--></h2><nav class="list-none mb-10"><ul><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus"><!--#-->Dioxus<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/dioxus/tree/master/packages/cli"><!--#-->CLI<!--#--></a></li><li><a class="text-gray-400 hover:text-white" href="https://github.com/DioxusLabs/taffy"><!--#-->Taffy<!--#--></a></li></ul></nav></div></div></div><div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"><p class="text-gray-400 text-sm text-center sm:text-left">© 2023 Dioxus Labs —<a class="text-gray-500 ml-1" rel="noopener noreferrer" href="https://twitter.com/dioxuslabs" target="_blank">@dioxuslabs</a></p></div></footer></div><meta hidden="true" id="dioxus-storage-props" data-serialized="AQ==" /><meta hidden="true" id="dioxus-storage-data" data-serialized="AA==" /></div>
     <!-- Note the usage of `type=module` here as this is an ES6 module -->
     <script type="module">
       import init from "/./assets/dioxus/docsite.js";