diff --git a/Editor.js b/Editor.js
new file mode 100644
index 0000000..95da894
--- /dev/null
+++ b/Editor.js
@@ -0,0 +1,109 @@
+import React, { useEffect, useState, useRef } from 'react';
+import Codemirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+//import 'codemirror/theme/dracula.css';
+import 'codemirror/theme/isotope.css';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/python/python';
+import 'codemirror/addon/edit/closetag';
+import 'codemirror/addon/edit/closebrackets';
+import ACTIONS from '../Actions';
+import Axios from 'axios';
+import toast from 'react-hot-toast';
+import { useParams } from 'react-router-dom';
+import { Button } from 'bootstrap';
+
+
+
+const Editor = ({ socketRef, roomId, onCodeChange }) => {
+    const editorRef = useRef(null);
+
+     const [code, setCode] = useState("");
+    const [output, setOutput] = useState("");
+    
+
+    useEffect(() => {
+        
+
+        async function init() {
+          editorRef.current = Codemirror.fromTextArea(
+                document.getElementById('realtimeEditor'),
+                {
+                    mode: { name: 'javascript', json: true },
+                    mode: { name: 'python', json: true },
+                    theme: 'isotope',
+                    autoCloseTags: true,
+                    autoCloseBrackets: true,
+                    lineNumbers: true,
+
+                }
+            );
+
+            editorRef.current.on('change', (instance, changes) => {
+                const { origin } = changes;
+                const code = instance.getValue();
+                onCodeChange(code);
+                if (origin !== 'setValue') {
+                    socketRef.current.emit(ACTIONS.CODE_CHANGE, {
+                        roomId,
+                        code,
+                    });
+                }
+            });
+            
+        }
+        init();
+    }, []);
+    
+
+    const handleSubmit = async () => {
+        const payload = {
+          language: "cpp",
+          code,
+        };
+
+        try {
+        const { data } = await Axios.post("http://localhost:5000/run", payload)
+        setOutput(data.output);
+        } catch (err) {
+          console.log(err.response);
+        }
+      };
+
+       async function copyCode() {
+        try {
+            await navigator.clipboard.writeText(editorRef.current.getValue());
+            toast.success('Code has been copied to your clipboard');
+        } catch (err) {
+            toast.error('Could not copy the Code');
+            console.error(err);
+        }
+    }
+
+      
+
+    useEffect(() => {
+        if (socketRef.current) {
+            socketRef.current.on(ACTIONS.CODE_CHANGE, ({ code }) => {
+                if (code !== null) {
+                    editorRef.current.setValue(code);
+                }
+            });
+        }
+
+         return () => {
+             socketRef.current.off(ACTIONS.CODE_CHANGE);
+         };
+    }, [socketRef.current]);
+
+    return <div>
+        <div className='copyHeader'>
+            <button className="copyCode" onClick={copyCode}>Copy Code</button>
+        </div>
+        <div>
+    <textarea id="realtimeEditor" value={code} onChange={(e)=>{setCode(e.target.value)}} rows="20" cols="75"></textarea>
+    </div>
+    </div>;
+};
+
+export default Editor;
\ No newline at end of file