diff --git a/examples/github.svg b/examples/github.svg
new file mode 100644
index 0000000..aa05db9
--- /dev/null
+++ b/examples/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
\ No newline at end of file
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 0000000..d475e10
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,154 @@
+<head>
+	<link rel="stylesheet" href="../main.css?ver=40" />
+	<style>
+		.container {
+			max-width: 900px;
+			width: fit-content;
+			margin: 0 auto;
+		}
+
+		h1 {
+			margin-top: 3em;
+		}
+
+		h2 {
+			font-size: 1.2em;
+			padding: 10px;
+			background-color: #457b9d;
+			color: white;
+			border-bottom: 2px solid #3b6a87;
+			text-align: center;
+		}
+
+		h2 a {
+			color: white !important;
+		}
+
+		#examples {
+			margin-top: 3em;
+			display: grid;
+			grid-template-columns: 1fr 1fr 1fr;
+			grid-gap: 1em;
+		}
+
+
+		div#examples>div {
+			background: #dddddd;
+			color: black;
+		}
+
+		.description {
+			padding: 1em;
+			display: block;
+		}
+
+		.youtube {
+			display: block;
+			text-align: right;
+		}
+
+		.media {
+			background: hsl(203deg 26% 73%);
+			display: block;
+			width: 100%;
+			padding: 0.2em;
+		}
+	</style>
+</head>
+
+<body style='color:white'>
+	<div id="header">
+		<a id="logoname" href="./" style="text-decoration: none; color: white; margin: 2px">
+			<span data-translate="logo-header">
+				<font id="qos">V</font>DO.Ninja
+			</span>
+		</a>
+	</div>
+	<div class="container">
+		<div id="info">
+			<h1>VDO.Ninja tech demonstrations</h1>
+			<div id="examples">
+				<div>
+					<h2><a href='p2p.html'>p2p</a></h2>
+					<div class="description">How to use vdo.ninja as a data transport tunneling service</div>
+				</div>
+				<div>
+					<h2><a href='twitch.html'>twitch</a></h2>
+					<div class="description">How to have a twitch live chat side-by-side with VDO.NInja on the same
+						screen</div>
+				</div>
+				<div>
+					<h2><a href='dual.html'>dual</a></h2>
+					<div class="description">how to have two VDO.Ninja windows (or any windows really) open on the same
+						page;
+						Picture-in-Picture style</div>
+				</div>
+				<div>
+					<h2><a href='sensors.html'>sensors</a></h2>
+					<div class="media">
+						<a href='https://www.youtube.com/watch?v=SqbufszHKi4' class="youtube">
+							<img src="youtube.svg" />
+						</a>
+					</div>
+					<div class="description">how to transmit sensor and video data from a phone to a computer, drawing
+						it to canvas.
+					</div>
+				</div>
+				<div>
+					<h2><a href='midi.html'>midi</a></h2>
+					<div class="media">
+						<a href='https://www.youtube.com/watch?v=rnZ8HM9FL4I' class="youtube">
+							<img src="youtube.svg" />
+						</a>
+					</div>
+					<div class="description">Demonstrates the MIDI API for VDO.Ninja
+
+					</div>
+				</div>
+				<div>
+					<h2><a href='draggable.html'>draggable</a></h2>
+					<div class="description">demonstrates how to drag multiple
+						windows around, if you wanted to create a custom
+						layout of elements. (experimental)</div>
+				</div>
+				<div>
+					<h2><a href='chat.html'>chat</a></h2>
+					<div class="description">Example of a chat-only interface for VDO.Ninja; maybe
+						dockable into OBS even.</div>
+				</div>
+				<div>
+					<h2><a href='iframe.outbound-stats.html'>iframe.outbound-stats</a></h2>
+					<div class="description">iframe.outbound-stats.html demostrates how to get stats from VDO.Ninja
+						using the
+						IFRAME API</div>
+				</div>
+				<div>
+					<h2><a href='changepass.html'>changepass</a></h2>
+					<div class="description">lets you create passwords and related HASH values for VDO.NInja
+						rooms</div>
+				</div>
+				<div>
+					<h2><a href='webhid.html'>webhid</a></h2>
+					<div class="description">webhid demonstrates how to interface with a USB device, like a streamdeck
+						(mouse/keyboard not supported)</div>
+				</div>
+				<div>
+					<h2><a href='zoom.html'>zoom</a></h2>
+					<div class="description">A tool for letting you publish into VDO.Ninja, but then
+						full-screen the window once setup, allowing for
+						window-capturing into zoom.</div>
+				</div>
+				<div>
+					<h2><a href='obs_remote/index.html'>obs_remote</a></h2>
+					<div class="media">
+					<a href='https://github.com/steveseguin/remote_ninja' class="youtube">
+						<img src="github.svg" />
+					</a>
+					</div>
+
+					<div class="description">Also hosted on github elsewhere, but it's an example of how to remotely
+						control OBS using VDO.Ninja's tunneling abilities</div>
+				</div>
+			</div>
+		</div>
+</body>
\ No newline at end of file
diff --git a/examples/youtube.svg b/examples/youtube.svg
new file mode 100644
index 0000000..daebc5f
--- /dev/null
+++ b/examples/youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
\ No newline at end of file
