diff --git a/components/jsonEditor.jsx b/components/jsonEditor.jsx
new file mode 100644
index 0000000..383542d
--- /dev/null
+++ b/components/jsonEditor.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import AceEditor from "react-ace";
+
+const JsonEditor = ({value, onValueChange}) => {
+  return (
+    <AceEditor
+      placeholder="Insert your json here"
+      mode="json"
+      theme="github"
+      name="blah2"
+      fontSize={12}
+      showPrintMargin={true}
+      showGutter={true}
+      onChange={onValueChange}
+      highlightActiveLine={true}
+      value={value}
+      setOptions={{
+        enableBasicAutocompletion: false,
+        enableLiveAutocompletion: false,
+        enableSnippets: false,
+        showLineNumbers: true,
+        tabSize: 2,
+      }}/>
+  )
+}
+
+export default JsonEditor
diff --git a/components/writer.jsx b/components/writer.jsx
new file mode 100644
index 0000000..a07bcb8
--- /dev/null
+++ b/components/writer.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import JsonEditor from './jsonEditor.jsx'
+
+const Writer = () => {
+  const [state, setState] = useState({
+    jsonEditorValue: `
+    {
+      "sheets": [
+        {
+          "name":"Test",
+          "orientation":"OrientationLandscape",
+          "items": [
+            {
+              "mode":"table",
+              "starting_cell_coordinates":"C05",
+              "tables": [
+                {
+                  "orientation":"column",
+                  "cells": [
+                    {
+                      "value":"avril",
+                      "style":{}
+                    },
+                    {
+                      "value":"Mai",
+                      "style":{}
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }`,
+  });
+
+  const SendJson = () => {
+     fetch('http://localhost:7900/api/v1/write', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type':'application/json'
+      },
+      body: state.jsonEditorValue
+    })
+    .then((res) => res.blob())
+    .then((blob) => {
+      const url = window.URL.createObjectURL(new Blob([blob]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `jsonToExcel.xlsx`);
+      document.body.appendChild(link);
+      link.click();
+      link.parentNode.removeChild(link);
+    })
+  }
+
+  return (
+    <div>
+      <JsonEditor
+        value={state.jsonEditorValue}
+        onValueChange={(e) => setState({ jsonEditorValue: e })}
+      />
+      <Button
+        type="primary"
+        value={state.jsonEditorValue}
+        onClick={() => SendJson()}>
+          Send Json
+        </Button>
+    </div>
+  )
+}
+
+export default Writer;
diff --git a/package-lock.json b/package-lock.json
index 95f6056..db1b798 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1690,6 +1690,11 @@
         }
       }
     },
+    "ace-builds": {
+      "version": "1.4.11",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.11.tgz",
+      "integrity": "sha512-keACH1d7MvAh72fE/us36WQzOFQPJbHphNpj33pXwVZOM84pTWcdFzIAvngxOGIGLTm7gtUP2eJ4Ku6VaPo8bw=="
+    },
     "acorn": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
@@ -3633,6 +3638,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -6364,6 +6374,16 @@
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -12147,6 +12167,18 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-ace": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-9.1.1.tgz",
+      "integrity": "sha512-dL0w6GwtnS1opsOoWhJaF7rF7xCM+NOEOfePmDfiaeU+EyZQ6nRWDBgyzKsuiB3hyXH3G9D6FX37ur/LKUdKjA==",
+      "requires": {
+        "ace-builds": "^1.4.6",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-app-rewire-antd-theme": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/react-app-rewire-antd-theme/-/react-app-rewire-antd-theme-1.1.4.tgz",
diff --git a/package.json b/package.json
index 8264678..99652bf 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,12 @@
     "@ant-design/dark-theme": "^2.0.1",
     "@ant-design/icons": "^4.1.0",
     "@zeit/next-less": "^1.0.1",
+    "ace-builds": "^1.4.11",
     "antd": "^4.2.4",
     "next": "9.3.6",
     "prop-types": "^15.7.2",
     "react": "16.13.1",
+    "react-ace": "^9.1.1",
     "react-app-rewire-antd-theme": "^1.1.4",
     "react-dom": "16.13.1",
     "styled-components": "^5.1.0",
diff --git a/pages/index.jsx b/pages/index.jsx
index 770e901..04923cf 100755
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -3,6 +3,7 @@ import { Button, Col, Layout, Row, Typography } from 'antd';
 import { ArrowDownOutlined } from '@ant-design/icons';
 import Navbar from '../components/navbar.jsx';
 import Converter from '../components/converter.jsx';
+import Writer from '../components/writer.jsx';
 import Footer from '../components/footer.jsx';
 import PageHead from '../components/_shared/pageHead.jsx';
 import '../styles/index.scss';
@@ -34,6 +35,7 @@ export default function Home() {
           </Layout>
           <Wave />
           <h2 id="tools">Tools</h2>
+          <Writer />
           <Converter />
         </Content>
         <Footer />