diff --git a/README.md b/README.md
index 7701ba75..3473bcdf 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,43 @@
             centerX: 0,
             centerY: 0,
             scale: 1
+          },
+          defaults: { // optional
+            styleBlock: {
+              backgroundColor: "orange"
+            },
+            styleHeader: {
+              backgroundColor: "aliceblue",
+              fontSize: '14px',
+              fontFamily: 'Arial, Verdana'
+            },
+            styleDelete: {
+              color: "black"
+            },
+            deleteMark: '',
+            styleInputs: {
+              fontWeight: 'bolder'
+            },
+            styleOutputs: {
+              fontWeight: 'lighter'
+            },
+            styleLink: {
+              stroke: '#F00',
+              strokeWidth: 4,
+              fill: 'none',
+              strokeDasharray: '10, 5'
+            },
+            styleOutline: {
+              stroke: '#0F0',
+              strokeWidth: 6,
+              strokeOpacity: 0.6,
+              fill: 'none'
+            },
+            styleTempLink: {
+              stroke: '#0000ff',
+              strokeWidth: 4,
+              fill: 'none'
+            }
           }
         }
       }
@@ -163,7 +200,8 @@ Default:
 {
   blocks: [],
   links: [],
-  container: {}
+  container: {},
+  defaults: {}
 }
 ```
 
@@ -176,7 +214,8 @@ Object `Scene`:
    centerX: number
    centerY: number
    scale: number
-  }
+  },
+  defaults: Object.<Defaults>
 }
 ```
 
@@ -192,6 +231,17 @@ Object `Block`:
     customAttribute: [ // show "NodeField"
       name: NodeField (without name and attr fields)
     ]
+  },
+  styleBlock: { // OPTIONAL block styles
+  },
+  styleHeader: { OPTIONAL header styles
+  },
+  styleDelete: { OPTIONAL delete button styles
+  },
+  deleteMark: 'del', OPTIONAL delete button content - default: unicode character "✖"
+  styleInputs: { OPTIONAL inputs styles
+  },
+  styleOutputs: { OPTIONAL outputs styles
   }
 }
 ```
@@ -203,7 +253,61 @@ Object `BlockLinks`:
   originID: number, // Origin block ID
   originSlot: number, // Origin block slot number
   targetID: number, // Target block ID
-  targetSlot: number // Target block slot number
+  targetSlot: number, // Target block slot number
+  styleLink: { // OPTIONAL svg path styles
+    stroke: string, // default: '#F00'
+    strokeWidth: number, // default: 4 - multiplied by current scale
+    fill: string // default: 'none'
+  },
+  styleOutline: { // OPTIONAL svg path outline styles
+    stroke: string, // default: '#0F0'
+    strokeWidth: number, // default: 6 - multiplied by current scale
+    strokeOpacity: number, // default: 0.6
+    fill: string // default: 'none'
+  }
+}
+```
+
+Object `Defaults`:
+
+Optional default styles for all objects:
+```
+{
+    styleBlock: {
+      backgroundColor: "orange"
+    },
+    styleHeader: {
+      backgroundColor: "aliceblue",
+      fontSize: '14px',
+      fontFamily: 'Arial, Verdana'
+    },
+    styleDelete: {
+      color: "black"
+    },
+    deleteMark: '',
+    styleInputs: {
+      fontWeight: 'bolder'
+    },
+    styleOutputs: {
+      fontWeight: 'lighter'
+    },
+    styleLink: {
+      stroke: '#F00',
+      strokeWidth: 4, // multiplied by current scale
+      fill: 'none',
+      strokeDasharray: '10, 5'
+    },
+    styleOutline: {
+      stroke: '#0F0',
+      strokeWidth: 6, // multiplied by current scale
+      strokeOpacity: 0.6,
+      fill: 'none'
+    },
+    styleTempLink: {
+      stroke: '#0000ff',
+      strokeWidth: 4, // multiplied by current scale
+      fill: 'none'
+    }
 }
 ```
 
diff --git a/src/App.vue b/src/App.vue
index 6029f6ef..af7c9d78 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,9 +12,9 @@
     <VueBlockProperty :property="selectedBlockProperty" @save="saveProperty"/>
     <label>
       <select name="type" v-model="selectedType">
-        <template v-for="type in selectBlocksType">
-          <optgroup :label="type">
-            <option v-for="block in filteredBlocks(type)" :value="block.name">{{block.title || block.name}}</option>
+        <template v-for="(type, index) in selectBlocksType">
+          <optgroup :label="type" :key="index">
+            <option v-for="block in filteredBlocks(type)" :value="block.name" :key="block.id">{{block.title || block.name}}</option>
           </optgroup>
         </template>
       </select>
