diff --git a/common/play/index.js b/common/play/index.js
index a536ea3..40b3233 100644
--- a/common/play/index.js
+++ b/common/play/index.js
@@ -1,18 +1,58 @@
 import { loading } from 'dls-graphics'
+import sdk from '@stackblitz/sdk'
 /* eslint-disable import/no-webpack-loader-syntax */
-import meta from '!!raw-loader!./templates/package.raw'
-import prettier from '!!raw-loader!./templates/.prettierrc.raw'
-import index from '!!raw-loader!./templates/index.raw.html'
-import landing from '!!raw-loader!./templates/landing.raw.html'
-import main from '!!raw-loader!./templates/main.raw.js'
-import app from '!!raw-loader!./templates/App.raw.vue'
+import packageCodeSandbox from '!!raw-loader!./templates/package.codesandbox'
+import packageStackBlitz from '!!raw-loader!./templates/package.stackblitz'
+import rcStackBlitz from '!!raw-loader!./templates/.stackblitzrc'
+import vueConfig from '!!raw-loader!./templates/vue.config.js'
+import prettier from '!!raw-loader!./templates/.prettierrc'
+import index from '!!raw-loader!./templates/index.html'
+import landing from '!!raw-loader!./templates/landing.html'
+import main from '!!raw-loader!./templates/main.js'
+import app from '!!raw-loader!./templates/App.vue'
 /* eslint-enable import/no-webpack-loader-syntax */
 
