diff --git a/frontend/package.json b/frontend/package.json
index 2b9c7213a9..ef5cd68080 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -76,6 +76,7 @@
     "vite": "^5.0.2"
   },
   "dependencies": {
+    "canvaskit-wasm": "^0.39.1",
     "date-fns": "^2.30.0",
     "draft-js": "^0.11.7",
     "eventsource-parser": "^1.1.1",
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index 5d679fe36b..d38ed06693 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -39,6 +39,7 @@
    [app.main.ui.workspace.viewport.rules :as rules]
    [app.main.ui.workspace.viewport.scroll-bars :as scroll-bars]
    [app.main.ui.workspace.viewport.selection :as selection]
+   [app.main.ui.workspace.viewport.sk :as sk]
    [app.main.ui.workspace.viewport.snap-distances :as snap-distances]
    [app.main.ui.workspace.viewport.snap-points :as snap-points]
    [app.main.ui.workspace.viewport.top-bar :as top-bar]
@@ -346,6 +347,11 @@
                                :objects base-objects
                                :active-frames @active-frames}]]]]
 
+     ;; IT's MAGIC!
+     [sk/canvas {:objects base-objects
+                 :active-frames @active-frames
+                 :vbox vbox}]
+
      [:svg.viewport-controls
       {:xmlns "http://www.w3.org/2000/svg"
        :xmlnsXlink "http://www.w3.org/1999/xlink"
@@ -616,14 +622,14 @@
             :objects base-objects
             :modifiers modifiers
             :shape (or (get base-objects edition)
-                       (get base-objects @hover-top-frame-id))
+                     (get base-objects @hover-top-frame-id))
             :view-only (not show-grid-editor?)}])
 
         (for [frame (ctt/get-frames objects)]
           (when (and (ctl/grid-layout? frame)
-                     (empty? (:shapes frame))
-                     (not= edition (:id frame))
-                     (not= @hover-top-frame-id (:id frame)))
+                  (empty? (:shapes frame))
+                  (not= edition (:id frame))
+                  (not= @hover-top-frame-id (:id frame)))
             [:& grid-layout/editor
              {:zoom zoom
               :objects base-objects
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index f50dbb9699..99448dcb14 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4167,6 +4167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webgpu/types@npm:0.1.21":
+  version: 0.1.21
+  resolution: "@webgpu/types@npm:0.1.21"
+  checksum: 74de9683b70064aeadcdd31381747650b323e7e2183fb38f90a35f1a79f80ad267c0a2ee5010c264befb3d31ad213dbdffa04897e2808f6b04feff8d66bc53e0
+  languageName: node
+  linkType: hard
+
 "@xmldom/xmldom@npm:^0.8.3":
   version: 0.8.10
   resolution: "@xmldom/xmldom@npm:0.8.10"
@@ -5278,6 +5285,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"canvaskit-wasm@npm:^0.39.1":
+  version: 0.39.1
+  resolution: "canvaskit-wasm@npm:0.39.1"
+  dependencies:
+    "@webgpu/types": "npm:0.1.21"
+  checksum: 0ae60ae5c430aaa88152f3a20f40fc9a6debb15714a2ce1bdebef93005ec6d5e72e0316b91ab637f50aab220dd8694101abac497209bcf16788d00db78f5a898
+  languageName: node
+  linkType: hard
+
 "chalk@npm:^2.4.1, chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
@@ -7582,6 +7598,7 @@ __metadata:
     "@storybook/testing-library": "npm:^0.2.2"
     animate.css: "npm:^4.1.1"
     autoprefixer: "npm:^10.4.15"
+    canvaskit-wasm: "npm:^0.39.1"
     concurrently: "npm:^8.2.2"
     date-fns: "npm:^2.30.0"
     draft-js: "npm:^0.11.7"