diff --git a/src/dataSources/index.ts b/src/dataSources/index.ts
index 4e635d2be..2b02e28f5 100644
--- a/src/dataSources/index.ts
+++ b/src/dataSources/index.ts
@@ -1,11 +1,11 @@
-import { ItemManagerModule } from '../abstract/Module';
-import { ObjectAny } from '../common';
+import { ItemManagerModule, ModuleConfig } from '../abstract/Module';
+import { AddOptions, ObjectAny } from '../common';
 import EditorModel from '../editor/model/Editor';
 import { get } from '../utils/mixins';
 import { DataSources } from './model/DataSources';
-import { DataSourcesEvents } from './types';
+import { DataSourceProps, DataSourcesEvents } from './types';
 
-export default class DataSourceManager extends ItemManagerModule<{}, DataSources> {
+export default class DataSourceManager extends ItemManagerModule<ModuleConfig, DataSources> {
   storageKey = '';
   destroy(): void {}
 
@@ -24,4 +24,14 @@ export default class DataSourceManager extends ItemManagerModule<{}, DataSources
     console.log('getValue', { context });
     return get(context, key, defValue);
   }
+
+  add(props: DataSourceProps, opts: AddOptions = {}) {
+    const { all } = this;
+    props.id = props.id || this._createId();
+    return all.add(props, opts);
+  }
+
+  get(id: string) {
+    return this.all.add(id);
+  }
 }
diff --git a/src/dataSources/model/DataRecord.ts b/src/dataSources/model/DataRecord.ts
index 76c88711c..5cd514b1f 100644
--- a/src/dataSources/model/DataRecord.ts
+++ b/src/dataSources/model/DataRecord.ts
@@ -1,23 +1,31 @@
 import { keys } from 'underscore';
-import { Collection, Model } from '../../common';
+import { Model } from '../../common';
 import { DataRecordProps } from '../types';
