diff --git a/pynecone/.templates/web/package.json b/pynecone/.templates/web/package.json
index 8fd3486a4..a4869f386 100644
--- a/pynecone/.templates/web/package.json
+++ b/pynecone/.templates/web/package.json
@@ -32,6 +32,7 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "socket.io-client": "^4.5.4",
-    "victory": "^36.6.8"
+    "victory": "^36.6.8",
+    "json5": "^2.2.3"
   }
 }
diff --git a/pynecone/.templates/web/utils/state.js b/pynecone/.templates/web/utils/state.js
index 496d8bc69..7cc0532b4 100644
--- a/pynecone/.templates/web/utils/state.js
+++ b/pynecone/.templates/web/utils/state.js
@@ -1,6 +1,7 @@
 // State management for Pynecone web apps.
 import axios from "axios";
 import io from "socket.io-client";
+import JSON5 from "json5";
 
 // Global variable to hold the token.
 let token;
@@ -175,7 +176,7 @@ export const connect = async (
 
   // On each received message, apply the delta and set the result.
   socket.current.on("event", function (update) {
-    update = JSON.parse(update);
+    update = JSON5.parse(update);
     applyDelta(state, update.delta);
     setResult({
       processing: true,