From 843ee193f98b23f417bb30522e07651fa69f37eb Mon Sep 17 00:00:00 2001
From: dangreen <danon0404@gmail.com>
Date: Wed, 21 Oct 2026 19:55:56 +0400
Subject: [PATCH 1/4] docs: link the Nanoviews implementations from the
 examples and the DevTools page

---
 skills/nano-kit-store/DOCS.md                 |  1 +
 website/src/content/docs/examples/cvapp.mdx   | 38 ++++++++++++++-----
 .../src/content/docs/examples/event-board.mdx | 14 +++++++
 .../content/docs/examples/rick-and-morty.mdx  | 14 ++++++-
 website/src/content/docs/examples/weather.mdx | 14 +++++++
 website/src/content/docs/store/devtools.mdx   |  1 +
 6 files changed, 72 insertions(+), 10 deletions(-)

diff --git a/skills/nano-kit-store/DOCS.md b/skills/nano-kit-store/DOCS.md
index 941c0bde..ddfe9e1c 100644
--- a/skills/nano-kit-store/DOCS.md
+++ b/skills/nano-kit-store/DOCS.md
@@ -1802,6 +1802,7 @@ Learn how to inspect the stores of a running app with @nano_kit/devtools.
 - **Named for you**. Every signal gets a readable name, the place it was created and its owner, the store factory, the component or the file, straight from the call stack.
 - **Transactions, not events**. The log groups what happened by flush, with the time of every run and the slowest one called out.
 - **Live values**. Pick any node to see its value as a tree, what it reads, what reads it, and its last lines in the log.