+const PLAYGROUND_FILES = {
+  CodeSandbox: {
+    'package.json': packageCodeSandbox,
+    '.prettierrc': prettier,
+    'public/index.html': index,
+    'src/main.js': main,
+    'src/App.vue': app
+  },
+  StackBlitz: {
+    'package.json': packageStackBlitz,
+    '.prettierrc': prettier,
+    'public/index.html': index,
+    'src/main.js': main,
+    'src/App.vue': app,
+    '.stackblitzrc': rcStackBlitz,
+    'vue.config.js': vueConfig
+  }
+}
+
+const PLAY_IMPLS = {
+  CodeSandbox: createCodeSandbox,
+  StackBlitz: createStackBlitz
+}
+
+export function play (sfc, { locale, vendor }) {
+  PLAY_IMPLS[vendor](sfc, { locale })
+}
+
 const API_CSB = 'https://codesandbox.io/api/v1/sandboxes/define'
 
 export function createCodeSandbox (sfc, { locale }) {
   const win = window.open()
   win.document.write(landing.replace('{{loading}}', genLoading()))
+
+  const files = Object.entries(
+    getPlaygroundFiles({ locale, vendor: 'CodeSandbox' })
+  ).reduce((acc, [key, value]) => {
+    acc[key] = { content: value }
+    return acc
+  }, {})
+
   fetch(`${API_CSB}?json=1`, {
     method: 'POST',
     headers: {
@@ -21,9 +61,9 @@ export function createCodeSandbox (sfc, { locale }) {
     },
     body: JSON.stringify({
       files: {
-        ...getTemplateFiles({ locale }),
+        ...files,
         'src/Demo.vue': {
-          content: sfc
+          content: sfc.replace(/from 'veui'/g, `from 'veui/dist/veui.esm'`)
         }
       }
     })
@@ -34,24 +74,31 @@ export function createCodeSandbox (sfc, { locale }) {
     })
 }
 
-function getTemplateFiles ({ locale }) {
-  return {
-    'package.json': {
-      content: meta
+export function createStackBlitz (sfc, { locale }) {
+  sdk.openProject(
+    {
+      title: 'VEUI Playground',
+      files: {
+        ...getPlaygroundFiles({ locale, vendor: 'StackBlitz' }),
+        'src/Demo.vue': sfc
+      },
+      description: 'Online playground for VEUI.',
+      template: 'node'
     },
-    '.prettierrc': {
-      content: prettier
-    },
-    'public/index.html': {
-      content: index
-    },
-    'src/main.js': {
-      content: main.replace('{{locale}}', locale)
-    },
-    'src/App.vue': {
-      content: app
+    {
+      openFile: 'src/Demo.vue'
     }
-  }
+  )
+}
+
+function getPlaygroundFiles ({ locale, vendor }) {
+  return Object.entries(PLAYGROUND_FILES[vendor]).reduce(
+    (acc, [key, value]) => {
+      acc[key] = value.replace('{{locale}}', locale)
+      return acc
+    },
+    {}
+  )
 }
 
 function genLoading () {
diff --git a/common/play/templates/.prettierrc.raw b/common/play/templates/.prettierrc
similarity index 100%
rename from common/play/templates/.prettierrc.raw
rename to common/play/templates/.prettierrc
diff --git a/common/play/templates/.stackblitzrc b/common/play/templates/.stackblitzrc
new file mode 100644
index 0000000..a6e32d6
--- /dev/null
+++ b/common/play/templates/.stackblitzrc
@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npx vue-cli-service serve"
+}
diff --git a/common/play/templates/App.raw.vue b/common/play/templates/App.vue
similarity index 100%
rename from common/play/templates/App.raw.vue
rename to common/play/templates/App.vue
diff --git a/common/play/templates/index.raw.html b/common/play/templates/index.html
similarity index 90%
rename from common/play/templates/index.raw.html
rename to common/play/templates/index.html
index 65413b2..5af9f94 100644
--- a/common/play/templates/index.raw.html
+++ b/common/play/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-Hans">
+<html lang="{{ locale }}">
 <head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
diff --git a/common/play/templates/landing.raw.html b/common/play/templates/landing.html
similarity index 100%
rename from common/play/templates/landing.raw.html
rename to common/play/templates/landing.html
diff --git a/common/play/templates/main.raw.js b/common/play/templates/main.js
similarity index 100%
rename from common/play/templates/main.raw.js
rename to common/play/templates/main.js
diff --git a/common/play/templates/package.raw b/common/play/templates/package.codesandbox
similarity index 100%
rename from common/play/templates/package.raw
rename to common/play/templates/package.codesandbox
diff --git a/common/play/templates/package.stackblitz b/common/play/templates/package.stackblitz
new file mode 100644
index 0000000..ce244e2
--- /dev/null
+++ b/common/play/templates/package.stackblitz
@@ -0,0 +1,12 @@
+{
+  "dependencies": {
+    "veui": "^2.1.3",
+    "veui-theme-dls": "^2.1.3",
+    "veui-theme-dls-icons": "^2.1.3",
+    "vue": "^2.6.14"
+  },
+  "devDependencies": {
+    "@vue/cli-service": "~5.0.0-beta.4",
+    "vue-template-compiler": "^2.6.14"
+  }
+}
diff --git a/common/play/templates/vue.config.js b/common/play/templates/vue.config.js
new file mode 100644
index 0000000..782276c
--- /dev/null
+++ b/common/play/templates/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  chainWebpack (config) {
+    config.resolve.alias.set('veui$', 'veui/dist/veui.esm')
+  }
+}
diff --git a/components/OneDemo.vue b/components/OneDemo.vue
index 27fa578..f0b5d32 100644
--- a/components/OneDemo.vue
+++ b/components/OneDemo.vue
@@ -22,13 +22,21 @@
   </section>
   <section class="actions">
     <veui-button
-      v-tooltip="t('playInCsb')"
+      v-tooltip="t('playInCodeSandbox')"
       ui="icon"
-      @click="play"
+      @click="play('CodeSandbox')"
     >
       <veui-icon
-        scale="0.8"
-        name="one-demo-csb"
+        name="one-demo-codesandbox"
+      />
+    </veui-button>
+    <veui-button
+      v-tooltip="t('playInStackBlitz')"
+      ui="icon"
+      @click="play('StackBlitz')"
+    >
+      <veui-icon
+        name="one-demo-stackblitz"
       />
     </veui-button>
     <veui-button
@@ -37,6 +45,7 @@
       @click="localExpanded = !localExpanded"
     >
       <veui-icon
+        scale="1.2"
         :name="localExpanded ? 'one-demo-code-off' : 'one-demo-code'"
       />
     </veui-button>
@@ -58,7 +67,7 @@ import tooltip from 'veui/directives/tooltip'
 import i18n from 'veui/mixins/i18n'
 import { BrowserWindow } from 'vue-windows'
 import { getLocale } from '../common/i18n'
-import { createCodeSandbox } from '../common/play'
+import { play } from '../common/play'
 
 export default {
   name: 'one-demo',
@@ -98,17 +107,13 @@ export default {
     style.height = '0'
   },
   methods: {
-    play () {
+    play (vendor) {
       let locale = getLocale(this.$route.path)
-      createCodeSandbox(preprocess(this.$refs.source.textContent), { locale })
+      play(this.$refs.source.textContent, { locale, vendor })
     }
   }
 }
 
-function preprocess (code) {
-  return code.replace(/from 'veui'/g, `from 'veui/dist/veui.esm'`)
-}
-
 Icon.register({
   'one-demo-code': {
     width: 24,
@@ -120,10 +125,15 @@ Icon.register({
     height: 24,
     d: 'M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z'
   },
-  'one-demo-csb': {
+  'one-demo-codesandbox': {
     width: 32,
     height: 32,
     d: 'M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z'
+  },
+  'one-demo-stackblitz': {
+    width: 28,
+    height: 28,
+    d: 'M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z'
   }
 })
 </script>
@@ -180,5 +190,5 @@ Icon.register({
     font-size 18px
 
   .veui-button + .veui-button
-    margin-left 8px
+    margin-left 12px
 </style>
diff --git a/package-lock.json b/package-lock.json
index f284919..bd22ac8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4933,6 +4933,12 @@
       "integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==",
       "dev": true
     },
+    "@stackblitz/sdk": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.5.2.tgz",
+      "integrity": "sha512-rV8HJb7pti8UBROgVUbxc6f1DGxuUpaGCdQvxvHcGecwqqVMB4XAOzeGuk4HkQLmyCrH/9qTbNA6ch4FwQZRDQ==",
+      "dev": true
+    },
     "@stylelint/postcss-css-in-js": {
       "version": "0.37.2",
       "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz",
diff --git a/package.json b/package.json
index 3d81fb9..84c00de 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "devDependencies": {
     "@docsearch/css": "^3.0.0-alpha.39",
     "@docsearch/js": "^3.0.0-alpha.39",
+    "@stackblitz/sdk": "^1.5.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-veui": "^2.1.0",
diff --git a/plugins/l10n.js b/plugins/l10n.js
index 9d2fadd..46b92f1 100644
--- a/plugins/l10n.js
+++ b/plugins/l10n.js
@@ -5,7 +5,8 @@ i18n.register(
   {
     showCode: '显示代码',
     hideCode: '隐藏代码',
-    playInCsb: '在 CodeSandbox 中打开'
+    playInCodeSandbox: '在 CodeSandbox 中打开',
+    playInStackBlitz: '在 StackBlitz 中打开'
   },
   {
     ns: 'onedemo'
@@ -17,7 +18,8 @@ i18n.register(
   {
     showCode: 'Show code',
     hideCode: 'Hide code',
-    playInCsb: 'Open in CodeSandbox'
+    playInCodeSandbox: 'Open in CodeSandbox',
+    playInStackBlitz: 'Open in StackBlitz'
   },
   {
     ns: 'onedemo'