diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 2787e8c..b384474 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,4 +1,4 @@
-import { CompilerDiagnostic, importer, Parser } from '@dbml/core';
+import { CompilerDiagnostic, exporter, importer, Parser } from '@dbml/core';
 import { Col, FloatButton, message, Modal, Row, Select, Space } from 'antd';
 import { debounce } from 'lodash-es';
 import { useEffect, useState } from 'react';
@@ -20,26 +20,34 @@ type ImportFormat =
   | 'mssql'
   | 'postgresLegacy';
 
+type ExportFormat = 'dbml' | 'mysql' | 'postgres' | 'json' | 'mssql' | 'oracle';
+
 export default () => {
   const [messageApi, contextHolder] = message.useMessage();
   const parser = new Parser();
+  const initialDatabase = parser.parse(InitCode, 'dbmlv2');
 
   const [code, setCode] = useState(InitCode);
-  let initialDatabase = parser.parse(code, 'dbmlv2');
   const [database, setDatabase] = useState(initialDatabase);
+
   const [importText, setImportText] = useState('');
   const [importFormat, setImportFormat] = useState<ImportFormat>('mysql');
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+  const [exportFormat, setExportFormat] = useState<ExportFormat>('mysql');
+  const [exportText, setExportText] = useState('');
+  const [regen, setRegen] = useState(0);
 
   // editorDidMount
   const editorDidMount = () => {
     setDatabase(initialDatabase);
   };
 
+  // code change
   useEffect(() => {
     try {
       const newDB = parser.parse(code, 'dbmlv2');
-      console.log(newDB);
       setDatabase(newDB);
     } catch (e) {
       if (e as CompilerError) {
@@ -50,7 +58,6 @@ export default () => {
           .join('\n');
 
         messageApi.error(diags);
-        console.error(e);
         // TODO hl to editor
       } else if (e instanceof Error) {
         messageApi.error(`${e.message}`);
@@ -60,17 +67,17 @@ export default () => {
     }
   }, [code]);
 
-  // onchange
-  const onChange = (newValue: any) => {
+  // editor change
+  const editorOnChange = (newValue: any) => {
     setCode(newValue);
   };
-  const debouncedOnChange = debounce(onChange, 500);
+  const debouncedOnChange = debounce(editorOnChange, 500);
 
   const handleImport = () => {
     try {
       const s = importer.import(importText, importFormat);
       setCode(s);
-      setIsModalOpen(false);
+      setIsImportModalOpen(false);
     } catch (e) {
       if (e as CompilerError) {
         const diags = (e as CompilerError).diags
@@ -80,7 +87,6 @@ export default () => {
           .join('\n');
 
         messageApi.error(diags);
-        console.error(e);
       } else if (e instanceof Error) {
         messageApi.error(`${e.message}`);
         return;
@@ -90,9 +96,28 @@ export default () => {
     }
   };
 
-  const handleCancel = () => {
-    setIsModalOpen(false);
-  };
+  useEffect(() => {
+    if (!isExportModalOpen) return;
+
+    try {
+      const s = exporter.export(code, exportFormat);
+      setExportText(s);
+    } catch (e) {
+      if (e as CompilerError) {
+        const diags = (e as CompilerError).diags
+          .map((d: CompilerDiagnostic) => {
+            return `${d.location.start.line}:${d.location.start.column} ${d.message}`;
+          })
+          .join('\n');
+
+        messageApi.error(diags);
+      } else if (e instanceof Error) {
+        messageApi.error(`${e.message}`);
+      } else {
+        throw e;
+      }
+    }
+  }, [exportFormat, regen]);
 
   return (
     <>
@@ -102,20 +127,26 @@ export default () => {
         icon={<ImportOutlined />}
         style={{ left: 24 }}
         onClick={function () {
-          setIsModalOpen(true);
+          setIsImportModalOpen(true);
         }}
       />
       <FloatButton
         tooltip={<div>Export SQL</div>}
         icon={<ExportOutlined />}
         style={{ left: 72 }}
+        onClick={function () {
+          setRegen(regen + 1);
+          setIsExportModalOpen(true);
+        }}
       />
 
       <Modal
         title="Import SQL"
-        open={isModalOpen}
+        open={isImportModalOpen}
         onOk={handleImport}
-        onCancel={handleCancel}
+        onCancel={() => {
+          setIsImportModalOpen(false);
+        }}
       >
         <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
           <Select
@@ -139,6 +170,34 @@ export default () => {
         </Space>
       </Modal>
 
+      <Modal
+        title="Export SQL"
+        open={isExportModalOpen}
+        onOk={() => {
+          setIsExportModalOpen(false);
+        }}
+        onCancel={() => {
+          setIsExportModalOpen(false);
+        }}
+      >
+        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+          <Select
+            defaultValue={exportFormat}
+            style={{ width: 120 }}
+            onChange={(v) => setExportFormat(v)}
+            options={[
+              { value: 'mysql', label: 'MySQL' },
+              { value: 'postgres', label: 'Postgres' },
+              { value: 'dbml', label: 'DBML' },
+              { value: 'mssql', label: 'MSSQL' },
+              { value: 'oracle', label: 'Oracle' },
+              { value: 'json', label: 'JSON' },
+            ]}
+          />
+          <TextArea rows={24} value={exportText} readOnly />
+        </Space>
+      </Modal>
+
       <PageContainer ghost header={{ title: '' }}>
         <Row gutter={[8, 8]}>
           <Col xxl={12} xl={12} lg={12} md={24} sm={24} xs={24}>
@@ -158,7 +217,6 @@ export default () => {
                 }}
                 onChange={debouncedOnChange}
                 editorDidMount={editorDidMount}
-                // handle resize TODO
               />
             </div>
           </Col>