diff --git a/example/customRenderer/App.js b/example/customRenderer/App.js
new file mode 100644
index 0000000..e772870
--- /dev/null
+++ b/example/customRenderer/App.js
@@ -0,0 +1,33 @@
+import { h, ref } from "../../lib/mini-vue.esm.js";
+import { game } from "./game.js";
+
+export default {
+ name: "App",
+ setup() {
+ // 通过 ticker 来去更新 x 的值
+
+ const x = ref(0);
+ const y = ref(0);
+ let dir = 1;
+ const speed = 2;
+
+ game.ticker.add(() => {
+ if (x.value > 400) {
+ dir = -1;
+ } else if (x.value < 0) {
+ dir = 1;
+ }
+
+ x.value += speed * dir;
+ });
+
+ return {
+ x,
+ y,
+ };
+ },
+
+ render() {
+ return h("rect", { x: this.x, y: this.y });
+ },
+};
diff --git a/example/customRenderer/game.js b/example/customRenderer/game.js
new file mode 100644
index 0000000..0c1f09c
--- /dev/null
+++ b/example/customRenderer/game.js
@@ -0,0 +1,10 @@
+export const game = new PIXI.Application({
+ width: 500,
+ height: 500,
+});
+
+document.body.append(game.view);
+
+export function createRootContainer() {
+ return game.stage;
+}
diff --git a/example/customRenderer/index.html b/example/customRenderer/index.html
new file mode 100644
index 0000000..f5d2703
--- /dev/null
+++ b/example/customRenderer/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
diff --git a/example/customRenderer/main.js b/example/customRenderer/main.js
new file mode 100644
index 0000000..8d399f3
--- /dev/null
+++ b/example/customRenderer/main.js
@@ -0,0 +1,5 @@
+import App from "./App.js";
+import { createApp } from "./renderer.js";
+import { createRootContainer } from "./game.js";
+
+createApp(App).mount(createRootContainer());
diff --git a/example/customRenderer/renderer.js b/example/customRenderer/renderer.js
new file mode 100644
index 0000000..ea6aced
--- /dev/null
+++ b/example/customRenderer/renderer.js
@@ -0,0 +1,25 @@
+import { createRenderer } from "../../lib/mini-vue.esm.js";
+
+// 给基于 pixi.js 的渲染函数
+const renderer = createRenderer({
+ createElement(type) {
+ const rect = new PIXI.Graphics();
+ rect.beginFill(0xff0000);
+ rect.drawRect(0, 0, 100, 100);
+ rect.endFill();
+
+ return rect;
+ },
+
+ patchProp(el, key, prevValue, nextValue) {
+ el[key] = nextValue;
+ },
+
+ insert(el, parent) {
+ parent.addChild(el);
+ },
+});
+
+export function createApp(rootComponent) {
+ return renderer.createApp(rootComponent);
+}