diff --git a/website/src/components/LeftSidebar/LeftSidebar.astro b/website/src/components/LeftSidebar/LeftSidebar.astro
index b3f69a7e1..5272ee546 100644
--- a/website/src/components/LeftSidebar/LeftSidebar.astro
+++ b/website/src/components/LeftSidebar/LeftSidebar.astro
@@ -43,6 +43,9 @@ const sidebar = SIDEBAR[langCode];
         </li>
       ))
     }
+    <li>
+      <a class={`py-0.5 mb-4 w-full hover:bg-lineHighlight block`} href={`${Astro.site?.pathname}ref`}> Reference</a>
+    </li>
   </ul>
 </nav>
 
diff --git a/website/src/components/LeftSidebar/ReferenceSidebar.astro b/website/src/components/LeftSidebar/ReferenceSidebar.astro
new file mode 100644
index 000000000..24551388c
--- /dev/null
+++ b/website/src/components/LeftSidebar/ReferenceSidebar.astro
@@ -0,0 +1,60 @@
+---
+import { docs } from '../../../../doc.json';
+
+type Props = {
+  currentPage: string;
+};
+
+const { currentPage } = Astro.props as Props;
+const { BASE_URL } = import.meta.env;
+let currentPageMatch = currentPage.slice(BASE_URL.length, currentPage.endsWith('/') ? -1 : undefined);
+---
+
+<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20 text-foreground">
+  <ul>
+    <li>
+      <a
+        class={`py-0.5 mb-4 w-full hover:bg-lineHighlight block`}
+        href={`${Astro.site?.pathname}workshop/getting-started`}>Back to Docs</a
+      >
+    </li>
+    <li>
+      <div class="nav-group pb-4">
+        <h2>Reference</h2>
+        <ul>
+          {
+            docs
+              .filter(({ tags }) => !tags?.find((t) => t.title === 'noautocomplete'))
+              .map(({ longname, name }) => {
+                const link = 'ref/' + longname;
+                const url = Astro.site?.pathname + link;
+                return (
+                  <li class="">
+                    <a
+                      class={`pl-4 py-0.5 w-full hover:bg-lineHighlight block${
+                        currentPageMatch === link ? ' bg-lineHighlight' : ''
+                      }`}
+                      href={url}
+                      aria-current={currentPageMatch === link ? 'page' : false}
+                    >
+                      {name}
+                    </a>
+                  </li>
+                );
+              })
+          }
+        </ul>
+      </div>
+    </li>
+  </ul>
+</nav>
+
+<script is:inline>
+window.addEventListener('DOMContentLoaded', () => {
+  var target = document.querySelector('[aria-current="page"]');
+  const nav = document.querySelector('.nav-groups');
+  if (nav && target && target.offsetTop > window.innerHeight - 100) {
+    nav.scrollTop = target.offsetTop;
+  }
+});
+</script>
diff --git a/website/src/config.ts b/website/src/config.ts
index ba9b06667..50c525be7 100644
--- a/website/src/config.ts
+++ b/website/src/config.ts
@@ -15,7 +15,7 @@ export const OPEN_GRAPH = {
 export type Frontmatter = {
   title: string;
   description: string;
-  layout: string;
+  layout?: string;
   image?: { src: string; alt: string };
   dir?: 'ltr' | 'rtl';
   ogLocale?: string;
diff --git a/website/src/layouts/ReferenceLayout.astro b/website/src/layouts/ReferenceLayout.astro
new file mode 100644
index 000000000..71a12004d
--- /dev/null
+++ b/website/src/layouts/ReferenceLayout.astro
@@ -0,0 +1,50 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+import Header from '../components/Header/Header.astro';
+import PageContent from '../components/PageContent/PageContent.astro';
+import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
+import * as CONFIG from '../config';
+import type { MarkdownHeading } from 'astro';
+import '../docs/docs.css';
+import ReferenceSidebar from '../components/LeftSidebar/ReferenceSidebar.astro';
+
+type Props = {
+  frontmatter: CONFIG.Frontmatter;
+  headings: MarkdownHeading[];
+};
+
+const { frontmatter, headings } = Astro.props as Props;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const currentPage = Astro.url.pathname;
+const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.mdx`;
+const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
+---
+
+<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en'} class="initial dark">
+  <head>
+    <HeadCommon />
+    <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
+    <title>
+      {frontmatter.title ? `${frontmatter.title} 🌀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
+    </title>
+  </head>
+
+  <body class="h-app-height text-gray-50 bg-background">
+    <div class="w-full h-full space-y-4 flex flex-col">
+      <header class="max-w-full fixed top-0 w-full z-[100]">
+        <Header currentPage={currentPage} />
+      </header>
+      <main class="relative pt-16">
+        <div class="h-full top-0 overflow-auto min-w-[300px] flex xl:justify-center pr-4 pl-4 md:pl-[300px] xl:pl-0">
+          <aside title="Site Navigation" class="w-[300px] px-6 left-0 hidden md:block fixed h-full">
+            <ReferenceSidebar currentPage={currentPage} />
+          </aside>
+          <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
+            <slot />
+          </PageContent>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/website/src/pages/ref/[ref].astro b/website/src/pages/ref/[ref].astro
new file mode 100644
index 000000000..b86314734
--- /dev/null
+++ b/website/src/pages/ref/[ref].astro
@@ -0,0 +1,20 @@
+---
+import ReferenceLayout from '../../layouts/ReferenceLayout.astro';
+import { docs } from '../../../../doc.json';
+import JsDoc from '../../docs/JsDoc.astro';
+
+export function getStaticPaths() {
+  return docs.map((doc) => [{ params: { ref: doc.longname } }]);
+}
+
+const { ref } = Astro.params;
+const entry = docs.find((d) => d.longname === ref);
+if (!entry) {
+  return;
+}
+---
+
+<ReferenceLayout frontmatter={{ title: entry.name || 'Reference', description: '' }} headings={[]}>
+  <h1>{entry!.name}</h1>
+  <JsDoc name={ref} />
+</ReferenceLayout>
diff --git a/website/src/pages/ref/index.astro b/website/src/pages/ref/index.astro
new file mode 100644
index 000000000..816446b9c
--- /dev/null
+++ b/website/src/pages/ref/index.astro
@@ -0,0 +1,8 @@
+---
+import ReferenceLayout from '../../layouts/ReferenceLayout.astro';
+---
+
+<ReferenceLayout frontmatter={{ title: 'Reference', description: 'All functions' }} headings={[]}>
+  <h1>Reference</h1>
+  <p>Welcome to the Reference! Pick an Item on the left</p>
+</ReferenceLayout>