diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index cc622c3..264ec21 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -70,6 +70,22 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
     steps:
-      - name: Deploy to GitHub Pages
+      - name: Deploy dev
+        uses: peaceiris/actions-gh-pages@v4
+        # Dev site built on PRs
+        if: |
+          (github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository) ||
+          (github.event_name == 'workflow_dispatch' && github.event.inputs.target == 'dev') ||
+          (github.event_name == 'push' && (contains(steps.vars.outputs.tag, 'a') || contains(steps.vars.outputs.tag, 'b') || contains(steps.vars.outputs.tag, 'rc')))
+        with:
+          personal_token: ${{ secrets.HOLOVIZ_ACCESS_TOKEN }}
+          external_repository: holoviz-dev/panel-reactflow
+          publish_dir: ./builtdocs
+          force_orphan: true
+      - name: Deploy main
+        if: |
+          (github.event_name != 'pull_request') &&
+          ((github.event_name == 'workflow_dispatch' && github.event.inputs.target == 'main') ||
+          (github.event_name == 'push' && !(contains(steps.vars.outputs.tag, 'a') || contains(steps.vars.outputs.tag, 'b') || contains(steps.vars.outputs.tag, 'rc'))))
         id: deployment
         uses: actions/deploy-pages@v4
diff --git a/docs/assets/screenshots/examples/advanced.png b/docs/assets/screenshots/examples/advanced.png
new file mode 100644
index 0000000..a5eb967
Binary files /dev/null and b/docs/assets/screenshots/examples/advanced.png differ
diff --git a/docs/assets/screenshots/examples/custom_editor.png b/docs/assets/screenshots/examples/custom_editor.png
new file mode 100644
index 0000000..ec98146
Binary files /dev/null and b/docs/assets/screenshots/examples/custom_editor.png differ
diff --git a/docs/assets/screenshots/examples/edge_editors.png b/docs/assets/screenshots/examples/edge_editors.png
new file mode 100644
index 0000000..7a4425c
Binary files /dev/null and b/docs/assets/screenshots/examples/edge_editors.png differ
diff --git a/docs/assets/screenshots/examples/node_edge_instances.png b/docs/assets/screenshots/examples/node_edge_instances.png
new file mode 100644
index 0000000..378c3c1
Binary files /dev/null and b/docs/assets/screenshots/examples/node_edge_instances.png differ
diff --git a/docs/assets/screenshots/examples/schema_types.png b/docs/assets/screenshots/examples/schema_types.png
new file mode 100644
index 0000000..2bebb6b
Binary files /dev/null and b/docs/assets/screenshots/examples/schema_types.png differ
diff --git a/docs/assets/screenshots/examples/simple.png b/docs/assets/screenshots/examples/simple.png
new file mode 100644
index 0000000..1d47891
Binary files /dev/null and b/docs/assets/screenshots/examples/simple.png differ
diff --git a/docs/assets/screenshots/examples/threejs_viewer.png b/docs/assets/screenshots/examples/threejs_viewer.png
new file mode 100644
index 0000000..d501b59
Binary files /dev/null and b/docs/assets/screenshots/examples/threejs_viewer.png differ
diff --git a/docs/assets/screenshots/examples/threejs_viewer_instances.png b/docs/assets/screenshots/examples/threejs_viewer_instances.png
new file mode 100644
index 0000000..a39e940
Binary files /dev/null and b/docs/assets/screenshots/examples/threejs_viewer_instances.png differ
diff --git a/docs/examples.md b/docs/examples.md
deleted file mode 100644
index 755e73e..0000000
--- a/docs/examples.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Examples
-
-```{.python pycafe-embed pycafe-embed-style="border: 1px solid #e6e6e6; border-radius: 8px;" pycafe-embed-width="100%" pycafe-embed-height="400px" pycafe-embed-scale="1.0"}
-import panel as pn
-pn.extension()
-
-x_slider = pn.widgets.IntSlider(name='x', start=0, end=100)
-
-def apply_square(x):
-    return f'{x} squared is {x**2}'
-
-pn.Row(x_slider, pn.bind(apply_square, x_slider))
-```
diff --git a/docs/examples/advanced.md b/docs/examples/advanced.md
new file mode 100644
index 0000000..bc6c5b2
--- /dev/null
+++ b/docs/examples/advanced.md
@@ -0,0 +1,12 @@
+# Advanced
+
+Schema-driven editor workflow with a custom node type, type stylesheets,
+and top-panel event feedback.
+
+![Screenshot: advanced example](../assets/screenshots/examples/advanced.png)
+
+## Source
+
+```python
+--8<-- "examples/advanced.py"
+```
diff --git a/docs/examples/custom-editor.md b/docs/examples/custom-editor.md
new file mode 100644
index 0000000..ad8d740
--- /dev/null
+++ b/docs/examples/custom-editor.md
@@ -0,0 +1,12 @@
+# Custom Editor
+
+Registers a callable editor for `metric` nodes and pushes incremental updates
+using `on_patch`.
+
+![Screenshot: custom editor example](../assets/screenshots/examples/custom_editor.png)
+
+## Source
+
+```python
+--8<-- "examples/custom_editor.py"
+```
diff --git a/docs/examples/edge-editors.md b/docs/examples/edge-editors.md
new file mode 100644
index 0000000..3baa635
--- /dev/null
+++ b/docs/examples/edge-editors.md
@@ -0,0 +1,12 @@
+# Edge Editors
+
+Shows schema-backed edge editing plus a custom callable edge editor for
+specialized edge types.
+
+![Screenshot: edge editors example](../assets/screenshots/examples/edge_editors.png)
+
+## Source
+
+```python
+--8<-- "examples/edge_editors.py"
+```
diff --git a/docs/examples/index.md b/docs/examples/index.md
new file mode 100644
index 0000000..92d69ed
--- /dev/null
+++ b/docs/examples/index.md
@@ -0,0 +1,64 @@
+# Examples Gallery
+
+Browse runnable examples from `examples/`. Each card links to a dedicated page
+with a screenshot and full source code.
+
+<div class="grid cards" markdown>
+
+- ![Advanced example](../assets/screenshots/examples/advanced.png)
+
+    ---
+
+    **[Advanced](advanced.md)**
+    Schema-driven task nodes with event tracking.
+
+- ![Custom editor example](../assets/screenshots/examples/custom_editor.png)
+
+    ---
+
+    **[Custom Editor](custom-editor.md)**
+    Callable node editor with custom widgets.
+
+- ![Edge editors example](../assets/screenshots/examples/edge_editors.png)
+
+    ---
+
+    **[Edge Editors](edge-editors.md)**
+    Schema-backed and callable edge editors.
+
+- ![Node/edge instances example](../assets/screenshots/examples/node_edge_instances.png)
+
+    ---
+
+    **[Node/Edge Instances](node-edge-instances.md)**
+    Class-based nodes and edges with hooks.
+
+- ![Schema types example](../assets/screenshots/examples/schema_types.png)
+
+    ---
+
+    **[Schema Types](schema-types.md)**
+    Multiple node types, each with its own schema.
+
+- ![Simple example](../assets/screenshots/examples/simple.png)
+
+    ---
+
+    **[Simple](simple.md)**
+    Minimal graph setup with top panel.
+
+- ![ThreeJS viewer example](../assets/screenshots/examples/threejs_viewer.png)
+
+    ---
+
+    **[ThreeJS Viewer](threejs-viewer.md)**
+    Graph-driven 3D cube viewer controls.
+
+- ![ThreeJS viewer instances example](../assets/screenshots/examples/threejs_viewer_instances.png)
+
+    ---
+
+    **[ThreeJS Viewer (Instances)](threejs-viewer-instances.md)**
+    ThreeJS viewer with Node and Edge instances.
+
+</div>
diff --git a/docs/examples/node-edge-instances.md b/docs/examples/node-edge-instances.md
new file mode 100644
index 0000000..b68f84d
--- /dev/null
+++ b/docs/examples/node-edge-instances.md
@@ -0,0 +1,12 @@
+# Node/Edge Instances
+
+Uses `Node` and `Edge` subclasses for rich behavior, custom editors, and event
+hooks while still rendering in a standard ReactFlow canvas.
+
+![Screenshot: node and edge instances example](../assets/screenshots/examples/node_edge_instances.png)
+
+## Source
+
+```python
+--8<-- "examples/node_edge_instances.py"
+```
diff --git a/docs/examples/schema-types.md b/docs/examples/schema-types.md
new file mode 100644
index 0000000..2b96dc3
--- /dev/null
+++ b/docs/examples/schema-types.md
@@ -0,0 +1,12 @@
+# Schema Types
+
+Demonstrates multiple node types where each type contributes its own schema,
+including both Param-derived and raw JSON Schema definitions.
+
+![Screenshot: schema types example](../assets/screenshots/examples/schema_types.png)
+
+## Source
+
+```python
+--8<-- "examples/schema_types.py"
+```
diff --git a/docs/examples/simple.md b/docs/examples/simple.md
new file mode 100644
index 0000000..9da6429
--- /dev/null
+++ b/docs/examples/simple.md
@@ -0,0 +1,11 @@
+# Simple
+
+A minimal two-node graph setup with an edge and an optional top panel.
+
+![Screenshot: simple example](../assets/screenshots/examples/simple.png)
+
+## Source
+
+```python
+--8<-- "examples/simple.py"
+```
diff --git a/docs/examples/threejs-viewer-instances.md b/docs/examples/threejs-viewer-instances.md
new file mode 100644
index 0000000..6edbebb
--- /dev/null
+++ b/docs/examples/threejs-viewer-instances.md
@@ -0,0 +1,12 @@
+# ThreeJS Viewer (Instances)
+
+The ThreeJS viewer example implemented with `Node` and `Edge` subclass
+instances for object-oriented graph behavior.
+
+![Screenshot: threejs viewer instances example](../assets/screenshots/examples/threejs_viewer_instances.png)
+
+## Source
+
+```python
+--8<-- "examples/threejs_viewer_instances.py"
+```
diff --git a/docs/examples/threejs-viewer.md b/docs/examples/threejs-viewer.md
new file mode 100644
index 0000000..9c00934
--- /dev/null
+++ b/docs/examples/threejs-viewer.md
@@ -0,0 +1,12 @@
+# ThreeJS Viewer
+
+Interactive 3D cube rendering controlled through graph-connected parameter
+nodes.
+
+![Screenshot: threejs viewer example](../assets/screenshots/examples/threejs_viewer.png)
+
+## Source
+
+```python
+--8<-- "examples/threejs_viewer.py"
+```
diff --git a/docs/index.md b/docs/index.md
index 7d6c6b3..945c4c6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -66,6 +66,10 @@ flow.servable()
 - [Style Nodes & Edges](how-to/style-nodes-edges.md)
 - [React to Events](how-to/react-to-events.md)
 
