diff --git a/docs/.vitepress/theme/components/Playground.vue b/docs/.vitepress/theme/components/Playground.vue
new file mode 100644
index 00000000..130e4e5b
--- /dev/null
+++ b/docs/.vitepress/theme/components/Playground.vue
@@ -0,0 +1,15 @@
+<template>
+    <iframe :src="path" loading="lazy" scrolling="no" style="border:0;height:760px;max-width:800px;width:100%"> 
+    </iframe>
+</template>
+
+<script>
+export default {
+    props: ['id'],
+    computed: {
+        path() {
+            return `https://playground.rpgjs.dev/sandbox/${this.id}`
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 0f2bc2f1..91f82399 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,10 +1,10 @@
 import { h } from 'vue'
-import { VPTheme } from '@vue/theme'
 import DefaultTheme from 'vitepress/theme'
 import PathTo from './components/PathTo.vue'
 import Video from './components/Video.vue'
 import Type from './components/Type.vue'
 import PreferenceSwitch from './components/PreferenceSwitch.vue'
+import Playground from './components/Playground.vue'
 
 export default {
   extends: DefaultTheme,
@@ -15,6 +15,7 @@ export default {
     })
   },
   enhanceApp(ctx) {
+    ctx.app.component('Playground', Playground)
     ctx.app.component('PathTo', PathTo)
     ctx.app.component('Video', Video)
     ctx.app.component('Type', Type)
diff --git a/docs/gui/tooltip.md b/docs/gui/tooltip.md
index 6676c03e..8e091f77 100644
--- a/docs/gui/tooltip.md
+++ b/docs/gui/tooltip.md
@@ -5,6 +5,10 @@
 - Know how to create a GUI and add it in the module
 - Be comfortable with VueJS
 
+## Preview
+
+<Playground id="232" />
+
 ## Goal
 
 This is very useful to make more advanced interactions on a sprite. For example, display a tooltip or additional interactive displays.
diff --git a/docs/guide/create-event.md b/docs/guide/create-event.md
index 2d0b7fd1..892cb124 100644
--- a/docs/guide/create-event.md
+++ b/docs/guide/create-event.md
@@ -134,6 +134,8 @@ export class CharaEvent extends RpgEvent {
 > You have to know that there are several commands, here we just display a text. In fact, it opens a predefined GUI.
 > We use `async/await` because we wait for the player to press Enter after the dialog to continue the other instructions.
 
+<Playground id="225" />
+
 ## Example 2: Example: Earn gold
 
 Here is a more complete example. It shows a small scenario. It is important to know that this event will be seen by everyone. However, the action will be independent to each player :
@@ -239,4 +241,7 @@ export class DoorEvent extends RpgEvent {
 
 With, `onChanges`, a listening is done on a potential change. You can then update the door graphics according to the state of the `LEVER` variable
 
-> Note that in MMORPG mode, everyone sees the change of the door graphics even if the variable is changed only for the player. Switch the event to Scenario mode if you want to make a single event per player
\ No newline at end of file
+> Note that in MMORPG mode, everyone sees the change of the door graphics even if the variable is changed only for the player. Switch the event to Scenario mode if you want to make a single event per player
+
+
+<Playground id="228" />
\ No newline at end of file
diff --git a/docs/guide/create-gui.md b/docs/guide/create-gui.md
index 71e200df..ff7da003 100644
--- a/docs/guide/create-gui.md
+++ b/docs/guide/create-gui.md
@@ -9,12 +9,11 @@
 1. Each user interface uses the DOM and not HTML5 Canvas. Why not? Because it is easier to create interfaces with components than with canvas graphics.
 2. Each GUI has an identifier. Predefined identifiers exist to manage existing GUI (dialog, main menu, shop, etc.).
 
-## Goal
+## Preview
 
 We want to create a life bar. It will remain in hauy on the left side of the screen.
 
-![Hud](/assets/hud.png)
-
+<Playground id="222" />
 
 ## Component
 
@@ -125,15 +124,17 @@ export default {
 <PathTo to="playerFile" />
 
 ```ts
-import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server'
+import { RpgPlayer, type RpgPlayerHooks } from '@rpgjs/server'
  
-export const player: RpgPlayerHooks = {
+const player: RpgPlayerHooks = {
     onJoinMap(player: RpgPlayer) {
         player.gui('my-tooltip').open()
         player.showAttachedGui()
 		// you can hide with player.hideAttachedGui()
     }
 }
+
+export default player
 ```
 
 We open the `my-tooltip` GUI and display the player's tooltip 
diff --git a/docs/guide/create-world-maps.md b/docs/guide/create-world-maps.md
index d9eff03d..2d23ed20 100644
--- a/docs/guide/create-world-maps.md
+++ b/docs/guide/create-world-maps.md
@@ -11,6 +11,10 @@ The interest is to teleport the player on an adjacent map on consistent X and Y
 
 <Video src="/assets/rpgjs_world.mp4" /> 
 
+## Preview
+
+<Playground id="224" />
+
 ## Preparing the world in the editor
 
 Click on `World > New World` and add a file ending with the extension `.world` in <Path to="tmxDir" />