diff --git a/packages/plugin-sample-preview/demo/usage.md b/packages/plugin-sample-preview/demo/usage.md
new file mode 100644
index 000000000..d053100a0
--- /dev/null
+++ b/packages/plugin-sample-preview/demo/usage.md
@@ -0,0 +1,24 @@
+---
+title: 基本使用
+order: 1
+---
+
+````jsx
+import React, { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import SamplePreview from '@ali/lowcode-plugin-sample-preview';
+
+class Demo extends PureComponent {
+  render() {
+    return (
+      <div>
+         <SamplePreview />
+      </div>
+    )
+  }
+}
+
+ReactDOM.render((
+  <Demo />
+), mountNode);
+````
\ No newline at end of file
diff --git a/packages/plugin-sample-preview/package.json b/packages/plugin-sample-preview/package.json
index 66edd7417..e02b421b7 100644
--- a/packages/plugin-sample-preview/package.json
+++ b/packages/plugin-sample-preview/package.json
@@ -9,6 +9,7 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "scripts": {
+    "start": "build-scripts start",
     "build": "build-scripts build --skip-demo",
     "test": "ava",
     "test:snapshot": "ava --update-snapshots"
@@ -29,7 +30,8 @@
     "@types/react-dom": "^16.9.4",
     "build-plugin-component": "^0.2.11",
     "build-plugin-fusion": "^0.1.0",
-    "build-plugin-moment-locales": "^0.1.0"
+    "build-plugin-moment-locales": "^0.1.0",
+    "@ali/lowcode-react-renderer": "^0.8.0"
   },
   "publishConfig": {
     "registry": "https://registry.npm.alibaba-inc.com"
diff --git a/packages/plugin-sample-preview/src/index.tsx b/packages/plugin-sample-preview/src/index.tsx
index df10c5466..c6c6c38c5 100644
--- a/packages/plugin-sample-preview/src/index.tsx
+++ b/packages/plugin-sample-preview/src/index.tsx
@@ -1,35 +1,50 @@
-import React from 'react';
-import { Button } from '@alifd/next';
+import React, { useState } from 'react';
+import { Button, Dialog } from '@alifd/next';
 import { PluginProps } from '@ali/lowcode-types';
 import { Designer } from '@ali/lowcode-designer';
+import ReactRenderer from '@ali/lowcode-react-renderer';
 import './index.scss';
 
 const SamplePreview = ({ editor }: PluginProps) => {
-  const handleClick = () => {
+  const [data, setData] = useState({});
+  const [visible, setVisible] = useState(false);
+  async function handleClick() {
+    if (!editor) {
+      return;
+    }
     const designer = editor.get(Designer);
     if (designer) {
       console.info('save schema:', designer.schema);
-      localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema));
-      fetch('http://30.5.157.206:3000/legao/save.json', {
-        method: 'POST',
-        body: JSON.stringify(designer.schema),
-        headers: new Headers({
-          'Content-Type': 'application/json',
-        }),
-        mode: 'cors',
-      })
-        .then((res) => res.json())
-        .then(() => {
-          window.open('http://30.5.157.206:3333/', 'preview');
-        });
+
+      const { components } = await editor.get('assets');
+      setData({
+        schema: designer.schema,
+        components,
+      });
+      setVisible(true);
     }
   };
 
+  function handleClose() {
+    setVisible(false);
+  }
+
+  const { schema, components } = data;
   return (
     <div className="lowcode-plugin-sample-preview">
       <Button type="primary" onClick={handleClick}>
         预览
       </Button>
+      <Dialog
+        visible={visible}
+        footer={false}
+        onClose={handleClose}
+      >
+        {visible && <ReactRenderer 
+          schema={schema.componentsTree[0]}
+          components={components}
+        />}
+      </Dialog>
     </div>
   );
 };