@@ -24,13 +24,16 @@
     <label for="useContextMenu">
       <input type="checkbox" v-model="useContextMenu" id="useContextMenu">Use right click for Add blocks
     </label>
+    <label for="showJSONConsole">
+      <input type="checkbox" v-model="showJSONConsole" id="showJSONConsole">Verbose log on console
+    </label>
 
     <ul id="contextMenu" ref="contextMenu" tabindex="-1" v-show="contextMenu.isShow"
         @blur="closeContextMenu"
         :style="{top: contextMenu.top + 'px', left: contextMenu.left + 'px'}">
-      <template v-for="type in selectBlocksType">
-        <li class="label">{{type}}</li>
-        <li v-for="block in filteredBlocks(type)"
+      <template v-for="(type, index) in selectBlocksType">
+        <li class="label" :key="index">{{type}}</li>
+        <li v-for="block in filteredBlocks(type)" :key="block.id"
             @click="addBlockContextMenu(block.name)">{{block.title || block.name}}
         </li>
       </template>
@@ -225,8 +228,9 @@
               id: 2,
               x: -700,
               y: -69,
-              name: 'Chat message',
+              name: 'text',
               title: 'Chat message',
+              content: 'hello world<hr>this is content<hr>',
               values: {
                 property: [
                   {
@@ -234,6 +238,24 @@
                     type: 'string'
                   }
                 ]
+              },
+              styleBlock: {
+                backgroundColor: "yellow"
+              },
+              styleHeader: {
+                backgroundColor: "green",
+                fontSize: '14px',
+                fontFamily: 'Arial, Verdana'
+              },
+              styleDelete: {
+                color: "black"
+              },
+              deleteMark: '<strong>D</strong><em>d</em>',
+              styleInputs: {
+                fontWeight: 'bolder'
+              },
+              styleOutputs: {
+                fontWeight: 'lighter'
               }
             },
             {
@@ -458,7 +480,19 @@
               originID: 2,
               originSlot: 0,
               targetID: 4,
-              targetSlot: 0
+              targetSlot: 0,
+              styleLink: {
+                stroke: '#F00',
+                strokeWidth: 4,
+                fill: 'none',
+                strokeDasharray: '10, 5'
+              },
+              styleOutline: {
+                stroke: '#0F0',
+                strokeWidth: 6,
+                strokeOpacity: 0.6,
+                fill: 'none'
+              }
             },
             {
               id: 6,
@@ -577,11 +611,49 @@
             centerX: 1042,
             centerY: 140,
             scale: 1
+          },
+          defaults: {
+            styleBlock: {
+              backgroundColor: 'orange'
+            },
+            styleHeader: {
+              backgroundColor: 'aliceblue',
+              fontSize: '14px',
+              fontFamily: 'Arial, Verdana'
+            },
+            styleDelete: {
+              color: 'black'
+            },
+            deleteMark: '',
+            styleInputs: {
+              fontWeight: 'bolder'
+            },
+            styleOutputs: {
+              fontWeight: 'lighter'
+            },
+            styleLink: {
+              stroke: '#F00',
+              strokeWidth: 4,
+              fill: 'none',
+              strokeDasharray: '10, 5'
+            },
+            styleOutline: {
+              stroke: '#0F0',
+              strokeWidth: 6,
+              strokeOpacity: 0.6,
+              fill: 'none'
+            },
+            styleTempLink: {
+              stroke: '#0000ff',
+              strokeWidth: 4,
+              fill: 'none'
+            }
           }
         },
         selectedBlock: null,
         selectedType: 'delay',
         useContextMenu: true,