+import { DataRecords } from './DataRecords';
 
 export class DataRecord<T extends DataRecordProps = DataRecordProps> extends Model<T> {
-  // collection?: Collection<T>;
-
   constructor(props: T, opts = {}) {
     super(props, opts);
-    this.on('change', dr => {
+    this.on('change', (dr: DataRecord) => {
+      const { id, em } = this.dataSource;
+
       const changed = dr.changedAttributes();
       keys(changed).forEach(prop => {
-        const eventKey = `${this.dataSource.id}.${this.id}.${prop}`;
-        console.log('changed', eventKey);
-        // em.trigger(eventKey);
+        const path = this.getPath(prop);
+        console.log('TODO change to data:path:DS_ID.DR_ID.KEY ', path);
+        em.trigger(path);
       });
     });
   }
 
   get dataSource() {
-    return (this.collection as any).dataSource;
+    return (this.collection as unknown as DataRecords).dataSource;
+  }
+
+  getPath(prop?: string) {
+    const { dataSource, id } = this;
+    const dsId = dataSource.id;
+    const suffix = prop ? `.${prop}` : '';
+    return `${dsId}.${id}${suffix}`;
   }
 }
diff --git a/src/dataSources/model/DataSource.ts b/src/dataSources/model/DataSource.ts
index 9f334539b..64f09bd8f 100644
--- a/src/dataSources/model/DataSource.ts
+++ b/src/dataSources/model/DataSource.ts
@@ -1,6 +1,11 @@
-import { Model } from '../../common';
+import { Collection } from 'backbone';
+import { CombinedModelConstructorOptions, Model } from '../../common';
+import EditorModel from '../../editor/model/Editor';
 import { DataSourceProps } from '../types';
 import { DataRecords } from './DataRecords';
+import { DataSources } from './DataSources';
+
+interface DataSourceOptions extends CombinedModelConstructorOptions<{ em: EditorModel }, DataSource> {}
 
 export class DataSource extends Model<DataSourceProps> {
   defaults() {
@@ -9,7 +14,22 @@ export class DataSource extends Model<DataSourceProps> {
     };
   }
 
+  constructor(props: DataSourceProps, opts: DataSourceOptions) {
+    super(props, opts);
+    const { records } = props;
+
+    if (!(records instanceof DataRecords)) {
+      this.set({ records: new DataRecords(records!, { dataSource: this }) });
+    }
+
+    console.log('DataSource.constructor', { props, records: this.records, opts, coll: this.collection });
+  }
+
   get records() {
     return this.attributes.records as DataRecords;
   }
+
+  get em() {
+    return (this.collection as unknown as DataSources).em;
+  }
 }
diff --git a/src/dataSources/model/DataSources.ts b/src/dataSources/model/DataSources.ts
index 158a573a6..d31795854 100644
--- a/src/dataSources/model/DataSources.ts
+++ b/src/dataSources/model/DataSources.ts
@@ -9,5 +9,10 @@ export class DataSources extends Collection<DataSource> {
   constructor(models: DataSource[] | DataSourceProps[], em: EditorModel) {
     super(models, em);
     this.em = em;
+
+    // @ts-ignore We need to inject `em` for pages created on reset from the Storage load
+    this.model = (props: DataSourceProps, opts = {}) => {
+      return new DataSource(props, { ...opts, em });
+    };
   }
 }
diff --git a/src/dom_components/view/ComponentDataVariableView.ts b/src/dom_components/view/ComponentDataVariableView.ts
index f19e9377c..2ef6801de 100644
--- a/src/dom_components/view/ComponentDataVariableView.ts
+++ b/src/dom_components/view/ComponentDataVariableView.ts
@@ -5,16 +5,13 @@ export default class ComponentDataVariableView extends ComponentView<ComponentDa
   initialize(opt = {}) {
     super.initialize(opt);
     const { model, em } = this;
-    const { key } = model.attributes;
-    this.listenTo(em, key, () => this.postRender());
+    this.listenTo(em, model.attributes.path, () => this.postRender());
   }
 
   postRender() {
-    const { model, el } = this;
-    const { key, default: def } = model.attributes;
-    // this.el.innerHTML = getValue(key, def);
-    el.innerHTML = def;
-    console.log('this.el.innerHTML', { key, def });
+    const { model, el, em } = this;
+    const { path, value } = model.attributes;
+    el.innerHTML = em.DataSources.getValue(path, value);
     super.postRender();
   }
 }
diff --git a/src/editor/index.ts b/src/editor/index.ts
index 184a98e2d..2003f44a0 100644
--- a/src/editor/index.ts
+++ b/src/editor/index.ts
@@ -64,6 +64,7 @@ import { AddOptions, EventHandler, LiteralUnion } from '../common';
 import CssComposer from '../css_composer';
 import CssRule from '../css_composer/model/CssRule';
 import CssRules from '../css_composer/model/CssRules';
+import DataSourceManager from '../dataSources';
 import DeviceManager from '../device_manager';
 import ComponentManager, { ComponentEvent } from '../dom_components';
 import Component from '../dom_components/model/Component';
@@ -240,6 +241,9 @@ export default class Editor implements IBaseModule<EditorConfig> {
   get DeviceManager(): DeviceManager {
     return this.em.Devices;
   }
+  get DataSources(): DataSourceManager {
+    return this.em.DataSources;
+  }
 
   get EditorModel() {
     return this.em;
diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts
index a089b230b..180d2e18a 100644
--- a/src/editor/model/Editor.ts
+++ b/src/editor/model/Editor.ts
@@ -42,6 +42,7 @@ import CssRules from '../../css_composer/model/CssRules';
 import { ComponentAdd, DragMode } from '../../dom_components/model/types';
 import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
 import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
+import DataSourceManager from '../../dataSources';
 
 Backbone.$ = $;
 
@@ -64,6 +65,7 @@ const deps: (new (em: EditorModel) => IModule)[] = [
   CanvasModule,
   CommandsModule,
   BlockManager,
+  DataSourceManager,
 ];
 const storableDeps: (new (em: EditorModel) => IModule & IStorableModule)[] = [
   AssetManager,
@@ -228,6 +230,10 @@ export default class EditorModel extends Model {
     return this.get('StyleManager');
   }
 
+  get DataSources(): DataSourceManager {
+    return this.get('DataSources');
+  }
+
   constructor(conf: EditorConfig = {}) {
     super();
     this._config = conf;