diff --git a/examples/snowpack/astro/components/Nav.hmx b/examples/snowpack/astro/components/Nav.hmx
index 4a463634c..b136eb395 100644
--- a/examples/snowpack/astro/components/Nav.hmx
+++ b/examples/snowpack/astro/components/Nav.hmx
@@ -1,3 +1,7 @@
+<script astro>
+  export let props: {version: string};
+</script>
+
 <nav class="snow-nav">
   <button id="toc-drawer-button" class="snow-nav-mobile-open" type="button" aria-expanded="false"
     aria-controls="nav-primary">
diff --git a/examples/snowpack/astro/components/Subnav.hmx b/examples/snowpack/astro/components/Subnav.hmx
index 3e2834595..327720597 100644
--- a/examples/snowpack/astro/components/Subnav.hmx
+++ b/examples/snowpack/astro/components/Subnav.hmx
@@ -1,21 +1,29 @@
+<script astro>
+  export let props: { 
+    title: string, 
+    inputPath: string, 
+    headers: { text: string, slug: string }[] 
+  };
+</script>
+
 <script type="module" defer src="/js/index.js"></script>
 <aside class="snow-toc snow-toc__subnav snow-view-subnav">
   <h2 class="content-title">
     {props.title}
   </h2>
-  
-  {props.headers.length > 0  && <div>
+
+  {props.headers.length > 0 && <div>
     <h4 class="snow-toc-section-header">On this page</h4>
     <nav class="toc">
       <ol>
         {props.headers.map((heading) => {
-          return <li><a href={"#" + heading.slug}>{heading.text}</a></li>
+        return <li><a href={"#" + heading.slug}>{heading.text}</a></li>
         })}
       </ol>
     </nav>
     <hr />
   </div>}
-  
+
   <h4 class="snow-toc-section-header">Suggest a change</h4>
   <a href="https://github.com/snowpackjs/snowpack/blob/main/www/{props.inputPath}">Edit this page on GitHub</a>
 </aside>
\ No newline at end of file