diff --git a/packages/editor/package.json b/packages/editor/package.json
index 463b4523..85af4c39 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@types/styled-components": "^5.1.4",
+    "@wismapping/core-js": "^0.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "styled-components": "^5.2.1"
diff --git a/packages/mindplot/lib/components/ConnectionLine.js b/packages/mindplot/lib/components/ConnectionLine.js
index ae3afc4a..43d8dfb0 100644
--- a/packages/mindplot/lib/components/ConnectionLine.js
+++ b/packages/mindplot/lib/components/ConnectionLine.js
@@ -20,8 +20,8 @@ const core = Core();
 const web2D = require('@wismapping/web2d');
 const web2d = web2D();
 
-const INodeModel,
-    { TopicShape } = require('./model/INodeModel').default;
+const INodeModel = require('./model/INodeModel').default;
+const { TopicShape } = require('./model/INodeModel').default;
 const Topic = require('./Topic').default;
 
 const ConnectionLine = new Class({
diff --git a/packages/mindplot/lib/components/Events.js b/packages/mindplot/lib/components/Events.js
index 090532ee..cfe6e63d 100644
--- a/packages/mindplot/lib/components/Events.js
+++ b/packages/mindplot/lib/components/Events.js
@@ -1,5 +1,4 @@
 const Events = new Class({
-
     $events: {},
 
     _removeOn: function (string) {
@@ -20,11 +19,15 @@ const Events = new Class({
         type = this._removeOn(type);
         var events = this.$events[type];
         if (!events) return this;
-        args = Array.from(args);
-        _.each(events, function (fn) {
-            if (delay) fn.delay(delay, this, args);
-            else fn.apply(this, args);
-        }, this);
+        args = Array.isArray(args) ? args : [args];
+        _.each(
+            events,
+            function (fn) {
+                if (delay) fn.delay(delay, this, args);
+                else fn.apply(this, args);
+            },
+            this
+        );
         return this;
     },
 
@@ -36,8 +39,7 @@ const Events = new Class({
             if (index != -1) events.splice(index, 1);
         }
         return this;
-    }
-
+    },
 });
 
 export default Events;
diff --git a/packages/mindplot/lib/components/NodeGraph.js b/packages/mindplot/lib/components/NodeGraph.js
index 81339a1e..b7d9820d 100644
--- a/packages/mindplot/lib/components/NodeGraph.js
+++ b/packages/mindplot/lib/components/NodeGraph.js
@@ -15,180 +15,177 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Topic = require('./Topic').default
+const Topic = require('./Topic').default;
 const DragTopic = require('./DragTopic').default;
 const INodeModel = require('./model/INodeModel').default;
-const CentralTopic = require('./CentralTopic').default;
-const MainTopic = require('./MainTopic').default;
 
-const NodeGraph = new Class(/** @lends NodeGraph */{
-    /**
-     * @constructs
-     * @param {mindplot.model.NodeModel} nodeModel
-     * @param {Object<Number, String, Boolean>} options
-     * @throws will throw an error if nodeModel is null or undefined
-     */
-    initialize: function (nodeModel, options) {
-        $assert(nodeModel, "model can not be null");
+const NodeGraph = new Class(
+    /** @lends NodeGraph */ {
+        /**
+         * @constructs
+         * @param {mindplot.model.NodeModel} nodeModel
+         * @param {Object<Number, String, Boolean>} options
+         * @throws will throw an error if nodeModel is null or undefined
+         */
+        initialize: function (nodeModel, options) {
+            $assert(nodeModel, 'model can not be null');
 
-        this._options = options;
-        this._mouseEvents = true;
-        this.setModel(nodeModel);
-        this._onFocus = false;
-        this._size = {width: 50, height: 20};
-    },
+            this._options = options;
+            this._mouseEvents = true;
+            this.setModel(nodeModel);
+            this._onFocus = false;
+            this._size = { width: 50, height: 20 };
+        },
 
-    /** @return true if option is set to read-only */
-    isReadOnly: function () {
-        return this._options.readOnly;
-    },
+        /** @return true if option is set to read-only */
+        isReadOnly: function () {
+            return this._options.readOnly;
+        },
 
-    /** @return model type */
-    getType: function () {
-        var model = this.getModel();
-        return model.getType();
-    },
+        /** @return model type */
+        getType: function () {
+            var model = this.getModel();
+            return model.getType();
+        },
 
-    /**
-     * @param {String} id
-     * @throws will throw an error if the topic id is not a number
-     */
-    setId: function (id) {
-        $assert(typeof  topic.getId() == "number", "id is not a number:" + id);
-        this.getModel().setId(id);
-    },
+        /**
+         * @param {String} id
+         * @throws will throw an error if the topic id is not a number
+         */
+        setId: function (id) {
+            $assert(typeof topic.getId() == 'number', 'id is not a number:' + id);
+            this.getModel().setId(id);
+        },
 
-    _set2DElement: function (elem2d) {
-        this._elem2d = elem2d;
-    },
+        _set2DElement: function (elem2d) {
+            this._elem2d = elem2d;
+        },
 
-    /**
-     * @return 2D element
-     * @throws will throw an error if the element is null or undefined within node graph
-     */
-    get2DElement: function () {
-        $assert(this._elem2d, 'NodeGraph has not been initialized properly');
-        return this._elem2d;
-    },
+        /**
+         * @return 2D element
+         * @throws will throw an error if the element is null or undefined within node graph
+         */
+        get2DElement: function () {
+            $assert(this._elem2d, 'NodeGraph has not been initialized properly');
+            return this._elem2d;
+        },
 
-    /** @abstract */
-    setPosition: function (point, fireEvent) {
-        throw "Unsupported operation";
-    },
+        /** @abstract */
+        setPosition: function (point, fireEvent) {
+            throw 'Unsupported operation';
+        },
 
-    /** */
-    addEvent: function (type, listener) {
-        var elem = this.get2DElement();
-        elem.addEvent(type, listener);
-    },
+        /** */
+        addEvent: function (type, listener) {
+            var elem = this.get2DElement();
+            elem.addEvent(type, listener);
+        },
 
-    /** */
-    removeEvent: function (type, listener) {
-        var elem = this.get2DElement();
-        elem.removeEvent(type, listener);
-    },
+        /** */
+        removeEvent: function (type, listener) {
+            var elem = this.get2DElement();
+            elem.removeEvent(type, listener);
+        },
 
-    /** */
-    fireEvent: function (type, event) {
-        var elem = this.get2DElement();
-        elem.trigger(type, event);
-    },
+        /** */
+        fireEvent: function (type, event) {
+            var elem = this.get2DElement();
+            elem.trigger(type, event);
+        },
 
-    /** */
-    setMouseEventsEnabled: function (isEnabled) {
-        this._mouseEvents = isEnabled;
-    },
+        /** */
+        setMouseEventsEnabled: function (isEnabled) {
+            this._mouseEvents = isEnabled;
+        },
 
-    /** */
-    isMouseEventsEnabled: function () {
-        return this._mouseEvents;
-    },
+        /** */
+        isMouseEventsEnabled: function () {
+            return this._mouseEvents;
+        },
 
-    /** @return {Object<Number>} size*/
-    getSize: function () {
-        return this._size;
-    },
+        /** @return {Object<Number>} size*/
+        getSize: function () {
+            return this._size;
+        },
 
-    /** @param {Object<Number>} size*/
-    setSize: function (size) {
-        this._size.width = parseInt(size.width);
-        this._size.height = parseInt(size.height);
-    },
+        /** @param {Object<Number>} size*/
+        setSize: function (size) {
+            this._size.width = parseInt(size.width);
+            this._size.height = parseInt(size.height);
+        },
 
-    /**
-     * @return {mindplot.model.NodeModel} the node model
-     */
-    getModel: function () {
-        $assert(this._model, 'Model has not been initialized yet');
-        return this._model;
-    },
+        /**
+         * @return {mindplot.model.NodeModel} the node model
+         */
+        getModel: function () {
+            $assert(this._model, 'Model has not been initialized yet');
+            return this._model;
+        },
 
-    /**
-     * @param {mindplot.NodeModel} model the node model
-     * @throws will throw an error if model is null or undefined
-     */
-    setModel: function (model) {
-        $assert(model, 'Model can not be null');
-        this._model = model;
-    },
+        /**
+         * @param {mindplot.NodeModel} model the node model
+         * @throws will throw an error if model is null or undefined
+         */
+        setModel: function (model) {
+            $assert(model, 'Model can not be null');
+            this._model = model;
+        },
 
-    /** */
-    getId: function () {
-        return this._model.getId();
-    },
+        /** */
+        getId: function () {
+            return this._model.getId();
+        },
 
-    /** */
-    setOnFocus: function (focus) {
-        if (this._onFocus != focus) {
+        /** */
+        setOnFocus: function (focus) {
+            if (this._onFocus != focus) {
+                this._onFocus = focus;
+                var outerShape = this.getOuterShape();
+                if (focus) {
+                    outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
+                    outerShape.setOpacity(1);
+                } else {
+                    outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
+                    outerShape.setOpacity(0);
+                }
+                this.setCursor('move');
 
-            this._onFocus = focus;
-            var outerShape = this.getOuterShape();
-            if (focus) {
-                outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
-                outerShape.setOpacity(1);
+                // In any case, always try to hide the editor ...
+                this.closeEditors();
 
-            } else {
-                outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
-                outerShape.setOpacity(0);
+                // Fire event ...
+                this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
             }
-            this.setCursor('move');
+        },
 
-            // In any case, always try to hide the editor ...
-            this.closeEditors();
+        /** @return {Boolean} true if the node graph is on focus */
+        isOnFocus: function () {
+            return this._onFocus;
+        },
 
-            // Fire event ...
-            this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
+        /** */
+        dispose: function (workspace) {
+            this.setOnFocus(false);
+            workspace.removeChild(this);
+        },
 
-        }
-    },
+        /** */
+        createDragNode: function (layoutManager) {
+            var dragShape = this._buildDragShape();
+            return new DragTopic(dragShape, this, layoutManager);
+        },
 
-    /** @return {Boolean} true if the node graph is on focus */
-    isOnFocus: function () {
-        return this._onFocus;
-    },
+        _buildDragShape: function () {
+            $assert(false, '_buildDragShape must be implemented by all nodes.');
+        },
 
-    /** */
-    dispose: function (workspace) {
-        this.setOnFocus(false);
-        workspace.removeChild(this);
-    },
-
-    /** */
-    createDragNode: function (layoutManager) {
-        var dragShape = this._buildDragShape();
-        return new DragTopic(dragShape, this, layoutManager);
-    },
-
-    _buildDragShape: function () {
-        $assert(false, '_buildDragShape must be implemented by all nodes.');
-    },
-
-    /** */
-    getPosition: function () {
-        var model = this.getModel();
-        return model.getPosition();
+        /** */
+        getPosition: function () {
+            var model = this.getModel();
+            return model.getPosition();
+        },
     }
-});
+);
 
 /**
  * creates a new topic from the given node model
@@ -202,6 +199,8 @@ const NodeGraph = new Class(/** @lends NodeGraph */{
  * @return {mindplot.CentralTopic|mindplot.MainTopic} the new topic
  */
 NodeGraph.create = function (nodeModel, options) {
+    const CentralTopic = require('./CentralTopic').default;
+    const MainTopic = require('./MainTopic').default;
     $assert(nodeModel, 'Model can not be null');
 
     var type = nodeModel.getType();
@@ -213,7 +212,7 @@ NodeGraph.create = function (nodeModel, options) {
     } else if (type == INodeModel.MAIN_TOPIC_TYPE) {
         result = new MainTopic(nodeModel, options);
     } else {
-        $assert(false, "unsupported node type:" + type);
+        $assert(false, 'unsupported node type:' + type);
     }
 
     return result;
diff --git a/packages/mindplot/lib/components/commands/index.js b/packages/mindplot/lib/components/commands/index.js
new file mode 100644
index 00000000..a5ae43ab
--- /dev/null
+++ b/packages/mindplot/lib/components/commands/index.js
@@ -0,0 +1,21 @@
+const addFeatureToTopicCommand = require('./AddFeatureToTopicCommand').default;
+const addRelationshipCommand = require('./AddRelationshipCommand').default;
+const addTopicCommand = require('./AddTopicCommand').default;
+const changeFeatureToTopicCommand = require('./ChangeFeatureToTopicCommand').default;
+const deleteCommand = require('./DeleteCommand').default;
+const dragTopicCommand = require('./DragTopicCommand').default;
+const genericFunctionCommand = require('./GenericFunctionCommand').default;
+const moveControlPointCommand = require('./MoveControlPointCommand').default;
+const removeFeatureFromTopicCommand = require('./RemoveFeatureFromTopicCommand').default;
+
+export const Commands = {
+    AddFeatureToTopicCommand: addFeatureToTopicCommand,
+    AddRelationshipCommand: addRelationshipCommand,
+    AddTopicCommand: addTopicCommand,
+    ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
+    DeleteCommand: deleteCommand,
+    DragTopicCommand: dragTopicCommand,
+    GenericFunctionCommand: genericFunctionCommand,
+    MoveControlPointCommand: moveControlPointCommand,
+    RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
+};
diff --git a/packages/mindplot/lib/components/index.js b/packages/mindplot/lib/components/index.js
new file mode 100644
index 00000000..751a97d5
--- /dev/null
+++ b/packages/mindplot/lib/components/index.js
@@ -0,0 +1,108 @@
+const acitonDispatcher = require('./ActionDispatcher').default;
+const actionIcon = require('./ActionIcon').default;
+const centralTopic = require('./CentralTopic').default;
+const command = require('./Command').default;
+const connectionLine = require('./ConnectionLine').default;
+const controlPoint = require('./ControlPoint').default;
+const designer = require('./Designer').default;
+const designerAcitonRun = require('./DesignerActionRunner').default;
+const designerKeyboard = require('./DesignerKeyboard').default;
+const desginerModel = require('./DesignerModel').default;
+const desginerUndoManager = require('./DesignerUndoManager').default;
+const dragConnector = require('./DragConnector').default;
+const dragManager = require('./DragManager').default;
+const dragPivot = require('./DragPivot').default;
+const dragTopic = require('./DragTopic').default;
+const editorOptions = require('./EditorOptions').default;
+const editorProperties = require('./EditorProperties').default;
+const events = require('./Events').default;
+const footer = require('./footer');
+//const header =require('./header');
+const icon = require('./Icon').default;
+const iconGroup = require('./IconGroup').default;
+const imageIcon = require('./ImageIcon').default;
+const keyboard = require('./Keyboard').default;
+const linkIcon = require('./LinkIcon').default;
+const localStorageManager = require('./LocalStorageManager').default;
+const mainTopic = require('./MainTopic').default;
+const messages = require('./Messages').default;
+const messageBundle_ca = require('./MessageBundle_ca').default;
+const messageBundle_de = require('./MessageBundle_de').default;
+const messageBundle_en = require('./MessageBundle_en').default;
+const messageBundle_es = require('./MessageBundle_es').default;
+const messageBundle_fr = require('./MessageBundle_fr').default;
+const messageBundle_pt_BR = require('./MessageBundle_pt_BR').default;
+const messageBundle_zh_CN = require('./MessageBundle_zh_CN').default;
+const messageBundle_zh_TW = require('./MessageBundle_zh_TW').default;
+const multilineTextEditor = require('./MultilineTextEditor').default;
+const nodeGraph = require('./NodeGraph').default;
+const noteIcon = require('./NoteIcon').default;
+const options = require('./Options').default;
+const persistenceManger = require('./PersistenceManager').default;
+const relationship = require('./Relationship').default;
+const relationshipPivot = require('./RelationshipPivot').default;
+const restPersistenceManager = require('./RestPersistenceManager').default;
+const screenManager = require('./ScreenManager').default;
+const shrinkConnector = require('./ShrinkConnector').default;
+const standaloneActionDispatcher = require('./StandaloneActionDispatcher').default;
+const textEditor = require('./TextEditor').default;
+//const textEditorFacotry = require('./TextEditorFactory').default;
+const topic = require('./Topic').default;
+const topicEventDispatcher = require('./TopicEventDispatcher').default;
+const topicFeature = require('./TopicFeature').default;
+const topicStyle = require('./TopicStyle').default;
+const workspace = require('./Workspace').default;
+
+export const Components = {
+    ActionDispatcher: acitonDispatcher,
+    ActionIcon: actionIcon,
+    CentralTopic: centralTopic,
+    Command: command,
+    ConnectionLine: connectionLine,
+    ControlPoint: controlPoint,
+    Designer: designer,
+    DesignerActionRunner: designerAcitonRun,
+    DesignerKeyboard: designerKeyboard,
+    DesignerModel: desginerModel,
+    DesignerUndoManager: desginerUndoManager,
+    DragConnector: dragConnector,
+    DragManager: dragManager,
+    DragPivot: dragPivot,
+    DragTopic: dragTopic,
+    EditorOptions: editorOptions,
+    EditorProperties: editorProperties,
+    Events: events,
+    Icon: icon,
+    IconGroup: iconGroup,
+    ImageIcon: imageIcon,
+    Keyboard: keyboard,
+    LinkIcon: linkIcon,
+    LocalStorageManager: localStorageManager,
+    MainTopic: mainTopic,
+    MessageBundle_ca: messageBundle_ca,
+    MessageBundle_de: messageBundle_de,
+    MessageBundle_en: messageBundle_en,
+    MessageBundle_es: messageBundle_es,
+    MesasgeBundle_fr: messageBundle_fr,
+    MessageBundle_pt_BR: messageBundle_pt_BR,
+    MessageBundle_zh_CN: messageBundle_zh_CN,
+    MessageBundle_zh_TW: messageBundle_zh_TW,
+    Messages: messages,
+    MultilineTextEditor: multilineTextEditor,
+    NodeGraph: nodeGraph,
+    NoteIcon: noteIcon,
+    Options: options,
+    PersistenceManager: persistenceManger,
+    Relationship: relationship,
+    RelationshipPivot: relationshipPivot,
+    RestPersistenceManager: restPersistenceManager,
+    ScreenManager: screenManager,
+    StandaloneActionDispatcher: standaloneActionDispatcher,
+    TextEditor: textEditor,
+    //TextEditorFactory: textEditorFacotry,
+    Topic: topic,
+    TopicEventDispatcher: topicEventDispatcher,
+    TopicFeature: topicFeature,
+    TopicStyle: topicStyle,
+    Workspace: workspace,
+};
diff --git a/packages/mindplot/lib/components/layout/index.js b/packages/mindplot/lib/components/layout/index.js
new file mode 100644
index 00000000..559fda48
--- /dev/null
+++ b/packages/mindplot/lib/components/layout/index.js
@@ -0,0 +1,27 @@
+const abstractBasicSorter = require('./AbstractBasicSorter').default;
+const balancedSorter = require('./BalancedSorter').default;
+const changeEvent = require('./ChangeEvent').default;
+const childrenSorterStrategy = require('./ChildrenSorterStrategy').default;
+const eventBus = require('./EventBus').default;
+const eventBusDispatcher = require('./EventBusDispatcher').default;
+const gridSorter = require('./GridSorter').default;
+const layoutManager = require('./LayoutManager').default;
+const node = require('./Node').default;
+const originalLayout = require('./OriginalLayout').default;
+const rootedTreeSet = require('./RootedTreeSet').default;
+const symmetricSorter = require('./SymmetricSorter').default;
+
+export const Layout = {
+    AbstractBasicSorter: abstractBasicSorter,
+    BalancedSorter: balancedSorter,
+    ChangeEvent: changeEvent,
+    ChildrenSorterStrategy: childrenSorterStrategy,
+    EventBus: eventBus,
+    EventBusDispatcher: eventBusDispatcher,
+    GridSorter: gridSorter,
+    LayoutManager: layoutManager,
+    Node: node,
+    OriginalLayout: originalLayout,
+    RootedTreeSet: rootedTreeSet,
+    SymmetricSorter: symmetricSorter,
+};
diff --git a/packages/mindplot/lib/components/model/index.js b/packages/mindplot/lib/components/model/index.js
new file mode 100644
index 00000000..de5e30e9
--- /dev/null
+++ b/packages/mindplot/lib/components/model/index.js
@@ -0,0 +1,21 @@
+const featureModel = require('./FeatureModel').default;
+const iconModel = require('./IconModel').default;
+const imindmap = require('./IMindmap').default;
+const inodeModel = require('./INodeModel').default;
+const linkModel = require('./LinkModel').default;
+const mindmap = require('./Mindmap').default;
+const nodeModel = require('./NodeModel').default;
+const noteModel = require('./NoteModel').default;
+const relationshipModel = require('./RelationshipModel').default;
+
+export const Models = {
+    FeatureModel: featureModel,
+    IconModel: iconModel,
+    IMindmap: imindmap,
+    INodeModel: inodeModel,
+    LinkModel: linkModel,
+    Mindmap: mindmap,
+    NodeModel: nodeModel,
+    NoteModel: noteModel,
+    RelationshipModel: relationshipModel,
+};
diff --git a/packages/mindplot/lib/components/persistence/index.js b/packages/mindplot/lib/components/persistence/index.js
new file mode 100644
index 00000000..0cce9472
--- /dev/null
+++ b/packages/mindplot/lib/components/persistence/index.js
@@ -0,0 +1,17 @@
+const beta2PelaMigrator = require('./Beta2PelaMigrator').default;
+const modelCodeName = require('./ModelCodeName').default;
+const pela2TangoMigrator = require('./Pela2TangoMigrator').default;
+const xmlSerializer_Beta = require('./XMLSerializer_Beta').default;
+const xmlSerializer_Pela = require('./XMLSerializer_Pela').default;
+const xmlSerializer_Tango = require('./XMLSerializer_Tango').default;
+const xmlSerializerFactory = require('./XMLSerializerFactory').default;
+
+export const Persistence = {
+    Beta2PelaMigrator: beta2PelaMigrator,
+    ModelCodeName: modelCodeName,
+    Pela2TangoMigrator: pela2TangoMigrator,
+    XMLSerializer_Beta: xmlSerializer_Beta,
+    XMLSerializer_Pela: xmlSerializer_Pela,
+    XMLSerializer_Tango: xmlSerializer_Tango,
+    XMLSerializerFactory: xmlSerializerFactory,
+};
diff --git a/packages/mindplot/lib/components/widget/index.js b/packages/mindplot/lib/components/widget/index.js
new file mode 100644
index 00000000..ec2abf9f
--- /dev/null
+++ b/packages/mindplot/lib/components/widget/index.js
@@ -0,0 +1,37 @@
+const colorPalettePanel = require('./ColorPalettePanel').default;
+const floatingTip = require('./FloatingTip').default;
+const fontFamilyPanel = require('./FontFamilyPanel').default;
+const fontSizePanel = require('./FontSizePanel').default;
+const iconPanel = require('./IconPanel').default;
+const imenu = require('./IMenu').default;
+const keyboardShortcutTooltip = require('./KeyboardShortcutTooltip').default;
+const linkEditor = require('./LinkEditor').default;
+const linkIconTooltip = require('./LinkIconTooltip').default;
+const listToolbarPanel = require('./ListToolbarPanel').default;
+const menu = require('./Menu').default;
+const modalDialogNotifier = require('./ModalDialogNotifier');
+const noteEditor = require('./NoteEditor');
+const toolbarItem = require('./ToolbarItem');
+const toolbarNotifier = require('./ToolbarNotifier');
+const toolbarPanelItem = require('./ToolbarPaneItem');
+const topicShapePanel = require('./TopicShapePanel');
+
+export const Widgets = {
+    ColorPalettePanel: colorPalettePanel,
+    FloatingTip: floatingTip,
+    FontFamilyPanel: fontFamilyPanel,
+    FontSizePanel: fontSizePanel,
+    IconPanel: iconPanel,
+    Imenu: imenu,
+    KeyboardShortcutTooltip: keyboardShortcutTooltip,
+    LinkEditor: linkEditor,
+    LinkIconTooltip: linkIconTooltip,
+    ListToolbarPanel: listToolbarPanel,
+    Menu: menu,
+    ModalDialogNotifier: modalDialogNotifier,
+    NoteEditor: noteEditor,
+    ToolbarItem: toolbarItem,
+    ToolbarNotifier: toolbarNotifier,
+    ToolbarPaneItem: toolbarPanelItem,
+    TopicShapePanel: topicShapePanel,
+};
diff --git a/packages/mindplot/lib/mindplot.js b/packages/mindplot/lib/mindplot.js
index 42837a1f..32d901c8 100644
--- a/packages/mindplot/lib/mindplot.js
+++ b/packages/mindplot/lib/mindplot.js
@@ -3,59 +3,29 @@ module.exports = mindplot; //eslint-disable-line
 
 function mindplot() {
     // Commands
-    const addFeatureToTopicCommand = require('./components/commands/AddFeatureToTopicCommand')
-        .default;
-    const addRelationshipCommand = require('./components/commands/AddRelationshipCommand').default;
-    const addTopicCommand = require('./components/commands/AddTopicCommand').default;
-    const changeFeatureToTopicCommand = require('./components/commands/ChangeFeatureToTopicCommand')
-        .default;
-    const deleteCommand = require('./components/commands/DeleteCommand').default;
-    const dragTopicCommand = require('./components/commands/DragTopicCommand').default;
-    const genericFunctionCommand = require('./components/commands/GenericFunctionCommand').default;
-    const moveControlPointCommand = require('./components/commands/MoveControlPointCommand')
-        .default;
-    const removeFeatureFromTopicCommand = require('./components/commands/RemoveFeatureFromTopicCommand')
-        .default;
+    const { Commands } = require('./components/commands');
 
     // Layout
-    const abstractBasicSorter = require('./components/layout/AbstractBasicSorter').default;
-    const balancedSorter = require('./components/layout/BalancedSorter').default;
-    const changeEvent = require('./components/layout/ChangeEvent').default;
-    const childrenSorterStrategy = require('./components/layout/ChildrenSorterStrategy').default;
-    const eventBus = require('./components/layout/EventBus').default;
-    const eventBusDispatcher = require('./components/layout/EventBusDispatcher').default;
-    const gridSorter = require('./components/layout/GridSorter').default;
-    const layoutManager = require('./components/layout/LayoutManager').default;
-    const node = require('./components/layout/Node').default;
-    const originalLayout = require('./components/layout/OriginalLayout').default;
-    const rootedTreeSet = require('./components/layout/RootedTreeSet').default;
-    const symmetricSorter = require('./components/layout/SymmetricSorter').default;
+    const { Layout } = require('./components/layout');
+
+    // Model
+    const { Models } = require('./components/model');
+
+    // Persistence
+    const { Persistence } = require('./components/persistence');
+
+    // Widgets
+    const { Widgets } = require('./components/widget');
+
+    // Commponents
+    const { Components } = require('./components');
 
     return {
-        Commands: {
-            AddFeatureToTopicCommand: addFeatureToTopicCommand,
-            AddRelationshipCommand: addRelationshipCommand,
-            AddTopicCommand: addTopicCommand,
-            ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
-            DeleteCommand: deleteCommand,
-            DragTopicCommand: dragTopicCommand,
-            GenericFunctionCommand: genericFunctionCommand,
-            MoveControlPointCommand: moveControlPointCommand,
-            RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
-        },
-        Layout: {
-            AbstractBasicSorter: abstractBasicSorter,
-            BalancedSorter: balancedSorter,
-            ChangeEvent: changeEvent,
-            ChildrenSorterStrategy: childrenSorterStrategy,
-            EventBus: eventBus,
-            EventBusDispatcher: eventBusDispatcher,
-            GridSorter: gridSorter,
-            LayoutManager: layoutManager,
-            Node: node,
-            OriginalLayout: originalLayout,
-            RootedTreeSet: rootedTreeSet,
-            SymmetricSorter: symmetricSorter,
-        },
+        Commands,
+        Layout,
+        Models,
+        Persistence,
+        Widgets,
+        Components,
     };
 }
diff --git a/packages/mindplot/package.json b/packages/mindplot/package.json
index a1a5dcf5..c57a84b6 100644
--- a/packages/mindplot/package.json
+++ b/packages/mindplot/package.json
@@ -25,8 +25,7 @@
     },
     "dependencies": {
         "@wismapping/core-js": "^0.0.1",
-        "@wismapping/web2d": "^0.0.1",
-        "mootools": "^1.5.2"
+        "@wismapping/web2d": "^0.0.1"
     },
     "devDependencies": {
         "@babel/core": "^7.14.6",
diff --git a/packages/mindplot/test/javascript/static/test/testLayout.js b/packages/mindplot/test/javascript/static/test/testLayout.js
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/mindplot/test/javascript/static/test/testPalette.js b/packages/mindplot/test/javascript/static/test/testPalette.js
new file mode 100644
index 00000000..c59c4540
--- /dev/null
+++ b/packages/mindplot/test/javascript/static/test/testPalette.js
@@ -0,0 +1,16 @@
+const Mindplot = require('../../../../lib/mindplot');
+const mindplot = Mindplot();
+
+window.addEventListener('load', function (e) {
+    var model = {
+        getValue: function () {},
+        setValue: function (value) {
+            console.log('value:' + value);
+        },
+    };
+    var palette = new mindplot.widget.ColorPalettePanel(
+        'myButton',
+        model,
+        '/mindplot/src/main/javascript/widget'
+    );
+});
diff --git a/packages/mindplot/webpack.test.js b/packages/mindplot/webpack.test.js
new file mode 100644
index 00000000..90aeed62
--- /dev/null
+++ b/packages/mindplot/webpack.test.js
@@ -0,0 +1,29 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+/** @type {import('webpack').Configuration} */
+module.exports = {
+    entry: './lib/mindplot',
+    output: {
+        path: path.resolve(__dirname, 'dist', 'test'),
+        filename: '[name].js',
+        publicPath: '',
+    },
+    module: {
+        rules: [
+            {
+                use: 'babel-loader',
+                test: /.(js|jsx)$/,
+                exclude: /node_modules/,
+            },
+            {
+                type: 'asset',
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.json'],
+    },
+    plugins: [new CleanWebpackPlugin()],
+};
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index 6da9b564..c6a4868e 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -53,6 +53,7 @@
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.57",
         "@reduxjs/toolkit": "^1.5.0",
+        "@wismapping/core-js": "^0.0.1",
         "axios": "^0.21.0",
         "dayjs": "^1.10.4",
         "react": "^17.0.0",
diff --git a/packages/webcomponent/.gitignore b/packages/webcomponent/.gitignore
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/webcomponent/README.md b/packages/webcomponent/README.md
new file mode 100644
index 00000000..badb04cf
--- /dev/null
+++ b/packages/webcomponent/README.md
@@ -0,0 +1,11 @@
+# `webcomponent`
+
+> TODO: description
+
+## Usage
+
+```
+const webcomponent = require('webcomponent');
+
+// TODO: DEMONSTRATE API
+```
diff --git a/packages/webcomponent/__tests__/webcomponent.test.js b/packages/webcomponent/__tests__/webcomponent.test.js
new file mode 100644
index 00000000..0b6463e5
--- /dev/null
+++ b/packages/webcomponent/__tests__/webcomponent.test.js
@@ -0,0 +1,7 @@
+'use strict';
+
+const webcomponent = require('..');
+
+describe('webcomponent', () => {
+    it('needs tests');
+});
diff --git a/packages/webcomponent/package.json b/packages/webcomponent/package.json
new file mode 100644
index 00000000..c42546ac
--- /dev/null
+++ b/packages/webcomponent/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "webcomponent",
+  "version": "0.0.1",
+  "description": "webcomponent Wisemapping",
+  "author": "Ezequiel-Vega <vegaezequiel51@gmail.com>",
+  "homepage": "https://www.wisemapping.com",
+  "license": "MIT",
+  "main": "dist/webcomponent.js",
+  "private": false,
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.yarnpkg.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://ezequielVega@bitbucket.org/lilabyus/wisemapping-frontend.git"
+  },
+  "scripts": {
+    "start": "webpack serve --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.31.0",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "html-webpack-plugin": "^5.3.2",
+    "prettier": "^2.3.2",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.2",
+    "webpack": "^5.52.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-merge": "^5.8.0",
+    "webpack-server": "^0.1.2"
+  },
+  "dependencies": {
+    "@wisemapping/mindplot": "^0.0.1",
+    "@wismapping/core-js": "^0.0.1",
+    "@wismapping/web2d": "^0.0.1",
+    "mootools": "1.4.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}
diff --git a/packages/webcomponent/public/index.html b/packages/webcomponent/public/index.html
new file mode 100644
index 00000000..b5c89d63
--- /dev/null
+++ b/packages/webcomponent/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+</head>
+<body>
+        <div id="root"></div>
+</body>
+</html>
diff --git a/packages/webcomponent/src/App.tsx b/packages/webcomponent/src/App.tsx
new file mode 100644
index 00000000..ba35946c
--- /dev/null
+++ b/packages/webcomponent/src/App.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import Mindplot from '@wismapping/web2d';
+
+const App = (): React.ReactElement => {
+    const mindplot = Mindplot();
+    console.log(mindplot);
+    return <div>Webcomponent</div>;
+};
+
+export default App;
diff --git a/packages/webcomponent/src/index.tsx b/packages/webcomponent/src/index.tsx
new file mode 100644
index 00000000..ecb5952b
--- /dev/null
+++ b/packages/webcomponent/src/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import 'mootools';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/packages/webcomponent/tsconfig.json b/packages/webcomponent/tsconfig.json
new file mode 100644
index 00000000..02973338
--- /dev/null
+++ b/packages/webcomponent/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "./lib/",
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "types": ["node"],
+    "moduleResolution": "node",
+    "module": "es6",
+    "target": "es6",
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/webcomponent/webpack.common.js b/packages/webcomponent/webpack.common.js
new file mode 100644
index 00000000..ba433bac
--- /dev/null
+++ b/packages/webcomponent/webpack.common.js
@@ -0,0 +1,40 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+/** @type {import('webpack').Configuration} */
+module.exports = {
+    entry: './src/index.tsx',
+    output: {
+        path: path.resolve(__dirname, 'lib'),
+        filename: 'webcomponent.js',
+        publicPath: '/',
+    },
+    module: {
+        rules: [
+            {
+                use: 'babel-loader',
+                test: /.(js|jsx)$/,
+                exclude: /node_modules/,
+            },
+            {
+                use: 'ts-loader',
+                test: /\.(ts|tsx)$/,
+                exclude: /node_modules/,
+            },
+            {
+                type: 'asset',
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new HtmlWebpackPlugin({
+            template: './public/index.html',
+        }),
+    ],
+};
diff --git a/packages/webcomponent/webpack.dev.js b/packages/webcomponent/webpack.dev.js
new file mode 100644
index 00000000..2a6fd051
--- /dev/null
+++ b/packages/webcomponent/webpack.dev.js
@@ -0,0 +1,20 @@
+const path = require('path');
+const { HotModuleReplacementPlugin } = require('webpack');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+
+/** @type {import('webpack').Configuration} */
+const devConfig = {
+    mode: 'development',
+    devServer: {
+        contentBase: path.join(__dirname, 'lib'),
+        compress: true,
+        port: 8080,
+        hot: true,
+    },
+    target: 'web',
+    plugins: [new HotModuleReplacementPlugin()],
+    devtool: 'eval-source-map',
+};
+
+module.exports = merge(common, devConfig);
diff --git a/packages/webcomponent/webpack.prod.js b/packages/webcomponent/webpack.prod.js
new file mode 100644
index 00000000..0462e9b7
--- /dev/null
+++ b/packages/webcomponent/webpack.prod.js
@@ -0,0 +1,15 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+
+/** @type {import('webpack').Configuration} */
+const prodConfig = {
+    mode: 'production',
+    devtool: 'source-map',
+    optimization: {
+        splitChunks: {
+            chunks: 'all',
+        },
+    },
+};
+
+module.exports = merge(common, prodConfig);