Add example gallery

.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

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"
+```

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"
+```

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"
+```

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>

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"
+```

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"
+```

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"
+```

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"
+```

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"
+```

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)

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"}
 ]