From 5f4acaf2eddc8417268aa3ee7786c7b55359e1c4 Mon Sep 17 00:00:00 2001
From: Hannah Park <hannah@crescent.dev>
Date: Thu, 9 Oct 2025 19:48:25 +0900
Subject: [PATCH] Enhances Jupyter notebook demo with usage examples

---
 docs/examples/jupyter-notebook/demo.ipynb | 44 +++++++++++++++++++----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/docs/examples/jupyter-notebook/demo.ipynb b/docs/examples/jupyter-notebook/demo.ipynb
index 34f4f60..20c9ba6 100644
--- a/docs/examples/jupyter-notebook/demo.ipynb
+++ b/docs/examples/jupyter-notebook/demo.ipynb
@@ -6,8 +6,9 @@
    "metadata": {},
    "source": [
     "# WaveRoll - Jupyter Notebook Demo\n",
+    "> JavaScript Library for Comparative MIDI Piano-Roll Visualization\n",
     "\n",
-    "[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/crescent-stdio/wave-roll/blob/main/docs/examples/jupyter-notebook/demo.ipynb)\n",
+    "[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/crescent-stdio/wave-roll/blob/main/docs/examples/jupyter-notebook/demo.ipynb) [![GitHub](https://img.shields.io/badge/GitHub-View_on_GitHub-blue?logo=github)](https://github.com/crescent-stdio/wave-roll)\n",
     "\n",
     "This notebook demonstrates how to embed WaveRoll in Jupyter notebooks for interactive MIDI visualization and comparison.\n"
    ]
@@ -17,7 +18,9 @@
    "id": "6be587b7",
    "metadata": {},
    "source": [
-    "## Usage\n",
+    "## 1. Usage\n",
+    "\n",
+    "### 1.1. Basic IFrame Embed\n",
     "\n",
     "Embed the WaveRoll standalone demo using an IFrame:\n",
     "\n",
@@ -32,7 +35,36 @@
    "outputs": [],
    "source": [
     "from IPython.display import IFrame\n",
-    "IFrame(src='https://crescent-stdio.github.io/wave-roll/standalone.html', width='100%', height='800px')"
+    "IFrame(src='https://crescent-stdio.github.io/wave-roll/standalone.html', width='100%', height='800px' )"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a7d3e64a",
+   "metadata": {},
+   "source": [
+    "### 1.2. IFrame with Overflow Auto\n",
+    "\n",
+    "If you need scrollbar control on the iframe itself:\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "08dc98f6",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from IPython.display import HTML\n",
+    "\n",
+    "HTML(\"\"\"\n",
+    "<iframe \n",
+    "  src=\"https://crescent-stdio.github.io/wave-roll/standalone.html\" \n",
+    "  width=\"100%\" \n",
+    "  height=\"800px\"\n",
+    "  style=\"overflow: auto; border: none;\"\n",
+    "></iframe>\n",
+    "\"\"\")"
    ]
   },
   {
@@ -40,7 +72,7 @@
    "id": "dbd03610",
    "metadata": {},
    "source": [
-    "## Alternative: Using the Web Component Directly\n",
+    "## 2. Alternative: Using the Web Component Directly\n",
     "\n",
     "You can also use the `<wave-roll>` web component directly in Jupyter notebooks with specific file paths:\n"
    ]
@@ -80,7 +112,7 @@
    "id": "f91c0c2a",
    "metadata": {},
    "source": [
-    "### Using Your Own Files\n",
+    "### 2.1. Using Your Own Files\n",
     "\n",
     "To use your own MIDI/audio files, you can:\n",
     "\n",
@@ -122,7 +154,7 @@
    "id": "dd99801a",
    "metadata": {},
    "source": [
-    "### Dynamic File Configuration with Python\n",
+    "### 2.2. Dynamic File Configuration with Python\n",
     "\n",
     "You can also configure files programmatically using Python variables:\n"
    ]