diff --git a/frontend/src/app/main/ui/workspace/viewport/sk.cljs b/frontend/src/app/main/ui/workspace/viewport/sk.cljs
new file mode 100644
index 0000000000..3fa0e402da
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/viewport/sk.cljs
@@ -0,0 +1,47 @@
+(ns app.main.ui.workspace.viewport.sk
+  (:require-macros [app.main.style :as stl])
+  (:require
+   ;; TODO el cp de node_modules/canvaskit-wasm/bin/canvaskit.wasm
+   ["./sk_impl.js" :as impl]
+   [app.main.store :as st]
+   [app.util.path.format :as upf]
+   [rumext.v2 :as mf]))
+
+(mf/defc canvas
+  {::mf/wrap-props false}
+  [props]
+  (let [objects    (unchecked-get props "objects")
+        vbox       (unchecked-get props "vbox")
+        canvas-ref (mf/use-ref nil)
+        kit        (mf/use-state nil)
+        zoom       (get-in @st/state [:workspace-local :zoom] 1)]
+    (println "zoom " zoom)
+
+    (mf/with-effect [objects vbox]
+      (when @kit
+        (let [canvas (mf/ref-val canvas-ref)]
+          (do
+            (impl/clear @kit "skia-canvas")
+            (doseq [[_ object] objects]
+              (let [selrect    (:selrect object)
+                    x (:x selrect)
+                    y (:y selrect)
+                    width (+ (:width selrect) x)
+                    height (+ (:height selrect) y)]
+                (impl/rect @kit "skia-canvas" x y width height (:x vbox) (:y vbox) zoom)
+                (when (:content object)
+                  (impl/path @kit "skia-canvas" x y (upf/format-path (:content object)) (:x vbox) (:y vbox) zoom))))))))
+
+    (mf/with-effect [canvas-ref]
+      (let [canvas (mf/ref-val canvas-ref)]
+        (when (some? canvas)
+          (set! (.-width canvas) (.-clientWidth canvas))
+          (set! (.-height canvas) (.-clientHeight canvas))
+          (-> (impl/init "skia-canvas")
+              (.then (fn [canvas-kit]
+                       (js/console.log "canvas-kit" canvas-kit)
+                       (reset! kit canvas-kit)))))))
+
+    [:canvas {:id "skia-canvas"
+              :class (stl/css :canvas)
+              :ref canvas-ref}]))
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/workspace/viewport/sk.scss b/frontend/src/app/main/ui/workspace/viewport/sk.scss
new file mode 100644
index 0000000000..393e5c9fbd
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/viewport/sk.scss
@@ -0,0 +1,13 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
diff --git a/frontend/src/app/main/ui/workspace/viewport/sk_impl.js b/frontend/src/app/main/ui/workspace/viewport/sk_impl.js
new file mode 100644
index 0000000000..57bd678793
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/viewport/sk_impl.js
@@ -0,0 +1,65 @@
+import CanvasKitInit from 'canvaskit-wasm/bin/canvaskit.js';
+
+export function init() {
+  return CanvasKitInit();
+}
+export function rect(CanvasKit, canvasId, x, y, width, height, kk1, kk2, kk3) {
+  surface = CanvasKit.MakeCanvasSurface(canvasId)
+  console.log("rect:", x, y, width, height)
+  const paint = new CanvasKit.Paint();
+  paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
+  paint.setStyle(CanvasKit.PaintStyle.Stroke);
+  paint.setStrokeWidth(50.0);
+  // paint.setStrokeCap(CanvasKit.StrokeCap.Round);
+  paint.setAntiAlias(true);
+  const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, width, height), 0, 0);
+
+  const paint2 = new CanvasKit.Paint();
+  paint2.setColor(CanvasKit.Color4f(0.9, 0, 1.0, 1.0));
+  paint2.setStyle(CanvasKit.PaintStyle.Stroke);
+  paint2.setStrokeWidth(25.0);
+  paint2.setAntiAlias(true);
+  const rr2 = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, width, height), 0, 0);
+
+  function draw(canvas) {
+    canvas.translate(- kk1, - kk2);
+    // canvas.scale(kk3, kk3);
+    canvas.drawRRect(rr, paint);
+    canvas.drawRRect(rr2, paint2);
+    paint.delete();    
+    paint2.delete();    
+  }
+  surface.drawOnce(draw);  
+}
+
+export function path(CanvasKit, canvasId, x, y, content, kk1, kk2, kk3) {
+  // surface = CanvasKit.MakeCanvasSurface(canvasId)
+  console.log("path:", x, y, content)
+
+  surface = CanvasKit.MakeCanvasSurface(canvasId)
+  const paint = new CanvasKit.Paint();
+  paint.setStrokeWidth(1.0);
+  paint.setAntiAlias(true);
+  paint.setColor(CanvasKit.Color4f(0.9, 0, 1.0, 1.0));
+  paint.setStyle(CanvasKit.PaintStyle.Stroke);
+  const path = CanvasKit.Path.MakeFromSVGString(content);
+
+  function draw(canvas) {
+    canvas.translate(- kk1, - kk2);
+    // canvas.scale(kk3, kk3);
+    canvas.drawPath(path, paint);
+    paint.delete();    
+  }
+  surface.drawOnce(draw);  
+}
+
+export function clear(CanvasKit, canvasId) {
+  surface = CanvasKit.MakeCanvasSurface(canvasId)
+
+  function draw(canvas) {
+    // canvas.clear(CanvasKit.WHITE);
+    canvas.translate(400, 400);
+
+  }
+  surface.drawOnce(draw);  
+}
\ No newline at end of file