gamebyte-ai · canerdogan · Feb 14, 2026 · Feb 10, 2026 · Feb 11, 2026 · Feb 11, 2026
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -314,6 +314,15 @@ For browser usage without bundlers, use `dist/gamebyte.umd.js`. It exposes `wind
 - Constants in SCREAMING_SNAKE_CASE
 - Private members prefixed with underscore or using `private` keyword
 
+## Documentation Site - Demo Placement Rule
+
+When adding or editing documentation pages in `docs-site/docs/`:
+- **Primary LiveDemo must appear right after the page title** (before any code blocks or detailed text)
+- `import LiveDemo` goes after frontmatter, before the `# Title`
+- Each page should have at least one relevant demo
+- Demo HTML files live in `docs-site/static/demos/`
+- New demos should follow the existing pattern: Pixi CDN + `../gamebyte.umd.js`, dark theme, self-contained
+
 ## Documentation
 
 - Main README: `README.md`

diff --git a/docs-site/docs/assets/loading-caching.md b/docs-site/docs/assets/loading-caching.md
@@ -9,10 +9,16 @@ llm_summary: "Assets.load([{ key, url, type }]). Types: texture, audio, json, mo
 
 <!-- llm-context: asset-management, loading, caching, textures, audio, preload -->
 
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # Asset Loading & Caching
 
 GameByte's asset system handles loading, caching, and memory management.
 
+<LiveDemo src="/demos/gem-collector-demo.html" height="600" title="Gem Collector - Asset Loading & Level Transitions" />
+
+<LiveDemo src="/demos/asset-loading-demo.html" height="500" title="Asset Loading Demo" />
+
 ## Basic Loading
 
 ```typescript
@@ -118,8 +124,3 @@ if (Assets.isBundleLoaded('level-2')) {
 }
 ```
 
-## Live Demo
-
-import LiveDemo from '@site/src/components/LiveDemo';
-
-<LiveDemo src="/demos/asset-loading-demo.html" height="500" title="Asset Loading Demo" />
diff --git a/docs-site/docs/audio/overview.md b/docs-site/docs/audio/overview.md
@@ -9,10 +9,16 @@ llm_summary: "Audio system: Music (background loops), SFX (effects), Spatial (3D
 
 <!-- llm-context: audio-system, music, sfx, spatial-audio, mobile-audio -->
 
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # Audio Overview
 
 GameByte's audio system handles music, sound effects, and spatial audio.
 
+<LiveDemo src="/demos/simon-says-demo.html" height="600" title="Simon Says - Audio Tones & Sequences" />
+
+<LiveDemo src="/demos/audio-demo.html" height="550" title="Audio System Demo" />
+
 ## Audio Types
 
 | Type | Use Case | Example |
@@ -72,8 +78,3 @@ Audio.unmute();
 Audio.toggle();
 ```
 
-## Live Demo
-
-import LiveDemo from '@site/src/components/LiveDemo';
-
-<LiveDemo src="/demos/audio-demo.html" height="550" title="Audio System Demo" />
diff --git a/docs-site/docs/boilerplate/overview.md b/docs-site/docs/boilerplate/overview.md
@@ -6,6 +6,8 @@ The GameByte Framework provides a complete boilerplate system for building hyper
 
 ## Live Demo
 
+<LiveDemo src="/demos/quiz-game-demo.html" height="600" title="Trivia Quiz - Screens, Panels & Navigation in Action" />
+
 <LiveDemo
   src="/demos/hub-screen-demo.html"
   height={660}

diff --git a/docs-site/docs/boilerplate/simple-screen.md b/docs-site/docs/boilerplate/simple-screen.md
@@ -1,7 +1,11 @@
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # SimpleScreen
 
 A lightweight base class for creating game screens that work directly with the graphics abstraction layer.
 
+<LiveDemo src="/demos/screen-manager-demo.html" height="600" title="Screen Management Demo" />
+
 ## When to Use
 
 Use `SimpleScreen` instead of `BaseUIScreen` when you need:
@@ -160,8 +164,3 @@ class LoadingScreen extends SimpleScreen {
 }
 ```
 
-## Live Demo
-
-import LiveDemo from '@site/src/components/LiveDemo';
-
-<LiveDemo src="/demos/screen-manager-demo.html" height="600" title="Screen Management Demo" />
diff --git a/docs-site/docs/changelog/v1.3.0.md b/docs-site/docs/changelog/v1.3.0.md
@@ -16,6 +16,7 @@ llm_summary: "GameByte v1.3.0 release notes. 10 new modules: TickSystem (per-com
 <!-- llm-context: v1.3.0, release-notes, feature-modules, tick-system, resource-tracker, raycast-events, performance-advisor, instance-manager, post-processing, environment-system, prefab-system, asset-pipeline, procedural-audio, breaking-changes, migration-guide -->
 
 import Head from '@docusaurus/Head';
+import LiveDemo from '@site/src/components/LiveDemo';
 
 <Head>
   <meta property="og:type" content="article" />
@@ -414,6 +415,26 @@ sounds.play('coin', { volume: 0.5, pitch: 1.2, variation: 0.3 });
 
 ---
 
