diff --git a/js/export.js b/js/export.js
deleted file mode 100644
index f7e7e31..0000000
--- a/js/export.js
+++ /dev/null
@@ -1,65 +0,0 @@
-function exportToJson() {
-    const _states = JSON.parse(JSON.stringify(states));
-    const _connections = JSON.parse(JSON.stringify(connections)).map((conn, index) => {
-        conn.type = connections[index].constructor.name;
-        return conn;
-    });
-    const data = {
-        states: _states,
-        connections: _connections.filter(conn => conn.type === 'Connection').map(conn => {
-            conn.stateA = conn.stateA.id;
-            conn.stateB = conn.stateB.id;
-            return conn;
-        }),
-        startConnections: _connections.filter(conn => conn.type === 'StartConnection').map(conn => {
-            conn.state = conn.state.id;
-            return conn;
-        }),
-        selfConnections: _connections.filter(conn => conn.type === 'SelfConnection').map(conn => {
-            conn.state = conn.state.id;
-            return conn;
-        }),
-        settings,
-    };
-    return JSON.stringify(data);
-}
-
-function importFromJson(json) {
-    const data = JSON.parse(json);
-
-    states.push(...data.states.map(state => Object.setPrototypeOf(state, State.prototype)));
-    connections.push(...data.connections.map(conn => Object.setPrototypeOf(conn, Connection.prototype)).map(conn => {
-        conn.stateA = states.find(state => state.id === conn.stateA);
-        conn.stateB = states.find(state => state.id === conn.stateB);
-        return conn;
-    }));
-    connections.push(...data.startConnections.map(conn => Object.setPrototypeOf(conn, StartConnection.prototype)).map(conn => {
-        conn.state = states.find(state => state.id === conn.state);
-        return conn;
-    }));
-    connections.push(...data.selfConnections.map(conn => Object.setPrototypeOf(conn, SelfConnection.prototype)).map(conn => {
-        conn.state = states.find(state => state.id === conn.state);
-        return conn;
-    }));
-}
-
-function exportToFile() {
-    const name = 'placeholder.fsm';
-    const json = exportToJson();
-    console.log(json);
-    downloadFile(name, json, 'application/json');
-}
-
-function downloadFile(name, content, type) {
-    const element = document.createElement('a');
-
-    element.setAttribute('href', `data:${type},charset=utf-8,${content}`);
-    element.setAttribute('download', name);
-
-    element.style.display = 'none';
-    document.body.appendChild(element);
-
-    element.click();
-    document.body.removeChild(element);
-}
-
diff --git a/js/export/export-image.js b/js/export/export-image.js
new file mode 100644
index 0000000..0db2bd0
--- /dev/null
+++ b/js/export/export-image.js
@@ -0,0 +1,24 @@
+function exportToImage() {
+    if(activeDocument === null) {
+        return null;
+    }
+
+    return canvas.toDataURL('image/png');
+}
+
+function downloadImage(name, dataUrl) {
+    const element = document.createElement('a');
+
+    element.setAttribute('href', dataUrl);
+    element.setAttribute('download', name);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+    document.body.removeChild(element);
+}
+
+function exportToImageFile() {
+    downloadImage('test.png', exportToImage());
+}
\ No newline at end of file
diff --git a/js/export/export.js b/js/export/export.js
new file mode 100644
index 0000000..b1c82e6
--- /dev/null
+++ b/js/export/export.js
@@ -0,0 +1,153 @@
+function prepareForExport(doc, _settings = settings) {
+    let states = JSON.parse(JSON.stringify(doc.states));
+
+    states.forEach(state => {
+        delete state.mouseOffsetX;
+        delete state.mouseOffsetY;
+        delete state.activeTime;
+        delete state.isActive;
+    });
+
+    let _connections = JSON.parse(JSON.stringify(doc.connections)).map((conn, index) => {
+        conn.type = doc.connections[index].constructor.name;
+        return conn;
+    });
+
+    _connections = _connections.map(conn => {
+        switch(conn.type) {
+            case 'Connection':
+                conn.stateA = conn.stateA.id;
+                conn.stateB = conn.stateB.id;
+                break;
+            case 'StartConnection':
+                conn.state = conn.state.id;
+                break;
+            case 'SelfConnection':
+                conn.state = conn.state.id;
+                break;
+        }
+        return conn;
+    });
+
+    const _doc = JSON.parse(JSON.stringify(doc));
+    _doc.states = states;
+    _doc.connections = _connections;
+
+    delete _doc.unsaved;
+    delete _doc.lastSavedHash;
+    delete _doc.element;
+
+    return {
+        document: _doc,
+        _settings,
+    };
+}
+
+function exportToJson(doc, _settings = settings) {
+    return JSON.stringify(prepareForExport(doc, _settings));
+}
+
+function parseFromJson(json) {
+    const data = JSON.parse(json);
+
+    const doc = Object.assign(new FSMDocument(''), data.document);
+
+    doc.states = doc.states.map(state => Object.assign(new State(0, 0), state));
+    doc.connections = doc.connections.map(connection => {
+        switch(connection.type) {
+            case 'Connection':
+                connection = Object.assign(new Connection(null, null), connection);
+
+                connection.stateA = doc.states.find(state => state.id === connection.stateA);
+                connection.stateB = doc.states.find(state => state.id === connection.stateB);
+
+                break;
+            case 'SelfConnection':
+                connection = Object.assign(new SelfConnection(null, {x: 0, y: 0}), connection);
+
+                connection.state = doc.states.find(state => state.id === connection.state);
+
+                break;
+            case 'StartConnection':
+                connection = Object.assign(new StartConnection(null, {x: 0, y: 0}), connection);
+
+                connection.state = doc.states.find(state => state.id === connection.state);
+
+                break;
+        }
+
+        delete connection.type;
+        return connection;
+    });
+
+    doc.lastSavedHash = doc.hashCode();
+
+    return {
+        document: doc,
+        settings,
+    };
+}
+
+function importFromJson(json) {
+    const doc = parseFromJson(json);
+
+    addDocument(doc);
+    switchDocument(doc);
+}
+
+function exportToFile() {
+    const name = 'placeholder.fsm';
+    const json = exportToJson();
+    downloadFile(name, json, 'application/json');
+}
+
+function downloadFile(name, content, type) {
+    const element = document.createElement('a');
+
+    element.setAttribute('href', `data:${type},charset=utf-8,${content}`);
+    element.setAttribute('download', name);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+    document.body.removeChild(element);
+}
+
+function saveToLocalStorage() {
+    if(activeDocument === null) {
+        return;
+    }
+
+    const newDoc = documents[activeDocument];
+    const data = getLocalStorageEntries();
+
+    const index = data.findIndex(entry => entry.document.id === newDoc.id);
+
+    if(index !== -1) {
+        data[index] = {
+            document: newDoc,
+            settings,
+        };
+    } else {
+        data.push({
+            document: newDoc,
+            settings,
+        });
+    }
+
+    const newData = data.map(entry => prepareForExport(entry.document, entry.settings));
+
+    localStorage.setItem('documents', JSON.stringify(newData));
+}
+
+function getLocalStorageEntries() {
+    const entries = JSON.parse(localStorage.getItem('documents'));
+    return !!entries ? entries.map(entry => parseFromJson(JSON.stringify(entry))) : [];
+}
+
+function openFromLocalStorage(id) {
+    const entry = getLocalStorageEntries().find(entry => entry.document.id === id);
+    addDocument(entry.document);
+    switchDocument(entry.document);
+}
\ No newline at end of file