+        showJSONConsole: false,
         contextMenu: {
           isShow: false,
           mouseX: 0,
@@ -609,11 +681,15 @@
     },
     methods: {
       selectBlock (block) {
-        console.log('select', block)
+        if (this.showJSONConsole) {
+          console.log('select', block)
+        }
         this.selectedBlock = block
       },
       deselectBlock (block) {
-        console.log('deselect', block)
+        if (this.showJSONConsole) {
+          console.log('deselect', block)
+        }
         this.selectedBlock = null
       },
       filteredBlocks (type) {
@@ -622,11 +698,15 @@
         })
       },
       addBlock () {
-        console.log(this.selectedType)
+        if (this.showJSONConsole) {
+          console.log(this.selectedType)
+        }
         this.$refs.container.addNewBlock(this.selectedType)
       },
       saveProperty (val) {
-        console.log(val)
+        if (this.showJSONConsole) {
+          console.log(val)
+        }
 
         let scene = this.scene
         let block = scene.blocks.find(b => {
@@ -656,8 +736,10 @@
         let largestWidth = containerElRect.right - contextMenuEl.offsetWidth - border
         let largestHeight = containerElRect.bottom - contextMenuEl.offsetHeight - border
 
-        console.log(this.$refs.container)
-        console.log(containerElRect)
+        if (this.showJSONConsole) {
+          console.log(this.$refs.container)
+          console.log(containerElRect)
+        }
 
         if (left > largestWidth) left = largestWidth
         if (top > largestHeight) top = largestHeight
@@ -679,10 +761,14 @@
     },
     watch: {
       blocks (newValue) {
-        console.log('blocks', JSON.stringify(newValue))
+        if (this.showJSONConsole) {
+          console.log('blocks', JSON.stringify(newValue, null, 2))
+        }
       },
       scene (newValue) {
-        console.log('scene', JSON.stringify(newValue))
+        if (this.showJSONConsole) {
+          console.log('scene', JSON.stringify(newValue, null, 2))
+        }
       }
     }
   }
diff --git a/src/components/VueBlock.vue b/src/components/VueBlock.vue
index a074c7ec..e2e6b7a9 100644
--- a/src/components/VueBlock.vue
+++ b/src/components/VueBlock.vue
@@ -2,18 +2,20 @@
   <div class="vue-block" :class="{selected: selected}" :style="style">
     <header :style="headerStyle">
       {{title}}
-      <a class="delete" @click="deleteBlock">x</a>
+      <span class="delete" @click="deleteBlock" :style="deleteStyle" v-html="getDeleteMark"></span>
     </header>
-    <div class="inputs">
-      <div class="input" v-for="(slot, index) in inputs">
+    <div class="inputs" :style="inputsStyle">
+      <div class="input" v-for="(slot, index) in inputs" :key="'i'+index">
         <div class="circle inputSlot" :class="{active: slot.active}"
              @mouseup="slotMouseUp($event, index)"
              @mousedown="slotBreak($event, index)"></div>
         {{slot.label}}
       </div>
     </div>
-    <div class="outputs">
-      <div class="output" v-for="(slot, index) in outputs">
+    <div class="content" v-html="content">
+    </div>
+    <div class="outputs" :style="outputsStyle">
+      <div class="output" v-for="(slot, index) in outputs" :key="'o'+index">
         <div class="circle" :class="{active: slot.active}"
              @mousedown="slotMouseDown($event, index)"></div>
         {{slot.label}}
@@ -45,11 +47,35 @@
         type: String,
         default: 'Title'
       },
+      content: {
+        type: String,
+        default: ''
+      },
       inputs: Array,
       outputs: Array,
-
       options: {
         type: Object
+      },
+      styleBlock: {
+        type: Object
+      },
+      styleHeader: {
+        type: Object
+      },
+      deleteMark: {
+        type: String,
+      },
+      styleDelete: {
+        type: Object
+      },
+      styleInputs: {
+        type: Object
+      },
+      styleOutputs: {
+        type: Object
+      },
+      defaults: {
+        type: Object
       }
     },
     created () {
@@ -159,16 +185,48 @@
     computed: {
       style () {
         return {
-          top: this.options.center.y + this.y * this.options.scale + 'px',
-          left: this.options.center.x + this.x * this.options.scale + 'px',
-          width: this.width + 'px',
-          transform: 'scale(' + (this.options.scale + '') + ')',
-          transformOrigin: 'top left'
+          ...{
+            top: this.options.center.y + this.y * this.options.scale + 'px',
+            left: this.options.center.x + this.x * this.options.scale + 'px',
+            width: this.width + 'px',
+            transform: 'scale(' + (this.options.scale + '') + ')',
+            transformOrigin: 'top left'
+          },
+          ...this.defaults.styleBlock,
+          ...this.styleBlock
         }
       },
+      getDeleteMark () {
+        return this.deleteMark || this.defaults.deleteMark
+      },
       headerStyle () {
         return {
-          height: this.options.titleHeight + 'px'
+          ...{
+            height: this.options.titleHeight + 'px'
+          },
+          ...this.defaults.styleHeader,
+          ...this.styleHeader
+        }
+      },
+      deleteStyle () {
+        return {
+          ...{},
+          ...this.defaults.styleDelete,
+          ...this.styleDelete
+        }
+      },
+      inputsStyle () {
+        return {
+          ...{},
+          ...this.defaults.styleInputs,
+          ...this.styleInputs
+        }
+      },
+      outputsStyle () {
+        return {
+          ...{},
+          ...this.defaults.styleOutputs,
+          ...this.styleOutputs
         }
       }
     }
@@ -186,6 +244,7 @@
   @circleSize: 10px;
   @circleMargin: 2px; // left/right
 
+  @circleColor: #FFFFFF;
   @circleNewColor: #00FF00;
   @circleRemoveColor: #FF0000;
   @circleConnectedColor: #FFFF00;
@@ -221,13 +280,24 @@
       padding: @ioPaddingInner;
 
       display: block;
-      width: 50%;
+      width: 30%;
 
       > * {
         width: 100%;
       }
     }
 