+## Live Feature Demos
+
+### TickSystem & Game Loop in Action
+
+<LiveDemo src="/demos/space-shooter-demo.html" height="500" title="Space Shooter - TickSystem Demo" />
+
+### GameSoundPresets - Procedural Audio
+
+<LiveDemo src="/demos/audio-demo.html" height="500" title="Audio System - Procedural Sounds Demo" />
+
+### PostProcessing Pipeline
+
+<LiveDemo src="/demos/3d-post-processing.html" height="400" title="Post-Processing Effects Demo" />
+
+### 3D Features (InstanceManager, Environment)
+
+<LiveDemo src="/demos/3d-basic-shapes.html" height="400" title="3D Basic Shapes Demo" />
+
+---
+
 ## Other Improvements
 
 ### Responsive Resize Integration

diff --git a/docs-site/docs/core-concepts/architecture.md b/docs-site/docs/core-concepts/architecture.md
@@ -9,10 +9,20 @@ llm_summary: "Laravel-inspired DI container. game.bind(key, factory) registers s
 
 <!-- llm-context: architecture, service-container, dependency-injection, providers, facades, laravel-style -->
 
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # Architecture
 
 GameByte uses a Laravel-inspired architecture with a service container, service providers, and facades.
 
+<LiveDemo
+  src="/demos/architecture-demo.html"
+  height={540}
+  title="Service Container - Interactive Visualization"
+/>
+
+<LiveDemo src="/demos/cookie-clicker-demo.html" height="600" title="Cookie Clicker - Service Container & Reactive State in Action" />
+
 ## Service Container
 
 The service container manages all game services and their dependencies.
