diff --git a/src/components/CanvasContextMenu.vue b/src/components/CanvasContextMenu.vue
index 64445b2b2..a0107628e 100644
--- a/src/components/CanvasContextMenu.vue
+++ b/src/components/CanvasContextMenu.vue
@@ -12,7 +12,7 @@ import {
   ContextMenuPortal
 } from 'reka-ui'
 
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
 const store = useEditorStore()
 
diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
index d4815694c..dd2fcb9f4 100644
--- a/src/components/ColorPicker.vue
+++ b/src/components/ColorPicker.vue
@@ -2,9 +2,9 @@
 import { ref, computed, watch } from 'vue'
 import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'reka-ui'
 
-import { colorToHexRaw, parseColor } from '../engine/color'
+import { colorToHexRaw, parseColor } from '@/engine/color'
 
-import type { Color } from '../types'
+import type { Color } from '@/types'
 
 const props = defineProps<{
   color: Color
diff --git a/src/components/EditorCanvas.vue b/src/components/EditorCanvas.vue
index 516be29f7..e5a94bd50 100644
--- a/src/components/EditorCanvas.vue
+++ b/src/components/EditorCanvas.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 
-import { useCanvas } from '../composables/use-canvas'
-import { useCanvasInput } from '../composables/use-canvas-input'
-import { useEditorStore } from '../stores/editor'
+import { useCanvas } from '@/composables/use-canvas'
+import { useCanvasInput } from '@/composables/use-canvas-input'
+import { useEditorStore } from '@/stores/editor'
 import CanvasContextMenu from './CanvasContextMenu.vue'
 
 const store = useEditorStore()
diff --git a/src/components/FillPicker.vue b/src/components/FillPicker.vue
index ecec72a80..a66aba8ea 100644
--- a/src/components/FillPicker.vue
+++ b/src/components/FillPicker.vue
@@ -17,10 +17,10 @@ import {
 } from 'reka-ui'
 
 import ScrubInput from './ScrubInput.vue'
-import { colorToHexRaw, colorToRgba255, parseColor } from '../engine/color'
+import { colorToHexRaw, colorToRgba255, parseColor } from '@/engine/color'
 
-import type { Color } from '../types'
-import type { Fill, FillType, GradientStop, GradientTransform } from '../engine/scene-graph'
+import type { Color } from '@/types'
+import type { Fill, FillType, GradientStop, GradientTransform } from '@/engine/scene-graph'
 
 type FillCategory = 'SOLID' | 'GRADIENT' | 'IMAGE'
 type GradientSubtype =
diff --git a/src/components/LayersPanel.vue b/src/components/LayersPanel.vue
index 785b420ae..b30997ef3 100644
--- a/src/components/LayersPanel.vue
+++ b/src/components/LayersPanel.vue
@@ -16,7 +16,7 @@ import IconSquare from '~icons/lucide/square'
 import IconType from '~icons/lucide/type'
 
 import PagesPanel from './PagesPanel.vue'
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
 const store = useEditorStore()
 
diff --git a/src/components/PagesPanel.vue b/src/components/PagesPanel.vue
index ca7543925..a82ea2bbe 100644
--- a/src/components/PagesPanel.vue
+++ b/src/components/PagesPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, nextTick } from 'vue'
 
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
 const store = useEditorStore()
 
diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index c2abcf28b..fe6783dff 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
 import AppearanceSection from './properties/AppearanceSection.vue'
 import FillSection from './properties/FillSection.vue'
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 6da1970fc..23b4df6ad 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -20,9 +20,9 @@ import IconType from '~icons/lucide/type'
 import IconHand from '~icons/lucide/hand'
 import IconChevronDown from '~icons/lucide/chevron-down'
 
-import { TOOLS, useEditorStore } from '../stores/editor'
+import { TOOLS, useEditorStore } from '@/stores/editor'
 
-import type { Tool } from '../stores/editor'
+import type { Tool } from '@/stores/editor'
 
 const store = useEditorStore()
 
diff --git a/src/components/properties/AppearanceSection.vue b/src/components/properties/AppearanceSection.vue
index c8f7ac26d..0e7c9427d 100644
--- a/src/components/properties/AppearanceSection.vue
+++ b/src/components/properties/AppearanceSection.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
 
