diff --git a/.inscode b/.inscode
index 70c7853df0c162981ebd7cf119d909c807920531..9fec9576d482baaf90d2f47230ce9133cfce99d4 100644
--- a/.inscode
+++ b/.inscode
@@ -1,4 +1,5 @@
 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"
diff --git a/src/canvas.vue b/src/canvas.vue
new file mode 100644
index 0000000000000000000000000000000000000000..35b10a4a9c159becfb63bc886010f9fac920d7ff
--- /dev/null
+++ b/src/canvas.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="canvas" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
+    <div v-for="(component, index) in components" :key="index" class="component" :style="{ left: component.x + 'px', top: component.y + 'px' }" :draggable="true" @dragstart="handleDragStart(component, $event)" @dragend="handleDragEnd(component, $event)">{{ component.text }}</div>
+    <svg>
+      <path v-for="(line, index) in lines" :key="index" :d="line.path" stroke="black" fill="transparent" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      components: [
+        { text: 'Component 1', x: 50, y: 50 },
+        { text: 'Component 2', x: 150, y: 50 },
+        { text: 'Component 3', x: 100, y: 150 }
+      ],
+      lines: []
+    };
+  },
+  methods: {
+    handleMouseDown(event) {
+      // Handle mouse down event
+    },
+    handleMouseMove(event) {
+      // Handle mouse move event
+    },
+    handleMouseUp(event) {
+      // Handle mouse up event
+    },
+    handleDragStart(component, event) {
+      // Handle drag start event
+    },
+    handleDragEnd(component, event) {
+      // Handle drag end event
+    }
+  }
+};
+</script>
+
+<style>
+.canvas {
+  position: relative;
+}
+
+.component {
+  position: absolute;
+  background-color: #ccc;
+  padding: 10px;
+}
+
+svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 90e6400b4d8ad8aba0c1caa53874eb4b81380648..99c2dd54c5dbd7f2df6dca196752eff9771e8a46 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './canvas.vue'
 
 import './assets/main.css'