diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
index f236cda33a..b322fb20bd 100644
--- a/.github/workflows/website.yml
+++ b/.github/workflows/website.yml
@@ -19,7 +19,7 @@ jobs:
               with:
                   fetch-depth: 0
             - run: cargo install bonnie wasm-pack
-            - run: cargo install perseus-cli --version 0.3.0-beta.21
+            - run: cargo install perseus-cli --version 0.3.0-beta.22
             - run: npm install
               working-directory: website
             - name: Build website
diff --git a/website/Cargo.toml b/website/Cargo.toml
index 82aed07994..b5f8f7db7c 100644
--- a/website/Cargo.toml
+++ b/website/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "perseus-website"
-version = "0.3.0-beta.21"
+version = "0.3.0-beta.22"
 edition = "2018"
 description = "The official website for the Perseus framework."
 authors = ["arctic_hen7 <arctic_hen7@pm.me>"]
@@ -13,9 +13,9 @@ readme = "./README.md"
 
 [dependencies]
 # We use the current version of Perseus, not the local one
-perseus = {  version = "0.3.0-beta.21", features = [ "translator-fluent" ] }
-sycamore = "0.6"
-sycamore-router = "0.6"
+perseus = {  version = "0.3.0-beta.22", features = [ "translator-fluent" ] }
+sycamore = "0.7"
+sycamore-router = "0.7"
 serde = "1"
 serde_json = "1"
 fluent-bundle = "0.15"
@@ -24,4 +24,4 @@ pulldown-cmark = "0.8"
 lazy_static = "1"
 web-sys = { version = "0.3", features = [ "Event", "EventTarget" ] }
 wasm-bindgen = "0.2"
-perseus-size-opt = "0.1"
+perseus-size-opt = ">=0.1.5"
diff --git a/website/src/components/comparisons.rs b/website/src/components/comparisons.rs
index 4f8ff3723b..e00060a84d 100644
--- a/website/src/components/comparisons.rs
+++ b/website/src/components/comparisons.rs
@@ -1,7 +1,7 @@
-use perseus::GenericNode;
+use perseus::Html;
 use serde::{Deserialize, Serialize};
-use sycamore::prelude::template;
-use sycamore::prelude::Template as SycamoreTemplate;
+use sycamore::prelude::view;
+use sycamore::prelude::View;
 
 /// A comparison for the comparisons table. Perseus itself also has an entry here. Note that any changes to the properties measured here
 /// must also be reflected in the rendering code, which generates a title row independently.
@@ -46,25 +46,25 @@ impl FeatureSupport {
 }
 
 /// Renders a Lighthouse score to have a text color. If it's 100, then we use the appropriate emoji.
