diff --git a/src/canvas/index.ts b/src/canvas/index.ts
index 025fb1ea3..d6d549598 100644
--- a/src/canvas/index.ts
+++ b/src/canvas/index.ts
@@ -49,7 +49,7 @@
 
 import { isUndefined } from 'underscore';
 import { Module } from '../abstract';
-import { Coordinates } from '../common';
+import { AddOptions, Coordinates } from '../common';
 import Component from '../dom_components/model/Component';
 import EditorModel from '../editor/model/Editor';
 import { getElement, getViewEl } from '../utils/mixins';
@@ -58,6 +58,8 @@ import Canvas from './model/Canvas';
 import Frame from './model/Frame';
 import CanvasView, { FitViewportOptions } from './view/CanvasView';
 import FrameView from './view/FrameView';
+import CanvasSpots from './model/CanvasSpotS';
+import CanvasSpot, { CanvasSpotProps } from './model/CanvasSpot';
 
 export type CanvasEvent = 'canvas:dragenter' | 'canvas:dragover' | 'canvas:drop' | 'canvas:dragend' | 'canvas:dragdata';
 
@@ -84,6 +86,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
   //name = 'Canvas';
   canvas: Canvas;
   model: Canvas;
+  spots: CanvasSpots;
   private canvasView?: CanvasView;
 
   /**
@@ -95,6 +98,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
     super(em, 'Canvas', defaults);
 
     this.canvas = new Canvas(this);
+    this.spots = new CanvasSpots(this);
     this.model = this.canvas;
     this.startAutoscroll = this.startAutoscroll.bind(this);
     this.stopAutoscroll = this.stopAutoscroll.bind(this);
@@ -713,7 +717,17 @@ export default class CanvasModule extends Module<CanvasConfig> {
     ['model', 'droppable'].forEach(i => (this[i] = {}));
   }
 
-  setSpot(spot: any = {}) {
+  setSpot<T extends CanvasSpotProps>(spotProps: Partial<T> = {}, opts: AddOptions = {}) {
+    const spot = new CanvasSpot(this, {
+      ...spotProps,
+      id: spotProps.id || `cs_${spotProps.frame?.id}_${spotProps.component?.getId()}`,
+      // TODO type should be mandatory
+      type: spotProps.type || '',
+    });
+
+    this.spots.add(spot, opts);
+
+    return spot;
     // CanvasSpot
     // 'canvas:spot:add' | 'canvas:spot:update'
     // 'canvas:spot'
diff --git a/src/canvas/model/CanvasSpot.ts b/src/canvas/model/CanvasSpot.ts
index 6b6757993..7b673cb7e 100644
--- a/src/canvas/model/CanvasSpot.ts
+++ b/src/canvas/model/CanvasSpot.ts
@@ -12,7 +12,7 @@ export type CanvasSpotType = LiteralUnion<CanvasSpotBuiltInType, string>;
 export interface CanvasSpotProps<T = CanvasSpotType> {
   id: string;
   type: T;
-  boxRect: BoxRect;
+  boxRect?: BoxRect;
   component?: Component;
   frame?: Frame;
 }
@@ -22,12 +22,17 @@ export default class CanvasSpot extends ModuleModel<CanvasModule, CanvasSpotProp
     return {
       id: '',
       type: '',
-      boxRect: {
+    };
+  }
+
+  get boxRect() {
+    return (
+      this.get('boxRect') || {
         x: 0,
         y: 0,
         width: 0,
         height: 0,
-      },
-    };
+      }
+    );
   }
 }
diff --git a/src/canvas/model/CanvasSpots.ts b/src/canvas/model/CanvasSpots.ts
new file mode 100644
index 000000000..091c97817
--- /dev/null
+++ b/src/canvas/model/CanvasSpots.ts
@@ -0,0 +1,12 @@
+import CanvasModule from '..';
+import { ModuleCollection } from '../../abstract';
+import CanvasSpot, { CanvasSpotProps } from './CanvasSpot';
+
+export default class CanvasSpots extends ModuleCollection<CanvasSpot> {
+  constructor(module: CanvasModule, models: CanvasSpot[] | CanvasSpotProps[] = []) {
+    super(module, models, CanvasSpot);
+    // bindAll(this, 'itemLoaded');
+    // this.on('reset', this.onReset);
+    // this.on('remove', this.onRemove);
+  }
+}