-import type { SceneNode } from '../../engine/scene-graph'
+import type { SceneNode } from '@/engine/scene-graph'
 
 const { store, node, updateProp, commitProp } = useNodeProps()
 
diff --git a/src/components/properties/EffectsSection.vue b/src/components/properties/EffectsSection.vue
index f78478b39..6da3f7bb8 100644
--- a/src/components/properties/EffectsSection.vue
+++ b/src/components/properties/EffectsSection.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import ColorPicker from '../ColorPicker.vue'
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
-import { colorToHexRaw, parseColor } from '../../engine/color'
+import ColorPicker from '@/components/ColorPicker.vue'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
+import { colorToHexRaw, parseColor } from '@/engine/color'
 
-import type { Color, Effect } from '../../engine/scene-graph'
+import type { Color, Effect } from '@/engine/scene-graph'
 
 const { store, node } = useNodeProps()
 
diff --git a/src/components/properties/FillSection.vue b/src/components/properties/FillSection.vue
index cf584e353..37130ec8c 100644
--- a/src/components/properties/FillSection.vue
+++ b/src/components/properties/FillSection.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import FillPicker from '../FillPicker.vue'
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
-import { DEFAULT_SHAPE_FILL } from '../../constants'
-import { colorToHexRaw } from '../../engine/color'
+import FillPicker from '@/components/FillPicker.vue'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
+import { DEFAULT_SHAPE_FILL } from '@/constants'
+import { colorToHexRaw } from '@/engine/color'
 
-import type { Fill } from '../../engine/scene-graph'
+import type { Fill } from '@/engine/scene-graph'
 
 const { store, node } = useNodeProps()
 
diff --git a/src/components/properties/LayoutSection.vue b/src/components/properties/LayoutSection.vue
index 738baf230..3ba1a6152 100644
--- a/src/components/properties/LayoutSection.vue
+++ b/src/components/properties/LayoutSection.vue
@@ -2,15 +2,10 @@
 import { computed, ref } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
 
-import type {
-  SceneNode,
-  LayoutSizing,
-  LayoutAlign,
-  LayoutCounterAlign
-} from '../../engine/scene-graph'
+import type { SceneNode, LayoutSizing, LayoutAlign, LayoutCounterAlign } from '@/engine/scene-graph'
 
 const { store, node, updateProp, commitProp } = useNodeProps()
 
diff --git a/src/components/properties/PageSection.vue b/src/components/properties/PageSection.vue
index b9608db37..4c9ac27ab 100644
--- a/src/components/properties/PageSection.vue
+++ b/src/components/properties/PageSection.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import ColorPicker from '../ColorPicker.vue'
-import { useEditorStore } from '../../stores/editor'
-import { colorToHexRaw, parseColor } from '../../engine/color'
+import ColorPicker from '@/components/ColorPicker.vue'
+import { useEditorStore } from '@/stores/editor'
+import { colorToHexRaw, parseColor } from '@/engine/color'
 
-import type { Color } from '../../types'
+import type { Color } from '@/types'
 
 const store = useEditorStore()
 
diff --git a/src/components/properties/PositionSection.vue b/src/components/properties/PositionSection.vue
index 759ea9b16..4ce4d5389 100644
--- a/src/components/properties/PositionSection.vue
+++ b/src/components/properties/PositionSection.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
 
 const { store, node, nodes, updateProp, commitProp } = useNodeProps()
 
diff --git a/src/components/properties/StrokeSection.vue b/src/components/properties/StrokeSection.vue
index 6a0a21956..b01fa7656 100644
--- a/src/components/properties/StrokeSection.vue
+++ b/src/components/properties/StrokeSection.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import ColorPicker from '../ColorPicker.vue'
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
-import { colorToHexRaw, parseColor } from '../../engine/color'
+import ColorPicker from '@/components/ColorPicker.vue'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
+import { colorToHexRaw, parseColor } from '@/engine/color'
 
-import type { Color, Stroke } from '../../engine/scene-graph'
+import type { Color, Stroke } from '@/engine/scene-graph'
 
 const { store, node } = useNodeProps()
 
