closes #10

Author: Lucas Elzinga

.github/workflows/deploy-demo.yml

@@ -0,0 +1,65 @@
+name: Deploy Demo to GitHub Pages
+
+on:
+  push:
+    branches: [main, master]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install root dependencies
+        run: npm ci
+
+      - name: Build package
+        run: npm run build
+
+      - name: Install demo dependencies
+        run: |
+          cd demo
+          npm ci
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Build demo for GitHub Pages
+        run: |
+          cd demo
+          npm run build
+        env:
+          NODE_ENV: production
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './demo/build'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -6,8 +6,11 @@
 	<a href="https://github.com/lzinga/mdsvex-enhanced-images/commits/main/"><img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/lzinga/mdsvex-enhanced-images"></a>
 </p>
 
+<p align="center">
+	<strong>🚀 <a href="https://lzinga.github.io/mdsvex-enhanced-images/">Live Demo</a></strong>
+</p>
 
-This plugin allows you to: 
+This plugin allows you to:
 - use relative urls to images from the markdown file while also using the `enhanced:img` library from `@sveltejs/enhanced-img`.
 - add CSS class names and extra attributes (`loading`, `fetchpriority`, and `decoding`) to images directly in markdown (image by image) or through the plugin configuration (to all images).
 - add imagetools directives to images in markdown (image by image) or through the plugin configuration (to all images).
@@ -16,6 +19,38 @@ Special thanks to https://github.com/mattjennings/mdsvex-relative-images, for th
 
 Feel free to open a PR or an issue if you have any suggestions or feature requests!
 
+## 🎯 Live Demo
+
+Experience the plugin in action with our [interactive demo](https://lzinga.github.io/mdsvex-enhanced-images/) hosted on GitHub Pages. The demo showcases:
+
+- **Basic image processing** with automatic `enhanced:img` component generation
+- **CSS class application** via URL parameters
+- **HTML attribute injection** for performance optimization
+- **Image processing directives** like rotation, tinting, and effects
+- **Real-time examples** of all plugin features
+
+The demo is automatically deployed from the `/demo` directory using SvelteKit's static adapter.
+
+### 🛠️ Local Demo Development
+
+To run the demo locally for testing and development:
+
+```bash
+# Install demo dependencies
+npm run demo:install
+
+# Run demo in development mode (with hot reloading)
+npm run demo:dev
+
+# Build and serve demo locally (mimics production)
+npm run demo:serve
+
+# Build demo only
+npm run demo:build
+```
+
+These scripts will automatically build the plugin first, then set up the demo environment.
+
 ## Contributors
 
 <!-- readme: collaborators,contributors -start -->