diff --git a/src/code_manager/model/JsGenerator.ts b/src/code_manager/model/JsGenerator.ts
index b341f3ea1..b660ebc12 100644
--- a/src/code_manager/model/JsGenerator.ts
+++ b/src/code_manager/model/JsGenerator.ts
@@ -19,8 +19,8 @@ export default class JsGenerator extends Model {
   mapModel(model: Component) {
     let code = '';
     const script = model.get('script-export') || model.get('script');
-    const type = model.get('type');
-    const comps = model.get('components');
+    const type = model.get('type')!;
+    const comps = model.get('components')!;
     const id = model.getId();
 
     if (script) {
diff --git a/src/css_composer/index.ts b/src/css_composer/index.ts
index c88dd17cd..c0dcc0d33 100644
--- a/src/css_composer/index.ts
+++ b/src/css_composer/index.ts
@@ -32,7 +32,7 @@ import { isObject } from '../utils/mixins';
 import Selectors from '../selector_manager/model/Selectors';
 import Selector from '../selector_manager/model/Selector';
 import defaults, { CssComposerConfig } from './config/config';
-import CssRule, { CssRuleProperties } from './model/CssRule';
+import CssRule, { CssRuleJSON, CssRuleProperties } from './model/CssRule';
 import CssRules from './model/CssRules';
 import CssRulesView from './view/CssRulesView';
 import { ItemManagerModule } from '../abstract/Module';
@@ -192,7 +192,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * @return {Array<Model>}
    * @private
    */
-  addCollection(data: string | CssRuleProperties[], opts: Record<string, any> = {}, props = {}) {
+  addCollection(data: string | CssRuleJSON[], opts: Record<string, any> = {}, props = {}) {
     const { em } = this;
     const result: CssRule[] = [];
 
@@ -203,7 +203,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     const d = data instanceof Array ? data : [data];
 
     for (var i = 0, l = d.length; i < l; i++) {
-      const rule = (d[i] || {}) as CssRuleProperties;
+      const rule = (d[i] || {}) as CssRuleJSON;
       if (!rule.selectors) continue;
 
       const sm = em?.Selectors;
diff --git a/src/css_composer/model/CssRule.ts b/src/css_composer/model/CssRule.ts
index d10bb1b2a..d50c3580f 100644
--- a/src/css_composer/model/CssRule.ts
+++ b/src/css_composer/model/CssRule.ts
@@ -4,7 +4,7 @@ import StyleableModel from '../../domain_abstract/model/StyleableModel';
 import Selectors from '../../selector_manager/model/Selectors';
 import { getMediaLength } from '../../code_manager/model/CssGenerator';
 import { isEmptyObj, hasWin } from '../../utils/mixins';
-import Selector from '../../selector_manager/model/Selector';
+import Selector, { SelectorProps } from '../../selector_manager/model/Selector';
 import EditorModel from '../../editor/model/Editor';
 
 /** @private */
@@ -65,6 +65,10 @@ export interface CssRuleProperties {
   shallow?: boolean;
 }
 
+export interface CssRuleJSON extends Omit<CssRuleProperties, 'selectors'> {
+  selectors: (string | SelectorProps)[];
+}
+
 type AnyObject = Record<string, any>;
 
 // @ts-ignore
diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts
index 764a4482c..e13741fb3 100644
--- a/src/dom_components/model/Component.ts
+++ b/src/dom_components/model/Component.ts
@@ -33,7 +33,7 @@ import Frame from '../../canvas/model/Frame';
 import { DomComponentsConfig } from '../config/config';
 import ComponentView from '../view/ComponentView';
 import { AddOptions, ObjectAny, ObjectStrings, SetOptions } from '../../common';
-import CssRule, { CssRuleProperties } from '../../css_composer/model/CssRule';
+import CssRule, { CssRuleJSON, CssRuleProperties } from '../../css_composer/model/CssRule';
 import { TraitProperties } from '../../trait_manager/model/Trait';
 
 const escapeRegExp = (str: string) => {
@@ -194,6 +194,8 @@ export default class Component extends StyleableModel<ComponentProperties> {
   prevColl?: Components;
   __hasUm?: boolean;
   __symbReady?: boolean;
+  // @ts-ignore
+  collection!: Components;
 
   initialize(props = {}, opt: ComponentOptions = {}) {
     bindAll(this, '__upSymbProps', '__upSymbCls', '__upSymbComps');
@@ -208,7 +210,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
     if (parentAttr && parentAttr.propagate && !propagate) {
       const newAttr: Partial<ComponentProperties> = {};
       const toPropagate = parentAttr.propagate;
-      toPropagate.forEach(prop => (newAttr[prop] = parent.get(prop)));
+      toPropagate.forEach(prop => (newAttr[prop] = parent.get(prop as string)));
       newAttr.propagate = toPropagate;
       this.set({ ...newAttr, ...props });
     }
@@ -989,7 +991,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const components = this.get('components');
     const addChild = !this.opt.avoidChildren;
     this.set('components', comps);
-    addChild && components && comps.add(isFunction(components) ? components(this) : components, this.opt);
+    addChild && components && comps.add(isFunction(components) ? components(this) : components, this.opt as any);
     comps.on('add remove reset', this.__upSymbComps);
     // @ts-ignore
     this.listenTo(...toListen);
@@ -1059,7 +1061,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
         return comp;
       } else {
         // I have to remove components from the old container before adding them to a new one
-        comp.collection && comp.collection.remove(comp, { temporary: 1 });
+        comp.collection && (comp as Component).collection.remove(comp, { temporary: true } as any);
         return comp;
       }
     });
@@ -1138,7 +1140,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
    */
   parent(opts: any = {}): Component | undefined {
     const coll = this.collection || (opts.prev && this.prevColl);
-    return coll ? coll.parent : null;
+    return coll ? coll.parent : undefined;
   }
 
   /**
@@ -1172,7 +1174,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
       model.collection &&
         tb.push({
           label: em.getIcon('arrowUp'),
-          command: ed => ed.runCommand('core:component-exit', { force: 1 }),
+          command: (ed: any) => ed.runCommand('core:component-exit', { force: 1 }),
         });
       model.get('draggable') &&
         tb.push({
@@ -1499,7 +1501,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * });
    * // -> <span title="Custom attribute"></span>
    */
-  toHTML(opts: ToHTMLOptions = {}) {
+  toHTML(opts: ToHTMLOptions = {}): string {
     const model = this;
     const attrs = [];
     const customTag = opts.tag;
@@ -1718,7 +1720,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * @private
    */
   getScriptString(script?: string | Function) {
-    let scr = script || this.get('script');
+    let scr = script || this.get('script') || '';
 
     if (!scr) {
       return scr;
@@ -1795,7 +1797,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
       // Component without parent
       if (!coll) {
         this.components('', opts);
-        this.components().removeChildren(this, null, opts);
+        this.components().removeChildren(this, undefined, opts);
       }
     };
     const rmOpts = { ...opts };
@@ -2022,8 +2024,8 @@ export default class Component extends StyleableModel<ComponentProperties> {
   }
 
   static checkId(
-    components: ComponentDefinitionDefined[],
-    styles: { selectors: string[] }[] = [],
+    components: ComponentDefinitionDefined | ComponentDefinitionDefined[],
+    styles: CssRuleJSON[] = [],
     list: ObjectAny = {},
     opts: { keepIds?: string[] } = {}
   ) {
diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.ts
similarity index 64%
rename from src/dom_components/model/Components.js
rename to src/dom_components/model/Components.ts
index b324f1d74..5e31ef003 100644
--- a/src/dom_components/model/Components.js
+++ b/src/dom_components/model/Components.ts
@@ -1,10 +1,17 @@
 import Backbone from 'backbone';
 import { isEmpty, isArray, isString, isFunction, each, includes, extend, flatten, debounce, keys } from 'underscore';
-import Component, { keySymbol, keySymbols } from './Component';
-
-export const getComponentIds = (cmp, res = []) => {
+import Component from './Component';
+import { AddOptions, Collection, ObjectAny } from '../../common';
+import { DomComponentsConfig } from '../config/config';
+import EditorModel from '../../editor/model/Editor';
+import ComponentManager from '..';
+import CssRules from '../../css_composer/model/CssRules';
+import CssRule from '../../css_composer/model/CssRule';
+import { ComponentAdd, ComponentDefinitionDefined, ComponentProperties } from './types';
+
+export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => {
   if (!cmp) return [];
-  const cmps = isArray(cmp) || isFunction(cmp.map) ? cmp : [cmp];
+  const cmps = (isArray(cmp) || isFunction((cmp as Components).map) ? cmp : [cmp]) as Component[];
   cmps.map(cmp => {
     res.push(cmp.getId());
     getComponentIds(cmp.components().models, res);
@@ -12,7 +19,7 @@ export const getComponentIds = (cmp, res = []) => {
   return res;
 };
 
-const getComponentsFromDefs = (items, all = {}, opts = {}) => {
+const getComponentsFromDefs = (items: any, all: ObjectAny = {}, opts: any = {}) => {
   opts.visitedCmps = opts.visitedCmps || {};
   const { visitedCmps } = opts;
   const itms = isArray(items) ? items : [items];
@@ -56,19 +63,33 @@ const getComponentsFromDefs = (items, all = {}, opts = {}) => {
   });
 };
 
-export default class Components extends Backbone.Collection {
-  initialize(models, opt = {}) {
+export interface ComponentsOptions {
+  em?: EditorModel;
+  config?: DomComponentsConfig;
+  domc?: ComponentManager;
+}
+
+// @ts-ignore
+export default class Components extends Collection<Component> {
+  opt!: ComponentsOptions;
+  config?: DomComponentsConfig;
+  em!: EditorModel;
+  domc?: ComponentManager;
+  parent?: Component;
+  __firstAdd?: any;
+
+  initialize(models: any, opt: ComponentsOptions = {}) {
     this.opt = opt;
     this.listenTo(this, 'add', this.onAdd);
     this.listenTo(this, 'remove', this.removeChildren);
     this.listenTo(this, 'reset', this.resetChildren);
     const { em, config } = opt;
     this.config = config;
-    this.em = em;
-    this.domc = opt.domc || (em && em.get('DomComponents'));
+    this.em = em!;
+    this.domc = opt.domc || em?.Components;
   }
 
-  resetChildren(models, opts = {}) {
+  resetChildren(models: Components, opts: { previousModels?: Component[]; keepIds?: string[] } = {}) {
     const coll = this;
     const prev = opts.previousModels || [];
     const toRemove = prev.filter(prev => !models.get(prev.cid));
@@ -78,10 +99,10 @@ export default class Components extends Backbone.Collection {
     models.each(model => this.onAdd(model));
   }
 
-  resetFromString(input = '', opts = {}) {
+  resetFromString(input = '', opts: { visitedCmps?: Record<string, Component[]>; keepIds?: string[] } = {}) {
     opts.keepIds = getComponentIds(this);
     const { domc, em, parent } = this;
-    const cssc = em?.get('CssComposer');
+    const cssc = em?.Css;
     const allByID = domc?.allById() || {};
     const parsed = this.parseString(input, opts);
     const newCmps = getComponentsFromDefs(parsed, allByID, opts);
@@ -98,19 +119,20 @@ export default class Components extends Backbone.Collection {
           cmps.forEach(cmp => {
             rulesToClone.forEach(rule => {
               const newRule = rule.clone();
+              // @ts-ignore
               newRule.set('selectors', [`#${cmp.attributes.id}`]);
-              cssc.getAll().add(newRule);
+              cssc!.getAll().add(newRule);
             });
           });
         }
       }
     });
 
-    this.reset(newCmps, opts);
+    this.reset(newCmps, opts as any);
     em?.trigger('component:content', parent, opts, input);
   }
 
-  removeChildren(removed, coll, opts = {}) {
+  removeChildren(removed: Component, coll?: Components, opts: any = {}) {
     // Removing a parent component can cause this function
     // to be called with an already removed child element
     if (!removed) {
@@ -124,19 +146,21 @@ export default class Components extends Backbone.Collection {
     if (!isTemp) {
       // Remove the component from the global list
       const id = removed.getId();
-      const sels = em.get('SelectorManager').getAll();
-      const rules = em.get('CssComposer').getAll();
+      const sels = em.Selectors.getAll();
+      const rules = em.Css.getAll();
       const canRemoveStyle = (opts.keepIds || []).indexOf(id) < 0;
       const allByID = domc ? domc.allById() : {};
       delete allByID[id];
 
       // Remove all component related styles
-      const rulesRemoved = canRemoveStyle
-        ? rules.remove(
-            rules.filter(r => r.getSelectors().getFullString() === `#${id}`),
-            opts
-          )
-        : [];
+      const rulesRemoved = (
+        canRemoveStyle
+          ? rules.remove(
+              rules.filter(r => r.getSelectors().getFullString() === `#${id}`),
+              opts
+            )
+          : []
+      ) as CssRule[];
 
       // Clean selectors
       sels.remove(rulesRemoved.map(rule => rule.getSelectors().at(0)));
@@ -162,11 +186,12 @@ export default class Components extends Backbone.Collection {
     removed.__postRemove();
   }
 
-  model(attrs, options) {
+  // @ts-ignore
+  model(attrs: Partial<ComponentProperties>, options: any) {
     const { opt } = options.collection;
-    const { em } = opt;
+    const em = opt.em as EditorModel;
     let model;
-    const df = em.get('DomComponents').componentTypes;
+    const df = em.Components.componentTypes;
     options.em = em;
     options.config = opt.config;
     options.componentTypes = df;
@@ -194,12 +219,12 @@ export default class Components extends Backbone.Collection {
     return new model(attrs, options);
   }
 
-  parseString(value, opt = {}) {
+  parseString(value: string, opt: AddOptions & { temporary?: boolean; keepIds?: string[] } = {}) {
     const { em, domc } = this;
-    const cssc = em.get('CssComposer');
-    const parsed = em.get('Parser').parseHtml(value);
+    const cssc = em.Css;
+    const parsed = em.Parser.parseHtml(value);
     // We need this to avoid duplicate IDs
-    Component.checkId(parsed.html, parsed.css, domc.componentsById, opt);
+    Component.checkId(parsed.html!, parsed.css, domc!.componentsById, opt);
 
     if (parsed.css && cssc && !opt.temporary) {
       const { at, ...optsToPass } = opt;
@@ -212,26 +237,29 @@ export default class Components extends Backbone.Collection {
     return parsed.html;
   }
 
-  add(models, opt = {}) {
+  // @ts-ignore
+  add(models: ComponentAdd, opt: AddOptions & { previousModels?: Component[]; keepIds?: string[] } = {}) {
     opt.keepIds = [...(opt.keepIds || []), ...getComponentIds(opt.previousModels)];
 
     if (isString(models)) {
-      models = this.parseString(models, opt);
+      models = this.parseString(models, opt)!;
     } else if (isArray(models)) {
       models = [...models];
-      models.forEach((item, index) => {
+      models.forEach((item: string, index: number) => {
         if (isString(item)) {
           const nodes = this.parseString(item, opt);
-          models[index] = isArray(nodes) && !nodes.length ? null : nodes;
+          (models as any)[index] = isArray(nodes) && !nodes.length ? null : nodes;
         }
       });
     }
 
     const isMult = isArray(models);
-    models = (isMult ? models : [models]).filter(i => i).map(model => this.processDef(model));
-    models = isMult ? flatten(models, 1) : models[0];
+    // @ts-ignore
+    models = (isMult ? models : [models]).filter(Boolean).map((model: any) => this.processDef(model));
+    // @ts-ignore
+    models = isMult ? flatten(models as any, 1) : models[0];
 
-    const result = Backbone.Collection.prototype.add.apply(this, [models, opt]);
+    const result = Backbone.Collection.prototype.add.apply(this, [models as any, opt]);
     this.__firstAdd = result;
     return result;
   }
@@ -239,7 +267,7 @@ export default class Components extends Backbone.Collection {
   /**
    * Process component definition.
    */
-  processDef(mdl) {
+  processDef(mdl: any) {
     // Avoid processing Models
     if (mdl.cid && mdl.ccid) return mdl;
     const { em, config = {} } = this;
@@ -259,8 +287,8 @@ export default class Components extends Backbone.Collection {
     if (model.$$typeof && typeof model.props == 'object') {
       model = { ...model };
       model.props = { ...model.props };
-      const domc = em.get('DomComponents');
-      const parser = em.get('Parser');
+      const domc = em.Components;
+      const parser = em.Parser;
       const { parserHtml } = parser;
 
       each(model, (value, key) => {
@@ -289,7 +317,7 @@ export default class Components extends Backbone.Collection {
     return model;
   }
 
-  onAdd(model, c, opts = {}) {
+  onAdd(model: Component, c?: any, opts: { temporary?: boolean } = {}) {
     const { domc, em } = this;
     const style = model.getStyle();
     const avoidInline = em && em.getConfig().avoidInlineStyle;
@@ -302,35 +330,35 @@ export default class Components extends Backbone.Collection {
       model.addClass(name);
     }
 
-    model.__postAdd({ recursive: 1 });
-    this.__onAddEnd();
+    model.__postAdd({ recursive: true });
+    // this.__onAddEnd();
   }
 
-  __onAddEnd = debounce(function () {
-    // TODO to check symbols on load, probably this might be removed as symbols
-    // are always recovered from the model
-    // const { domc } = this;
-    // const allComp = (domc && domc.allById()) || {};
-    // const firstAdd = this.__firstAdd;
-    // const toCheck = isArray(firstAdd) ? firstAdd : [firstAdd];
-    // const silent = { silent: true };
-    // const onAll = comps => {
-    //   comps.forEach(comp => {
-    //     const symbol = comp.get(keySymbols);
-    //     const symbolOf = comp.get(keySymbol);
-    //     if (symbol && isArray(symbol) && isString(symbol[0])) {
-    //       comp.set(
-    //         keySymbols,
-    //         symbol.map(smb => allComp[smb]).filter(i => i),
-    //         silent
-    //       );
-    //     }
-    //     if (isString(symbolOf)) {
-    //       comp.set(keySymbol, allComp[symbolOf], silent);
-    //     }
-    //     onAll(comp.components());
-    //   });
-    // };
-    // onAll(toCheck);
-  });
+  // __onAddEnd = debounce(function () {
+  //   // TODO to check symbols on load, probably this might be removed as symbols
+  //   // are always recovered from the model
+  //   // const { domc } = this;
+  //   // const allComp = (domc && domc.allById()) || {};
+  //   // const firstAdd = this.__firstAdd;
+  //   // const toCheck = isArray(firstAdd) ? firstAdd : [firstAdd];
+  //   // const silent = { silent: true };
+  //   // const onAll = comps => {
+  //   //   comps.forEach(comp => {
+  //   //     const symbol = comp.get(keySymbols);
+  //   //     const symbolOf = comp.get(keySymbol);
+  //   //     if (symbol && isArray(symbol) && isString(symbol[0])) {
+  //   //       comp.set(
+  //   //         keySymbols,
+  //   //         symbol.map(smb => allComp[smb]).filter(i => i),
+  //   //         silent
+  //   //       );
+  //   //     }
+  //   //     if (isString(symbolOf)) {
+  //   //       comp.set(keySymbol, allComp[symbolOf], silent);
+  //   //     }
+  //   //     onAll(comp.components());
+  //   //   });
+  //   // };
+  //   // onAll(toCheck);
+  // });
 }
diff --git a/src/dom_components/model/types.ts b/src/dom_components/model/types.ts
index 6821c16f4..573bf447f 100644
--- a/src/dom_components/model/types.ts
+++ b/src/dom_components/model/types.ts
@@ -188,8 +188,8 @@ export interface ComponentDefinitionDefined extends Omit<ComponentProperties, 'c
   /**
    * Children components.
    */
-  components: ComponentDefinitionDefined[];
-  traits: Partial<TraitProperties>[];
+  components?: ComponentDefinitionDefined[];
+  traits?: Partial<TraitProperties>[];
   [key: string]: any;
 }
 
@@ -197,7 +197,9 @@ export interface ComponentModelProperties extends ComponentProperties {
   [key: string]: any;
 }
 
-export type ComponentAdd = Component | ComponentDefinition | ComponentDefinition[] | string;
+type ComponentAddType = Component | ComponentDefinitionDefined | ComponentDefinitionDefined | string;
+
+export type ComponentAdd = ComponentAddType | ComponentAddType[];
 
 export type ToHTMLOptions = {
   /**
diff --git a/src/parser/model/BrowserParserCss.ts b/src/parser/model/BrowserParserCss.ts
index fb85d6658..76d74294d 100644
--- a/src/parser/model/BrowserParserCss.ts
+++ b/src/parser/model/BrowserParserCss.ts
@@ -1,5 +1,5 @@
 import { keys } from 'underscore';
-import { CssRuleProperties } from '../../css_composer/model/CssRule';
+import { CssRuleJSON, CssRuleProperties } from '../../css_composer/model/CssRule';
 
 // At-rules
 // https://developer.mozilla.org/it/docs/Web/API/CSSRule#Type_constants
@@ -93,8 +93,8 @@ export const parseCondition = (node: CSSRule): string => {
  * @param {Object} style Key-value object of style declarations
  * @return {Object}
  */
-export const createNode = (selectors: string[], style = {}, opts = {}): CssRuleProperties => {
-  const node: Partial<CssRuleProperties> = {};
+export const createNode = (selectors: string[], style = {}, opts = {}): CssRuleJSON => {
+  const node: Partial<CssRuleJSON> = {};
   const selLen = selectors.length;
   const lastClass = selectors[selLen - 1];
   const stateArr = lastClass ? lastClass.split(/:(.+)/) : [];
@@ -114,11 +114,10 @@ export const createNode = (selectors: string[], style = {}, opts = {}): CssRuleP
     stateArr.splice(stateArr.length - 1, 1);
   }
 
-  // @ts-ignore
   node.selectors = selectors;
   node.style = style;
 
-  return node as CssRuleProperties;
+  return node as CssRuleJSON;
 };
 
 /**
@@ -127,7 +126,7 @@ export const createNode = (selectors: string[], style = {}, opts = {}): CssRuleP
  * @return {Array<Object>}
  */
 export const parseNode = (el: CSSStyleSheet | CSSRule) => {
-  let result: CssRuleProperties[] = [];
+  let result: CssRuleJSON[] = [];
   const nodes = (el as CSSStyleSheet).cssRules || [];
 
   for (let i = 0, len = nodes.length; i < len; i++) {
@@ -181,7 +180,7 @@ export const parseNode = (el: CSSStyleSheet | CSSRule) => {
       if (lastRule) {
         lastRule.selectorsAdd = selsAddStr;
       } else {
-        const model: CssRuleProperties = {
+        const model: CssRuleJSON = {
           selectors: [],
           selectorsAdd: selsAddStr,
           style,
diff --git a/src/parser/model/ParserCss.ts b/src/parser/model/ParserCss.ts
index 4fd0ebd4f..0f545e269 100644
--- a/src/parser/model/ParserCss.ts
+++ b/src/parser/model/ParserCss.ts
@@ -1,5 +1,5 @@
 import { isString } from 'underscore';
-import { CssRuleProperties } from '../../css_composer/model/CssRule';
+import { CssRuleJSON, CssRuleProperties } from '../../css_composer/model/CssRule';
 import EditorModel from '../../editor/model/Editor';
 import { ParsedCssRule, ParserConfig } from '../config/config';
 import BrowserCssParser, { parseSelector, createNode } from './BrowserParserCss';
@@ -11,7 +11,7 @@ export default (em?: EditorModel, config: ParserConfig = {}) => ({
    * @return {Array<Object>}
    */
   parse(str: string) {
-    let result: CssRuleProperties[] = [];
+    let result: CssRuleJSON[] = [];
     const { parserCss } = config;
     const editor = em?.Editor;
     const nodes = parserCss ? parserCss(str, editor!) : BrowserCssParser(str);
@@ -26,12 +26,12 @@ export default (em?: EditorModel, config: ParserConfig = {}) => ({
    * a valid object for the CSS composer
    * @return {[type]}
    */
-  checkNode(node: CssRuleProperties | ParsedCssRule): CssRuleProperties[] {
+  checkNode(node: CssRuleJSON | ParsedCssRule): CssRuleJSON[] {
     const { selectors, style } = node;
-    let result = [node] as CssRuleProperties[];
+    let result = [node] as CssRuleJSON[];
 
     if (isString(selectors)) {
-      const nodes: CssRuleProperties[] = [];
+      const nodes: CssRuleJSON[] = [];
       const parsedNode = node as ParsedCssRule;
       const selsParsed = parseSelector(selectors);
       const classSets = selsParsed.result;
diff --git a/src/parser/model/ParserHtml.ts b/src/parser/model/ParserHtml.ts
index 807d922ae..07cb77a6f 100644
--- a/src/parser/model/ParserHtml.ts
+++ b/src/parser/model/ParserHtml.ts
@@ -1,5 +1,6 @@
 import { each, isString, isFunction, isUndefined } from 'underscore';
-import { CssRuleProperties } from '../../css_composer/model/CssRule';
+import { CssRuleJSON, CssRuleProperties } from '../../css_composer/model/CssRule';
+import { ComponentDefinitionDefined } from '../../dom_components/model/types';
 import EditorModel from '../../editor/model/Editor';
 import { HTMLParserOptions, ParserConfig } from '../config/config';
 import BrowserParserHtml from './BrowserParserHtml';
@@ -9,8 +10,8 @@ type AnyObject = Record<string, any>;
 type StringObject = Record<string, string>;
 
 type HTMLParseResult = {
-  html: null | Record<string, any> | Record<string, any>[]; // TODO replace with components
-  css: null | CssRuleProperties[];
+  html?: ComponentDefinitionDefined | ComponentDefinitionDefined[]; // TODO replace with components
+  css?: CssRuleJSON[];
 };
 
 const modelAttrStart = 'data-gjs-';
@@ -118,7 +119,7 @@ export default (em?: EditorModel, config: ParserConfig = {}) => {
      * @return {Array<Object>}
      */
     parseNode(el: HTMLElement, opts: AnyObject = {}) {
-      const result = [];
+      const result: ComponentDefinitionDefined[] = [];
       const nodes = el.childNodes;
 
       for (var i = 0, len = nodes.length; i < len; i++) {
@@ -128,7 +129,7 @@ export default (em?: EditorModel, config: ParserConfig = {}) => {
         const nodePrev = result[result.length - 1];
         const nodeChild = node.childNodes.length;
         const ct = this.compTypes;
-        let model: Record<string, any> = {}; // TODO use component properties
+        let model: ComponentDefinitionDefined = {}; // TODO use component properties
 
         // Start with understanding what kind of component it is
         if (ct) {
@@ -204,10 +205,12 @@ export default (em?: EditorModel, config: ParserConfig = {}) => {
           // just make it content of the current node
           if (nodeChild === 1 && firstChild.nodeType === 3) {
             !model.type && (model.type = 'text');
-            model.components = {
-              type: 'textnode',
-              content: firstChild.nodeValue,
-            };
+            model.components = [
+              {
+                type: 'textnode',
+                content: firstChild.nodeValue,
+              },
+            ];
           } else {
             model.components = this.parseNode(node, {
               ...opts,
@@ -282,7 +285,7 @@ export default (em?: EditorModel, config: ParserConfig = {}) => {
      */
     parse(str: string, parserCss: any, opts: HTMLParserOptions = {}) {
       const conf = em?.get('Config') || {};
-      const res: HTMLParseResult = { html: null, css: null };
+      const res: HTMLParseResult = {};
       const cf: AnyObject = { ...config, ...opts };
       const options = {
         ...config.optionsHtml,
diff --git a/src/selector_manager/index.ts b/src/selector_manager/index.ts
index d110f8aad..f47374a08 100644
--- a/src/selector_manager/index.ts
+++ b/src/selector_manager/index.ts
@@ -162,8 +162,10 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
   }
 
   // @ts-ignore
-  getAll(opts: { array?: boolean } = {}) {
-    return this.all ? (opts.array ? [...this.all.models] : this.all) : [];
+  getAll<T extends { array?: boolean }>(opts: T = {} as T) {
+    return (this.all ? (opts.array ? [...this.all.models] : this.all) : []) as T['array'] extends true
+      ? Selector[]
+      : Selectors;
   }
 
   __customData(opts: any = {}) {
diff --git a/src/selector_manager/model/Selector.ts b/src/selector_manager/model/Selector.ts
index 2bb937c48..4f4fe36fc 100644
--- a/src/selector_manager/model/Selector.ts
+++ b/src/selector_manager/model/Selector.ts
@@ -5,6 +5,15 @@ import EditorModel from '../../editor/model/Editor';
 const TYPE_CLASS = 1;
 const TYPE_ID = 2;
 
+export interface SelectorProps {
+  name: string;
+  label?: string;
+  type?: number;
+  active?: boolean;
+  private?: boolean;
+  protected?: boolean;
+}
+
 /**
  * @typedef Selector
  * @property {String} name Selector name, eg. `my-class`
@@ -50,9 +59,7 @@ export default class Selector extends Model {
 
     const namePreEsc = this.get('name');
     const { escapeName } = config;
-    const nameEsc = escapeName
-      ? escapeName(namePreEsc)
-      : Selector.escapeName(namePreEsc);
+    const nameEsc = escapeName ? escapeName(namePreEsc) : Selector.escapeName(namePreEsc);
     this.set('name', nameEsc);
     this.em = opts.em;
   }
diff --git a/src/trait_manager/view/TraitCheckboxView.ts b/src/trait_manager/view/TraitCheckboxView.ts
index c1d27a9b1..611944b5a 100644
--- a/src/trait_manager/view/TraitCheckboxView.ts
+++ b/src/trait_manager/view/TraitCheckboxView.ts
@@ -38,7 +38,7 @@ export default class TraitCheckboxView extends TraitView {
         checked = target.get(name);
         targetValue = checked;
       } else {
-        targetValue = target.get('attributes')[name];
+        targetValue = target.get('attributes')![name];
         checked = targetValue || targetValue === '' ? !0 : !1;
       }