-pub fn render_lighthouse_score<G: GenericNode>(score: u8) -> SycamoreTemplate<G> {
+pub fn render_lighthouse_score<G: Html>(score: u8) -> View<G> {
     if score == 100 {
-        template! {
+        view! {
             "💯"
         }
     } else if score >= 90 {
-        template! {
+        view! {
             span(class = "text-green-500") {
                 (score)
             }
         }
     } else if score >= 50 {
-        template! {
+        view! {
             span(class = "text-amber-500") {
                 (score)
             }
         }
     } else {
-        template! {
+        view! {
             span(class = "text-red-500") {
                 (score)
             }
diff --git a/website/src/components/container.rs b/website/src/components/container.rs
index 5bafa90102..ee2491e2be 100644
--- a/website/src/components/container.rs
+++ b/website/src/components/container.rs
@@ -1,13 +1,12 @@
 use perseus::{link, t};
-use sycamore::prelude::Template as SycamoreTemplate;
 use sycamore::prelude::*;
 
 // This is imported by all alternative containers as well
 pub static COPYRIGHT_YEARS: &str = "2021";
 
 #[component(NavLinks<G>)]
-pub fn nav_links() -> SycamoreTemplate<G> {
-    template! {
+pub fn nav_links() -> View<G> {
+    view! {
         li(class = "m-3 p-1") {
             a(href = link!("/docs"), class = "px-2") { (t!("navlinks.docs")) }
         }
@@ -20,20 +19,20 @@ pub fn nav_links() -> SycamoreTemplate<G> {
     }
 }
 
-pub struct ContainerProps<G: GenericNode> {
+pub struct ContainerProps<G: Html> {
     pub title: String,
-    pub children: SycamoreTemplate<G>,
+    pub children: View<G>,
 }
 
 #[component(Container<G>)]
-pub fn container(props: ContainerProps<G>) -> SycamoreTemplate<G> {
+pub fn container(props: ContainerProps<G>) -> View<G> {
     let title = props.title.clone();
     let menu_open = Signal::new(false);
     // We need to verbatim copy the value because of how it's used in Sycamore's reactivity system
     let menu_open_2 = create_memo(cloned!((menu_open) => move || *menu_open.get()));
     let toggle_menu = cloned!((menu_open) => move |_| menu_open.set(!*menu_open.get()));
 
-    template! {
+    view! {
         // TODO click-away events
         header(class = "shadow-md sm:p-2 w-full bg-white dark:text-white dark:bg-navy mb-20") {
             div(class = "flex justify-between") {
diff --git a/website/src/components/features_list.rs b/website/src/components/features_list.rs
index d23fd5141c..8063723f2c 100644
--- a/website/src/components/features_list.rs
+++ b/website/src/components/features_list.rs
@@ -2,18 +2,17 @@ use perseus::link;
 use perseus::templates::RenderCtx;
 use sycamore::context::use_context;
 use sycamore::prelude::*;
-use sycamore::template::Template as SycamoreTemplate;
 use sycamore_router::navigate;
 
 /// Turns the features of Perseus into an actual list.
-pub fn get_features_list<G: GenericNode>() -> SycamoreTemplate<G> {
+pub fn get_features_list<G: GenericNode>() -> View<G> {
     let features = get_features();
-    SycamoreTemplate::new_fragment(
+    View::new_fragment(
         features.iter().map(move |feat| {
             let Feature { id_base, link } = feat.clone();
             let name_id = format!("feature-{}.name", &id_base);
             let desc_id = format!("feature-{}.desc", &id_base);
-            template! {
+            view! {
                 li(class = "inline-block align-top") {
                     div(
                         class = "text-left cursor-pointer rounded-xl shadow-md hover:shadow-2xl transition-shadow duration-100 p-8 max-w-sm",
diff --git a/website/src/error_pages.rs b/website/src/error_pages.rs
index 5d22b1b2fd..54a5523a4a 100644
--- a/website/src/error_pages.rs
+++ b/website/src/error_pages.rs
@@ -1,15 +1,15 @@
-use perseus::{ErrorPages, GenericNode};
-use sycamore::template;
+use perseus::{ErrorPages, Html};
+use sycamore::view;
 
 // This site will be exported statically, so we only have control over 404 pages for broken links in the site itself
-pub fn get_error_pages<G: GenericNode>() -> ErrorPages<G> {
+pub fn get_error_pages<G: Html>() -> ErrorPages<G> {
     let mut error_pages = ErrorPages::new(|url, status, err, _| {
-        template! {
+        view! {
             p { (format!("An error with HTTP code {} occurred at '{}': '{}'.", status, url, err)) }
         }
     });
     error_pages.add_page(404, |_, _, _, _| {
-        template! {
+        view! {
             p { "Page not found." }
         }
     });
diff --git a/website/src/templates/comparisons.rs b/website/src/templates/comparisons.rs
index a48043adda..81e35a7ffc 100644
--- a/website/src/templates/comparisons.rs
+++ b/website/src/templates/comparisons.rs
@@ -1,25 +1,22 @@
 use crate::components::comparisons::{render_lighthouse_score, Comparison};
 use crate::components::container::{Container, ContainerProps};
 use crate::components::info_svg::INFO_SVG;
-use perseus::{
-    t, ErrorCause, GenericErrorWithCause, GenericNode, RenderFnResultWithCause, Template,
-};
+use perseus::{t, ErrorCause, GenericErrorWithCause, Html, RenderFnResultWithCause, Template};
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::fs;
 use std::path::PathBuf;
-use sycamore::prelude::Template as SycamoreTemplate;
 use sycamore::prelude::*;
 use walkdir::WalkDir;
 use wasm_bindgen::JsCast;
 
 struct ComparisonRowProps {
     perseus_val: String,
-    comparison_val: StateHandle<String>,
+    comparison_val: ReadSignal<String>,
     name: String,
 }
 #[component(ComparisonRow<G>)]
-fn comparison_row(props: ComparisonRowProps) -> SycamoreTemplate<G> {
+fn comparison_row(props: ComparisonRowProps) -> View<G> {
     let ComparisonRowProps {
         perseus_val,
         comparison_val,
@@ -28,7 +25,7 @@ fn comparison_row(props: ComparisonRowProps) -> SycamoreTemplate<G> {
     let name_2 = name.clone();
     let show_details = Signal::new(false);
 
-    template! {
+    view! {
         tr {
             th(class = "text-left p-1 py-2 text-xs xs:text-base") {
                 div(class = "flex items-center") {
@@ -67,11 +64,11 @@ fn comparison_row(props: ComparisonRowProps) -> SycamoreTemplate<G> {
 }
 
 struct ComparisonTableProps {
-    comparison: StateHandle<Comparison>,
+    comparison: ReadSignal<Comparison>,
     perseus_comparison: Comparison,
 }
 #[component(ComparisonTable<G>)]
-fn comparison_table(props: ComparisonTableProps) -> SycamoreTemplate<G> {
+fn comparison_table(props: ComparisonTableProps) -> View<G> {
     let comparison = props.comparison.clone();
     let Comparison {
         name: _perseus_name, // We'll use the translation ID
@@ -135,7 +132,7 @@ fn comparison_table(props: ComparisonTableProps) -> SycamoreTemplate<G> {
     let show_details_homepage_lighthouse_desktop = Signal::new(false);
     let show_details_homepage_lighthouse_mobile = Signal::new(false);
 
-    template! {
+    view! {
         table(class = "w-full overflow-x-scroll table-fixed border-collapse") {
             thead(class = "mt-4 text-white bg-indigo-500 rounded-xl") {
                 th(class = "p-1 py-2 text-xs xs:text-base") {
@@ -154,62 +151,62 @@ fn comparison_table(props: ComparisonTableProps) -> SycamoreTemplate<G> {
                 // Then two cells, one Perseus, and the for the comparison
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_language,
-                    comparison_val: comparison_language.clone(),
+                    comparison_val: comparison_language,
                     name: "language".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_ssg.render(),
-                    comparison_val: comparison_supports_ssg.clone(),
+                    comparison_val: comparison_supports_ssg,
                     name: "supports_ssg".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_ssr.render(),
-                    comparison_val: comparison_supports_ssr.clone(),
+                    comparison_val: comparison_supports_ssr,
                     name: "supports_ssr".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_ssr_ssg_same_page.render(),
-                    comparison_val: comparison_supports_ssr_ssg_same_page.clone(),
+                    comparison_val: comparison_supports_ssr_ssg_same_page,
                     name: "supports_ssr_ssg_same_page".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_i18n.render(),
-                    comparison_val: comparison_supports_i18n.clone(),
+                    comparison_val: comparison_supports_i18n,
                     name: "supports_i18n".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_incremental.render(),
-                    comparison_val: comparison_supports_incremental.clone(),
+                    comparison_val: comparison_supports_incremental,
                     name: "supports_incremental".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_revalidation.render(),
-                    comparison_val: comparison_supports_revalidation.clone(),
+                    comparison_val: comparison_supports_revalidation,
                     name: "supports_revalidation".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_inbuilt_cli.render(),
-                    comparison_val: comparison_inbuilt_cli.clone(),
+                    comparison_val: comparison_inbuilt_cli,
                     name: "inbuilt_cli".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_inbuilt_routing.render(),
-                    comparison_val: comparison_inbuilt_routing.clone(),
+                    comparison_val: comparison_inbuilt_routing,
                     name: "inbuilt_routing".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_shell.render(),
-                    comparison_val: comparison_supports_shell.clone(),
+                    comparison_val: comparison_supports_shell,
                     name: "supports_shell".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_deployment.render(),
-                    comparison_val: comparison_supports_deployment.clone(),
+                    comparison_val: comparison_supports_deployment,
                     name: "supports_deployment".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_exporting.render(),
-                    comparison_val: comparison_supports_exporting.clone(),
+                    comparison_val: comparison_supports_exporting,
                     name: "supports_exporting".to_string()
                 })
                 // These last two get special rendering for text colors and possible emoji
@@ -291,7 +288,7 @@ pub struct ComparisonsPageProps {
 
 #[perseus::template(ComparisonsPage)]
 #[component(ComparisonsPage<G>)]
-pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
+pub fn comparisons_page(props: ComparisonsPageProps) -> View<G> {
     let comparisons = props.comparisons.clone();
     let perseus_comparison = props.perseus_comparison;
     let mut comparison_names: Vec<String> = comparisons.keys().cloned().collect();
@@ -299,13 +296,13 @@ pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
     // The current comparison should be the first element in the list alphabetically
     let curr_comparison_name = Signal::new(comparison_names[0].clone());
 
-    let select_options = SycamoreTemplate::new_fragment(
+    let select_options = View::new_fragment(
         comparison_names
             .iter()
             .map(|name| {
                 let name = name.clone();
                 let name_2 = name.clone();
-                template! {
+                view! {
                     option(value = name) {
                         (name_2)
                     }
@@ -318,10 +315,10 @@ pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
         comparisons.get(&*curr_comparison_name.get()).unwrap().clone()
     }));
 
-    template! {
+    view! {
         Container(ContainerProps {
             title: t!("perseus"),
-            children: template! {
+            children: view! {
                 div(class = "flex flex-col justify-center text-center dark:text-white mt-14 xs:mt-16 sm:mt-20 lg:mt-25") {
                     div {
                         h1(class = "text-5xl xs:text-7xl sm:text-8xl font-extrabold") {
@@ -340,7 +337,7 @@ pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
                     div(class = "p-1") {
                         select(
                             class = "p-1 rounded-sm dark:bg-navy mb-4",
-                            on:input = cloned!((curr_comparison_name) => move |event| {
+                            on:input = cloned!((curr_comparison_name) => move |event: web_sys::Event| {
                                 let target: web_sys::HtmlInputElement = event.target().unwrap().unchecked_into();
                                 let new_comparison_name = target.value();
                                 curr_comparison_name.set(new_comparison_name);
@@ -352,7 +349,7 @@ pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
                         div(class = "px-3 w-full sm:mr-auto sm:ml-auto sm:max-w-prose lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl") {
                             div(class = "flex justify-center") {
                                 ComparisonTable(ComparisonTableProps {
-                                    comparison: curr_comparison.clone(),
+                                    comparison: curr_comparison,
                                     perseus_comparison
                                 })
                             }
@@ -365,13 +362,13 @@ pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
 }
 
 #[perseus::head]
-pub fn head() -> SycamoreTemplate<SsrNode> {
-    template! {
+pub fn head() -> View<SsrNode> {
+    view! {
         title { (format!("{} | {}", t!("comparisons-title"), t!("perseus"))) }
     }
 }
 
-pub fn get_template<G: GenericNode>() -> Template<G> {
+pub fn get_template<G: Html>() -> Template<G> {
     Template::new("comparisons")
         .template(comparisons_page)
         .head(head)
diff --git a/website/src/templates/docs/container.rs b/website/src/templates/docs/container.rs
index 0cb16a1d84..bcc097be54 100644
--- a/website/src/templates/docs/container.rs
+++ b/website/src/templates/docs/container.rs
@@ -3,7 +3,6 @@ use crate::components::container::COPYRIGHT_YEARS;
 use crate::templates::docs::generation::{DocsManifest, DocsVersionStatus};
 use perseus::{link, t};
 use sycamore::context::use_context;
-use sycamore::prelude::Template as SycamoreTemplate;
 use sycamore::prelude::*;
 use sycamore_router::navigate;
 use wasm_bindgen::JsCast;
@@ -14,7 +13,7 @@ struct DocsVersionSwitcherProps {
     current_version: String,
 }
 #[component(DocsVersionSwitcher<G>)]
-fn docs_version_switcher(props: DocsVersionSwitcherProps) -> SycamoreTemplate<G> {
+fn docs_version_switcher(props: DocsVersionSwitcherProps) -> View<G> {
     let manifest = props.manifest.clone();
     let manifest_2 = manifest.clone();
     let current_version = props.current_version;
@@ -29,16 +28,16 @@ fn docs_version_switcher(props: DocsVersionSwitcherProps) -> SycamoreTemplate<G>
     let locale = Signal::new(String::new());
     let locale_2 = locale.clone();
 
-    template! {
+    view! {
         ({
             locale.set(use_context::<perseus::templates::RenderCtx>().translator.get_locale());
-            SycamoreTemplate::empty()
+            View::empty()
         })
 
         // This doesn't navigate to the same page in the new version, because it may well not exist
         select(
             class = "p-2 rounded-md text-white bg-indigo-500",
-            on:input = move |event| {
+            on:input = move |event: web_sys::Event| {
                 let target: web_sys::HtmlInputElement = event.target().unwrap().unchecked_into();
                 let new_version = target.value();
                 // This isn't a reactive scope, so we can't use `link!` here
@@ -50,13 +49,13 @@ fn docs_version_switcher(props: DocsVersionSwitcherProps) -> SycamoreTemplate<G>
             option(value = "next", selected = current_version == "next") {
                 (t!("docs-version-switcher.next"))
             }
-            (SycamoreTemplate::new_fragment(
+            (View::new_fragment(
                 manifest.beta.iter().map(cloned!((current_version_2) => move |version| {
                     let version = version.clone();
                     let version_2 = version.clone();
                     let version_3 = version.clone();
                     let current_version = current_version_2.to_string();
-                    template! {
+                    view! {
                         option(value = version, selected = current_version == version_2) { (t!("docs-version-switcher.beta", {
                             "version": version_3.as_str()
                         })) }
@@ -68,13 +67,13 @@ fn docs_version_switcher(props: DocsVersionSwitcherProps) -> SycamoreTemplate<G>
                     "version": stable_version_3.as_str()
                 }))
             }
-            (SycamoreTemplate::new_fragment(
+            (View::new_fragment(
                 manifest_2.outdated.iter().map(cloned!((current_version_4) => move |version| {
                     let version = version.clone();
                     let version_2 = version.clone();
                     let version_3 = version.clone();
                     let current_version = current_version_4.to_string();
-                    template! {
+                    view! {
                         option(value = version, selected = current_version == version_2) { (t!("docs-version-switcher.outdated", {
                             "version": version_3.as_str()
                         })) }
@@ -87,7 +86,7 @@ fn docs_version_switcher(props: DocsVersionSwitcherProps) -> SycamoreTemplate<G>
 
 #[derive(Clone)]
 pub struct DocsContainerProps<G: GenericNode> {
-    pub children: SycamoreTemplate<G>,
+    pub children: View<G>,
     pub docs_links: String,
     pub status: DocsVersionStatus,
     pub manifest: DocsManifest,
@@ -95,7 +94,7 @@ pub struct DocsContainerProps<G: GenericNode> {
 }
 
 #[component(DocsContainer<G>)]
-pub fn docs_container(props: DocsContainerProps<G>) -> SycamoreTemplate<G> {
+pub fn docs_container(props: DocsContainerProps<G>) -> View<G> {
     let docs_links = props.docs_links.clone();
     let docs_links_2 = docs_links.clone();
     let status = props.status.clone();
@@ -111,7 +110,7 @@ pub fn docs_container(props: DocsContainerProps<G>) -> SycamoreTemplate<G> {
     let menu_open_3 = create_memo(cloned!((menu_open) => move || *menu_open.get()));
     let toggle_menu = cloned!((menu_open) => move |_| menu_open.set(!*menu_open.get()));
 
-    template! {
+    view! {
         // TODO click-away events
         header(class = "shadow-md sm:p-2 w-full bg-white dark:text-white dark:bg-navy mb-20") {
             div(class = "flex justify-between") {
diff --git a/website/src/templates/docs/generation.rs b/website/src/templates/docs/generation.rs
index 12a26fcb73..0556f28794 100644
--- a/website/src/templates/docs/generation.rs
+++ b/website/src/templates/docs/generation.rs
@@ -8,7 +8,6 @@ use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::fs;
 use std::path::PathBuf;
-use sycamore::prelude::Template as SycamoreTemplate;
 use sycamore::prelude::*;
 use walkdir::WalkDir;
 
@@ -46,12 +45,12 @@ pub enum DocsVersionStatus {
 }
 impl DocsVersionStatus {
     /// Renders the docs status to a Sycamore template for display.
-    pub fn render<G: GenericNode>(&self) -> SycamoreTemplate<G> {
+    pub fn render<G: GenericNode>(&self) -> View<G> {
         match &self {
             // No message should be displayed if it's the correct version
-            Self::Stable => template! {},
+            Self::Stable => view! {},
             Self::Outdated => {
-                template! {
+                view! {
                     div(class = "ring-4 ring-red-400 p-4 rounded-lg mt-1") {
                         div(class = "flex flex-col 2xs:flex-row dark:text-white") {
                             span(
@@ -65,7 +64,7 @@ impl DocsVersionStatus {
                 }
             }
             Self::Beta => {
-                template! {
+                view! {
                     div(class = "ring-4 ring-yellow-300 p-4 rounded-lg mt-1") {
                         div(class = "flex flex-col 2xs:flex-row dark:text-white") {
                             span(
@@ -79,7 +78,7 @@ impl DocsVersionStatus {
                 }
             }
             Self::Next => {
-                template! {
+                view! {
                     div(class = "ring-4 ring-orange-400 p-4 rounded-lg mt-1") {
                         div(class = "flex flex-col 2xs:flex-row dark:text-white") {
                             span(
diff --git a/website/src/templates/docs/template.rs b/website/src/templates/docs/template.rs
index c3b7c2032d..bba3624e91 100644
--- a/website/src/templates/docs/template.rs
+++ b/website/src/templates/docs/template.rs
@@ -2,9 +2,8 @@ use crate::templates::docs::container::{DocsContainer, DocsContainerProps};
 use crate::templates::docs::generation::{
     get_build_paths, get_build_state, DocsManifest, DocsVersionStatus,
 };
-use perseus::{t, GenericNode, Template};
+use perseus::{t, Template};
 use serde::{Deserialize, Serialize};
-use sycamore::prelude::Template as SycamoreTemplate;
 use sycamore::prelude::*;
 
 #[derive(Serialize, Deserialize)]
@@ -20,7 +19,7 @@ pub struct DocsPageProps {
 
 #[perseus::template(DocsPage)]
 #[component(DocsPage<G>)]
-pub fn docs_page(props: DocsPageProps) -> SycamoreTemplate<G> {
+pub fn docs_page(props: DocsPageProps) -> View<G> {
     // These come pre-translated for the current locale
     // Note that all the docs files have a title emblazoned at the top already, so we only need the title in the `<head>`
     let DocsPageProps {
@@ -31,10 +30,10 @@ pub fn docs_page(props: DocsPageProps) -> SycamoreTemplate<G> {
         current_version,
         ..
     } = props;
-    template! {
+    view! {
         DocsContainer(DocsContainerProps {
             docs_links: sidebar_content,
-            children: template! {
+            children: view! {
                 div(class = "markdown", dangerously_set_inner_html = &content)
             },
             status,
@@ -52,8 +51,8 @@ pub fn docs_page(props: DocsPageProps) -> SycamoreTemplate<G> {
 }
 
 #[perseus::head]
-pub fn head(props: DocsPageProps) -> SycamoreTemplate<SsrNode> {
-    template! {
+pub fn head(props: DocsPageProps) -> View<SsrNode> {
+    view! {
         title { (format!("{} | {}", props.title, t!("docs-title-base"))) }
         link(rel = "stylesheet", href = ".perseus/static/styles/markdown.css")
         link(rel = "stylesheet", href = ".perseus/static/styles/docs_links_markdown.css")
@@ -61,7 +60,7 @@ pub fn head(props: DocsPageProps) -> SycamoreTemplate<SsrNode> {
     }
 }
 
-pub fn get_template<G: GenericNode>() -> Template<G> {
+pub fn get_template<G: Html>() -> Template<G> {
     Template::new("docs")
         .build_paths_fn(get_build_paths)
         .build_state_fn(get_build_state)
diff --git a/website/src/templates/index.rs b/website/src/templates/index.rs
index dd85215f63..ff64b86297 100644
--- a/website/src/templates/index.rs
+++ b/website/src/templates/index.rs
@@ -1,17 +1,16 @@
 use crate::components::container::{Container, ContainerProps};
 use crate::components::features_list::get_features_list;
 use crate::components::github_svg::GITHUB_SVG;
-use perseus::{link, t, GenericNode, Template};
-use sycamore::prelude::Template as SycamoreTemplate;
+use perseus::{link, t, Html, Template};
 use sycamore::prelude::*;
 
 #[perseus::template(IndexPage)]
 #[component(IndexPage<G>)]
-pub fn index_page() -> SycamoreTemplate<G> {
-    template! {
+pub fn index_page() -> View<G> {
+    view! {
         Container(ContainerProps {
             title: t!("perseus"),
-            children: template! {
+            children: view! {
                 // Splash page
                 div(
                     class = "bg-cover h-full flex justify-center items-center text-center dark:text-white",
@@ -130,12 +129,12 @@ pub fn index_page() -> SycamoreTemplate<G> {
 }
 
 #[perseus::head]
-pub fn head() -> SycamoreTemplate<SsrNode> {
-    template! {
+pub fn head() -> View<SsrNode> {
+    view! {
         title { (t!("perseus")) }
     }
 }
 
-pub fn get_template<G: GenericNode>() -> Template<G> {
+pub fn get_template<G: Html>() -> Template<G> {
     Template::new("index").template(index_page).head(head)
 }
diff --git a/website/src/templates/plugins.rs b/website/src/templates/plugins.rs
index 90e30a0961..effecae594 100644
--- a/website/src/templates/plugins.rs
+++ b/website/src/templates/plugins.rs
@@ -6,7 +6,6 @@ use crate::components::trusted_svg::TRUSTED_SVG;
 use perseus::{t, RenderFnResultWithCause, Template};
 use serde::{Deserialize, Serialize};
 use std::fs;
-use sycamore::prelude::Template as SycamoreTemplate;
 use sycamore::prelude::*;
 use walkdir::WalkDir;
 use wasm_bindgen::JsCast;
@@ -38,7 +37,7 @@ struct PluginDetails {
 
 #[perseus::template(PluginsPage)]
 #[component(PluginsPage<G>)]
-fn plugins_page(props: PluginsPageProps) -> SycamoreTemplate<G> {
+fn plugins_page(props: PluginsPageProps) -> View<G> {
     let plugins = Signal::new(props.plugins);
     // This will store the plugins relevant to the user's search (all of them by
     // This stores the search that the user provides
@@ -61,7 +60,7 @@ fn plugins_page(props: PluginsPageProps) -> SycamoreTemplate<G> {
             trusted,
             url,
         } = plugin;
-        template! {
+        view! {
             li(class = "inline-block align-top m-2") {
                 a(
                     class = "block text-left cursor-pointer rounded-xl shadow-md hover:shadow-2xl transition-shadow duration-100 p-8 max-w-sm dark:text-white",
@@ -70,11 +69,11 @@ fn plugins_page(props: PluginsPageProps) -> SycamoreTemplate<G> {
                     p(class = "text-xl xs:text-2xl inline-flex") {
                         (name)
                         (if trusted {
-                            template! {
+                            view! {
                                 div(class = "ml-1 self-center", dangerously_set_inner_html = TRUSTED_SVG)
                             }
                         } else {
-                            SycamoreTemplate::empty()
+                            View::empty()
                         })
                     }
                     p(class = "text-sm text-gray-500 dark:text-gray-300 mb-1") { (t!("plugin-card-author", { "author": author.clone() })) }
@@ -84,22 +83,23 @@ fn plugins_page(props: PluginsPageProps) -> SycamoreTemplate<G> {
         }
     };
 
-    template! {
+    view! {
         Container(ContainerProps {
             title: t!("perseus"),
-            children: template! {
+            children: view! {
                 div(class = "mt-14 xs:mt-16 sm:mt-20 lg:mt-25 dark:text-white") {
                     div(class = "w-full flex flex-col justify-center text-center") {
                         h1(class = "text-5xl xs:text-7xl sm:text-8xl font-extrabold mb-5") { (t!("plugins-title")) }
                         br()
-                        p(class = "mx-1") { (t!("plugins-desc")) }
-                        // TODO Remove `hidden` class once next Sycamore version is released and search bar works again
-                        input(class = "mx-2 sm:mx-4 md:mx-8 p-3 rounded-lg border-2 border-indigo-600 mb-3 dark:bg-navy hidden", on:input = cloned!((filter) => move |ev| {
-                            // This longwinded code gets the actual value that the user typed in
-                            let target: HtmlInputElement = ev.target().unwrap().unchecked_into();
-                            let new_input = target.value();
-                            filter.set(new_input);
-                        }), placeholder = t!("plugin-search.placeholder"))
+                        p(class = "mx-1 mb-2") { (t!("plugins-desc")) }
+                        div(class = "w-full flex justify-center text-center mb-3") {
+                            input(class = "mx-2 max-w-7xl p-3 rounded-lg border-2 border-indigo-600 dark:bg-navy", on:input = cloned!((filter) => move |ev: web_sys::Event| {
+                                // This longwinded code gets the actual value that the user typed in
+                                let target: HtmlInputElement = ev.target().unwrap().unchecked_into();
+                                let new_input = target.value();
+                                filter.set(new_input);
+                            }), placeholder = t!("plugin-search.placeholder"))
+                        }
                     }
                     div(class = "w-full flex justify-center") {
                         ul(class = "text-center w-full max-w-7xl mx-2 mb-16") {
@@ -116,14 +116,14 @@ fn plugins_page(props: PluginsPageProps) -> SycamoreTemplate<G> {
 }
 
 #[perseus::head]
-fn head() -> SycamoreTemplate<SsrNode> {
-    template! {
+fn head() -> View<SsrNode> {
+    view! {
         title { (format!("{} | {}", t!("plugins-title"), t!("perseus"))) }
         link(rel = "stylesheet", href = ".perseus/static/styles/markdown.css")
     }
 }
 
-pub fn get_template<G: GenericNode>() -> Template<G> {
+pub fn get_template<G: Html>() -> Template<G> {
     Template::new("plugins")
         .template(plugins_page)
         .head(head)