@@ -238,6 +248,14 @@ interface ServiceMap {
 const score = game.make<ServiceMap['score.manager']>('score.manager');
 ```
 
+## Reactive State
+
+<LiveDemo
+  src="/demos/reactive-state-demo.html"
+  height={500}
+  title="Reactive State Management Demo"
+/>
+
 ## Architecture Diagram
 
 ```

diff --git a/docs-site/docs/core-concepts/configuration.md b/docs-site/docs/core-concepts/configuration.md
@@ -9,10 +9,18 @@ llm_summary: "Configure via createGame({ config }) or game.setConfig(). Key opti
 
 <!-- llm-context: configuration, settings, options, debug-mode, mobile-optimization, renderer-settings -->
 
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # Configuration
 
 GameByte provides sensible defaults with full customization options.
 
+<LiveDemo
+  src="/demos/config-playground-demo.html"
+  height={480}
+  title="Configuration Playground - Live Settings Editor"
+/>
+
 ## Configuration Methods
 
 ### At Creation

diff --git a/docs-site/docs/getting-started/first-game-tutorial.md b/docs-site/docs/getting-started/first-game-tutorial.md
@@ -360,7 +360,9 @@ private collectCoin(): void {
 }
 ```
 
-## Complete Code
+## Complete Game Demo
+
+<LiveDemo src="/demos/complete-game-demo.html" height="600" title="Complete Game - Full Feature Demo" />
 
 See the [full example on GitHub](https://github.com/gamebyte-ai/gamebyte-framework/tree/main/examples/platformer).
 

diff --git a/docs-site/docs/getting-started/installation.md b/docs-site/docs/getting-started/installation.md
@@ -9,10 +9,18 @@ llm_summary: "Install via npm: 'npm install @gamebyte/framework'. For browser: u
 
 <!-- llm-context: installation, npm, cdn, umd, esm, cjs, typescript, pixi-peer-dependency -->
 
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # Installation
 
 GameByte Framework can be installed via npm or used directly in the browser via CDN.
 
+<LiveDemo
+  src="/demos/hello-world-demo.html"
+  height={400}
+  title="Hello World - Verify Your Installation"
+/>
+
 ## npm (Recommended)
 
 ```bash

diff --git a/docs-site/docs/getting-started/quick-start.md b/docs-site/docs/getting-started/quick-start.md
@@ -15,6 +15,16 @@ import LiveDemo from '@site/src/components/LiveDemo';
 
 Build your first GameByte game in 5 minutes.
 
+<LiveDemo
+  src="/demos/quick-start.html"
+  height={480}
+  title="Quick Start - Star Collection Demo"
+/>
+
+:::tip Theme Support
+This demo automatically adapts to your selected theme. Try toggling the theme using the 🌙/☀️ button in the navigation bar!
+:::
+
 ## Step 1: Setup HTML
 
 ```html
@@ -103,18 +113,6 @@ Open the HTML file in a browser or use a local server:
 npx http-server -p 8080
 ```
 
-## Live Demo
-
-<LiveDemo
-  src="/demos/platformer-demo.html"
-  height={480}
-  title="Platformer Game Demo"
-/>
-
-:::tip Theme Support
-This demo automatically adapts to your selected theme. Try toggling the theme using the 🌙/☀️ button in the navigation bar!
-:::
-
 ## What's Happening?
 
 1. **`createGame()`** - Creates the game instance with service container

diff --git a/docs-site/docs/input/overview.md b/docs-site/docs/input/overview.md
@@ -9,10 +9,18 @@ llm_summary: "Unified input: Input.keyboard, Input.touch, Input.gamepad. Event-b
 
 <!-- llm-context: input-system, keyboard, mouse, touch, gamepad, mobile-input -->
 
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # Input Overview
 
 GameByte provides a unified input system for all platforms.
 
+<LiveDemo src="/demos/whack-a-mole-demo.html" height="600" title="Whack-a-Mole - Touch, Click & Keyboard Input" />
+
+<LiveDemo src="/demos/keyboard-demo.html" height="500" title="Keyboard Input Demo" />
+
+<LiveDemo src="/demos/input-touch.html" height="500" title="Touch Input - Tap, Swipe, Pinch & Long Press" />
+
 ## Input Sources
 
 | Source | Use Case |
@@ -61,8 +69,3 @@ function update(deltaTime: number) {
 }
 ```
 
-## Live Demo
-
-import LiveDemo from '@site/src/components/LiveDemo';
-
-<LiveDemo src="/demos/keyboard-demo.html" height="500" title="Keyboard Input Demo" />
diff --git a/docs-site/docs/input/touch.md b/docs-site/docs/input/touch.md
@@ -15,6 +15,12 @@ import LiveDemo from '@site/src/components/LiveDemo';
 
 Mobile-optimized touch handling with gesture support.
 
+<LiveDemo
+  src="/demos/input-touch.html"
+  height={500}
+  title="Touch Input - Tap, Swipe, Pinch & Long Press"
+/>
+
 ## Basic Touch
 
 ```typescript

diff --git a/docs-site/docs/layout/examples.md b/docs-site/docs/layout/examples.md
@@ -7,10 +7,14 @@ keywords: [layout, examples, game-ui, patterns, flexbox]
 llm_summary: "Common game UI layout patterns: Game HUD with top/bottom bars, level select grid, settings menu, shop screen, leaderboard. All use flexbox via @pixi/layout."
 ---
 
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # Layout Examples
 
 Common layout patterns for mobile game UI using the GameByte layout system.
 
+<LiveDemo src="/demos/layout-demo.html" height="800" title="Layout Examples Demo" />
+
 ## Game HUD
 
 Typical game screen with top bar, content area, and bottom navigation:
@@ -430,10 +434,3 @@ window.addEventListener('resize', () => {
 });
 ```
 
-## Live Demo
-
-See all these patterns in action:
-
-import LiveDemo from '@site/src/components/LiveDemo';
-
-<LiveDemo src="/demos/layout-demo.html" height="800" title="Layout Examples Demo" />
diff --git a/docs-site/docs/layout/layout-manager.md b/docs-site/docs/layout/layout-manager.md
@@ -7,10 +7,14 @@ keywords: [layout-manager, responsive, breakpoints, scaling, api]
 llm_summary: "LayoutManager handles layout initialization, responsive scaling, and breakpoints. Use getLayoutManager() for singleton access. Provides presets and responsive utilities."
 ---
 
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # LayoutManager API
 
 The `LayoutManager` class provides centralized layout management with responsive scaling support.
 
+<LiveDemo src="/demos/layout-demo.html" height="700" title="Layout Manager Demo" />
+
 ## Basic Usage
 
 ```typescript
@@ -346,8 +350,3 @@ async function createGame() {
 }
 ```
 
-## Live Demo
-
-import LiveDemo from '@site/src/components/LiveDemo';
-
-<LiveDemo src="/demos/layout-demo.html" height="700" title="Layout Manager Demo" />
diff --git a/docs-site/docs/layout/overview.md b/docs-site/docs/layout/overview.md
@@ -7,10 +7,16 @@ keywords: [layout, flexbox, yoga, responsive, pixi-layout]
 llm_summary: "GameByte uses @pixi/layout (Yoga flexbox engine) for responsive UI layouts. Supports flex direction, justify content, align items, gap, wrap, and percentage sizing."
 ---
 
+import LiveDemo from '@site/src/components/LiveDemo';
+
 # Layout System
 
 GameByte integrates [@pixi/layout](https://layout.pixijs.io/) - a powerful Yoga-based flexbox layout system for PixiJS. This enables CSS-like flexbox layouts for game UI.
 
+<LiveDemo src="/demos/2048-demo.html" height="600" title="2048 - Grid Layout in Action" />
+
+<LiveDemo src="/demos/layout-demo.html" height="800" title="Layout System Demo" />
+
 ## Why Flexbox for Games?
 
 - **Responsive Design**: Automatically adapts to different screen sizes
@@ -113,14 +119,6 @@ container.layout = LayoutPresets.center;
 hudContainer.layout = GameLayoutPresets.gameScreen;
 ```
 
-## Live Demo
-
-Interactive examples of all layout features:
-
-import LiveDemo from '@site/src/components/LiveDemo';
-
-<LiveDemo src="/demos/layout-demo.html" height="800" title="Layout System Demo" />
-
 ## Next Steps
 
 - [Layout Presets](./presets) - Pre-defined layout configurations