diff --git a/src/components/properties/TypographySection.vue b/src/components/properties/TypographySection.vue
index 53b8b02f1..1cf387715 100644
--- a/src/components/properties/TypographySection.vue
+++ b/src/components/properties/TypographySection.vue
@@ -2,9 +2,9 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
-import { listFamilies, loadFont } from '../../engine/fonts'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
+import { listFamilies, loadFont } from '@/engine/fonts'
 
 const { store, node, updateProp, commitProp } = useNodeProps()
 
diff --git a/src/composables/use-canvas-input.ts b/src/composables/use-canvas-input.ts
index fed32aaec..7b58f3d53 100644
--- a/src/composables/use-canvas-input.ts
+++ b/src/composables/use-canvas-input.ts
@@ -10,12 +10,12 @@ import {
   ROTATION_HIT_OFFSET,
   DEFAULT_TEXT_WIDTH,
   DEFAULT_TEXT_HEIGHT
-} from '../constants'
-import { computeSelectionBounds, computeSnap } from '../engine/snap'
+} from '@/constants'
+import { computeSelectionBounds, computeSnap } from '@/engine/snap'
 
-import type { NodeType, SceneNode } from '../engine/scene-graph'
-import type { EditorStore, Tool } from '../stores/editor'
-import type { Rect } from '../types'
+import type { NodeType, SceneNode } from '@/engine/scene-graph'
+import type { EditorStore, Tool } from '@/stores/editor'
+import type { Rect } from '@/types'
 
 type HandlePosition = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
 
