diff --git a/README.md b/README.md
index 3edc307..c0e7073 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 [![npm](https://img.shields.io/npm/v/typed-htmx?style=flat-square)](https://www.npmjs.com/package/typed-htmx)
 
+[![demo](/static/demo.gif)](https://asciinema.org/a/598553)
+
 Definitions for htmx attributes in JSX.
 
 ## Usage
diff --git a/example/index.jsx b/example/index.jsx
index 21d4784..88aab4a 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -1,5 +1,20 @@
-
-/** @param {{children: any}} _ */
-export function MyComponent({ children }) {
-	return <div hx-get="/">{children} asd</div>;
+export function MyComponent() {
+	return '<!DOCTYPE html>' + (
+		<html lang='en'>
+			<head>
+				<meta charset="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<script src="/static/htmx.min.js"></script>
+			</head>
+			<body hx-boost="true" hx-ext="sse,ws">
+				<form action='/posts' method='post' hx-trigger="reset" hx-vals={{foo: 'bar'}}>
+					<label for='author'>
+						Author
+						<input type='text' name='author'/>
+					</label>
+					<button type='submit'>Submit</button>
+				</form>
+			</body>
+		</html>
+	);
 }
\ No newline at end of file
diff --git a/static/demo.gif b/static/demo.gif
new file mode 100644
index 0000000..07b75b9
Binary files /dev/null and b/static/demo.gif differ