+## Examples
+
+- [Examples gallery](examples/index.md)
+
 ## Reference
 
 - [API reference](reference/panel_reactflow.md)
diff --git a/zensical.toml b/zensical.toml
index 63e143a..0bbd128 100644
--- a/zensical.toml
+++ b/zensical.toml
@@ -20,7 +20,17 @@ nav = [
     {"Style Nodes & Edges" = "how-to/style-nodes-edges.md"},
     {"React to Events" = "how-to/react-to-events.md"}
   ]},
-  {"Examples" = "examples.md"},
+  {"Examples" = [
+    {"Gallery" = "examples/index.md"},
+    {"Advanced" = "examples/advanced.md"},
+    {"Custom Editor" = "examples/custom-editor.md"},
+    {"Edge Editors" = "examples/edge-editors.md"},
+    {"Node/Edge Instances" = "examples/node-edge-instances.md"},
+    {"Schema Types" = "examples/schema-types.md"},
+    {"Simple" = "examples/simple.md"},
+    {"ThreeJS Viewer" = "examples/threejs-viewer.md"},
+    {"ThreeJS Viewer (Instances)" = "examples/threejs-viewer-instances.md"}
+  ]},
   {"Reference" = "reference/panel_reactflow.md"},
   {"Releases" = "releases.md"}
 ]