@@ -210,11 +210,8 @@ function hitTestRotationHandle(
 export function useCanvasInput(
   canvasRef: Ref<HTMLCanvasElement | null>,
   store: EditorStore,
-  hitTestSectionTitle: (cx: number, cy: number) => import('../engine/scene-graph').SceneNode | null,
-  hitTestComponentLabel: (
-    cx: number,
-    cy: number
-  ) => import('../engine/scene-graph').SceneNode | null
+  hitTestSectionTitle: (cx: number, cy: number) => import('@/engine/scene-graph').SceneNode | null,
+  hitTestComponentLabel: (cx: number, cy: number) => import('@/engine/scene-graph').SceneNode | null
 ) {
   const drag = ref<DragState | null>(null)
   const cursorOverride = ref<string | null>(null)
diff --git a/src/composables/use-canvas.ts b/src/composables/use-canvas.ts
index adc262389..2dc5ce65c 100644
--- a/src/composables/use-canvas.ts
+++ b/src/composables/use-canvas.ts
@@ -1,10 +1,10 @@
 import { useResizeObserver } from '@vueuse/core'
 import { onMounted, onUnmounted, watch, type Ref } from 'vue'
 
-import { getCanvasKit } from '../engine/canvaskit'
-import { SkiaRenderer } from '../engine/renderer'
+import { getCanvasKit } from '@/engine/canvaskit'
+import { SkiaRenderer } from '@/engine/renderer'
 
-import type { EditorStore } from '../stores/editor'
+import type { EditorStore } from '@/stores/editor'
 import type { CanvasKit } from 'canvaskit-wasm'
 
 export function useCanvas(canvasRef: Ref<HTMLCanvasElement | null>, store: EditorStore) {
diff --git a/src/composables/use-keyboard.ts b/src/composables/use-keyboard.ts
index 6a881c36c..4af387d74 100644
--- a/src/composables/use-keyboard.ts
+++ b/src/composables/use-keyboard.ts
@@ -1,9 +1,10 @@
 import { useEventListener } from '@vueuse/core'
 
-import { TOOL_SHORTCUTS } from '../stores/editor'
+import { TOOL_SHORTCUTS } from '@/stores/editor'
+
 import { openFileDialog } from './use-menu'
 
-import type { EditorStore } from '../stores/editor'
+import type { EditorStore } from '@/stores/editor'
 
 function isEditing(e: Event) {
   return e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement
diff --git a/src/composables/use-menu.ts b/src/composables/use-menu.ts
index 020697a77..5310f8f57 100644
--- a/src/composables/use-menu.ts
+++ b/src/composables/use-menu.ts
@@ -1,8 +1,8 @@
 import { onUnmounted } from 'vue'
 
-import { IS_TAURI } from '../constants'
+import { IS_TAURI } from '@/constants'
 
-import type { EditorStore } from '../stores/editor'
+import type { EditorStore } from '@/stores/editor'
 
 export async function openFileDialog(store: EditorStore) {
   if (IS_TAURI) {
diff --git a/src/composables/use-node-props.ts b/src/composables/use-node-props.ts
index 4b95b3d11..83052294a 100644
--- a/src/composables/use-node-props.ts
+++ b/src/composables/use-node-props.ts
@@ -1,8 +1,8 @@
 import { computed } from 'vue'
 
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
-import type { SceneNode } from '../engine/scene-graph'
+import type { SceneNode } from '@/engine/scene-graph'
 
 export function useNodeProps() {
   const store = useEditorStore()
diff --git a/src/engine/clipboard.ts b/src/engine/clipboard.ts
index 2c37aa44a..f95712f8c 100644
--- a/src/engine/clipboard.ts
+++ b/src/engine/clipboard.ts
@@ -1,10 +1,10 @@
 import { inflateSync, deflateSync } from 'fflate'
 
-import { initCodec, getCompiledSchema, getSchemaBytes } from '../kiwi/codec'
-import { decodeBinarySchema, compileSchema, ByteBuffer } from '../kiwi/kiwi-schema'
+import { initCodec, getCompiledSchema, getSchemaBytes } from '@/kiwi/codec'
+import { decodeBinarySchema, compileSchema, ByteBuffer } from '@/kiwi/kiwi-schema'
+
 import { decodeVectorNetworkBlob, encodeVectorNetworkBlob } from './vector'
 
-import type { NodeChange as KiwiNodeChange } from '../kiwi/codec'
 import type {
   SceneGraph,
   SceneNode,
@@ -16,6 +16,7 @@ import type {
   LayoutCounterAlign,
   VectorNetwork
 } from './scene-graph'
+import type { NodeChange as KiwiNodeChange } from '@/kiwi/codec'
 
 interface FigmaClipboardMeta {
   fileKey: string
diff --git a/src/engine/color.ts b/src/engine/color.ts
index d20eab8f1..ed6ba61c7 100644
--- a/src/engine/color.ts
+++ b/src/engine/color.ts
@@ -1,6 +1,6 @@
 import { parse, formatHex, converter } from 'culori'
 
-import type { Color } from '../types'
+import type { Color } from '@/types'
 
 const toRgb = converter('rgb')
 
diff --git a/src/engine/fig-export.ts b/src/engine/fig-export.ts
index 4f67abb01..23ce4c75f 100644
--- a/src/engine/fig-export.ts
+++ b/src/engine/fig-export.ts
@@ -1,12 +1,13 @@
 import { zipSync, deflateSync } from 'fflate'
 
-import { IS_TAURI } from '../constants'
-import { initCodec, getCompiledSchema, getSchemaBytes } from '../kiwi/codec'
+import { IS_TAURI } from '@/constants'
+import { initCodec, getCompiledSchema, getSchemaBytes } from '@/kiwi/codec'
+
 import { encodeVectorNetworkBlob } from './vector'
 
-import type { NodeChange, Paint } from '../kiwi/codec'
 import type { SkiaRenderer } from './renderer'
 import type { SceneGraph, SceneNode } from './scene-graph'
+import type { NodeChange, Paint } from '@/kiwi/codec'
 import type { CanvasKit } from 'canvaskit-wasm'
 
 const THUMBNAIL_1X1 = Uint8Array.from(
diff --git a/src/engine/renderer.ts b/src/engine/renderer.ts
index 89ce084b1..3a0476c21 100644
--- a/src/engine/renderer.ts
+++ b/src/engine/renderer.ts
@@ -53,12 +53,13 @@ import {
   COMPONENT_LABEL_ICON_GAP,
   RULER_TARGET_PIXEL_SPACING,
   RULER_MAJOR_TOLERANCE
-} from '../constants'
+} from '@/constants'
+
 import { vectorNetworkToPath } from './vector'
 
-import type { Rect } from '../types'
 import type { SceneNode, SceneGraph, Fill } from './scene-graph'
 import type { SnapGuide } from './snap'
+import type { Rect } from '@/types'
 import type { EmbindEnumEntity, Image as CKImage, Path } from 'canvaskit-wasm'
 import type {
   CanvasKit,
diff --git a/src/engine/scene-graph.ts b/src/engine/scene-graph.ts
index 6d8d8c97a..0a859b86a 100644
--- a/src/engine/scene-graph.ts
+++ b/src/engine/scene-graph.ts
@@ -1,4 +1,4 @@
-export type { GUID, Color } from '../types'
+export type { GUID, Color } from '@/types'
 
 export type HandleMirroring = 'NONE' | 'ANGLE' | 'ANGLE_AND_LENGTH'
 export type WindingRule = 'NONZERO' | 'EVENODD'
@@ -49,7 +49,7 @@ export type NodeType =
   | 'CONNECTOR'
   | 'SHAPE_WITH_TEXT'
 
-import type { Color, Matrix, Rect } from '../types'
+import type { Color, Matrix, Rect } from '@/types'
 
 export type FillType =
   | 'SOLID'
diff --git a/src/engine/snap.ts b/src/engine/snap.ts
index 2ac28861b..d4eabb941 100644
--- a/src/engine/snap.ts
+++ b/src/engine/snap.ts
@@ -1,5 +1,5 @@
-import type { Rect } from '../types'
 import type { SceneNode } from './scene-graph'
+import type { Rect } from '@/types'
 
 const SNAP_THRESHOLD = 5
 
diff --git a/src/kiwi/client.ts b/src/kiwi/client.ts
index 056aecbd0..ebdbb17c8 100644
--- a/src/kiwi/client.ts
+++ b/src/kiwi/client.ts
@@ -26,7 +26,7 @@ import {
   getKiwiMessageType
 } from './protocol.ts'
 
-import type { ChromeDevToolsTarget } from '../types.ts'
+import type { ChromeDevToolsTarget } from '@/types.ts'
 
 export interface SessionInfo {
   sessionID: number
diff --git a/src/kiwi/codec.ts b/src/kiwi/codec.ts
index 0661d2561..65623a851 100644
--- a/src/kiwi/codec.ts
+++ b/src/kiwi/codec.ts
@@ -8,7 +8,8 @@
 
 import { decompress as zstdDecompress } from 'fzstd'
 
-import { parseColor } from '../engine/color'
+import { parseColor } from '@/engine/color'
+
 import { compileSchema, encodeBinarySchema } from './kiwi-schema'
 import { isZstdCompressed, getKiwiMessageType } from './protocol.ts'
 import figmaSchema from './schema.ts'
@@ -165,9 +166,9 @@ export function peekMessageType(data: Uint8Array): number | null {
 
 // Type definitions
 
-export type { GUID, Color } from '../types'
+export type { GUID, Color } from '@/types'
 
-import type { Color, GUID, Matrix, Vector } from '../types'
+import type { Color, GUID, Matrix, Vector } from '@/types'
 
 export type { Matrix, Vector }
 
diff --git a/src/kiwi/fig-file.ts b/src/kiwi/fig-file.ts
index 4dc730bff..eefd45527 100644
--- a/src/kiwi/fig-file.ts
+++ b/src/kiwi/fig-file.ts
@@ -5,8 +5,8 @@ import { importNodeChanges } from './fig-import'
 import { decodeBinarySchema, compileSchema, ByteBuffer } from './kiwi-schema'
 import { isZstdCompressed } from './protocol'
 
-import type { SceneGraph } from '../engine/scene-graph'
 import type { FigmaMessage } from './codec'
+import type { SceneGraph } from '@/engine/scene-graph'
 
 interface FigKiwiPayload {
   schemaDeflated: Uint8Array
diff --git a/src/kiwi/fig-import.ts b/src/kiwi/fig-import.ts
index 9ec3a4d6d..a8f2933f8 100644
--- a/src/kiwi/fig-import.ts
+++ b/src/kiwi/fig-import.ts
@@ -1,6 +1,7 @@
-import { SceneGraph } from '../engine/scene-graph'
-import { decodeVectorNetworkBlob } from '../engine/vector'
+import { SceneGraph } from '@/engine/scene-graph'
+import { decodeVectorNetworkBlob } from '@/engine/vector'
 
+import type { NodeChange, Paint, Effect as KiwiEffect, GUID } from './codec'
 import type {
   NodeType,
   Fill,
@@ -24,8 +25,7 @@ import type {
   TextDecoration,
   ArcData,
   VectorNetwork
-} from '../engine/scene-graph'
-import type { NodeChange, Paint, Effect as KiwiEffect, GUID } from './codec'
+} from '@/engine/scene-graph'
 
 function ext(nc: NodeChange): Record<string, unknown> {
   return nc as unknown as Record<string, unknown>
diff --git a/src/stores/editor.ts b/src/stores/editor.ts
index c3cf0784a..476bde696 100644
--- a/src/stores/editor.ts
+++ b/src/stores/editor.ts
@@ -8,7 +8,7 @@ import {
   SECTION_DEFAULT_STROKE,
   CANVAS_BG_COLOR,
   ZOOM_SENSITIVITY
-} from '../constants'
+} from '@/constants'
 import {
   parseFigmaClipboard,
   importClipboardNodes,
@@ -16,13 +16,13 @@ import {
   buildFigmaClipboardHTML,
   buildOpenPencilClipboardHTML,
   prefetchFigmaSchema
-} from '../engine/clipboard'
-import { exportFigFile } from '../engine/fig-export'
-import { computeLayout, computeAllLayouts } from '../engine/layout'
-import { SceneGraph } from '../engine/scene-graph'
-import { UndoManager } from '../engine/undo'
-import { computeVectorBounds } from '../engine/vector'
-import { readFigFile } from '../kiwi/fig-file'
+} from '@/engine/clipboard'
+import { exportFigFile } from '@/engine/fig-export'
+import { computeLayout, computeAllLayouts } from '@/engine/layout'
+import { SceneGraph } from '@/engine/scene-graph'
+import { UndoManager } from '@/engine/undo'
+import { computeVectorBounds } from '@/engine/vector'
+import { readFigFile } from '@/kiwi/fig-file'
 
 import type {
   SceneNode,
@@ -33,9 +33,9 @@ import type {
   VectorSegment,
   VectorRegion,
   VectorNetwork
-} from '../engine/scene-graph'
-import type { SnapGuide } from '../engine/snap'
-import type { Color, Rect } from '../types'
+} from '@/engine/scene-graph'
+import type { SnapGuide } from '@/engine/snap'
+import type { Color, Rect } from '@/types'
 
 export type Tool =
   | 'SELECT'
@@ -115,7 +115,7 @@ export function createEditorStore() {
   let fileHandle: FileSystemFileHandle | null = null
   let filePath: string | null = null
   let _ck: import('canvaskit-wasm').CanvasKit | null = null
-  let _renderer: import('../engine/renderer').SkiaRenderer | null = null
+  let _renderer: import('@/engine/renderer').SkiaRenderer | null = null
 
   prefetchFigmaSchema()
 
@@ -505,7 +505,7 @@ export function createEditorStore() {
 
   function setCanvasKit(
     ck: import('canvaskit-wasm').CanvasKit,
-    renderer: import('../engine/renderer').SkiaRenderer
+    renderer: import('@/engine/renderer').SkiaRenderer
   ) {
     _ck = ck
     _renderer = renderer
diff --git a/tsconfig.json b/tsconfig.json
index 034c786ef..e934de51b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,10 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.vue"],
   "exclude": ["src/kiwi/index.ts", "src/kiwi/client.ts"],
diff --git a/vite.config.ts b/vite.config.ts
index a08e62e0d..c82a9923c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,3 +1,5 @@
+import { resolve } from 'path'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
@@ -10,6 +12,11 @@ import { copyFileSync, existsSync } from 'fs'
 const host = process.env.TAURI_DEV_HOST
 
 export default defineConfig(async () => ({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
   plugins: [
     {
       name: 'copy-canvaskit-wasm',