diff --git a/packages/demo/package.json b/packages/demo/package.json
index 85c3fe9df..f5185019b 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -39,7 +39,9 @@
     "@alife/theme-lowcode-light": "^0.1.0",
     "compare-versions": "^3.0.1",
     "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react-dom": "^16.8.1",
+    "streamsaver": "^2.0.4",
+    "web-streams-polyfill": "^2.1.1"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.18",
diff --git a/packages/demo/src/editor/components.ts b/packages/demo/src/editor/components.ts
index 8390b622e..6e64a4201 100644
--- a/packages/demo/src/editor/components.ts
+++ b/packages/demo/src/editor/components.ts
@@ -8,6 +8,8 @@ import eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog';
 import sourceEditor from '@ali/lowcode-plugin-source-editor';
 
+import codeout from './plugins/codeout';
+
 export default {
   logo,
   samplePreview,
@@ -18,4 +20,5 @@ export default {
   eventBindDialog,
   variableBindDialog,
   sourceEditor,
-}
+  codeout,
+};
diff --git a/packages/demo/src/editor/config.js b/packages/demo/src/editor/config.js
index 153e58de1..d9b08732f 100644
--- a/packages/demo/src/editor/config.js
+++ b/packages/demo/src/editor/config.js
@@ -37,6 +37,14 @@ export default {
           width: 64,
         },
       },
+      {
+        pluginKey: 'codeout',
+        type: 'Custom',
+        props: {
+          align: 'right',
+          width: 64,
+        },
+      },
     ],
     leftArea: [
       {
diff --git a/packages/demo/src/editor/plugins/codeout.scss b/packages/demo/src/editor/plugins/codeout.scss
new file mode 100644
index 000000000..f6ccaaa64
--- /dev/null
+++ b/packages/demo/src/editor/plugins/codeout.scss
@@ -0,0 +1,3 @@
+.lowcode-plugin-codeout {
+  padding: 10px 4px;
+}
diff --git a/packages/demo/src/editor/plugins/codeout.tsx b/packages/demo/src/editor/plugins/codeout.tsx
new file mode 100644
index 000000000..d537961fe
--- /dev/null
+++ b/packages/demo/src/editor/plugins/codeout.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import React from 'react';
+import { Button } from '@alifd/next';
+import { PluginProps } from '@ali/lowcode-types';
+import { Designer } from '@ali/lowcode-designer';
+import streamSaver from 'streamsaver';
+
+import './codeout.scss';
+
+const CODEOUT_SERVICE_HOST = '30.8.52.239:3000';
+
+const Codeout = ({ editor }: PluginProps) => {
+  const handleClick = () => {
+    const designer = editor.get(Designer);
+    if (designer) {
+      const fullSchema = {
+        ...designer.schema,
+        config: {
+          historyMode: 'hash',
+          targetRootID: 'J_Container',
+        },
+        meta: {
+          name: 'demoproject',
+        },
+      };
+
+      console.info('codeout schema:', fullSchema);
+      // localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema));
+      fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
+        method: 'POST',
+        body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
+        headers: new Headers({
+          'Content-Type': 'application/json',
+        }),
+        mode: 'cors',
+      }).then((res) => {
+        console.log(res);
+
+        const fileStream = streamSaver.createWriteStream('demoProject.zip');
+        res.body.pipeTo(fileStream).then(
+          () => {
+            console.log('success');
+          },
+          (err) => {
+            console.log(err);
+          },
+        );
+      });
+    }
+  };
+
+  return (
+    <div className="lowcode-plugin-codeout">
+      <Button type="primary" onClick={handleClick}>
+        出码
+      </Button>
+    </div>
+  );
+};
+
+export default Codeout;