diff --git a/src/app.js b/src/app.js
index a832286a2f..d8b1c672d7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -813,6 +813,20 @@ function run () {
 
   txlistener.startListening()
 
+  self._components.editorpanel.registerType('knownTransaction', function (data) {
+    var tx = data[0]
+    var resolvedTransaction = data[1]
+    self._components.editorpanel.log(tx)
+    self._components.editorpanel.log(resolvedTransaction)
+    console.error('TERMINAL: ', {tx, resolvedTransaction})
+    return yo`<span style="color:green;"><code>knownTransaction</code> was logged</span>`
+  })
+  self._components.editorpanel.registerType('unknownTransaction', function (data) {
+    var tx = data[0]
+    self._components.editorpanel.log(tx)
+    console.error('TERMINAL: ', {tx})
+    return yo`<span style="color:yellow;"><code>unknownTransaction</code> was logged</span>`
+  })
   txLogger({
     api: {
       /**
@@ -821,7 +835,10 @@ function run () {
         * @param {Object} tx - DOM element representing the transaction
         */
       log: function (tx) {
-        // terminal.log(tx)
+        var data = JSON.parse(tx)
+        if (data.length === 2) data = { type: 'knownTransaction', value: data }
+        if (data.length === 1) data = { type: 'unknownTransaction', value: data }
+        self._components.editorpanel.log(data)
       },
       resolvedTransaction: function (hash) {
         return txlistener.resolvedTransaction(hash)
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index cd1faa0b17..366d0a66af 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -208,6 +208,14 @@ class EditorPanel {
     self._adjustLayout('top', self.data._layout.top.offset)
     return self._view.el
   }
+  registerType (typename, template) {
+    var self = this
+    self._components.terminal.registerType(typename, template)
+  }
+  log () {
+    var self = this
+    self._components.terminal.log.apply(self._components.terminal, arguments)
+  }
   _renderTabsbar () {
     var self = this
     if (self._view.tabsbar) return self._view.tabsbar
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index 94ed373557..f52166a867 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -83,7 +83,7 @@ var css = csjs`
   .info               {
     color             : blue;
   }
-  .log                {
+  .default            {
     color             : white;
   }
   .ghostbar           {
@@ -194,6 +194,10 @@ class Terminal {
     self.event = new EventManager()
     self._api = opts.api
     self._view = { panel: null, bar: null, input: null, term: null, log: null, cli: null }
+    self._templates = {}
+    self._templates.default = self._blocksRenderer('default')
+    self._templates.error = self._blocksRenderer('error')
+    self._templates.info = self._blocksRenderer('info')
     if (opts.shell) self._shell = opts.shell
     // @TODO: listen to all relevant events
     // var events = opts.events
@@ -337,49 +341,48 @@ class Terminal {
       editable.focus()
     }
   }
-  _log (mode) {
+  _blocksRenderer (mode) {
     var self = this
     var modes = { log: true, info: true, error: true }
     if (modes[mode]) {
-      return function logger () {
+      return function render () {
         var args = [].slice.call(arguments)
-        self.data.session.push(args)
         var types = args.map(type)
-        var values = javascriptserialize.apply(null, args).map(function (x, i) {
-          return (typeof args[i] === 'string') ? args[i] : x
-        })
-        values.forEach(function (val, idx) {
+        var values = javascriptserialize.apply(null, args).map(function (val, idx) {
           if (types[idx] === 'element') val = jsbeautify.html(val)
           var pattern = '.{1,' + self.data.lineLength + '}'
           var lines = val.match(new RegExp(pattern, 'g'))
-          var block = yo`
-            <div class="${css.block} ${css[mode]}">
-              ${lines.map(str => {
-                return document.createTextNode(`${str}\n`)
-              })}
-            </div>
-          `
-          self._view.log.appendChild(block)
-          self.scroll2bottom()
-          return lines
+          return lines.map(str => document.createTextNode(`${str}\n`))
         })
+        return values
       }
+    } else {
+      throw new Error('mode is not supported')
     }
   }
-  log () {
-    var self = this
-    var logger = self._log('log')
-    return logger.apply(self, arguments)
-  }
-  info () {
+  registerType (typename, template) {
     var self = this
-    var logger = self._log('info')
-    return logger.apply(self, arguments)
+    if (typeof template !== 'function') throw new Error('invalid template')
+    self._template[typename] = template
   }
-  error () {
+  log () {
     var self = this
-    var logger = self._log('error')
-    return logger.apply(self, arguments)
+    var args = [...arguments]
+    self.data.session.push(args)
+    args.forEach(function (data = {}) {
+      if (!data.type) data = { type: 'default', value: data }
+      var render = self._templates[data.type]
+      if (!render) render = self._templates.default
+      var blocks = render(data.value)
+      blocks.forEach(function (block) {
+        self._view.log.appendChild(yo`
+          <div class="${css.block} ${css[data.type] || data.type}">
+            ${block}
+          </div>
+        `)
+        self.scroll2bottom()
+      })
+    })
   }
   scroll2bottom () {
     var self = this