+- **Built with the kit**. The panel is itself an app on `@nano_kit/store`, with its views written in [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the same core.
 
 ## Installation
 
diff --git a/website/src/content/docs/examples/cvapp.mdx b/website/src/content/docs/examples/cvapp.mdx
index 1d860869..ed597136 100644
--- a/website/src/content/docs/examples/cvapp.mdx
+++ b/website/src/content/docs/examples/cvapp.mdx
@@ -5,17 +5,37 @@ sidebar:
   order: 3
 ---
 
+import { Tabs, TabItem } from '@astrojs/starlight/components'
+
 This example shows a CV editor built with `@nano_kit/store`, `@nano_kit/query`, `@nano_kit/router`, and `@nano_kit/react`.
 
 It is a compact reference for routed application screens, cached async data, derived state, and React components that subscribe to signals.
 
-<iframe
-  src='https://stackblitz.com/github/TrigenSoftware/nano_kit/tree/main/examples/cvapp/react-nano_kit?embed=1&file=src/App.tsx&view=both&corp=1'
-  loading='lazy'
-  style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
-  title='CV Generator built with React and Nano Kit'
-  allow='cross-origin-isolated; accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
-  sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
-/>
+The **Nanoviews** tab runs the same editor on [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the Nano Kit core.
+
+<Tabs syncKey='example-view'>
+  <TabItem label='React' icon='seti:react'>
+    <iframe
+      src='https://stackblitz.com/github/TrigenSoftware/nano_kit/tree/main/examples/cvapp/react-nano_kit?embed=1&file=src/App.tsx&view=both&corp=1'
+      loading='lazy'
+      style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
+      title='CV Generator built with React and Nano Kit'
+      allow='cross-origin-isolated; accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
+      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
+    />
+
+    [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/cvapp/react-nano_kit)
+  </TabItem>
+  <TabItem label='Nanoviews' icon='moon'>
+    <iframe
+      src='https://stackblitz.com/github/TrigenSoftware/nanoviews/tree/main/examples/cvapp/nano_kit?embed=1&file=src/App.ts&view=both&corp=1'
+      loading='lazy'
+      style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
+      title='CV Generator built with Nanoviews and Nano Kit'
+      allow='cross-origin-isolated; accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
+      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
+    />
 
-[View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/cvapp/react-nano_kit)
+    [View source on GitHub](https://github.com/TrigenSoftware/nanoviews/tree/main/examples/cvapp/nano_kit)
+  </TabItem>
+</Tabs>
diff --git a/website/src/content/docs/examples/event-board.mdx b/website/src/content/docs/examples/event-board.mdx
index 4c03d3c7..fd5f47e4 100644
--- a/website/src/content/docs/examples/event-board.mdx
+++ b/website/src/content/docs/examples/event-board.mdx
@@ -15,6 +15,8 @@ Demo users: `ada` / `lovelace`, `grace` / `hopper`.
 
 The Nano Kit tutorial uses this app as its running project.
 
+The **Nanoviews** tab is the same board on [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the Nano Kit core, rendered on the client.
+
 <Tabs syncKey='example-view'>
   <TabItem label='React SSR' icon='seti:react'>
     <iframe
@@ -52,4 +54,16 @@ The Nano Kit tutorial uses this app as its running project.
 
     [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/event-board/svelte-nano_kit-intl-ssr)
   </TabItem>
+  <TabItem label='Nanoviews' icon='moon'>
+    <iframe
+      src='https://stackblitz.com/github/TrigenSoftware/nanoviews/tree/main/examples/event-board/nano_kit-di-intl?embed=1&file=src%2Fmain.ts&view=both&corp=1'
+      loading='lazy'
+      style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
+      title='Event Board built with Nanoviews and Nano Kit'
+      allow='cross-origin-isolated; accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
+      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
+    />
+
+    [View source on GitHub](https://github.com/TrigenSoftware/nanoviews/tree/main/examples/event-board/nano_kit-di-intl)
+  </TabItem>
 </Tabs>
diff --git a/website/src/content/docs/examples/rick-and-morty.mdx b/website/src/content/docs/examples/rick-and-morty.mdx
index 23536bfb..e3061b86 100644
--- a/website/src/content/docs/examples/rick-and-morty.mdx
+++ b/website/src/content/docs/examples/rick-and-morty.mdx
@@ -9,7 +9,7 @@ import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'
 
 This example shows a larger encyclopedia app built around routing, data loading, and server-side rendering.
 
-Compare the tabs to see the same application model running with React SSR, Svelte SSR, SvelteKit, Next.js App Router, and Next.js Pages Router.
+Compare the tabs to see the same application model running with React SSR, Svelte SSR, SvelteKit, Next.js App Router, Next.js Pages Router, and [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the Nano Kit core, which renders on the client.
 
 <Tabs syncKey='example-view'>
   <TabItem label='React SSR' icon='seti:react'>
@@ -76,4 +76,16 @@ Compare the tabs to see the same application model running with React SSR, Svelt
 
     [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/next-pages-nano_kit-ssr)
   </TabItem>
+  <TabItem label='Nanoviews' icon='moon'>
+    <iframe
+      src='https://stackblitz.com/github/TrigenSoftware/nanoviews/tree/main/examples/rick-and-morty/nano_kit?embed=1&file=src/App.ts&view=both&corp=1'
+      loading='lazy'
+      style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
+      title='Rick and Morty Encyclopedia built with Nanoviews and Nano Kit'
+      allow='cross-origin-isolated; accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
+      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
+    />
+
+    [View source on GitHub](https://github.com/TrigenSoftware/nanoviews/tree/main/examples/rick-and-morty/nano_kit)
+  </TabItem>
 </Tabs>
diff --git a/website/src/content/docs/examples/weather.mdx b/website/src/content/docs/examples/weather.mdx
index a31ab62a..46df8ce5 100644
--- a/website/src/content/docs/examples/weather.mdx
+++ b/website/src/content/docs/examples/weather.mdx
@@ -11,6 +11,8 @@ This example shows a small React weather app built with `@nano_kit/store`, `@nan
 
 Use the **Basic** version for the shortest path through the data flow. Use the **Dependency Injection** version to see how external services can be moved out of components and provided through Nano Kit's DI system.
 
+The **Nanoviews** version is the same app on [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the Nano Kit core: the stores are the same, only the views differ, and it ships the smallest bundle in the [size comparison](/getting-started/#bundle-sizes).
+
 <Tabs syncKey='example-view'>
   <TabItem label='Basic' icon='seti:default'>
     <iframe
@@ -36,4 +38,16 @@ Use the **Basic** version for the shortest path through the data flow. Use the *
 
     [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/weather/react-nano_kit-di)
   </TabItem>
+  <TabItem label='Nanoviews' icon='moon'>
+    <iframe
+      src='https://stackblitz.com/github/TrigenSoftware/nanoviews/tree/main/examples/weather/nano_kit?embed=1&file=src/App.ts&view=both&corp=1'
+      loading='lazy'
+      style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
+      title='Weather App built with Nanoviews and Nano Kit'
+      allow='cross-origin-isolated; accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
+      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
+    />
+
+    [View source on GitHub](https://github.com/TrigenSoftware/nanoviews/tree/main/examples/weather/nano_kit)
+  </TabItem>
 </Tabs>
diff --git a/website/src/content/docs/store/devtools.mdx b/website/src/content/docs/store/devtools.mdx
index b469ea77..f1718b1b 100644
--- a/website/src/content/docs/store/devtools.mdx
+++ b/website/src/content/docs/store/devtools.mdx
@@ -19,6 +19,7 @@ import logDark from '../../../assets/devtools-log_dark.png'
 - **Named for you**. Every signal gets a readable name, the place it was created and its owner, the store factory, the component or the file, straight from the call stack.
 - **Transactions, not events**. The log groups what happened by flush, with the time of every run and the slowest one called out.
 - **Live values**. Pick any node to see its value as a tree, what it reads, what reads it, and its last lines in the log.
+- **Built with the kit**. The panel is itself an app on `@nano_kit/store`, with its views written in [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the same core.
 
 <Image src={signalsLight} alt='The Signals tab: the signals of a weather app grouped by the stores they were created in, and the inspector of a selected computed' class='dark:sl-hidden' />
 <Image src={signalsDark} alt='The Signals tab: the signals of a weather app grouped by the stores they were created in, and the inspector of a selected computed' class='light:sl-hidden' />

From b8f41d0db94a46b80437c0a3fdb0a5f42f82deed Mon Sep 17 00:00:00 2001
From: dangreen <danon0404@gmail.com>
Date: Wed, 21 Oct 2026 19:59:28 +0400
Subject: [PATCH 2/4] docs: drop the Nanoviews sentence from the Event Board
 intro

---
 website/src/content/docs/examples/event-board.mdx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/website/src/content/docs/examples/event-board.mdx b/website/src/content/docs/examples/event-board.mdx
index fd5f47e4..f968cbbd 100644
--- a/website/src/content/docs/examples/event-board.mdx
+++ b/website/src/content/docs/examples/event-board.mdx
@@ -15,8 +15,6 @@ Demo users: `ada` / `lovelace`, `grace` / `hopper`.
 
 The Nano Kit tutorial uses this app as its running project.
 
-The **Nanoviews** tab is the same board on [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the Nano Kit core, rendered on the client.
-
 <Tabs syncKey='example-view'>
   <TabItem label='React SSR' icon='seti:react'>
     <iframe

From 210b3082174196978f33dabb6194566ddfb5d208 Mon Sep 17 00:00:00 2001
From: dangreen <danon0404@gmail.com>
Date: Wed, 21 Oct 2026 19:59:29 +0400
Subject: [PATCH 3/4] style(website): unquote the script attributes that need
 no quotes

---
 website/astro.config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/astro.config.js b/website/astro.config.js
index ea451d12..2383a7c5 100644
--- a/website/astro.config.js
+++ b/website/astro.config.js
@@ -86,11 +86,11 @@ export default defineConfig({
         isProduction && {
           tag: 'script',
           attrs: {
-            'src': 'https://cloud.umami.is/script.js',
+            src: 'https://cloud.umami.is/script.js',
             'data-website-id': '6b792c30-fae6-48d2-95fa-c1d39706f328',
-            'defer': true,
+            defer: true,
             // Required to pass the COEP require-corp check
-            'crossorigin': 'anonymous'
+            crossorigin: 'anonymous'
           }
         },
         {

From 657c44edf7f04422ff171ddfd0bbf66d89d357af Mon Sep 17 00:00:00 2001
From: dangreen <danon0404@gmail.com>
Date: Wed, 21 Oct 2026 20:02:08 +0400
Subject: [PATCH 4/4] docs: drop the Nanoviews descriptions from the example
 intros

---
 website/src/content/docs/examples/cvapp.mdx          | 2 --
 website/src/content/docs/examples/rick-and-morty.mdx | 2 +-
 website/src/content/docs/examples/weather.mdx        | 2 --
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/website/src/content/docs/examples/cvapp.mdx b/website/src/content/docs/examples/cvapp.mdx
index ed597136..0ec7e14e 100644
--- a/website/src/content/docs/examples/cvapp.mdx
+++ b/website/src/content/docs/examples/cvapp.mdx
@@ -11,8 +11,6 @@ This example shows a CV editor built with `@nano_kit/store`, `@nano_kit/query`,
 
 It is a compact reference for routed application screens, cached async data, derived state, and React components that subscribe to signals.
 
-The **Nanoviews** tab runs the same editor on [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the Nano Kit core.
-
 <Tabs syncKey='example-view'>
   <TabItem label='React' icon='seti:react'>
     <iframe
diff --git a/website/src/content/docs/examples/rick-and-morty.mdx b/website/src/content/docs/examples/rick-and-morty.mdx
index e3061b86..1e962ba4 100644
--- a/website/src/content/docs/examples/rick-and-morty.mdx
+++ b/website/src/content/docs/examples/rick-and-morty.mdx
@@ -9,7 +9,7 @@ import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'
 
 This example shows a larger encyclopedia app built around routing, data loading, and server-side rendering.
 
-Compare the tabs to see the same application model running with React SSR, Svelte SSR, SvelteKit, Next.js App Router, Next.js Pages Router, and [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the Nano Kit core, which renders on the client.
+Compare the tabs to see the same application model running with React SSR, Svelte SSR, SvelteKit, Next.js App Router, Next.js Pages Router, and [Nanoviews](https://nanoviews.js.org).
 
 <Tabs syncKey='example-view'>
   <TabItem label='React SSR' icon='seti:react'>
diff --git a/website/src/content/docs/examples/weather.mdx b/website/src/content/docs/examples/weather.mdx
index 46df8ce5..4b080163 100644
--- a/website/src/content/docs/examples/weather.mdx
+++ b/website/src/content/docs/examples/weather.mdx
@@ -11,8 +11,6 @@ This example shows a small React weather app built with `@nano_kit/store`, `@nan
 
 Use the **Basic** version for the shortest path through the data flow. Use the **Dependency Injection** version to see how external services can be moved out of components and provided through Nano Kit's DI system.
 
-The **Nanoviews** version is the same app on [Nanoviews](https://nanoviews.js.org), a Direct DOM library built on the Nano Kit core: the stores are the same, only the views differ, and it ships the smallest bundle in the [size comparison](/getting-started/#bundle-sizes).
-
 <Tabs syncKey='example-view'>
   <TabItem label='Basic' icon='seti:default'>
     <iframe