diff --git a/docs/content/guide/basic/demos/demo-text-group.vue b/docs/content/guide/basic/demos/demo-text-group.vue
new file mode 100644
index 000000000..33186375e
--- /dev/null
+++ b/docs/content/guide/basic/demos/demo-text-group.vue
@@ -0,0 +1,46 @@
+<template>
+  <canvas ref="canvas" width="600" height="300"></canvas>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import * as nc from 'newcar'
+
+const canvas = ref<HTMLCanvasElement>()
+
+onMounted(async () => {
+  await nc.useFont('https://storage.googleapis.com/skia-cdn/misc/Roboto-Regular.ttf')
+  const engine = await new nc.CarEngine()
+    .init('https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm')
+  const app = engine.createApp(canvas.value!).setBackgroundColor('transparent')
+
+  const scene = nc.createScene(
+    new nc.TextGroup([
+      new nc.Text('Hello', {
+        x: 100,
+        y: 100,
+        style: {
+          fontSize: 50,
+          fill: true
+        }
+      }),
+      new nc.Text(' world!', {
+        x: 100,
+        y: 150,
+        style: {
+          fontSize: 20,
+          fill: true,
+        }
+      }),
+      // ...
+    ], {
+      width: 600,
+      x: 200,
+      y: 200
+    })
+  )
+
+  app.checkout(scene)
+  app.play()
+})
+</script>
\ No newline at end of file
diff --git a/docs/content/guide/basic/demos/demo-text.vue b/docs/content/guide/basic/demos/demo-text.vue
new file mode 100644
index 000000000..eec89dbf3
--- /dev/null
+++ b/docs/content/guide/basic/demos/demo-text.vue
@@ -0,0 +1,31 @@
+<template>
+  <canvas ref="canvas" width="600" height="300"></canvas>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import * as nc from 'newcar'
+
+const canvas = ref<HTMLCanvasElement>()
+
+onMounted(async () => {
+  await nc.useFont('https://storage.googleapis.com/skia-cdn/misc/Roboto-Regular.ttf')
+  const engine = await new nc.CarEngine()
+    .init('https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm')
+  const app = engine.createApp(canvas.value!).setBackgroundColor('transparent')
+
+  const scene = nc.createScene(
+    new nc.Text('Hello world!', {
+      x: 100,
+      y: 100,
+      style: {
+        fillColor: nc.Color.parse('red'),
+        fontSize: 50
+      }
+    })
+  )
+
+  app.checkout(scene)
+  app.play()
+})
+</script>
\ No newline at end of file
diff --git a/docs/content/guide/basic/demos/font.ttf b/docs/content/guide/basic/demos/font.ttf
new file mode 100644
index 000000000..0e58508a6
Binary files /dev/null and b/docs/content/guide/basic/demos/font.ttf differ
diff --git a/docs/content/guide/basic/text.md b/docs/content/guide/basic/text.md
index 9564e2a04..2c6c2ede3 100644
--- a/docs/content/guide/basic/text.md
+++ b/docs/content/guide/basic/text.md
@@ -2,6 +2,11 @@
 title: Text and TextGroup
 ---
 
+<script setup lang="ts">
+import { default as DemoText } from './demos/demo-text.vue'
+import { default as DemoTextGroup } from './demos/demo-text-group.vue'
+</script>
+
 # `Text` and `TextGroup`
 
 ## `Text`
@@ -22,7 +27,6 @@ widget.add(
     x: 100,
     y: 100,
     style: {
-      color: nc.Color.parse('skyblue'),
       fontSize: 50
     },
     width: 500
@@ -33,7 +37,7 @@ widget.add(
 
 ```
 
-![The demonstration of the Text component, the sky blue "Hello world!"](/basic/text-and-textgroup-01.png)
+<DemoText/>
 
 ## `TextGroup`
 
@@ -50,16 +54,18 @@ widget.add(
       x: 100,
       y: 100,
       style: {
-        color: nc.Color.parse('skyblue'),
-        fontSize: 50
+        fontSize: 50,
+        fill: false,
+        border: true,
       }
     }),
     new nc.Text(' world!', {
       x: 100,
       y: 150,
       style: {
-        color: nc.Color.parse('red'),
-        fontSize: 30
+        fontSize: 30,
+        fill: false,
+        border: true,
       }
     }),
       // ...
@@ -74,7 +80,7 @@ widget.add(
 
 ```
 
-![The demonstration of the TextGroup component, the sky blue "Hello" and the red " world!"](/basic/text-and-textgroup-02.png)
+<DemoTextGroup/>
 
 ## See Also: