diff --git a/frontend/resources/wasm-playground/js/lib.js b/frontend/resources/wasm-playground/js/lib.js
index b4bd846a6c..a6ec00e46f 100644
--- a/frontend/resources/wasm-playground/js/lib.js
+++ b/frontend/resources/wasm-playground/js/lib.js
@@ -32,7 +32,7 @@ export function assignCanvas(canvas) {
 
 export function hexToU32ARGB(hex, opacity = 1) {
   const rgb = parseInt(hex.slice(1), 16);
-  const a = Math.floor(opacity * 0xFF);
+  const a = Math.floor(opacity * 0xff);
   const argb = (a << 24) | rgb;
   return argb >>> 0;
 }
@@ -42,9 +42,9 @@ export function getRandomInt(min, max) {
 }
 
 export function getRandomColor() {
-  const r = getRandomInt(0, 256).toString(16).padStart(2, '0');
-  const g = getRandomInt(0, 256).toString(16).padStart(2, '0');
-  const b = getRandomInt(0, 256).toString(16).padStart(2, '0');
+  const r = getRandomInt(0, 256).toString(16).padStart(2, "0");
+  const g = getRandomInt(0, 256).toString(16).padStart(2, "0");
+  const b = getRandomInt(0, 256).toString(16).padStart(2, "0");
   return `#${r}${g}${b}`;
 }
 
@@ -103,12 +103,12 @@ export function addShapeSolidStrokeFill(argb) {
 
 function serializePathAttrs(svgAttrs) {
   return Object.entries(svgAttrs).reduce((acc, [key, value]) => {
-    return acc + key + '\0' + value + '\0';
-  }, '');
+    return acc + key + "\0" + value + "\0";
+  }, "");
 }
 
 export function draw_star(x, y, width, height) {
-  const len = 11; // 1 MOVE + 9 LINE + 1 CLOSE 
+  const len = 11; // 1 MOVE + 9 LINE + 1 CLOSE
   const ptr = allocBytes(len * 28);
   const heap = getHeapU32();
   const dv = new DataView(heap.buffer);
@@ -120,7 +120,7 @@ export function draw_star(x, y, width, height) {
 
   const star = [];
   for (let i = 0; i < 10; i++) {
-    const angle = Math.PI / 5 * i - Math.PI / 2;
+    const angle = (Math.PI / 5) * i - Math.PI / 2;
     const r = i % 2 === 0 ? outerRadius : innerRadius;
     const px = cx + r * Math.cos(angle);
     const py = cy + r * Math.sin(angle);
@@ -149,7 +149,7 @@ export function draw_star(x, y, width, height) {
   Module._set_shape_path_content();
 
   const str = serializePathAttrs({
-    "fill": "none",
+    fill: "none",
     "stroke-linecap": "round",
     "stroke-linejoin": "round",
   });
@@ -158,7 +158,6 @@ export function draw_star(x, y, width, height) {
   Module.stringToUTF8(str, offset, size);
   Module._set_shape_path_attrs(3);
 }
-  
 
 export function setShapeChildren(shapeIds) {
   const offset = allocBytes(shapeIds.length * 16);
@@ -227,8 +226,12 @@ export function setupInteraction(canvas) {
     }
   });
 
-  canvas.addEventListener("mouseup", () => { isPanning = false; });
-  canvas.addEventListener("mouseout", () => { isPanning = false; });
+  canvas.addEventListener("mouseup", () => {
+    isPanning = false;
+  });
+  canvas.addEventListener("mouseout", () => {
+    isPanning = false;
+  });
 }
 
 export function addTextShape(x, y, fontSize, text) {
@@ -312,4 +315,4 @@ export function addTextShape(x, y, fontSize, text) {
 
   // Call the WebAssembly function
   Module._set_shape_text_content();
-}
\ No newline at end of file
+}
diff --git a/frontend/resources/wasm-playground/rects.html b/frontend/resources/wasm-playground/rects.html
index 9719e167f2..86ab26bbbe 100644
--- a/frontend/resources/wasm-playground/rects.html
+++ b/frontend/resources/wasm-playground/rects.html
@@ -25,8 +25,8 @@
   <script type="module">
     import initWasmModule from '/js/render_wasm.js';
     import {
-      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
-      getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill
+      addShapeSolidFill, hexToU32ARGB, getRandomInt, getRandomColor,
+      getRandomFloat, addShape, setShapeChildren, setup
     } from './js/lib.js';
 
     const canvas = document.getElementById("canvas");
@@ -37,41 +37,38 @@
     const shapes = params.get("shapes") || 1000;
 
     initWasmModule().then(Module => {
-      init(Module);
-      assignCanvas(canvas);
-      Module._set_canvas_background(hexToU32ARGB("#FABADA", 1));
-      Module._set_view(1, 0, 0);
-      Module._init_shapes_pool(shapes + 1);
-      setupInteraction(canvas);
+      setup({
+        instance: Module,
+        canvas,
+        shapes
+      })
 
       const children = [];
-      for (let i = 0; i < shapes; i++) {
-        const uuid = crypto.randomUUID();
-        children.push(uuid);
-
-        useShape(uuid);
-        Module._set_parent(0, 0, 0, 0);
-        Module._set_shape_type(3);
-        const x1 = getRandomInt(0, canvas.width);
-        const y1 = getRandomInt(0, canvas.height);
-        const width = getRandomInt(20, 100);
-        const height = getRandomInt(20, 100);
-        Module._set_shape_selrect(x1, y1, x1 + width, y1 + height);
-
-        const color = getRandomColor();
-        const argb = hexToU32ARGB(color, getRandomFloat(0.1, 1.0));
-        addShapeSolidFill(argb)
-
-        Module._add_shape_center_stroke(10, 0,  0, 0);
-        const argb2 = hexToU32ARGB(color, getRandomFloat(0.1, 1.0));
-        addShapeSolidStrokeFill(argb2);
+      for (let shape = 0; shape < shapes; shape++) {
+        const color = getRandomColor()
+        children.push(
+          addShape({
+            parent: "00000000-0000-0000-0000-000000000000",
+            type: "rect", // rect
+            selrect: {
+              x: getRandomInt(0, canvas.width),
+              y: getRandomInt(0, canvas.height),
+              width: getRandomInt(20, 100),
+              height: getRandomInt(20, 100),
+            },
+            fills: [{ type: "solid", color, opacity: getRandomFloat(0.1, 1.0) }],
+            strokes: [{ width: 10, type: "solid", color, opacity: getRandomFloat(0.1, 1.0) }]
+          })
+        );
       }
 
-      useShape("00000000-0000-0000-0000-000000000000");
-      setShapeChildren(children);
+      addShape({
+        id: "00000000-0000-0000-0000-000000000000",
+        children: children
+      })
 
       performance.mark('render:begin');
-      Module._render(Date.now(), false);
+      Module._render(performance.now(), true);
       performance.mark('render:end');
       const { duration } = performance.measure('render', 'render:begin', 'render:end');
       // alert(`render time: ${duration.toFixed(2)}ms`);