diff --git a/.config/lint.config.js b/.config/lint.config.js
index 9d178572..975472fd 100644
--- a/.config/lint.config.js
+++ b/.config/lint.config.js
@@ -1,4 +1,4 @@
 export default {
     "src/**/*.js":"npm run eslint -- --fix",
-    "demos/**/*.js":"npm run eslint -- --fix"
+    "examples/**/*.js":"npm run eslint -- --fix"
 }
\ No newline at end of file
diff --git a/.config/tsc.lint.json b/.config/tsc.lint.json
index 5e107b90..1014648a 100644
--- a/.config/tsc.lint.json
+++ b/.config/tsc.lint.json
@@ -1,7 +1,7 @@
 {
   "include": [
     "../src",
-    "../demos"
+    "../examples"
   ],
   "exclude":[
 ],
diff --git a/.config/vite.config.js b/.config/vite.config.js
index 8b347aa3..5e07a986 100644
--- a/.config/vite.config.js
+++ b/.config/vite.config.js
@@ -3,10 +3,11 @@ import {resolve} from 'path'
 import { cwd } from "process"
 
 export default defineConfig({
+    publicDir:'assets',
     server: {
         port: 8082,
         strictPort: true,
-        open: "/demos/index.html",
+        open: "/examples/index.html",
     },
     resolve: {
         alias: [{
diff --git a/demos/assets/audio/bad-apple.m4a b/assets/audio/bad-apple.m4a
similarity index 100%
rename from demos/assets/audio/bad-apple.m4a
rename to assets/audio/bad-apple.m4a
diff --git a/demos/assets/audio/hit.mp3 b/assets/audio/hit.mp3
similarity index 100%
rename from demos/assets/audio/hit.mp3
rename to assets/audio/hit.mp3
diff --git a/demos/assets/warrior.png b/assets/warrior.png
similarity index 100%
rename from demos/assets/warrior.png
rename to assets/warrior.png
diff --git a/demos/demos/animation/index.js b/demos/demos/animation/index.js
deleted file mode 100644
index c2805ea8..00000000
--- a/demos/demos/animation/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as animation } from './basic.js'
-export { default as basicAnimation3D } from './basic3d.js'
diff --git a/demos/demos/audio/audioOscillator.js b/demos/demos/audio/audioOscillator.js
deleted file mode 100644
index 8d27f911..00000000
--- a/demos/demos/audio/audioOscillator.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-  Demo,
-  World,
-  AudioOscillator,
-  EntityCommands,
-  Cleanup,
-  Timer,
-  TimerMode
-} from 'wima'
-import { addDefaultCamera3D } from '../utils.js'
-
-export default new Demo(
-  'audio/audio oscillator',
-  [init, addDefaultCamera3D]
-)
-
-/**
- * @param {World} world
- */
-function init(world) {
-  const commands = world.getResource(EntityCommands)
-
-  commands
-    .spawn()
-    .insertPrefab([
-      new AudioOscillator(),
-      new Timer({
-        mode: TimerMode.Repeat
-      }),
-      new Cleanup()
-    ])
-    .build()
-}
diff --git a/demos/demos/audio/audioPlayer.js b/demos/demos/audio/audioPlayer.js
deleted file mode 100644
index 828a9989..00000000
--- a/demos/demos/audio/audioPlayer.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-  Demo,
-  World,
-  AssetServer,
-  AudioPlayer,
-  TimerMode,
-  EntityCommands,
-  Cleanup,
-  Audio,
-  Timer
-} from 'wima'
-import { addDefaultCamera3D } from '../utils.js'
-
-export default new Demo(
-  'audio/audio player',
-  [init, addDefaultCamera3D]
-)
-
-/**
- * @param {World} world
- */
-function init(world) {
-  const server = world.getResource(AssetServer)
-  const commands = world.getResource(EntityCommands)
-
-  commands
-    .spawn()
-    .insertPrefab([
-      new AudioPlayer({
-        audio: server.load(Audio, 'assets/audio/bad-apple.m4a')
-      }),
-      new Timer({
-        mode: TimerMode.Repeat
-      }),
-      new Cleanup()
-    ])
-    .build()
-}
diff --git a/demos/demos/audio/index.js b/demos/demos/audio/index.js
deleted file mode 100644
index 1858d78c..00000000
--- a/demos/demos/audio/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as audioGraph } from './audioGraph.js'
-export { default as audioPlayer } from './audioPlayer.js'
-export { default as audioPlayback } from './audioPlayback.js'
-export { default as audioOscillator } from './audioOscillator.js'
diff --git a/demos/demos/ecs/index.js b/demos/demos/ecs/index.js
deleted file mode 100644
index a1ae3871..00000000
--- a/demos/demos/ecs/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as spawn } from './spawn.js'
-export { default as despawn } from './despawn.js'
diff --git a/demos/demos/gizmos/arcs.js b/demos/demos/gizmos/arcs.js
deleted file mode 100644
index 2279968b..00000000
--- a/demos/demos/gizmos/arcs.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
-  World,
-  Color,
-  Demo,
-  GizmoLineStyle,
-  PI,
-  HALF_PI
-} from 'wima'
-import { Demo1Gizmo2D } from '../utils.js'
-
-const QUATER_PI = Math.PI / 4
-
-export default new Demo('gizmo2d/arcs', [init], [drawCirclularArcs, drawEllipticalArcs])
-
-/**
- * @param {World} world
- */
-function init(world) {
-  const gizmo = world.getResource(Demo1Gizmo2D)
-
-  gizmo.settings.lineWidth = 2
-  gizmo.settings.lineStyle = GizmoLineStyle.Solid
-}
-
-/**
- * @param {World} world
- */
-function drawCirclularArcs(world) {
-  const gizmo = world.getResource(Demo1Gizmo2D)
-  const radius = 40
-
-  gizmo
-    .translate(100, 100)
-    .arc(0, QUATER_PI, radius, radius, new Color(0.5, 0.5, 0.5, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, HALF_PI, radius, radius, new Color(1, 0, 0, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, HALF_PI + QUATER_PI, radius, radius, new Color(1, 1, 0, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, PI, radius, radius, new Color(0, 1, 0, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, PI + QUATER_PI, radius, radius, new Color(0, 1, 1, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, PI + HALF_PI, radius, radius, new Color(0, 0, 1, 1))
-    .axes(20)
-    .reset()
-    .translate(100, 200)
-    .arc(0, PI + HALF_PI + QUATER_PI, radius, radius, new Color(1, 0, 1, 1))
-    .axes(20)
-    .translate(100, 0)
-    .circle(radius, new Color(1, 1, 1, 1))
-    .axes(20)
-    .reset()
-}
-
-/**
- * @param {World} world
- */
-function drawEllipticalArcs(world) {
-  const gizmo = world.getResource(Demo1Gizmo2D)
-  const radiusX = 40
-  const radiusY = 20
-
-  gizmo
-    .translate(100, 300)
-    .arc(0, QUATER_PI, radiusX, radiusY, new Color(0.5, 0.5, 0.5, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, HALF_PI, radiusX, radiusY, new Color(1, 0, 0, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, HALF_PI + QUATER_PI, radiusX, radiusY, new Color(1, 1, 0, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, PI, radiusX, radiusY, new Color(0, 1, 0, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, PI + QUATER_PI, radiusX, radiusY, new Color(0, 1, 1, 1))
-    .axes(20)
-    .translate(100, 0)
-    .arc(0, PI + HALF_PI, radiusX, radiusY, new Color(0, 0, 1, 1))
-    .axes(20)
-    .reset()
-    .translate(100, 400)
-    .arc(0, PI + HALF_PI + QUATER_PI, radiusX, radiusY, new Color(1, 0, 1, 1))
-    .axes(20)
-    .translate(100, 0)
-    .ellipse(radiusX, radiusY, new Color(1, 1, 1, 1))
-    .axes(20)
-    .reset()
-}
diff --git a/demos/demos/gizmos/grid.js b/demos/demos/gizmos/grid.js
deleted file mode 100644
index aefbd57c..00000000
--- a/demos/demos/gizmos/grid.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
-  World,
-  Color,
-  Demo,
-  Vector2,
-  BVector2,
-  GizmoLineStyle
-} from 'wima'
-import { Demo1Gizmo2D } from '../utils.js'
-
-export default new Demo('gizmo2d/grid', [init], [drawGrid])
-
-/**
- * @param {World} world
- */
-function init(world) {
-  const gizmo = world.getResource(Demo1Gizmo2D)
-
-  gizmo.settings.lineWidth = 2
-  gizmo.settings.lineStyle = GizmoLineStyle.Solid
-}
-
-/**
- * @param {World} world
- */
-function drawGrid(world) {
-  const gizmo = world.getResource(Demo1Gizmo2D)
-
-  gizmo
-    .translate(200, 200)
-    .grid(
-      new Vector2(10, 10),
-      new Vector2(25, 25)
-    )
-    .translate(0, 300)
-    .grid(
-      new Vector2(10, 10),
-      new Vector2(25, 25),
-      Color.WHITE.clone(),
-      new BVector2(true, true)
-    )
-    .reset()
-}
diff --git a/demos/demos/gizmos/index.js b/demos/demos/gizmos/index.js
deleted file mode 100644
index 0c9db427..00000000
--- a/demos/demos/gizmos/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as lineStyle2d } from './linestyle.js'
-export { default as arcs2d } from './arcs.js'
-export { default as shapes2d } from './shapes.js'
-export { default as grid2d } from './grid.js'
diff --git a/demos/demos/gizmos/shapes.js b/demos/demos/gizmos/shapes.js
deleted file mode 100644
index bf561bc7..00000000
--- a/demos/demos/gizmos/shapes.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/** @import {Entity} from 'wima' */
-import {
-  World,
-  Color,
-  Demo,
-  Vector2,
-  GizmoLineStyle
-} from 'wima'
-import { Demo1Gizmo2D } from '../utils.js'
-
-export default new Demo('gizmo2d/shapes', [init], [update])
-
-/**
- * @param {World} world
- */
-function init(world) {
-  const gizmo = world.getResource(Demo1Gizmo2D)
-
-  gizmo.settings.lineWidth = 2
-  gizmo.settings.lineStyle = GizmoLineStyle.Solid
-}
-
-/**
- * @param {World} world
- */
-function update(world) {
-  const gizmo = world.getResource(Demo1Gizmo2D)
-
-  gizmo
-    .translate(100, 150)
-    .aabb(50, 50, new Color(1, 1, 1, 1))
-    .axes(20)
-    .translate(150, 0)
-    .ellipse(60, 40, new Color(1, 1, 1, 1))
-    .axes(20)
-    .translate(150, 0)
-    .circle(50, new Color(1, 1, 1, 1))
-    .axes(20)
-    .reset()
-    .translate(100, 300)
-    .grid(new Vector2(10, 10), new Vector2(10, 10))
-    .axes(20)
-    .translate(150, 0)
-    .line(new Vector2(-50, 0), new Vector2(50, 0))
-    .axes(20)
-    .reset()
-}
diff --git a/demos/demos/index.js b/demos/demos/index.js
deleted file mode 100644
index aa8bb72d..00000000
--- a/demos/demos/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './audio/index.js'
-export * from './animation/index.js'
-export * from './transform/index.js'
-export * from './render/index.js'
-export * from './ecs/index.js'
-export * from './input/index.js'
-export * from './tween/index.js'
-export * from './gizmos/index.js'
diff --git a/demos/demos/input/index.js b/demos/demos/input/index.js
deleted file mode 100644
index 86252a65..00000000
--- a/demos/demos/input/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as keyboard } from './keyboard.js'
-export { default as mouse } from './mouse.js'
-export { default as touch } from './touch.js'
diff --git a/demos/demos/render/canvas-2d/index.js b/demos/demos/render/canvas-2d/index.js
deleted file mode 100644
index 0f18cac9..00000000
--- a/demos/demos/render/canvas-2d/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as materials } from './material.js'
diff --git a/demos/demos/render/index.js b/demos/demos/render/index.js
deleted file mode 100644
index 409835c4..00000000
--- a/demos/demos/render/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './canvas-2d/index.js'
-export * from './webgl/index.js'
diff --git a/demos/demos/render/webgl/basictriangle.js b/demos/demos/render/webgl/basictriangle.js
deleted file mode 100644
index b2302ddc..00000000
--- a/demos/demos/render/webgl/basictriangle.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
-  Demo,
-  Mesh,
-  World,
-  Cleanup,
-  EntityCommands,
-  createTransform3D,
-  BasicMaterial,
-  Meshed,
-  BasicMaterial3D,
-  BasicMaterialAssets,
-  MeshAssets
-} from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
-
-export const basictriangle = new Demo(
-  'basic triangle',
-  [addmesh, addDefaultCamera3D]
-)
-
-/**
- * @param {World} world
- */
-function addmesh(world) {
-  const commands = world.getResource(EntityCommands)
-  const meshes = world.getResource(MeshAssets)
-  const materials = world.getResource(BasicMaterialAssets)
-
-  const mesh = meshes.add(Mesh.triangle3D())
-  const material = materials.add(new BasicMaterial())
-
-  commands
-    .spawn()
-    .insertPrefab([
-      ...createTransform3D(),
-      new Meshed(mesh),
-      new BasicMaterial3D(material),
-      new Cleanup()
-    ])
-    .build()
-}
diff --git a/demos/demos/render/webgl/index.js b/demos/demos/render/webgl/index.js
deleted file mode 100644
index 94452234..00000000
--- a/demos/demos/render/webgl/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './basictriangle.js'
-export * from './colorchangetriangle.js'
-export * from './geometries.js'
-export * from './rotationtriangle.js'
-export * from './movingtriangle.js'
-export * from './camerarotate.js'
-export * from './cameraperspective.js'
-export * from './cameraorthographic.js'
diff --git a/demos/demos/render/webgl/rotationtriangle.js b/demos/demos/render/webgl/rotationtriangle.js
deleted file mode 100644
index 68a1d3c7..00000000
--- a/demos/demos/render/webgl/rotationtriangle.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import {
-  Demo,
-  Mesh,
-  World,
-  Cleanup,
-  Rotation3D,
-  EntityCommands,
-  Meshed,
-  BasicMaterial3D,
-  BasicMaterial,
-  createMovable3D,
-  Query,
-  BasicMaterialAssets,
-  MeshAssets
-} from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
-
-export const rotatingtriangle = new Demo(
-  'rotating triangle',
-  [addmesh, addDefaultCamera3D],
-  [update]
-)
-
-/**
- * @param {World} world
- */
-function addmesh(world) {
-  const commands = world.getResource(EntityCommands)
-  const meshes = world.getResource(MeshAssets)
-  const materials = world.getResource(BasicMaterialAssets)
-
-  const mesh = meshes.add(Mesh.triangle3D())
-  const material = materials.add(new BasicMaterial())
-
-  commands
-    .spawn()
-    .insertPrefab([
-      ...createMovable3D(),
-      new Meshed(mesh),
-      new BasicMaterial3D(material),
-      new Cleanup()
-    ])
-    .insert(new Rotation3D())
-    .build()
-}
-
-/**
- * @param {World} world
- */
-function update(world) {
-  const rotable = new Query(world, [Rotation3D])
-
-  rotable.each(([rotation]) => {
-    rotation.z = Math.PI / 4
-  })
-}
diff --git a/demos/demos/transform/2d/index.js b/demos/demos/transform/2d/index.js
deleted file mode 100644
index 80837f34..00000000
--- a/demos/demos/transform/2d/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as translate2d } from './translate.js'
-export { default as rotate2d } from './rotate.js'
-export { default as scale2d } from './scale.js'
-export { default as propagate2d } from './propagate.js'
-export { default as lookat2d } from './lookat.js'
diff --git a/demos/demos/transform/3d/index.js b/demos/demos/transform/3d/index.js
deleted file mode 100644
index 7d2065ed..00000000
--- a/demos/demos/transform/3d/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as translate3d } from './translate.js'
-export { default as rotate3d } from './rotate.js'
-export { default as scale3d } from './scale.js'
-export { default as lookAt3d } from './lookat.js'
-export { default as propagate3d } from './propagate.js'
diff --git a/demos/demos/transform/index.js b/demos/demos/transform/index.js
deleted file mode 100644
index a0e135fc..00000000
--- a/demos/demos/transform/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './2d/index.js'
-export * from './3d/index.js'
diff --git a/demos/demos/tween/index.js b/demos/demos/tween/index.js
deleted file mode 100644
index aee5fa88..00000000
--- a/demos/demos/tween/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as easing } from './easing.js'
diff --git a/demos/index.html b/demos/index.html
deleted file mode 100644
index 0151531e..00000000
--- a/demos/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ES8 Project</title>
-  <style>
-    html,
-    body {
-      margin: 0%;
-    }
-
-    #can {
-      width: fit-content;
-      height: fit-content;
-      background-color: red;
-    }
-
-    canvas {
-      background: black;
-    }
-  </style>
-  <script type="importmap">
-    {
-      "imports": {
-        "wima": "/src/index.js"
-      }
-    }
-  </script>
-  <script src="./main.js" type="module"></script>
-</head>
-
-<body>
-  <div id="can"> </div>
-  <div id="options">
-    <div id="options-demos">
-    </div>
-    <div id="options-checkbox">
-
-    </div>
-    <div>
-
-    </div>
-  </div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/demos/main.js b/demos/main.js
deleted file mode 100644
index 8a03aae0..00000000
--- a/demos/main.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import {
-  App,
-  AppSchedule,
-  World,
-  FPSDebugger,
-  Gizmo2DPlugin,
-  Gizmo3DPlugin,
-  DOMWindowPlugin,
-  AnimationPlugin,
-  DemoPlugin,
-  MainWindow,
-  Query,
-  warn,
-  Entity,
-  WindowCommands,
-  DefaultPlugin,
-  Canvas2DRendererPlugin
-} from 'wima'
-import {
-  spawn,
-  despawn,
-  audioGraph,
-  audioPlayer,
-  audioPlayback,
-  audioOscillator,
-  keyboard,
-  mouse,
-  touch,
-  easing,
-  materials,
-  lineStyle2d,
-  arcs2d,
-  shapes2d,
-  grid2d,
-  translate2d,
-  rotate2d,
-  scale2d,
-  propagate2d,
-  lookat2d,
-  animation
-} from './demos/index.js'
-import { Demo1, Demo2, ResourceAliasPlugin } from './demos/utils.js'
-
-const app = new App()
-
-app
-  .registerPlugin(new ResourceAliasPlugin())
-  .registerPlugin(new DefaultPlugin())
-  .registerPlugin(new DOMWindowPlugin())
-  .registerPlugin(new AnimationPlugin())
-  .registerPlugin(new Canvas2DRendererPlugin())
-  .registerPlugin(new Gizmo2DPlugin({
-    label: Demo1
-  }))
-  .registerPlugin(new Gizmo2DPlugin({
-    label: Demo2
-  }))
-  .registerPlugin(new Gizmo3DPlugin({
-    label: Demo1
-  }))
-  .registerPlugin(new Gizmo3DPlugin({
-    label: Demo2
-  }))
-  .registerPlugin(new DemoPlugin({
-    demos: [
-      animation,
-      spawn,
-      despawn,
-      materials,
-      easing,
-      keyboard,
-      mouse,
-      touch,
-      audioGraph,
-      audioPlayer,
-      audioPlayback,
-      audioOscillator,
-      lineStyle2d,
-      arcs2d,
-      shapes2d,
-      grid2d,
-      shapes2d,
-      grid2d,
-      translate2d,
-      rotate2d,
-      scale2d,
-      propagate2d,
-      lookat2d
-    ]
-  }))
-  .registerSystem(AppSchedule.Update, setupViewport)
-  .registerDebugger(new FPSDebugger())
-  .run()
-
-/**
- * @param {World} world
- */
-function setupViewport(world) {
-  const windowcommands = world.getResource(WindowCommands)
-  const window = new Query(world, [Entity, MainWindow]).single()
-
-  if (!window) return warn('No main window defined.')
-
-  windowcommands
-    .window(window[0])
-    .resize(innerWidth, innerHeight)
-}
-
-addEventListener('contextmenu', (e) => e.preventDefault())
diff --git a/demos/webgl.html b/demos/webgl.html
deleted file mode 100644
index 4a966343..00000000
--- a/demos/webgl.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-  <style>
-    html,body {
-      margin: 0px;
-    }
-  </style>
-  <script type="importmap">
-    {
-      "imports": {
-        "wima": "/src/index.js"
-      }
-    }
-  </script>
-  <script type="module" src="webgl.js"></script>
-</head>
-
-<body>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/demos/webgl.js b/demos/webgl.js
deleted file mode 100644
index 6bc20977..00000000
--- a/demos/webgl.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import {
-  App,
-  AppSchedule,
-  World,
-  FPSDebugger,
-  DemoPlugin,
-  DOMWindowPlugin,
-  WebglRendererPlugin,
-  MainWindow,
-  Query,
-  warn,
-  WindowCommands,
-  Entity,
-  DefaultPlugin,
-  Windows,
-  AnimationPlugin
-} from 'wima'
-import {
-  basictriangle,
-  changecolortriangle,
-  geometries,
-  rotatingtriangle,
-  movingtriangle,
-  cameraRotate,
-  orthograhicCamera,
-  perspectiveCamera,
-  translate3d,
-  rotate3d,
-  scale3d,
-  lookAt3d,
-  propagate3d,
-  basicAnimation3D
-
-} from './demos/index.js'
-import { ResourceAliasPlugin } from './demos/utils.js'
-
-const app = new App()
-
-app
-  .registerPlugin(new ResourceAliasPlugin())
-  .registerPlugin(new WebglRendererPlugin())
-  .registerPlugin(new DefaultPlugin())
-  .registerPlugin(new DOMWindowPlugin())
-  .registerPlugin(new AnimationPlugin())
-  .registerPlugin(new DemoPlugin({
-    demos: [
-      basictriangle,
-      changecolortriangle,
-      geometries,
-      rotatingtriangle,
-      movingtriangle,
-      cameraRotate,
-      orthograhicCamera,
-      perspectiveCamera,
-      translate3d,
-      rotate3d,
-      scale3d,
-      lookAt3d,
-      propagate3d,
-      basicAnimation3D
-    ]
-  }))
-  .registerDebugger(new FPSDebugger())
-  .registerSystem(AppSchedule.Update, setupViewport)
-  .run()
-
-/**
- * @param {World} world
- */
-function setupViewport(world) {
-  const windowcommands = world.getResource(WindowCommands)
-  const window = new Query(world, [Entity, MainWindow]).single()
-  const canvases = world.getResource(Windows)
-  const width = innerWidth
-  const height = innerHeight
-
-  if (!window) return warn('No main window defined.')
-
-  const [entity] = window
-  const canvas = canvases.getWindow(entity)
-
-  if (!canvas) return
-
-  const gl = canvas.getContext('webgl2')
-
-  if (!gl) return
-
-  gl.viewport(0, 0, width, height)
-  windowcommands
-    .window(entity)
-    .resize(width, height)
-}
-
-addEventListener('contextmenu', (e) => e.preventDefault())
diff --git a/examples/example.html b/examples/example.html
new file mode 100644
index 00000000..afdaa3ed
--- /dev/null
+++ b/examples/example.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Wima engine example</title>
+  <base href="{demo-location}">
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="./example.js" type="module"></script>
+  <style type="text/css">
+    #can {
+      background-color: grey
+    }
+
+    .performance-monitor {
+      position: fixed;
+      top: 0%;
+      right: 0%;
+      cursor: pointer;
+      opacity: 0.9;
+      z-index: 10000;
+    }
+
+    html,
+    body {
+      margin: 0px;
+      width: 100%;
+      height: 100%;
+    }
+
+    canvas {
+      background-color: black;
+    }
+  </style>
+</head>
+
+<body>
+  <script>
+    function addTabIndexToCanvas(canvas) {
+      canvas.setAttribute('tabindex', '0')
+      canvas.focus()
+    }
+
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.tagName === 'CANVAS') {
+              addTabIndexToCanvas(node);
+            }
+          });
+        }
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/example.js b/examples/example.js
new file mode 100644
index 00000000..365d236b
--- /dev/null
+++ b/examples/example.js
@@ -0,0 +1,62 @@
+import samples from './samples/index.js'
+
+init()
+
+/**
+ *
+ */
+function init() {
+  const params = new URLSearchParams(window.location.search)
+  const name = params.get('example')
+
+  if (!name || name === '') {
+    const warning = 'No example selected.'
+
+    document.body.append(document.createTextNode(warning))
+
+    return
+  }
+
+  const demo = recursiveSelect(
+    name.split('/').filter((e) => e.length !== 0),
+    samples
+  )
+
+  if (!demo) {
+    const warning = 'The example selected does not exist.'
+
+    document.body.append(document.createTextNode(warning))
+
+    return
+  }
+
+  const script = document.createElement('script')
+
+  script.type = 'module'
+  script.src = demo
+  document.head.append(script)
+}
+
+/**
+ * @param {string[]} items
+ * @param {Record<string,any>} map
+ * @returns {string | undefined}
+ */
+function recursiveSelect(items, map) {
+  const name = items.shift()
+
+  if (!name) {
+    return undefined
+  }
+
+  const item = map[name]
+
+  if (item instanceof URL) {
+    return item.pathname
+  }
+  if (item === undefined) {
+    return undefined
+  }
+
+  return recursiveSelect(items, item)
+}
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 00000000..8a39c73f
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Webgl demos</title>
+  <script src="main.js" type="module" defer></script>
+  <style type="text/css" media="all">
+    #can{
+      background-color: grey
+    }
+    html, body, #example-frame{
+      margin: 0px;
+      width: 100%;
+      height: 100%;
+    }
+    #popper {
+      position: absolute;
+      top: 0%;
+      left: 50%;
+      transform: translate(-50%,0%);
+      color: aqua;
+    }
+  </style>
+</head>
+
+<body>
+  <a id="popper" target="_blank" rel="noopener noreferrer">Open in another page</a>
+  <iframe id="example-frame" frameborder="0" title="example" width="100%" height="100%" allow="fullscreen"></iframe>
+</body>
+</html>
diff --git a/examples/main.js b/examples/main.js
new file mode 100644
index 00000000..4b48f32e
--- /dev/null
+++ b/examples/main.js
@@ -0,0 +1,78 @@
+import samples from './samples/index.js'
+
+const container = document.body.appendChild(document.createElement('div'))
+const opts = container.appendChild(document.createElement('select'))
+
+container.style.position = 'absolute'
+container.style.top = '0px'
+container.style.left = '0px'
+opts.addEventListener('change', (e) => {
+  const { target } = e
+
+  if (!(target instanceof HTMLSelectElement)) return
+
+  localStorage.setItem('play', target.value)
+
+  switchDemo(target.value)
+})
+
+/**
+ * @param {string} name
+ */
+async function switchDemo(name) {
+  const frame = document.getElementById('example-frame')
+  const link = document.getElementById('popper')
+
+  if (!(frame instanceof HTMLIFrameElement)) {
+    throw 'The element selected is not an iframe'
+  }
+  if (!(link instanceof HTMLAnchorElement)) {
+    throw 'The element selected is not an anchor'
+  }
+
+  const linkSource = `./example.html?example=${name}`
+
+  frame.src = linkSource
+  link.href = linkSource
+}
+
+/**
+ * @param {Record<string, any>} demos
+ * @param {string} prefix
+ */
+function setupOpts(demos, prefix = '') {
+  const fix = prefix !== '' ? `${prefix}/` : prefix
+
+  for (const name in demos) {
+    const prename = fix + name
+
+    if (demos[name] instanceof URL) {
+      const opt = document.createElement('option')
+
+      opt.append(document.createTextNode(fix + name))
+      opts.append(opt)
+      continue
+    }
+
+    setupOpts(demos[name], prename)
+  }
+}
+
+/**
+ * @param {Item} demos
+ */
+function init(demos) {
+  let name = localStorage.getItem('play')
+
+  if (!name) name = Object.keys(demos)[0] || null
+  if (!name) return
+
+  switchDemo(name)
+}
+
+init(samples)
+setupOpts(samples)
+
+/**
+ * @typedef {{ [x: string]: URL  | Item}} Item
+ */
diff --git a/demos/demos/animation/basic.js b/examples/samples/animation/2d/basic.js
similarity index 66%
rename from demos/demos/animation/basic.js
rename to examples/samples/animation/2d/basic.js
index 53829c83..b186d33f 100644
--- a/demos/demos/animation/basic.js
+++ b/examples/samples/animation/2d/basic.js
@@ -2,7 +2,6 @@ import {
   Mesh,
   createTransform2D,
   World,
-  Demo,
   Cleanup,
   AnimationClip,
   AnimationTrack,
@@ -20,17 +19,55 @@ import {
   BasicMaterial2D,
   HALF_PI,
   PI,
-  TAU
+  TAU,
+  AnimationClipAssets,
+  AppSchedule,
+  AnimationPlugin,
+  App,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  Entity,
+  FPSDebugger,
+  MainWindow,
+  Query,
+  warn,
+  WindowCommands
 } from 'wima'
-import { AnimationClipAssets } from '../../../src/animation/resources/aliases.js'
-import { addDefaultCamera2D } from '../utils.js'
+import { addDefaultCamera2D, HackPlugin } from '../../utils.js'
 
-export default new Demo('animation/basic2d', [init, addDefaultCamera2D])
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new AnimationPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
+/**
+ * @param {World} world
+ */
+function setupViewport(world) {
+  const windowcommands = world.getResource(WindowCommands)
+  const window = new Query(world, [Entity, MainWindow]).single()
+
+  if (!window) return warn('No main window defined.')
+
+  windowcommands
+    .window(window[0])
+    .resize(innerWidth, innerHeight)
+}
 
 /**
  * @param {World} world
  */
-export function init(world) {
+function init(world) {
   const commands = world.getResource(EntityCommands)
   const clips = world.getResource(AnimationClipAssets)
   const meshes = world.getResource(MeshAssets)
diff --git a/examples/samples/animation/2d/index.js b/examples/samples/animation/2d/index.js
new file mode 100644
index 00000000..df60245c
--- /dev/null
+++ b/examples/samples/animation/2d/index.js
@@ -0,0 +1,5 @@
+const basic = new URL('./basic.js', import.meta.url)
+
+export default {
+  'basic': basic
+}
diff --git a/demos/demos/animation/basic3d.js b/examples/samples/animation/3d/basic.js
similarity index 78%
rename from demos/demos/animation/basic3d.js
rename to examples/samples/animation/3d/basic.js
index e298d07c..4ec7524b 100644
--- a/demos/demos/animation/basic3d.js
+++ b/examples/samples/animation/3d/basic.js
@@ -1,7 +1,6 @@
 import {
   Mesh,
   World,
-  Demo,
   Cleanup,
   AnimationClip,
   AnimationTrack,
@@ -22,12 +21,33 @@ import {
   Position3DAnimationEffector,
   Scale3DAnimationEffector,
   Quaternion,
-  Vector3
+  Vector3,
+  AnimationClipAssets,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin,
+  AnimationPlugin
 } from 'wima'
-import { AnimationClipAssets } from '../../../src/animation/resources/aliases.js'
-import { addDefaultCamera3D } from '../utils.js'
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export default new Demo('animation/basic3d', [init, addDefaultCamera3D])
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new AnimationPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .run()
+
+console.log(app)
 
 /**
  * @param {World} world
diff --git a/examples/samples/animation/3d/index.js b/examples/samples/animation/3d/index.js
new file mode 100644
index 00000000..df60245c
--- /dev/null
+++ b/examples/samples/animation/3d/index.js
@@ -0,0 +1,5 @@
+const basic = new URL('./basic.js', import.meta.url)
+
+export default {
+  'basic': basic
+}
diff --git a/examples/samples/animation/index.js b/examples/samples/animation/index.js
new file mode 100644
index 00000000..15ae735d
--- /dev/null
+++ b/examples/samples/animation/index.js
@@ -0,0 +1,7 @@
+import { default as d2 } from './2d/index.js'
+import { default as d3 } from './3d/index.js'
+
+export default {
+  '2d': d2,
+  '3d': d3
+}
diff --git a/demos/demos/audio/audioGraph.js b/examples/samples/audio/audioGraph.js
similarity index 50%
rename from demos/demos/audio/audioGraph.js
rename to examples/samples/audio/audioGraph.js
index 313418f3..c9a0e246 100644
--- a/demos/demos/audio/audioGraph.js
+++ b/examples/samples/audio/audioGraph.js
@@ -1,19 +1,20 @@
 import {
-  Demo,
   World,
   AudioAssets,
   AudioGraph,
   Handle,
   Audio,
-  AssetServer
+  AssetServer,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  Plugin
 } from 'wima'
-import { addDefaultCamera3D } from '../utils.js'
+import { HackPlugin, setupViewport } from '../utils.js'
 
-export default new Demo(
-  'audio/graph',
-  [init, addDefaultCamera3D],
-  [playAudio]
-)
 class Playing {
   handle
 
@@ -30,12 +31,37 @@ class Playing {
   }
 }
 
+// Why use a plugin? The current implentation does not have system sets and
+// systems registered directly on the App are precede ones registered by plugins.
+// This conflict is between internal engine system and external engine systems ordering.
+class MyPlugin extends Plugin {
+
+  /**
+   * @param {App} app
+   */
+  register(app) {
+    app.registerSystem(AppSchedule.Startup, init)
+  }
+}
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerPlugin(new MyPlugin())
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, playAudio)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
 /**
  * @param {World} world
  */
 function init(world) {
   const server = world.getResource(AssetServer)
-  const handle = server.load(Audio, 'assets/audio/hit.mp3')
+  const handle = server.load(Audio, '/audio/hit.mp3')
 
   world.setResource(new Playing(handle))
 }
diff --git a/examples/samples/audio/audioOscillator.js b/examples/samples/audio/audioOscillator.js
new file mode 100644
index 00000000..a666c776
--- /dev/null
+++ b/examples/samples/audio/audioOscillator.js
@@ -0,0 +1,45 @@
+import {
+  World,
+  AudioOscillator,
+  EntityCommands,
+  Cleanup,
+  Timer,
+  TimerMode,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger
+} from 'wima'
+import { HackPlugin, setupViewport } from '../utils.js'
+
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
+/**
+ * @param {World} world
+ */
+function init(world) {
+  const commands = world.getResource(EntityCommands)
+
+  commands
+    .spawn()
+    .insertPrefab([
+      new AudioOscillator(),
+      new Timer({
+        mode: TimerMode.Repeat
+      }),
+      new Cleanup()
+    ])
+    .build()
+}
diff --git a/demos/demos/audio/audioPlayback.js b/examples/samples/audio/audioPlayback.js
similarity index 60%
rename from demos/demos/audio/audioPlayback.js
rename to examples/samples/audio/audioPlayback.js
index 39e5dc13..fc69212b 100644
--- a/demos/demos/audio/audioPlayback.js
+++ b/examples/samples/audio/audioPlayback.js
@@ -1,5 +1,4 @@
 import {
-  Demo,
   World,
   Audio,
   AudioPlayer,
@@ -9,15 +8,44 @@ import {
   Timer,
   Query,
   VirtualClock,
-  AssetServer
+  AssetServer,
+  DefaultPlugin,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  Plugin
 } from 'wima'
-import { addDefaultCamera3D } from '../utils.js'
+import { HackPlugin, setupViewport } from '../utils.js'
 
-export default new Demo(
-  'audio/audio playback',
-  [init, addDefaultCamera3D],
-  [update]
-)
+class AudioTimer extends Timer {}
+
+// Why use a plugin? The current implentation does not have system sets and
+// systems registered directly on the App are precede ones registered by plugins.
+// This conflict is between internal engine system and external engine systems ordering.
+class MyPlugin extends Plugin {
+
+  /**
+   * @param {App} app
+   */
+  register(app) {
+    app.registerSystem(AppSchedule.Startup, init)
+  }
+}
+
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerPlugin(new MyPlugin())
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, update)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
@@ -34,7 +62,7 @@ function init(world) {
     .spawn()
     .insertPrefab([
       new AudioPlayer({
-        audio: server.load(Audio, 'assets/audio/bad-apple.m4a')
+        audio: server.load(Audio, '/audio/bad-apple.m4a')
       }),
       new Timer({
         mode: TimerMode.Once,
@@ -82,5 +110,3 @@ function update(world) {
 
   timer.update(clock.getDelta())
 }
-
-class AudioTimer extends Timer {}
diff --git a/examples/samples/audio/audioPlayer.js b/examples/samples/audio/audioPlayer.js
new file mode 100644
index 00000000..a350c920
--- /dev/null
+++ b/examples/samples/audio/audioPlayer.js
@@ -0,0 +1,64 @@
+import {
+  World,
+  AssetServer,
+  AudioPlayer,
+  TimerMode,
+  EntityCommands,
+  Cleanup,
+  Audio,
+  Timer,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  Plugin
+} from 'wima'
+import { HackPlugin, setupViewport } from '../utils.js'
+
+// Why use a plugin? The current implentation does not have system sets and
+// systems registered directly on the App are precede ones registered by plugins.
+// This conflict is between internal engine system and external engine systems ordering.
+class MyPlugin extends Plugin {
+
+  /**
+   * @param {App} app
+   */
+  register(app) {
+    app.registerSystem(AppSchedule.Startup, init)
+  }
+}
+
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerPlugin(new MyPlugin())
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
+/**
+ * @param {World} world
+ */
+function init(world) {
+  const server = world.getResource(AssetServer)
+  const commands = world.getResource(EntityCommands)
+
+  commands
+    .spawn()
+    .insertPrefab([
+      new AudioPlayer({
+        audio: server.load(Audio, '/audio/bad-apple.m4a')
+      }),
+      new Timer({
+        mode: TimerMode.Repeat
+      }),
+      new Cleanup()
+    ])
+    .build()
+}
diff --git a/examples/samples/audio/index.js b/examples/samples/audio/index.js
new file mode 100644
index 00000000..072fec90
--- /dev/null
+++ b/examples/samples/audio/index.js
@@ -0,0 +1,11 @@
+const audioGraph = new URL('./audioGraph.js', import.meta.url)
+const audioPlayer = new URL('./audioPlayer.js', import.meta.url)
+const audioPlayback = new URL('./audioPlayback.js', import.meta.url)
+const audioOscillator = new URL('./audioOscillator.js', import.meta.url)
+
+export default {
+  'audioGraph': audioGraph,
+  'audioPlayer': audioPlayer,
+  'audioPlayback': audioPlayback,
+  'audioOscillator': audioOscillator
+}
diff --git a/demos/demos/ecs/despawn.js b/examples/samples/ecs/despawn.js
similarity index 69%
rename from demos/demos/ecs/despawn.js
rename to examples/samples/ecs/despawn.js
index 6b089a50..681f4069 100644
--- a/demos/demos/ecs/despawn.js
+++ b/examples/samples/ecs/despawn.js
@@ -2,7 +2,6 @@ import {
   Mesh,
   createTransform2D,
   World,
-  Demo,
   Query,
   EntityCommands,
   Cleanup,
@@ -11,16 +10,35 @@ import {
   Meshed,
   BasicMaterial2D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../utils.js'
 
-export default new Demo('despawn', [init, addDefaultCamera2D], [update])
+class Marker { }
 
 const itemWidth = 50
 const itemHeight = 50
 const paddingWidth = 10
 const paddingHeight = 10
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, update)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
@@ -68,5 +86,3 @@ function update(world) {
 
   commands.despawn(entity[0])
 }
-
-class Marker { }
diff --git a/examples/samples/ecs/index.js b/examples/samples/ecs/index.js
new file mode 100644
index 00000000..fc7462d0
--- /dev/null
+++ b/examples/samples/ecs/index.js
@@ -0,0 +1,7 @@
+const spawn = new URL('./spawn.js', import.meta.url)
+const despawn = new URL('./despawn.js', import.meta.url)
+
+export default {
+  'spawn': spawn,
+  'despawn': despawn
+}
diff --git a/demos/demos/ecs/spawn.js b/examples/samples/ecs/spawn.js
similarity index 66%
rename from demos/demos/ecs/spawn.js
rename to examples/samples/ecs/spawn.js
index bf06828d..6959bb61 100644
--- a/demos/demos/ecs/spawn.js
+++ b/examples/samples/ecs/spawn.js
@@ -2,7 +2,6 @@ import {
   Mesh,
   createTransform2D,
   World,
-  Demo,
   Query,
   EntityCommands,
   Cleanup,
@@ -11,16 +10,34 @@ import {
   Meshed,
   BasicMaterial2D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  Canvas2DRendererPlugin,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../utils.js'
 
-export default new Demo('spawn', [addDefaultCamera2D], [update])
+class Marker { }
 
 const itemWidth = 50
 const itemHeight = 50
 const paddingWidth = 10
 const paddingHeight = 10
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, update)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
@@ -53,5 +70,3 @@ function update(world) {
     ])
     .build()
 }
-
-class Marker { }
diff --git a/examples/samples/gizmos/2d/arcs.js b/examples/samples/gizmos/2d/arcs.js
new file mode 100644
index 00000000..a2c2835a
--- /dev/null
+++ b/examples/samples/gizmos/2d/arcs.js
@@ -0,0 +1,129 @@
+import {
+  World,
+  Color,
+  GizmoLineStyle,
+  PI,
+  HALF_PI,
+  QUARTER_PI,
+  Gizmo2D,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  Gizmo2DPlugin,
+  typeidGeneric
+} from 'wima'
+import { HackPlugin, addDefaultCamera2D, setupViewport } from '../../utils.js'
+
+class Demo { }
+
+/**
+ * @augments {Gizmo2D<Demo>}
+ */
+class DemoGizmo2D extends Gizmo2D { }
+
+const app = new App()
+
+// We have to alias the gizmo resource manually
+app.getWorld().setResourceAlias(typeidGeneric(Gizmo2D, [Demo]), DemoGizmo2D)
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerPlugin(new Gizmo2DPlugin({
+    label: Demo
+  }))
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, drawCirclularArcs)
+  .registerSystem(AppSchedule.Update, drawEllipticalArcs)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
+/**
+ * @param {World} world
+ */
+function init(world) {
+  const gizmo = world.getResource(DemoGizmo2D)
+
+  gizmo.settings.lineWidth = 2
+  gizmo.settings.lineStyle = GizmoLineStyle.Solid
+}
+
+/**
+ * @param {World} world
+ */
+function drawCirclularArcs(world) {
+  const gizmo = world.getResource(DemoGizmo2D)
+  const radius = 40
+
+  gizmo
+    .translate(100, 100)
+    .arc(0, QUARTER_PI, radius, radius, new Color(0.5, 0.5, 0.5, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, HALF_PI, radius, radius, new Color(1, 0, 0, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, HALF_PI + QUARTER_PI, radius, radius, new Color(1, 1, 0, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, PI, radius, radius, new Color(0, 1, 0, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, PI + QUARTER_PI, radius, radius, new Color(0, 1, 1, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, PI + HALF_PI, radius, radius, new Color(0, 0, 1, 1))
+    .axes(20)
+    .reset()
+    .translate(100, 200)
+    .arc(0, PI + HALF_PI + QUARTER_PI, radius, radius, new Color(1, 0, 1, 1))
+    .axes(20)
+    .translate(100, 0)
+    .circle(radius, new Color(1, 1, 1, 1))
+    .axes(20)
+    .reset()
+}
+
+/**
+ * @param {World} world
+ */
+function drawEllipticalArcs(world) {
+  const gizmo = world.getResource(DemoGizmo2D)
+  const radiusX = 40
+  const radiusY = 20
+
+  gizmo
+    .translate(100, 300)
+    .arc(0, QUARTER_PI, radiusX, radiusY, new Color(0.5, 0.5, 0.5, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, HALF_PI, radiusX, radiusY, new Color(1, 0, 0, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, HALF_PI + QUARTER_PI, radiusX, radiusY, new Color(1, 1, 0, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, PI, radiusX, radiusY, new Color(0, 1, 0, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, PI + QUARTER_PI, radiusX, radiusY, new Color(0, 1, 1, 1))
+    .axes(20)
+    .translate(100, 0)
+    .arc(0, PI + HALF_PI, radiusX, radiusY, new Color(0, 0, 1, 1))
+    .axes(20)
+    .reset()
+    .translate(100, 400)
+    .arc(0, PI + HALF_PI + QUARTER_PI, radiusX, radiusY, new Color(1, 0, 1, 1))
+    .axes(20)
+    .translate(100, 0)
+    .ellipse(radiusX, radiusY, new Color(1, 1, 1, 1))
+    .axes(20)
+    .reset()
+}
diff --git a/examples/samples/gizmos/2d/grid.js b/examples/samples/gizmos/2d/grid.js
new file mode 100644
index 00000000..be256d4f
--- /dev/null
+++ b/examples/samples/gizmos/2d/grid.js
@@ -0,0 +1,76 @@
+import {
+  World,
+  Color,
+  Vector2,
+  BVector2,
+  GizmoLineStyle,
+  AppSchedule,
+  App,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  Gizmo2D,
+  Gizmo2DPlugin,
+  typeidGeneric
+} from 'wima'
+import { HackPlugin, addDefaultCamera2D, setupViewport } from '../../utils.js'
+
+class Demo { }
+
+/**
+ * @augments {Gizmo2D<Demo>}
+ */
+class DemoGizmo2D extends Gizmo2D { }
+
+const app = new App()
+
+// We have to alias the gizmo resource manually
+app.getWorld().setResourceAlias(typeidGeneric(Gizmo2D, [Demo]), DemoGizmo2D)
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerPlugin(new Gizmo2DPlugin({
+    label: Demo
+  }))
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, drawGrid)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
+/**
+ * @param {World} world
+ */
+function init(world) {
+  const gizmo = world.getResource(DemoGizmo2D)
+
+  gizmo.settings.lineWidth = 2
+  gizmo.settings.lineStyle = GizmoLineStyle.Solid
+}
+
+/**
+ * @param {World} world
+ */
+function drawGrid(world) {
+  const gizmo = world.getResource(DemoGizmo2D)
+
+  gizmo
+    .translate(200, 200)
+    .grid(
+      new Vector2(10, 10),
+      new Vector2(25, 25)
+    )
+    .translate(0, 300)
+    .grid(
+      new Vector2(10, 10),
+      new Vector2(25, 25),
+      Color.WHITE.clone(),
+      new BVector2(true, true)
+    )
+    .reset()
+}
diff --git a/examples/samples/gizmos/2d/index.js b/examples/samples/gizmos/2d/index.js
new file mode 100644
index 00000000..e89be28f
--- /dev/null
+++ b/examples/samples/gizmos/2d/index.js
@@ -0,0 +1,11 @@
+const lineStyle = new URL('./linestyle.js', import.meta.url)
+const arcs = new URL('./arcs.js', import.meta.url)
+const shapes = new URL('./shapes.js', import.meta.url)
+const grid = new URL('./grid.js', import.meta.url)
+
+export default {
+  'arcs': arcs,
+  'shapes': shapes,
+  'grid': grid,
+  'line styles': lineStyle
+}
diff --git a/demos/demos/gizmos/linestyle.js b/examples/samples/gizmos/2d/linestyle.js
similarity index 58%
rename from demos/demos/gizmos/linestyle.js
rename to examples/samples/gizmos/2d/linestyle.js
index eb8d4619..a456a053 100644
--- a/demos/demos/gizmos/linestyle.js
+++ b/examples/samples/gizmos/2d/linestyle.js
@@ -1,14 +1,56 @@
-/** @import {Entity} from 'wima' */
 import {
   World,
   Color,
-  Demo,
   Vector2,
-  GizmoLineStyle
+  GizmoLineStyle,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  Gizmo2D,
+  Gizmo2DPlugin,
+  typeidGeneric
 } from 'wima'
-import { Demo1Gizmo2D, Demo2Gizmo2D } from '../utils.js'
+import { HackPlugin, addDefaultCamera2D, setupViewport } from '../../utils.js'
 
-export default new Demo('gizmo2d/line style', [init], [update])
+class Demo1 { }
+class Demo2 { }
+
+/**
+ * @augments {Gizmo2D<Demo1>}
+ */
+class Demo1Gizmo2D extends Gizmo2D { }
+
+/**
+ * @augments {Gizmo2D<Demo2>}
+ */
+class Demo2Gizmo2D extends Gizmo2D { }
+
+const app = new App()
+
+// We have to alias the gizmo resource manually
+app.getWorld().setResourceAlias(typeidGeneric(Gizmo2D, [Demo1]), Demo1Gizmo2D)
+app.getWorld().setResourceAlias(typeidGeneric(Gizmo2D, [Demo2]), Demo2Gizmo2D)
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerPlugin(new Gizmo2DPlugin({
+    label: Demo1
+  }))
+  .registerPlugin(new Gizmo2DPlugin({
+    label: Demo2
+  }))
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, update)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
diff --git a/examples/samples/gizmos/2d/shapes.js b/examples/samples/gizmos/2d/shapes.js
new file mode 100644
index 00000000..85f9f948
--- /dev/null
+++ b/examples/samples/gizmos/2d/shapes.js
@@ -0,0 +1,79 @@
+import {
+  World,
+  Color,
+  Vector2,
+  GizmoLineStyle,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  Gizmo2D,
+  Gizmo2DPlugin,
+  typeidGeneric
+} from 'wima'
+import { HackPlugin, addDefaultCamera2D, setupViewport } from '../../utils.js'
+
+class Demo { }
+
+/**
+ * @augments {Gizmo2D<Demo>}
+ */
+class DemoGizmo2D extends Gizmo2D { }
+
+const app = new App()
+
+// We have to alias the gizmo resource manually
+app.getWorld().setResourceAlias(typeidGeneric(Gizmo2D, [Demo]), DemoGizmo2D)
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerPlugin(new Gizmo2DPlugin({
+    label: Demo
+  }))
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, update)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
+/**
+ * @param {World} world
+ */
+function init(world) {
+  const gizmo = world.getResource(DemoGizmo2D)
+
+  gizmo.settings.lineWidth = 2
+  gizmo.settings.lineStyle = GizmoLineStyle.Solid
+}
+
+/**
+ * @param {World} world
+ */
+function update(world) {
+  const gizmo = world.getResource(DemoGizmo2D)
+
+  gizmo
+    .translate(100, 150)
+    .aabb(50, 50, new Color(1, 1, 1, 1))
+    .axes(20)
+    .translate(150, 0)
+    .ellipse(60, 40, new Color(1, 1, 1, 1))
+    .axes(20)
+    .translate(150, 0)
+    .circle(50, new Color(1, 1, 1, 1))
+    .axes(20)
+    .reset()
+    .translate(100, 300)
+    .grid(new Vector2(10, 10), new Vector2(10, 10))
+    .axes(20)
+    .translate(150, 0)
+    .line(new Vector2(-50, 0), new Vector2(50, 0))
+    .axes(20)
+    .reset()
+}
diff --git a/examples/samples/gizmos/index.js b/examples/samples/gizmos/index.js
new file mode 100644
index 00000000..98a29256
--- /dev/null
+++ b/examples/samples/gizmos/index.js
@@ -0,0 +1,5 @@
+import { default as d2 } from './2d/index.js'
+
+export default {
+  '2d': d2
+}
diff --git a/examples/samples/index.js b/examples/samples/index.js
new file mode 100644
index 00000000..f0dd7903
--- /dev/null
+++ b/examples/samples/index.js
@@ -0,0 +1,19 @@
+import { default as audio } from './audio/index.js'
+import { default as animation } from './animation/index.js'
+import { default as transform } from './transform/index.js'
+import { default as render } from './render/index.js'
+import { default as ecs } from './ecs/index.js'
+import { default as input } from './input/index.js'
+import { default as tween } from './tween/index.js'
+import { default as gizmos } from './gizmos/index.js'
+
+export default {
+  'animation': animation,
+  'audio': audio,
+  'transform': transform,
+  'render': render,
+  'ecs': ecs,
+  'input': input,
+  'tween': tween,
+  'gizmos': gizmos
+}
diff --git a/examples/samples/input/index.js b/examples/samples/input/index.js
new file mode 100644
index 00000000..731f2421
--- /dev/null
+++ b/examples/samples/input/index.js
@@ -0,0 +1,9 @@
+const keyboard = new URL('./keyboard.js', import.meta.url)
+const mouse = new URL('./mouse.js', import.meta.url)
+const touch = new URL('./touch.js', import.meta.url)
+
+export default {
+  'keyboard': keyboard,
+  'mouse': mouse,
+  'touch': touch
+}
diff --git a/demos/demos/input/keyboard.js b/examples/samples/input/keyboard.js
similarity index 83%
rename from demos/demos/input/keyboard.js
rename to examples/samples/input/keyboard.js
index 0629cd24..1fcd70b5 100644
--- a/demos/demos/input/keyboard.js
+++ b/examples/samples/input/keyboard.js
@@ -3,7 +3,6 @@ import {
   createTransform2D,
   World,
   Color,
-  Demo,
   Query,
   EntityCommands,
   Cleanup,
@@ -14,15 +13,18 @@ import {
   Meshed,
   BasicMaterial2D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../utils.js'
 
-export default new Demo(
-  'keyboard',
-  [init, spawnDigits, spawnAlphabet, addDefaultCamera2D],
-  [update]
-)
+/** @type {Map<KeyCode,Entity>} */
+class KeytoEntityMap extends Map { }
 
 const offsetX = -400
 const offsetY = -100
@@ -30,9 +32,21 @@ const itemWidth = 50
 const itemHeight = 50
 const paddingWidth = 10
 const paddingHeight = 10
-
-/** @type {Map<KeyCode,Entity>} */
-class KeytoEntityMap extends Map { }
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, spawnAlphabet)
+  .registerSystem(AppSchedule.Startup, spawnDigits)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, update)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
diff --git a/demos/demos/input/mouse.js b/examples/samples/input/mouse.js
similarity index 80%
rename from demos/demos/input/mouse.js
rename to examples/samples/input/mouse.js
index 2939c5a1..0c5ac046 100644
--- a/demos/demos/input/mouse.js
+++ b/examples/samples/input/mouse.js
@@ -3,7 +3,6 @@ import {
   createTransform2D,
   World,
   Color,
-  Demo,
   Query,
   EntityCommands,
   Cleanup,
@@ -16,21 +15,15 @@ import {
   Meshed, BasicMaterial,
   BasicMaterial2D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  DOMWindowPlugin,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../utils.js'
-
-export default new Demo(
-  'mouse',
-  [spawnButtons, spawnMouseFollower, addDefaultCamera2D],
-  [updateFollower, updateButtons]
-)
-
-const offsetX = 100
-const offsetY = 100
-const itemWidth = 50
-const itemHeight = 50
-const paddingWidth = 10
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../utils.js'
 
 /** @type {Map<KeyCode,Entity>} */
 class KeytoEntityMap extends Map { }
@@ -44,6 +37,27 @@ class MouseEntity {
   }
 }
 
+const offsetX = 100
+const offsetY = 100
+const itemWidth = 50
+const itemHeight = 50
+const paddingWidth = 10
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, spawnButtons)
+  .registerSystem(AppSchedule.Startup, spawnMouseFollower)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, updateFollower)
+  .registerSystem(AppSchedule.Update, updateButtons)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
 /**
  * @param {World} world
  */
diff --git a/demos/demos/input/touch.js b/examples/samples/input/touch.js
similarity index 72%
rename from demos/demos/input/touch.js
rename to examples/samples/input/touch.js
index 68de7de2..5280db50 100644
--- a/demos/demos/input/touch.js
+++ b/examples/samples/input/touch.js
@@ -3,7 +3,6 @@ import {
   createTransform2D,
   World,
   Color,
-  Demo,
   Query,
   EntityCommands,
   warn,
@@ -15,19 +14,33 @@ import {
   BasicMaterial2D,
   Meshed,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../utils.js'
-
-export default new Demo(
-  'touch',
-  [init, addDefaultCamera2D],
-  [update]
-)
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../utils.js'
 
 /** @type {Map<number,Entity>} */
 class TouchtoEntityMap extends Map { }
 
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, update)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
 /**
  * @param {World} world
  */
diff --git a/examples/samples/render/canvas-2d/index.js b/examples/samples/render/canvas-2d/index.js
new file mode 100644
index 00000000..3af34165
--- /dev/null
+++ b/examples/samples/render/canvas-2d/index.js
@@ -0,0 +1,5 @@
+const materials = new URL('./material.js', import.meta.url)
+
+export default {
+  'materials': materials
+}
diff --git a/demos/demos/render/canvas-2d/material.js b/examples/samples/render/canvas-2d/material.js
similarity index 51%
rename from demos/demos/render/canvas-2d/material.js
rename to examples/samples/render/canvas-2d/material.js
index 30a3e74a..313a85bf 100644
--- a/demos/demos/render/canvas-2d/material.js
+++ b/examples/samples/render/canvas-2d/material.js
@@ -2,26 +2,39 @@ import {
   Mesh,
   createTransform2D,
   World,
-  Demo,
   Cleanup,
   EntityCommands,
   BasicMaterial,
   Meshed,
   BasicMaterial2D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../../utils.js'
 
-export default new Demo(
-  'materials',
-  [init, addDefaultCamera2D]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
  */
-export async function init(world) {
+function init(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const basicMaterials = world.getResource(BasicMaterialAssets)
diff --git a/examples/samples/render/index.js b/examples/samples/render/index.js
new file mode 100644
index 00000000..2b3492ac
--- /dev/null
+++ b/examples/samples/render/index.js
@@ -0,0 +1,7 @@
+import webgl from './webgl/index.js'
+import canvas2d from './canvas-2d/index.js'
+
+export default {
+  'canvas2d': canvas2d,
+  'webgl': webgl
+}
diff --git a/demos/demos/render/webgl/movingtriangle.js b/examples/samples/render/webgl/basictriangle.js
similarity index 50%
rename from demos/demos/render/webgl/movingtriangle.js
rename to examples/samples/render/webgl/basictriangle.js
index f0885382..e65e44e1 100644
--- a/demos/demos/render/webgl/movingtriangle.js
+++ b/examples/samples/render/webgl/basictriangle.js
@@ -1,31 +1,40 @@
 import {
-  Demo,
   Mesh,
-  Position3D,
   World,
   Cleanup,
-  Query,
   EntityCommands,
-  VirtualClock,
+  createTransform3D,
   BasicMaterial,
   Meshed,
   BasicMaterial3D,
-  createTransform3D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DOMWindowPlugin,
+  DefaultPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
+
+const app = new App()
 
-export const movingtriangle = new Demo(
-  'moving triangle',
-  [addmesh, addDefaultCamera3D],
-  [updateMesh]
-)
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMesh)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .run()
 
 /**
  * @param {World} world
  */
-function addmesh(world) {
+function spawnMesh(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
@@ -43,17 +52,3 @@ function addmesh(world) {
     ])
     .build()
 }
-
-/**
- * @param {World} world
- */
-function updateMesh(world) {
-  const query = new Query(world, [Position3D, Meshed])
-  const clock = world.getResource(VirtualClock)
-  const dt = clock.getElapsed()
-
-  query.each(([position]) => {
-    position.x = Math.sin(dt) * 0.5
-    position.y = Math.cos(dt) * 0.5
-  })
-}
diff --git a/demos/demos/render/webgl/cameraorthographic.js b/examples/samples/render/webgl/cameraorthographic.js
similarity index 65%
rename from demos/demos/render/webgl/cameraorthographic.js
rename to examples/samples/render/webgl/cameraorthographic.js
index 53eeb9c1..3d369d06 100644
--- a/demos/demos/render/webgl/cameraorthographic.js
+++ b/examples/samples/render/webgl/cameraorthographic.js
@@ -1,5 +1,4 @@
 import {
-  Demo,
   Mesh,
   OrthographicProjection,
   Rotation3D,
@@ -14,14 +13,29 @@ import {
   createMovable3D,
   Query,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
+import { HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export const orthograhicCamera = new Demo(
-  'orthograhic camera',
-  [addmesh, addCamera3D],
-  [update]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMesh)
+  .registerSystem(AppSchedule.Startup, addCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, update)
+  .run()
 
 /**
  * @param {World} world
@@ -43,7 +57,7 @@ function addCamera3D(world) {
 /**
  * @param {World} world
  */
-function addmesh(world) {
+function spawnMesh(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
diff --git a/demos/demos/render/webgl/cameraperspective.js b/examples/samples/render/webgl/cameraperspective.js
similarity index 64%
rename from demos/demos/render/webgl/cameraperspective.js
rename to examples/samples/render/webgl/cameraperspective.js
index 2c076d16..a65c3712 100644
--- a/demos/demos/render/webgl/cameraperspective.js
+++ b/examples/samples/render/webgl/cameraperspective.js
@@ -1,5 +1,4 @@
 import {
-  Demo,
   Mesh,
   PerspectiveProjection,
   Camera,
@@ -14,14 +13,29 @@ import {
   Query,
   Rotation3D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
+import { HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export const perspectiveCamera = new Demo(
-  'perspective camera',
-  [addmesh, addCamera3D],
-  [update]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMesh)
+  .registerSystem(AppSchedule.Startup, addCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, update)
+  .run()
 
 /**
  * @param {World} world
@@ -41,7 +55,7 @@ function addCamera3D(world) {
 /**
  * @param {World} world
  */
-function addmesh(world) {
+function spawnMesh(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
diff --git a/demos/demos/render/webgl/camerarotate.js b/examples/samples/render/webgl/camerarotate.js
similarity index 64%
rename from demos/demos/render/webgl/camerarotate.js
rename to examples/samples/render/webgl/camerarotate.js
index 78297845..89dba837 100644
--- a/demos/demos/render/webgl/camerarotate.js
+++ b/examples/samples/render/webgl/camerarotate.js
@@ -1,5 +1,4 @@
 import {
-  Demo,
   Mesh,
   Rotation3D,
   World,
@@ -13,14 +12,29 @@ import {
   createRawMovable3D,
   Query,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
+import { HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export const cameraRotate = new Demo(
-  'camera rotate',
-  [addmesh, addCamera3D],
-  [update]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMesh)
+  .registerSystem(AppSchedule.Startup, addCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, update)
+  .run()
 
 /**
  * @param {World} world
@@ -42,7 +56,7 @@ function addCamera3D(world) {
 /**
  * @param {World} world
  */
-function addmesh(world) {
+function spawnMesh(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
diff --git a/demos/demos/render/webgl/colorchangetriangle.js b/examples/samples/render/webgl/colorchangetriangle.js
similarity index 68%
rename from demos/demos/render/webgl/colorchangetriangle.js
rename to examples/samples/render/webgl/colorchangetriangle.js
index a13e0596..0ff670ff 100644
--- a/demos/demos/render/webgl/colorchangetriangle.js
+++ b/examples/samples/render/webgl/colorchangetriangle.js
@@ -1,5 +1,4 @@
 import {
-  Demo,
   Mesh,
   Color,
   World,
@@ -10,26 +9,39 @@ import {
   BasicMaterial3D,
   Meshed,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
-
-const MATERIAL_PATH = 'colorChange'
-
-export const changecolortriangle = new Demo(
-  'color changing triangle',
-  [addmesh, addDefaultCamera3D],
-  [changeColor]
-)
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
 
 class ChangeColor {
   color = new Color(0.003, 0.006, 0.012)
 }
 
+const MATERIAL_PATH = 'colorChange'
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMesh)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, changeColor)
+  .run()
+
 /**
  * @param {World} world
  */
-function addmesh(world) {
+function spawnMesh(world) {
   world.setResource(new ChangeColor())
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
diff --git a/demos/demos/render/webgl/geometries.js b/examples/samples/render/webgl/geometries.js
similarity index 68%
rename from demos/demos/render/webgl/geometries.js
rename to examples/samples/render/webgl/geometries.js
index 9caf6463..21a508d7 100644
--- a/demos/demos/render/webgl/geometries.js
+++ b/examples/samples/render/webgl/geometries.js
@@ -1,5 +1,4 @@
 import {
-  Demo,
   Mesh,
   Position3D,
   Rotation3D,
@@ -12,20 +11,34 @@ import {
   createMovable3D,
   Query,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export const geometries = new Demo(
-  'mesh geometries',
-  [addmeshes, addDefaultCamera3D],
-  [update]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMeshes)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, update)
+  .run()
 
 /**
  * @param {World} world
  */
-function addmeshes(world) {
+function spawnMeshes(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
diff --git a/examples/samples/render/webgl/index.js b/examples/samples/render/webgl/index.js
new file mode 100644
index 00000000..d1e85cb8
--- /dev/null
+++ b/examples/samples/render/webgl/index.js
@@ -0,0 +1,15 @@
+const basictriangle = new URL('./basictriangle.js', import.meta.url)
+const colorchangetriangle = new URL('./colorchangetriangle.js', import.meta.url)
+const geometries = new URL('./geometries.js', import.meta.url)
+const camerarotate = new URL('./camerarotate.js', import.meta.url)
+const cameraperspective = new URL('./cameraperspective.js', import.meta.url)
+const cameraorthographic = new URL('./cameraorthographic.js', import.meta.url)
+
+export default {
+  'basictriangle': basictriangle,
+  'colorchangetriangle': colorchangetriangle,
+  'geometries': geometries,
+  'camerarotate': camerarotate,
+  'cameraperspective': cameraperspective,
+  'cameraorthographic': cameraorthographic
+}
diff --git a/examples/samples/transform/2d/index.js b/examples/samples/transform/2d/index.js
new file mode 100644
index 00000000..bd4e2f5d
--- /dev/null
+++ b/examples/samples/transform/2d/index.js
@@ -0,0 +1,13 @@
+const translate2d = new URL('./translate.js', import.meta.url)
+const rotate2d = new URL('./rotate.js', import.meta.url)
+const scale2d = new URL('./scale.js', import.meta.url)
+const propagate2d = new URL('./propagate.js', import.meta.url)
+const lookat2d = new URL('./lookat.js', import.meta.url)
+
+export default {
+  'translate2d': translate2d,
+  'rotate2d': rotate2d,
+  'scale2d': scale2d,
+  'propagate2d': propagate2d,
+  'lookat2d': lookat2d
+}
diff --git a/demos/demos/transform/2d/lookat.js b/examples/samples/transform/2d/lookat.js
similarity index 79%
rename from demos/demos/transform/2d/lookat.js
rename to examples/samples/transform/2d/lookat.js
index e1f6c735..086ecc04 100644
--- a/demos/demos/transform/2d/lookat.js
+++ b/examples/samples/transform/2d/lookat.js
@@ -1,6 +1,5 @@
 import {
   BasicMaterial,
-  Demo,
   Mesh,
   World,
   Cleanup,
@@ -19,15 +18,34 @@ import {
   Color,
   HALF_PI,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../../utils.js'
 
-export default new Demo(
-  'transform2d/lookAt',
-  [spawnLookers, spawnTarget, addDefaultCamera2D],
-  [updateLookers, updateTarget]
-)
+class Target { }
+class Looker { }
+
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, spawnLookers)
+  .registerSystem(AppSchedule.Startup, spawnTarget)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerSystem(AppSchedule.Update, updateLookers)
+  .registerSystem(AppSchedule.Update, updateTarget)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
@@ -131,6 +149,3 @@ function updateTarget(world) {
   position.x = amplitudeX * Math.cos(dt * frequencyX * speed)
   position.y = amplitudeY * Math.sin(dt * frequencyY * speed)
 }
-
-class Target { }
-class Looker { }
diff --git a/demos/demos/transform/2d/propagate.js b/examples/samples/transform/2d/propagate.js
similarity index 75%
rename from demos/demos/transform/2d/propagate.js
rename to examples/samples/transform/2d/propagate.js
index 1cf88c5f..b574246f 100644
--- a/demos/demos/transform/2d/propagate.js
+++ b/examples/samples/transform/2d/propagate.js
@@ -1,5 +1,4 @@
 import {
-  Demo,
   World,
   VirtualClock,
   BasicMaterial,
@@ -19,15 +18,29 @@ import {
   has,
   PI,
   QUARTER_PI,
-  Rotary
+  Rotary,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  App
 } from 'wima'
-import { addDefaultCamera2D } from '../../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../../utils.js'
 
-export default new Demo(
-  'transform2d/propagate',
-  [addDefaultCamera2D, addMeshes],
-  [update]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, addMeshes)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, update)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
diff --git a/demos/demos/transform/2d/rotate.js b/examples/samples/transform/2d/rotate.js
similarity index 58%
rename from demos/demos/transform/2d/rotate.js
rename to examples/samples/transform/2d/rotate.js
index 15eb9a72..cdb37d4d 100644
--- a/demos/demos/transform/2d/rotate.js
+++ b/examples/samples/transform/2d/rotate.js
@@ -1,6 +1,5 @@
 import {
   BasicMaterial,
-  Demo,
   Mesh,
   World,
   Cleanup,
@@ -12,15 +11,29 @@ import {
   PI,
   Query,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  App
 } from 'wima'
-import { addDefaultCamera2D } from '../../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../../utils.js'
 
-export default new Demo(
-  'transform2d/rotate',
-  [addmesh, addDefaultCamera2D],
-  [update]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, addmesh)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, update)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
diff --git a/demos/demos/transform/2d/scale.js b/examples/samples/transform/2d/scale.js
similarity index 60%
rename from demos/demos/transform/2d/scale.js
rename to examples/samples/transform/2d/scale.js
index 92f73343..d7c7753e 100644
--- a/demos/demos/transform/2d/scale.js
+++ b/examples/samples/transform/2d/scale.js
@@ -1,6 +1,6 @@
 import {
   BasicMaterial,
-  Demo,
+
   Mesh,
   Scale2D,
   World,
@@ -12,15 +12,29 @@ import {
   BasicMaterial2D,
   createTransform2D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../../utils.js'
+
+const app = new App()
 
-export default new Demo(
-  'transform2d/scale',
-  [addmesh, addDefaultCamera2D],
-  [updateMesh]
-)
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, addmesh)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, updateMesh)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
diff --git a/demos/demos/transform/2d/translate.js b/examples/samples/transform/2d/translate.js
similarity index 61%
rename from demos/demos/transform/2d/translate.js
rename to examples/samples/transform/2d/translate.js
index bf551f31..1a0a15a6 100644
--- a/demos/demos/transform/2d/translate.js
+++ b/examples/samples/transform/2d/translate.js
@@ -1,6 +1,5 @@
 import {
   BasicMaterial,
-  Demo,
   Mesh,
   Position2D,
   World,
@@ -12,15 +11,29 @@ import {
   Meshed,
   createTransform2D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DOMWindowPlugin,
+  DefaultPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../../utils.js'
 
-export default new Demo(
-  'transform2d/translate',
-  [addmesh, addDefaultCamera2D],
-  [updateMesh]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, addmesh)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, updateMesh)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
diff --git a/examples/samples/transform/3d/index.js b/examples/samples/transform/3d/index.js
new file mode 100644
index 00000000..3b4b697c
--- /dev/null
+++ b/examples/samples/transform/3d/index.js
@@ -0,0 +1,13 @@
+const translate3d = new URL('./translate.js', import.meta.url)
+const rotate3d = new URL('./rotate.js', import.meta.url)
+const scale3d = new URL('./scale.js', import.meta.url)
+const lookAt3d = new URL('./lookat.js', import.meta.url)
+const propagate3d = new URL('./propagate.js', import.meta.url)
+
+export default {
+  'translate3d': translate3d,
+  'rotate3d': rotate3d,
+  'scale3d': scale3d,
+  'lookAt3d': lookAt3d,
+  'propagate3d': propagate3d
+}
diff --git a/demos/demos/transform/3d/lookat.js b/examples/samples/transform/3d/lookat.js
similarity index 76%
rename from demos/demos/transform/3d/lookat.js
rename to examples/samples/transform/3d/lookat.js
index 1bf13c03..d8bcea57 100644
--- a/demos/demos/transform/3d/lookat.js
+++ b/examples/samples/transform/3d/lookat.js
@@ -1,6 +1,5 @@
 import {
   BasicMaterial,
-  Demo,
   Mesh,
   World,
   Cleanup,
@@ -17,20 +16,39 @@ import {
   Position3D,
   Color,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export default new Demo(
-  'transform3d/lookAt',
-  [addLookers, addTarget, addDefaultCamera3D],
-  [updateLookers, updateTarget]
-)
+class Target { }
+class Looker { }
+
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnLookers)
+  .registerSystem(AppSchedule.Startup, spawnTarget)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, updateLookers)
+  .registerSystem(AppSchedule.Update, updateTarget)
+  .run()
 
 /**
  * @param {World} world
  */
-function addLookers(world) {
+function spawnLookers(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
@@ -58,7 +76,7 @@ function addLookers(world) {
 /**
  * @param {World} world
  */
-function addTarget(world) {
+function spawnTarget(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
@@ -130,6 +148,3 @@ function updateTarget(world) {
   position.x = amplitudeX * Math.cos(dt * frequencyX * speed)
   position.y = amplitudeY * Math.sin(dt * frequencyY * speed)
 }
-
-class Target { }
-class Looker { }
diff --git a/demos/demos/transform/3d/propagate.js b/examples/samples/transform/3d/propagate.js
similarity index 74%
rename from demos/demos/transform/3d/propagate.js
rename to examples/samples/transform/3d/propagate.js
index 7652178a..46145ab6 100644
--- a/demos/demos/transform/3d/propagate.js
+++ b/examples/samples/transform/3d/propagate.js
@@ -1,5 +1,4 @@
 import {
-  Demo,
   World,
   VirtualClock,
   BasicMaterial,
@@ -18,20 +17,34 @@ import {
   MeshAssets,
   has,
   QUARTER_PI,
-  without
+  without,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export default new Demo(
-  'transform3d/propagate',
-  [addDefaultCamera3D, addMeshes],
-  [update]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMeshes)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, update)
+  .run()
 
 /**
  * @param {World} world
  */
-function addMeshes(world) {
+function spawnMeshes(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
diff --git a/demos/demos/transform/3d/rotate.js b/examples/samples/transform/3d/rotate.js
similarity index 56%
rename from demos/demos/transform/3d/rotate.js
rename to examples/samples/transform/3d/rotate.js
index 67933de6..dc18f3e3 100644
--- a/demos/demos/transform/3d/rotate.js
+++ b/examples/samples/transform/3d/rotate.js
@@ -1,6 +1,5 @@
 import {
   BasicMaterial,
-  Demo,
   Mesh,
   World,
   Cleanup,
@@ -12,20 +11,34 @@ import {
   PI,
   Query,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export default new Demo(
-  'transform3d/rotate',
-  [addmesh, addDefaultCamera3D],
-  [update]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMesh)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, update)
+  .run()
 
 /**
  * @param {World} world
  */
-function addmesh(world) {
+function spawnMesh(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
diff --git a/demos/demos/transform/3d/scale.js b/examples/samples/transform/3d/scale.js
similarity index 59%
rename from demos/demos/transform/3d/scale.js
rename to examples/samples/transform/3d/scale.js
index b38bd3d6..4ea2e893 100644
--- a/demos/demos/transform/3d/scale.js
+++ b/examples/samples/transform/3d/scale.js
@@ -1,6 +1,5 @@
 import {
   BasicMaterial,
-  Demo,
   Mesh,
   Scale3D,
   World,
@@ -12,20 +11,34 @@ import {
   BasicMaterial3D,
   createTransform3D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export default new Demo(
-  'transform3d/scale',
-  [addmesh, addDefaultCamera3D],
-  [updateMesh]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMesh)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, updateMesh)
+  .run()
 
 /**
  * @param {World} world
  */
-function addmesh(world) {
+function spawnMesh(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
diff --git a/demos/demos/transform/3d/translate.js b/examples/samples/transform/3d/translate.js
similarity index 59%
rename from demos/demos/transform/3d/translate.js
rename to examples/samples/transform/3d/translate.js
index b7eb5d3e..031bf0a2 100644
--- a/demos/demos/transform/3d/translate.js
+++ b/examples/samples/transform/3d/translate.js
@@ -1,6 +1,5 @@
 import {
   BasicMaterial,
-  Demo,
   Mesh,
   Position3D,
   World,
@@ -12,20 +11,34 @@ import {
   Meshed,
   createTransform3D,
   BasicMaterialAssets,
-  MeshAssets
+  MeshAssets,
+  App,
+  AppSchedule,
+  DOMWindowPlugin,
+  DefaultPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
 } from 'wima'
-import { addDefaultCamera3D } from '../../utils.js'
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
 
-export default new Demo(
-  'transform3d/translate',
-  [addmesh, addDefaultCamera3D],
-  [updateMesh]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, spawnMesh)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .registerSystem(AppSchedule.Update, updateMesh)
+  .run()
 
 /**
  * @param {World} world
  */
-function addmesh(world) {
+function spawnMesh(world) {
   const commands = world.getResource(EntityCommands)
   const meshes = world.getResource(MeshAssets)
   const materials = world.getResource(BasicMaterialAssets)
diff --git a/examples/samples/transform/index.js b/examples/samples/transform/index.js
new file mode 100644
index 00000000..15ae735d
--- /dev/null
+++ b/examples/samples/transform/index.js
@@ -0,0 +1,7 @@
+import { default as d2 } from './2d/index.js'
+import { default as d3 } from './3d/index.js'
+
+export default {
+  '2d': d2,
+  '3d': d3
+}
diff --git a/demos/demos/tween/easing.js b/examples/samples/tween/easing.js
similarity index 70%
rename from demos/demos/tween/easing.js
rename to examples/samples/tween/easing.js
index 978d42cb..26961600 100644
--- a/demos/demos/tween/easing.js
+++ b/examples/samples/tween/easing.js
@@ -7,21 +7,34 @@ import {
   TweenFlip,
   createTransform2D,
   World,
-  Demo,
   Cleanup,
   EntityCommands,
   Assets,
   typeidGeneric,
   BasicMaterial,
   Meshed,
-  BasicMaterial2D
+  BasicMaterial2D,
+  App,
+  AppSchedule,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger
 } from 'wima'
-import { addDefaultCamera2D } from '../utils.js'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../utils.js'
 
-export default new Demo(
-  'easing',
-  [init, addDefaultCamera2D]
-)
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerDebugger(new FPSDebugger())
+  .run()
 
 /**
  * @param {World} world
diff --git a/examples/samples/tween/index.js b/examples/samples/tween/index.js
new file mode 100644
index 00000000..b9362343
--- /dev/null
+++ b/examples/samples/tween/index.js
@@ -0,0 +1,5 @@
+const easing = new URL('./easing.js', import.meta.url)
+
+export default {
+  'easing': easing
+}
diff --git a/demos/demos/utils.js b/examples/samples/utils.js
similarity index 63%
rename from demos/demos/utils.js
rename to examples/samples/utils.js
index 8e2a7825..c98f7e66 100644
--- a/demos/demos/utils.js
+++ b/examples/samples/utils.js
@@ -10,26 +10,21 @@ import {
   Plugin,
   App,
   typeidGeneric,
-  Gizmo2D,
   Audio,
   Image,
   Mesh,
   BasicMaterial,
   Parser,
   AudioParser,
-  ImageParser
+  ImageParser,
+  Query,
+  WindowCommands,
+  Entity,
+  MainWindow,
+  warn,
+  Windows
 } from 'wima'
 
-// gizmo labels
-export class Demo1 { }
-export class Demo2 { }
-
-/** @augments Gizmo2D<Demo1> */
-export class Demo1Gizmo2D extends Gizmo2D { }
-
-/** @augments Gizmo2D<Demo2> */
-export class Demo2Gizmo2D extends Gizmo2D { }
-
 /**
  * @param {World} world
  */
@@ -54,16 +49,55 @@ export function addDefaultCamera2D(world) {
     .build()
 }
 
-export class ResourceAliasPlugin extends Plugin {
+/**
+ * @param {World} world
+ */
+export function setupViewport(world) {
+  const windowcommands = world.getResource(WindowCommands)
+  const window = new Query(world, [Entity, MainWindow]).single()
+
+  if (!window) return warn('No main window defined.')
+
+  windowcommands
+    .window(window[0])
+    .resize(innerWidth, innerHeight)
+}
+
+/**
+ * @param {World} world
+ */
+export function setupViewportWebgl(world) {
+  const windowcommands = world.getResource(WindowCommands)
+  const window = new Query(world, [Entity, MainWindow]).single()
+  const canvases = world.getResource(Windows)
+  const width = innerWidth
+  const height = innerHeight
+
+  if (!window) return warn('No main window defined.')
+
+  const [entity] = window
+  const canvas = canvases.getWindow(entity)
+
+  if (!canvas) return
+
+  const gl = canvas.getContext('webgl2')
+
+  if (!gl) return
+
+  gl.viewport(0, 0, width, height)
+  windowcommands
+    .window(entity)
+    .resize(width, height)
+}
+
+// Sometimes features that are supposed to be there arent, this plugin
+// provides some hacks to "just enable" code to work until they land.
+export class HackPlugin extends Plugin {
 
   /**
    * @param {App} app
    */
   register(app) {
-    const world = app.getWorld()
-
-    world.setResourceAlias(typeidGeneric(Gizmo2D, [Demo1]), Demo1Gizmo2D)
-    world.setResourceAlias(typeidGeneric(Gizmo2D, [Demo2]), Demo2Gizmo2D)
 
     // HACK: This is a hack until system sets and ordering is introduced.
     {
diff --git a/package.json b/package.json
index 7d5ed3bc..44d632ae 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   },
   "scripts": {
     "start": "vite --config .config/vite.config.js",
-    "dev": "npm run build:lib",
+    "dev": "vite --config .config/vite.config.js",
     "init": "husky .husky",
     "rollup": "rollup --config .config/rollup.config.js",
     "eslint": "eslint --config .config/eslint.config.js --ignore-pattern '**/*.test.js'",
@@ -35,12 +35,12 @@
     "build": "npm run build:lib && npm run build:docs",
     "build:lib": "npm run types && npm run rollup && npm run clean:types",
     "build:docs": "npm run typedoc",
-    "lint": "npm run lint:src && npm run lint:demos",
-    "lint:dry": "npm run lint:src-dry && npm run lint:demos-dry",
+    "lint": "npm run lint:src && npm run lint:examples",
+    "lint:dry": "npm run lint:src-dry && npm run lint:examples-dry",
     "lint:src-dry": "npm run eslint -- src",
-    "lint:demos-dry": "npm run eslint -- demos",
+    "lint:examples-dry": "npm run eslint -- examples",
     "lint:src": "npm run lint:src-dry -- --fix",
-    "lint:demos": "npm run lint:demos-dry -- --fix",
+    "lint:examples": "npm run lint:examples-dry -- --fix",
     "tsc:lint": "tsc -p .config/tsc.lint.json",
     "watch:src": "npm run rollup -- --watch",
     "watch:docs": "npm run typedoc -- --watch",
diff --git a/src/animation/index.js b/src/animation/index.js
index 52c77a08..f69d436b 100644
--- a/src/animation/index.js
+++ b/src/animation/index.js
@@ -1,4 +1,5 @@
 export * from './assets/index.js'
 export * from './components/index.js'
+export * from './resources/index.js'
 export * from './core/index.js'
 export * from './plugin.js'
diff --git a/src/asset/tests/assetserver.test.js b/src/asset/tests/assetserver.test.js
index d476ffa9..ff6c2eca 100644
--- a/src/asset/tests/assetserver.test.js
+++ b/src/asset/tests/assetserver.test.js
@@ -35,15 +35,15 @@ class TextParser extends Parser {
 describe('Testing `AssetServer`', () => {
   test('Asset is cached by server.', () => {
     const server = createServer()
-    const handle1 = server.load(Text,"/demos/assets/text/sample.txt")
-    const handle2 = server.load(Text,"/demos/assets/text/sample.txt")
+    const handle1 = server.load(Text,"/assets/text/sample.txt")
+    const handle2 = server.load(Text,"/assets/text/sample.txt")
 
     deepStrictEqual(handle1.id(),handle2.id())
   })
 
   test('Unloaded asset gets new handle when reloaded.', () => {
     const server = createServer()
-    const handle1 = server.load(Text,"/demos/assets/text/sample.txt")
+    const handle1 = server.load(Text,"/assets/text/sample.txt")
 
     
     handle1.drop()
@@ -52,8 +52,8 @@ describe('Testing `AssetServer`', () => {
     
     // TODO: Remove when handles are unique
     // handles arent unique yet, so this ensures handle is at a different index
-    const handle3 = server.load(Text,"/demos/assets/text/sample2.txt")
-    const handle2 = server.load(Text,"/demos/assets/text/sample.txt")
+    const handle3 = server.load(Text,"/assets/text/sample2.txt")
+    const handle2 = server.load(Text,"/assets/text/sample.txt")
 
     notDeepStrictEqual(handle1.id(),handle2.id())
   })