diff --git a/dev/src/components/Sidebar.vue b/dev/src/components/Sidebar.vue
index f1704d3ef..66568d932 100644
--- a/dev/src/components/Sidebar.vue
+++ b/dev/src/components/Sidebar.vue
@@ -9,6 +9,7 @@
         <ElOption label="@vtj/ui" value="ui"></ElOption>
         <ElOption label="@vtj/charts" value="charts"></ElOption>
         <ElOption label="@vtj/core" value="core"></ElOption>
+        <ElOption label="@vtj/renderer" value="renderer"></ElOption>
         <ElOption label="@vtj/designer" value="designer"></ElOption>
         <ElOption label="@vtj/materials" value="materials"></ElOption>
         <ElOption label="debug" value="debug"></ElOption>
diff --git a/dev/src/views/renderer/provider.vue b/dev/src/views/renderer/provider.vue
new file mode 100644
index 000000000..52af3ebd8
--- /dev/null
+++ b/dev/src/views/renderer/provider.vue
@@ -0,0 +1,22 @@
+<template>
+  <component v-if="renderer" :is="renderer"></component>
+</template>
+<script lang="ts" setup>
+  import { ref, getCurrentInstance } from 'vue';
+  import { createProvider, MemoryService, ContextMode } from '@vtj/renderer';
+  const renderer = ref();
+  const instance = getCurrentInstance();
+  const service = new MemoryService();
+  const { provider, onReady } = createProvider({
+    service,
+    mode: ContextMode.Runtime
+  });
+
+  onReady(async () => {
+    const app = instance?.appContext.app;
+    if (app) {
+      app.use(provider);
+      renderer.value = await provider.getRenderComponent('文件id');
+    }
+  });
+</script>