diff --git a/site/plugin-tdoc/demo.js b/site/plugin-tdoc/demo.js
index e560adffe..e6a58c6af 100644
--- a/site/plugin-tdoc/demo.js
+++ b/site/plugin-tdoc/demo.js
@@ -19,8 +19,8 @@ export default function renderDemo(md, container) {
         const tpl = `
           <td-doc-demo demo-name="${demoName}" languages="OptionsAPI,CompositionAPI" :data-OptionsAPI="${demoCodeDefName}" :data-CompositionAPI="${demoCompositionCodeDefName}" language="markup">
             <div slot="action">
-              <Stackblitz demo-name="${demoName}" component-name="${componentName}" />
-              <Codesandbox demo-name="${demoName}" component-name="${componentName}" />
+              <Stackblitz demo-name="${demoName}" component-name="${componentName.trim()}" />
+              <Codesandbox demo-name="${demoName}" component-name="${componentName.trim()}" />
             </div>
             <div class="tdesign-demo-item__body">
               <${demoDefName} />
diff --git a/site/src/components/codesandbox/content.js b/site/src/components/codesandbox/content.js
index d9acbade5..c7d41bfc5 100644
--- a/site/src/components/codesandbox/content.js
+++ b/site/src/components/codesandbox/content.js
@@ -1,9 +1,6 @@
 import orgPkg from '../../../../package.json';
 
-export const htmlContent = `
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-`;
+export const htmlContent = `<div id="app"></div>`;
 
 export const mainJsContent = `
   import Vue from 'vue';
@@ -45,86 +42,32 @@ export const styleContent = `
   }
 `;
 
-export const stackblitzRc = `
-  {
-    "installDependencies": false,
-    "startCommand": "turbo && turbo dev"
-  }
-`;
-
-export const viteConfigContent = `
-  import { defineConfig } from 'vite';
-  import { createVuePlugin } from 'vite-plugin-vue2';
-
-  export default defineConfig({
-    plugins: [
-      createVuePlugin({ jsx: true }),
-    ],
-  });
-`;
-
-export const viteConfigContentForComposition = `
-  import { defineConfig } from 'vite';
-  import vue from '@vitejs/plugin-vue2'
-  import vueJsx from '@vitejs/plugin-vue2-jsx';
-
-  export default defineConfig({
-    plugins: [
-      vue(),
-      vueJsx()
-    ],
-  });
-`;
-
-export const packageJSONContent = JSON.stringify(
-  {
-    name: 'tdesign-vue-demo',
-    version: '0.0.0',
-    private: true,
-    scripts: {
-      dev: 'vite',
-      build: 'vite build',
-      serve: 'vite preview',
-    },
+export const packageJSONContent = (name) => {
+  return {
+    name: name,
     dependencies: {
       'tdesign-vue': orgPkg.version,
       'tdesign-icons-vue': orgPkg.dependencies['tdesign-icons-vue'],
       vue: orgPkg.devDependencies.vue,
     },
     devDependencies: {
-      vite: orgPkg.devDependencies.vite,
       less: orgPkg.devDependencies.less,
-      'vite-plugin-vue2': orgPkg.devDependencies['vite-plugin-vue2'],
+      '@vue/cli-plugin-babel': '~4.5.0',
       'vue-template-compiler': orgPkg.devDependencies['vue-template-compiler'],
     },
-  },
-  null,
-  2,
-);
+  };
+};
 
-export const packageJSONContentForComposition = JSON.stringify(
-  {
-    name: 'tdesign-vue-demo',
-    version: '0.0.0',
-    private: true,
-    scripts: {
-      dev: 'vite',
-      build: 'vite build',
-      serve: 'vite preview',
-    },
+export const packageJSONContentForComposition = (name) => {
+  return {
+    name: name,
     dependencies: {
       'tdesign-vue': orgPkg.version + '-naruto',
       'tdesign-icons-vue': orgPkg.dependencies['tdesign-icons-vue'],
       vue: '2.7.14',
     },
     devDependencies: {
-      vite: '^2.9.6',
       less: orgPkg.devDependencies.less,
-      '@vitejs/plugin-vue2': '^1.1.2',
-      'vue-template-compiler': '2.7.14',
-      '@vitejs/plugin-vue2-jsx': '^1.1.0',
     },
-  },
-  null,
-  2,
-);
+  };
+};
diff --git a/site/src/components/codesandbox/index.vue b/site/src/components/codesandbox/index.vue
index ef05160c9..5a719b551 100644
--- a/site/src/components/codesandbox/index.vue
+++ b/site/src/components/codesandbox/index.vue
@@ -25,9 +25,7 @@ import {
   mainJsContent,
   styleContent,
   packageJSONContent,
-  viteConfigContent,
   packageJSONContentForComposition,
-  viteConfigContentForComposition,
 } from './content';
 
 export default {
@@ -44,10 +42,13 @@ export default {
     onRunOnline() {
       const tdDocDemoDom = document.querySelector(`td-doc-demo[demo-name='${this.demoName}']`);
       const code = tdDocDemoDom.currentRenderCode;
-
+      const codeSandboxTitle = `tdesign-vue-${this.componentName}-${this.demoName}-demo`;
       const currentLangIndex = tdDocDemoDom.currentLangIndex;
-      const pkgJson = currentLangIndex === 0 ? packageJSONContent : packageJSONContentForComposition;
-      const viteConfig = currentLangIndex === 0 ? viteConfigContent : viteConfigContentForComposition;
+      const pkgJson =
+        currentLangIndex === 0
+          ? packageJSONContent(codeSandboxTitle)
+          : packageJSONContentForComposition(codeSandboxTitle);
+
       this.loading = true;
 
       fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
@@ -61,9 +62,6 @@ export default {
             'package.json': {
               content: pkgJson,
             },
-            'vite.config.js': {
-              content: viteConfig,
-            },
             'index.html': {
               content: htmlContent,
             },