+    .content {
+      padding: @ioPaddingInner;
+      display: block;
+      width: 40%;
+      float: left;
+      text-align: center;
+      > * {
+        width: 100%;
+      }
+    }
+
     .circle {
       box-sizing: border-box;
       margin-top: @ioHeight / 2 - @circleSize / 2;
@@ -237,6 +307,7 @@
 
       border: @circleBorder solid rgba(0, 0, 0, 0.5);
       border-radius: 100%;
+      background: @circleColor;
 
       cursor: crosshair;
       &.active {
@@ -255,9 +326,6 @@
       height: @ioHeight;
       overflow: hidden;
       font-size: @ioFontSize;
-
-      &:last-child {
-      }
     }
 
     .input {
diff --git a/src/components/VueBlockProperty.vue b/src/components/VueBlockProperty.vue
index d2bce0ec..1ab91826 100644
--- a/src/components/VueBlockProperty.vue
+++ b/src/components/VueBlockProperty.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="blocks-properties">
-    <div class="property" v-for="p in properties">
+    <div class="property" v-for="(p, index) in properties" :key="'p'+index">
       <label :for="p.name">{{p.label||p.name}}:</label>
       <br>
       <input type="text" v-model="p.value">
@@ -47,8 +47,5 @@
 
     background: #ffffff;
     border: 1px solid red;
-    .property {
-
-    }
   }
 </style>
diff --git a/src/components/VueBlocksContainer.vue b/src/components/VueBlocksContainer.vue
index feb76f37..98cfd925 100644
--- a/src/components/VueBlocksContainer.vue
+++ b/src/components/VueBlocksContainer.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="vue-container">
-    <VueLink :lines="lines"/>
+    <VueLink :lines="lines" />
     <VueBlock v-for="block in blocks"
               :key="block.id"
               v-bind.sync="block"
               :options="optionsForChild"
+              :defaults="defaults"
               @update="updateScene"
               @linkingStart="linkingStart(block, $event)"
               @linkingStop="linkingStop(block, $event)"
@@ -37,7 +38,7 @@
       },
       scene: {
         type: Object,
-        default: {blocks: [], links: [], container: {}}
+        default: {blocks: [], links: [], container: {}, defaults: {}}
       },
       options: {
         type: Object
@@ -83,6 +84,7 @@
       }
     },
     data () {
+      const defaults = this.scene.defaults || {}
       return {
         dragging: false,
         //
@@ -93,6 +95,56 @@
         nodes: [],
         blocks: [],
         links: [],
+        defaults: {
+          styleBlock: {
+            ...{},
+            ...defaults.styleBlock
+          },
+          styleHeader: {
+            ...{},
+            ...defaults.styleHeader
+          },
+          styleDelete: {
+            ...{
+              color: 'red'
+            },
+            ...defaults.styleDelete
+          },
+          deleteMark: defaults.deleteMark || '✖',
+          styleInputs: {
+            ...{},
+            ...defaults.styleInputs
+          },
+          styleOutputs: {
+            ...{},
+            ...defaults.styleOutputs
+          },
+          styleLink: {
+            ...{
+              stroke: '#F85',
+              strokeWidth: 4,
+              fill: 'none'
+            },
+            ...defaults.styleLink
+          },
+          styleOutline: {
+            ...{
+              stroke: '#666',
+              strokeWidth: 6,
+              strokeOpacity: 0.6,
+              fill: 'none'
+            },
+            ...defaults.styleOutline
+          },
+          styleTempLink: {
+            ...{
+              stroke: '#8f8f8f',
+              strokeWidth: 4,
+              fill: 'none'
+            },
+            ...defaults.styleTempLink
+          },
+        },
         //
         tempLink: null,
         selectedBlock: null,
@@ -100,6 +152,9 @@
       }
     },
     computed: {
+      isProduction () {
+        return process.env.NODE_ENV === "production"
+      },
       optionsForChild () {
         return {
           width: 200,
@@ -133,13 +188,17 @@
           })
 
           if (!originBlock || !targetBlock) {
-            console.log('Remove invalid link', link)
+            if (!this.isProduction) {
+              console.log('Remove invalid link', link)
+            }
             this.removeLink(link.id)
             continue
           }
 
           if (originBlock.id === targetBlock.id) {
-            console.log('Loop detected, remove link', link)
+            if (!this.isProduction) {
+              console.log('Loop detected, remove link', link)
+            }
             this.removeLink(link.id)
             continue
           }
@@ -148,7 +207,9 @@
           let targetLinkPos = this.getConnectionPos(targetBlock, link.targetSlot, true)
 
           if (!originLinkPos || !targetLinkPos) {
-            console.log('Remove invalid link (slot not exist)', link)
+            if (!this.isProduction) {
+              console.log('Remove invalid link (slot not exist)', link)
+            }
             this.removeLink(link.id)
             continue
           }
@@ -159,31 +220,31 @@
           let x2 = targetLinkPos.x
           let y2 = targetLinkPos.y
 
+          const styleLink = {
+            ...this.defaults.styleLink,
+            ...link.styleLink
+          }
+          styleLink.strokeWidth *= this.scale
+          const styleOutline = {
+            ...this.defaults.styleOutline,
+            ...link.styleOutline
+          }
+          styleOutline.strokeWidth *= this.scale
           lines.push({
             x1: x1,
             y1: y1,
             x2: x2,
             y2: y2,
-            style: {
-              stroke: '#F85',
-              strokeWidth: 4 * this.scale,
-              fill: 'none'
-            },
-            outlineStyle: {
-              stroke: '#666',
-              strokeWidth: 6 * this.scale,
-              strokeOpacity: 0.6,
-              fill: 'none'
-            }
+            styleLink: styleLink,
+            styleOutline: styleOutline
           })
         }
 
         if (this.tempLink) {
-          this.tempLink.style = {
-            stroke: '#8f8f8f',
-            strokeWidth: 4 * this.scale,
-            fill: 'none'
+          this.tempLink.styleLink = {
+            ...this.defaults.styleTempLink
           }
+          this.tempLink.styleLink.strokeWidth *= this.scale
 
           lines.push(this.tempLink)
         }
diff --git a/src/components/VueLink.vue b/src/components/VueLink.vue
index 7faf68df..a057bebf 100644
--- a/src/components/VueLink.vue
+++ b/src/components/VueLink.vue
@@ -1,13 +1,13 @@
 <template>
   <svg width="100%" height="100%">
-    <g v-for="p in renderedPathes" >
-      <path v-if="outline" :d="p.data" :style="p.outlineStyle"></path>
-      <path :d="p.data" :style="p.style"></path>
+    <g v-for="(p, index) in renderedPathes" :key="'g'+index">
+      <path v-if="outline" :d="p.data" :style="p.styleOutline"></path>
+      <path :d="p.data" :style="p.styleLink"></path>
     </g>
     <g>
-      <path v-for="a in renderedArrows"
+      <path v-for="(a, index) in renderedArrows" :key="'a'+index"
         d="M -1 -1 L 0 1 L 1 -1 z"
-        :style="a.style"
+        :style="a.styleArrow"
         :transform="a.transform"></path>
     </g>
   </svg>
@@ -59,8 +59,8 @@
           let dist = this.distance(l.x1, l.y1, l.x2, l.y2) * 0.25
           pathes.push({
             data: `M ${l.x1}, ${l.y1} C ${(l.x1 + dist)}, ${l.y1}, ${(l.x2 - dist)}, ${l.y2}, ${l.x2}, ${l.y2}`,
-            style: l.style,
-            outlineStyle: l.outlineStyle
+            styleLink: l.styleLink,
+            styleOutline: l.styleOutline
           })
         })
 
@@ -82,10 +82,10 @@
 
           arrows.push({
             transform: `translate(${pos.x}, ${pos.y}) rotate(${degrees})`,
-            style: {
-              stroke: l.style.stroke,
-              strokeWidth: l.style.strokeWidth * 2,
-              fill: l.style.stroke
+            styleArrow: {
+              stroke: l.styleLink.stroke,
+              strokeWidth: l.styleLink.strokeWidth * 2,
+              fill: l.styleLink.stroke
             }
           })
         })