diff --git a/example/.storybook/addons.js b/example/.storybook/addons.js
index 7f5ce36..134dd86 100644
--- a/example/.storybook/addons.js
+++ b/example/.storybook/addons.js
@@ -1,3 +1,3 @@
+import '../../register'
 import '@kadira/storybook/addons'
 import '@kadira/storybook-addon-options/register'
-import '../../register'
diff --git a/example/stories/index.js b/example/stories/index.js
index 8c0779b..23fcd3c 100644
--- a/example/stories/index.js
+++ b/example/stories/index.js
@@ -21,12 +21,15 @@ storiesOf('test', module)
     'Paris',
     () => (
       <Test fontSize={45} fontFamily="Roboto" align="center" color="#CAF200">
-        Hello
+        <Test />
+        <Test>Hello</Test>
       </Test>
     ),
     { displayName: 'Testeru' },
   )
-  .addWithJSX('Orleans', () => <Test color="#236544">Hello</Test>)
+  .addWithJSX('Orleans', () => (
+    <Test align="test" font={['test', 't', 'test']} />
+  ))
 
 storiesOf('test 2', module).addWithJSX(
   'Paris',
diff --git a/package.json b/package.json
index b618e72..4c2539e 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,6 @@
   },
   "dependencies": {
     "jsx-to-string": "^1.1.0",
-    "prismjs": "^1.6.0",
     "react-copy-to-clipboard": "^4.3.1"
   }
 }
diff --git a/src/jsx.js b/src/jsx.js
new file mode 100644
index 0000000..b633ec9
--- /dev/null
+++ b/src/jsx.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import Prism from './prism.min'
+
+import globalStyle from './css'
+
+const prismStyle = document.createElement('style')
+prismStyle.innerHTML = globalStyle
+document.body.appendChild(prismStyle)
+
+export default class JSX extends Component {
+  constructor(props, ...args) {
+    super(props, ...args)
+    props.ob({
+      next: type =>
+        (type === 'jsx'
+          ? this.onAddJSX.bind(this)
+          : this.setCurrent.bind(this)),
+    })
+
+    this.state = {}
+    this.stopListeningOnStory = () => this.setState({})
+  }
+
+  setCurrent(kind, story) {
+    this.setState({ current: { kind, story } })
+  }
+
+  onAddJSX(kind, story, jsx) {
+    const state = this.state
+
+    if (typeof state[kind] === 'undefined') {
+      state[kind] = {}
+    }
+    state[kind][story] = jsx
+    this.setState(state)
+  }
+  render() {
+    if (
+      typeof this.state.current !== 'undefined' &&
+      typeof this.state[this.state.current.kind] !== 'undefined'
+    ) {
+      const current = this.state.current
+      const code = this.state[current.kind][current.story]
+      const jsx = code ? Prism.highlight(code, Prism.languages.jsx) : ''
+
+      return (
+        <pre style={styles.pre} dangerouslySetInnerHTML={{ __html: jsx }} />
+      )
+    } else {
+      return <pre style={styles.pre} />
+    }
+  }
+}
+
+const styles = {
+  pre: {
+    flex: 1,
+    padding: '5px 15px',
+  },
+}
diff --git a/src/prism.js b/src/prism.js
new file mode 100644
index 0000000..1e37c5b
--- /dev/null
+++ b/src/prism.js
@@ -0,0 +1,456 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+clike+javascript+jsx */
+var _self = 'undefined' != typeof window
+  ? window
+  : 'undefined' != typeof WorkerGlobalScope && self instanceof WorkerGlobalScope
+      ? self
+      : {},
+  Prism = (function() {
+    var e = /\blang(?:uage)?-(\w+)\b/i,
+      t = 0,
+      n = (_self.Prism = {
+        manual: _self.Prism && _self.Prism.manual,
+        util: {
+          encode: function(e) {
+            return e instanceof a
+              ? new a(e.type, n.util.encode(e.content), e.alias)
+              : 'Array' === n.util.type(e)
+                  ? e.map(n.util.encode)
+                  : e
+                      .replace(/&/g, '&amp;')
+                      .replace(/</g, '&lt;')
+                      .replace(/\u00a0/g, ' ')
+          },
+          type: function(e) {
+            return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[
+              1
+            ]
+          },
+          objId: function(e) {
+            return e.__id ||
+              Object.defineProperty(e, '__id', { value: ++t }), e.__id
+          },
+          clone: function(e) {
+            var t = n.util.type(e)
+            switch (t) {
+              case 'Object':
+                var a = {}
+                for (var r in e)
+                  e.hasOwnProperty(r) && (a[r] = n.util.clone(e[r]))
+                return a
+              case 'Array':
+                return (
+                  e.map &&
+                  e.map(function(e) {
+                    return n.util.clone(e)
+                  })
+                )
+            }
+            return e
+          },
+        },
+        languages: {
+          extend: function(e, t) {
+            var a = n.util.clone(n.languages[e])
+            for (var r in t)
+              a[r] = t[r]
+            return a
+          },
+          insertBefore: function(e, t, a, r) {
+            r = r || n.languages
+            var l = r[e]
+            if (2 == arguments.length) {
+              a = arguments[1]
+              for (var i in a)
+                a.hasOwnProperty(i) && (l[i] = a[i])
+              return l
+            }
+            var o = {}
+            for (var s in l)
+              if (l.hasOwnProperty(s)) {
+                if (s == t)
+                  for (var i in a)
+                    a.hasOwnProperty(i) && (o[i] = a[i])
+                o[s] = l[s]
+              }
+            return n.languages.DFS(n.languages, function(t, n) {
+              n === r[e] && t != e && (this[t] = o)
+            }), (r[e] = o)
+          },
+          DFS: function(e, t, a, r) {
+            r = r || {}
+            for (var l in e)
+              e.hasOwnProperty(l) &&
+                (t.call(e, l, e[l], a || l), 'Object' !== n.util.type(e[l]) ||
+                  r[n.util.objId(e[l])]
+                  ? 'Array' !== n.util.type(e[l]) ||
+                      r[n.util.objId(e[l])] ||
+                      ((r[n.util.objId(e[l])] = !0), n.languages.DFS(
+                        e[l],
+                        t,
+                        l,
+                        r,
+                      ))
+                  : ((r[n.util.objId(e[l])] = !0), n.languages.DFS(
+                      e[l],
+                      t,
+                      null,
+                      r,
+                    )))
+          },
+        },
+        plugins: {},
+        highlightAll: function(e, t) {
+          var a = {
+            callback: t,
+            selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code',
+          }
+          n.hooks.run('before-highlightall', a)
+          for (
+            var r,
+              l = a.elements || document.querySelectorAll(a.selector),
+              i = 0;
+            (r = l[i++]);
+
+          )
+            n.highlightElement(r, e === !0, a.callback)
+        },
+        highlightElement: function(t, a, r) {
+          for (var l, i, o = t; o && !e.test(o.className); )
+            o = o.parentNode
+          o &&
+            ((l = (o.className.match(e) || [, ''])[1].toLowerCase()), (i =
+              n.languages[l])), (t.className =
+            t.className.replace(e, '').replace(/\s+/g, ' ') +
+            ' language-' +
+            l), (o = t.parentNode), /pre/i.test(o.nodeName) &&
+            (o.className =
+              o.className.replace(e, '').replace(/\s+/g, ' ') +
+              ' language-' +
+              l)
+          var s = t.textContent,
+            u = { element: t, language: l, grammar: i, code: s }
+          if ((n.hooks.run('before-sanity-check', u), !u.code || !u.grammar))
+            return u.code && (u.element.textContent = u.code), n.hooks.run(
+              'complete',
+              u,
+            ), void 0
+          if ((n.hooks.run('before-highlight', u), a && _self.Worker)) {
+            var g = new Worker(n.filename)
+            ;(g.onmessage = function(e) {
+              ;(u.highlightedCode = e.data), n.hooks.run(
+                'before-insert',
+                u,
+              ), (u.element.innerHTML = u.highlightedCode), r &&
+                r.call(u.element), n.hooks.run(
+                'after-highlight',
+                u,
+              ), n.hooks.run('complete', u)
+            }), g.postMessage(
+              JSON.stringify({
+                language: u.language,
+                code: u.code,
+                immediateClose: !0,
+              }),
+            )
+          } else
+            (u.highlightedCode = n.highlight(
+              u.code,
+              u.grammar,
+              u.language,
+            )), n.hooks.run('before-insert', u), (u.element.innerHTML =
+              u.highlightedCode), r && r.call(t), n.hooks.run(
+              'after-highlight',
+              u,
+            ), n.hooks.run('complete', u)
+        },
+        highlight: function(e, t, r) {
+          var l = n.tokenize(e, t)
+          return a.stringify(n.util.encode(l), r)
+        },
+        tokenize: function(e, t) {
+          var a = n.Token, r = [e], l = t.rest
+          if (l) {
+            for (var i in l)
+              t[i] = l[i]
+            delete t.rest
+          }
+          e: for (var i in t)
+            if (t.hasOwnProperty(i) && t[i]) {
+              var o = t[i]
+              o = 'Array' === n.util.type(o) ? o : [o]
+              for (var s = 0; s < o.length; ++s) {
+                var u = o[s],
+                  g = u.inside,
+                  c = !!u.lookbehind,
+                  h = !!u.greedy,
+                  f = 0,
+                  d = u.alias
+                if (h && !u.pattern.global) {
+                  var p = u.pattern.toString().match(/[imuy]*$/)[0]
+                  u.pattern = RegExp(u.pattern.source, p + 'g')
+                }
+                u = u.pattern || u
+                for (var m = 0, y = 0; m < r.length; (y += r[m].length), ++m) {
+                  var v = r[m]
+                  if (r.length > e.length) break e
+                  if (!(v instanceof a)) {
+                    u.lastIndex = 0
+                    var b = u.exec(v), k = 1
+                    if (!b && h && m != r.length - 1) {
+                      if (((u.lastIndex = y), (b = u.exec(e)), !b)) break
+                      for (
+                        var w = b.index + (c ? b[1].length : 0),
+                          _ = b.index + b[0].length,
+                          P = m,
+                          A = y,
+                          j = r.length;
+                        j > P && _ > A;
+                        ++P
+                      )
+                        (A += r[P].length), w >= A && (++m, (y = A))
+                      if (r[m] instanceof a || r[P - 1].greedy) continue
+                      ;(k = P - m), (v = e.slice(y, A)), (b.index -= y)
+                    }
+                    if (b) {
+                      c && (f = b[1].length)
+                      var w = b.index + f,
+                        b = b[0].slice(f),
+                        _ = w + b.length,
+                        x = v.slice(0, w),
+                        O = v.slice(_),
+                        S = [m, k]
+                      x && S.push(x)
+                      var N = new a(i, g ? n.tokenize(b, g) : b, d, b, h)
+                      S.push(N), O && S.push(O), Array.prototype.splice.apply(
+                        r,
+                        S,
+                      )
+                    }
+                  }
+                }
+              }
+            }
+          return r
+        },
+        hooks: {
+          all: {},
+          add: function(e, t) {
+            var a = n.hooks.all
+            ;(a[e] = a[e] || []), a[e].push(t)
+          },
+          run: function(e, t) {
+            var a = n.hooks.all[e]
+            if (a && a.length) for (var r, l = 0; (r = a[l++]); ) r(t)
+          },
+        },
+      }),
+      a = (n.Token = function(e, t, n, a, r) {
+        ;(this.type = e), (this.content = t), (this.alias = n), (this.length =
+          0 | (a || '').length), (this.greedy = !!r)
+      })
+    if (
+      ((a.stringify = function(e, t, r) {
+        if ('string' == typeof e) return e
+        if ('Array' === n.util.type(e))
+          return e
+            .map(function(n) {
+              return a.stringify(n, t, e)
+            })
+            .join('')
+        var l = {
+          type: e.type,
+          content: a.stringify(e.content, t, r),
+          tag: 'span',
+          classes: ['token', e.type],
+          attributes: {},
+          language: t,
+          parent: r,
+        }
+        if (
+          ('comment' == l.type && (l.attributes.spellcheck = 'true'), e.alias)
+        ) {
+          var i = 'Array' === n.util.type(e.alias) ? e.alias : [e.alias]
+          Array.prototype.push.apply(l.classes, i)
+        }
+        n.hooks.run('wrap', l)
+        var o = Object.keys(l.attributes)
+          .map(function(e) {
+            return (
+              e + '="' + (l.attributes[e] || '').replace(/"/g, '&quot;') + '"'
+            )
+          })
+          .join(' ')
+        return (
+          '<' +
+          l.tag +
+          ' class="' +
+          l.classes.join(' ') +
+          '"' +
+          (o ? ' ' + o : '') +
+          '>' +
+          l.content +
+          '</' +
+          l.tag +
+          '>'
+        )
+      }), !_self.document)
+    )
+      return _self.addEventListener
+        ? (_self.addEventListener(
+            'message',
+            function(e) {
+              var t = JSON.parse(e.data),
+                a = t.language,
+                r = t.code,
+                l = t.immediateClose
+              _self.postMessage(n.highlight(r, n.languages[a], a)), l &&
+                _self.close()
+            },
+            !1,
+          ), _self.Prism)
+        : _self.Prism
+    var r =
+      document.currentScript ||
+      [].slice.call(document.getElementsByTagName('script')).pop()
+    return r &&
+      ((n.filename = r.src), !document.addEventListener ||
+        n.manual ||
+        r.hasAttribute('data-manual') ||
+        ('loading' !== document.readyState
+          ? window.requestAnimationFrame
+              ? window.requestAnimationFrame(n.highlightAll)
+              : window.setTimeout(n.highlightAll, 16)
+          : document.addEventListener(
+              'DOMContentLoaded',
+              n.highlightAll,
+            ))), _self.Prism
+  })()
+'undefined' != typeof module &&
+  module.exports &&
+  (module.exports = Prism), 'undefined' != typeof global &&
+  (global.Prism = Prism)
+;(Prism.languages.markup = {
+  comment: /<!--[\w\W]*?-->/,
+  prolog: /<\?[\w\W]+?\?>/,
+  doctype: /<!DOCTYPE[\w\W]+?>/i,
+  cdata: /<!\[CDATA\[[\w\W]*?]]>/i,
+  tag: {
+    pattern: /<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,
+    inside: {
+      tag: {
+        pattern: /^<\/?[^\s>\/]+/i,
+        inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ },
+      },
+      'attr-value': {
+        pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,
+        inside: { punctuation: /[=>"']/ },
+      },
+      punctuation: /\/?>/,
+      'attr-name': {
+        pattern: /[^\s>\/]+/,
+        inside: { namespace: /^[^\s>\/:]+:/ },
+      },
+    },
+  },
+  entity: /&#?[\da-z]{1,8};/i,
+}), Prism.hooks.add('wrap', function(a) {
+  'entity' === a.type && (a.attributes.title = a.content.replace(/&amp;/, '&'))
+}), (Prism.languages.xml = Prism.languages.markup), (Prism.languages.html =
+  Prism.languages.markup), (Prism.languages.mathml =
+  Prism.languages.markup), (Prism.languages.svg = Prism.languages.markup)
+Prism.languages.clike = {
+  comment: [
+    { pattern: /(^|[^\\])\/\*[\w\W]*?\*\//, lookbehind: !0 },
+    { pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0 },
+  ],
+  string: {
+    pattern: /(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+    greedy: !0,
+  },
+  'class-name': {
+    pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,
+    lookbehind: !0,
+    inside: { punctuation: /(\.|\\)/ },
+  },
+  keyword: /\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
+  boolean: /\b(true|false)\b/,
+  function: /[a-z0-9_]+(?=\()/i,
+  number: /\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,
+  operator: /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,
+  punctuation: /[{}[\];(),.:]/,
+}
+;(Prism.languages.javascript = Prism.languages.extend('clike', {
+  keyword: /\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,
+  number: /\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,
+  function: /[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,
+  operator: /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/,
+})), Prism.languages.insertBefore('javascript', 'keyword', {
+  regex: {
+    pattern: /(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,
+    lookbehind: !0,
+    greedy: !0,
+  },
+}), Prism.languages.insertBefore('javascript', 'string', {
+  'template-string': {
+    pattern: /`(?:\\\\|\\?[^\\])*?`/,
+    greedy: !0,
+    inside: {
+      interpolation: {
+        pattern: /\$\{[^}]+\}/,
+        inside: {
+          'interpolation-punctuation': {
+            pattern: /^\$\{|\}$/,
+            alias: 'punctuation',
+          },
+          rest: Prism.languages.javascript,
+        },
+      },
+      string: /[\s\S]+/,
+    },
+  },
+}), Prism.languages.markup &&
+  Prism.languages.insertBefore('markup', 'tag', {
+    script: {
+      pattern: /(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,
+      lookbehind: !0,
+      inside: Prism.languages.javascript,
+      alias: 'language-javascript',
+    },
+  }), (Prism.languages.js = Prism.languages.javascript)
+!(function(a) {
+  var e = a.util.clone(a.languages.javascript)
+  ;(a.languages.jsx = a.languages.extend(
+    'markup',
+    e,
+  )), (a.languages.jsx.tag.pattern = /<\/?[\w\.:-]+\s*(?:\s+(?:[\w\.:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+|(\{[\w\W]*?\})))?|\{\.{3}\w+\})\s*)*\/?>/i), (a.languages.jsx.tag.inside[
+    'attr-value'
+  ].pattern = /=(?!\{)(?:('|")[\w\W]*?(\1)|[^\s>]+)/i), a.languages.insertBefore(
+    'inside',
+    'attr-name',
+    {
+      spread: {
+        pattern: /\{\.{3}\w+\}/,
+        inside: { punctuation: /\{|\}|\./, 'attr-value': /\w+/ },
+      },
+    },
+    a.languages.jsx.tag,
+  )
+  var s = a.util.clone(a.languages.jsx)
+  delete s.punctuation, (s = a.languages.insertBefore(
+    'jsx',
+    'operator',
+    { punctuation: /=(?={)|[{}[\];(),.:]/ },
+    { jsx: s },
+  )), a.languages.insertBefore(
+    'inside',
+    'attr-value',
+    {
+      script: {
+        pattern: /=(\{(?:\{[^}]*\}|[^}])+\})/i,
+        inside: s,
+        alias: 'language-javascript',
+      },
+    },
+    a.languages.jsx.tag,
+  )
+})(Prism)
diff --git a/src/register.js b/src/register.js
index 2ae9477..c4059cb 100644
--- a/src/register.js
+++ b/src/register.js
@@ -1,13 +1,8 @@
 import React, { Component } from 'react'
 import addons from '@kadira/storybook-addons'
-import Prism from 'prismjs'
-import CopyToClipboard from 'react-copy-to-clipboard'
 
-import globalStyle from './css'
-
-const prismStyle = document.createElement('style')
-prismStyle.innerHTML = globalStyle
-document.body.appendChild(prismStyle)
+import Title from './title'
+import JSX from './jsx'
 
 const Observable = (channel, api) => {
   return listener => {
@@ -16,115 +11,6 @@ const Observable = (channel, api) => {
   }
 }
 
-export class JSX extends Component {
-  constructor(props, ...args) {
-    super(props, ...args)
-    props.ob({
-      next: type =>
-        (type === 'jsx'
-          ? this.onAddJSX.bind(this)
-          : this.setCurrent.bind(this)),
-    })
-
-    this.state = {}
-    this.stopListeningOnStory = () => this.setState({})
-  }
-
-  setCurrent(kind, story) {
-    this.setState({ current: { kind, story } })
-  }
-
-  onAddJSX(kind, story, jsx) {
-    const state = this.state
-
-    if (typeof state[kind] === 'undefined') {
-      state[kind] = {}
-    }
-    state[kind][story] = jsx
-    this.setState(state)
-  }
-  render() {
-    if (
-      typeof this.state.current !== 'undefined' &&
-      typeof this.state[this.state.current.kind] !== 'undefined'
-    ) {
-      const current = this.state.current
-      const code = this.state[current.kind][current.story]
-      const jsx = Prism.highlight(code, Prism.languages.html)
-
-      return (
-        <pre style={styles.pre} dangerouslySetInnerHTML={{ __html: jsx }} />
-      )
-    } else {
-      return <pre style={styles.pre} />
-    }
-  }
-}
-
-class Title extends Component {
-  constructor(props, ...args) {
-    super(props, ...args)
-    props.ob({
-      next: type =>
-        (type === 'jsx'
-          ? this.onAddJSX.bind(this)
-          : this.setCurrent.bind(this)),
-    })
-
-    this.state = {}
-    this.stopListeningOnStory = () => this.setState({})
-  }
-
-  setCurrent(kind, story) {
-    this.setState({ current: { kind, story } })
-  }
-
-  onAddJSX(kind, story, jsx) {
-    const state = this.state
-
-    if (typeof state[kind] === 'undefined') {
-      state[kind] = {}
-    }
-    state[kind][story] = jsx
-    this.setState(state)
-  }
-  _copy() {
-    if (
-      typeof this.state.current !== 'undefined' &&
-      typeof this.state[this.state.current.kind] !== 'undefined'
-    ) {
-      Copy.copy(this.state[current.kind][current.story])
-    }
-  }
-  render() {
-    if (
-      typeof this.state.current !== 'undefined' &&
-      typeof this.state[this.state.current.kind] !== 'undefined'
-    ) {
-      const current = this.state.current
-      const code = this.state[current.kind][current.story]
-      const jsx = Prism.highlight(code, Prism.languages.html)
-
-      return (
-        <div>
-          <span style={styles.title}>JSX</span>
-          <CopyToClipboard style={styles.btn} text={code}>
-            <button>Copy</button>
-          </CopyToClipboard>
-        </div>
-      )
-    } else {
-      return (
-        <div>
-          <span style={styles.title}>JSX</span>
-          <CopyToClipboard style={styles.btn} text="" disabled>
-            <button>Copy</button>
-          </CopyToClipboard>
-        </div>
-      )
-    }
-  }
-}
 addons.register('kadira/jsx', api => {
   const ob = Observable(addons.getChannel(), api)
 
@@ -133,22 +19,3 @@ addons.register('kadira/jsx', api => {
     render: () => <JSX ob={ob} />,
   })
 })
-
-const styles = {
-  pre: { flex: 1, padding: '5px 15px' },
-  title: {
-    marginRight: 8,
-  },
-  btn: {
-    flex: 1,
-    outline: 'none',
-    border: '1px solid #A7A7A7',
-    borderRadius: 2,
-    color: '#A7A7A7',
-    padding: 2,
-    margin: 0,
-    backgroundColor: 'transparent',
-    cursor: 'pointer',
-    transition: 'all .3s ease',
-  },
-}
diff --git a/src/title.js b/src/title.js
new file mode 100644
index 0000000..209222b
--- /dev/null
+++ b/src/title.js
@@ -0,0 +1,86 @@
+import React, { Component } from 'react'
+import CopyToClipboard from 'react-copy-to-clipboard'
+
+class Title extends Component {
+  constructor(props, ...args) {
+    super(props, ...args)
+    props.ob({
+      next: type =>
+        (type === 'jsx'
+          ? this.onAddJSX.bind(this)
+          : this.setCurrent.bind(this)),
+    })
+
+    this.state = {}
+    this.stopListeningOnStory = () => this.setState({})
+  }
+
+  setCurrent(kind, story) {
+    this.setState({ current: { kind, story } })
+  }
+
+  onAddJSX(kind, story, jsx) {
+    const state = this.state
+
+    if (typeof state[kind] === 'undefined') {
+      state[kind] = {}
+    }
+    state[kind][story] = jsx
+    this.setState(state)
+  }
+  _copy() {
+    if (
+      typeof this.state.current !== 'undefined' &&
+      typeof this.state[this.state.current.kind] !== 'undefined'
+    ) {
+      Copy.copy(this.state[current.kind][current.story])
+    }
+  }
+  render() {
+    if (
+      typeof this.state.current !== 'undefined' &&
+      typeof this.state[this.state.current.kind] !== 'undefined'
+    ) {
+      const current = this.state.current
+      const code = this.state[current.kind][current.story]
+
+      return (
+        <div>
+          <span style={styles.title}>JSX</span>
+          <CopyToClipboard style={styles.btn} text={code ? code : ''}>
+            <button>Copy</button>
+          </CopyToClipboard>
+        </div>
+      )
+    } else {
+      return (
+        <div>
+          <span style={styles.title}>JSX</span>
+          <CopyToClipboard style={styles.btn} text="" disabled>
+            <button>Copy</button>
+          </CopyToClipboard>
+        </div>
+      )
+    }
+  }
+}
+
+export default Title
+
+const styles = {
+  title: {
+    marginRight: 8,
+  },
+  btn: {
+    flex: 1,
+    outline: 'none',
+    border: '1px solid #A7A7A7',
+    borderRadius: 2,
+    color: '#A7A7A7',
+    padding: 2,
+    margin: 0,
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    transition: 'all .3s ease',
+  },
+}
diff --git a/yarn.lock b/yarn.lock
index a365b88..fa2dcc1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1328,14 +1328,6 @@ classnames@^2.2.3:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
-clipboard@^1.5.5:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.6.1.tgz#65c5b654812466b0faab82dc6ba0f1d2f8e4be53"
-  dependencies:
-    good-listener "^1.2.0"
-    select "^1.1.2"
-    tiny-emitter "^1.0.0"
-
 cliui@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -1711,10 +1703,6 @@ delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
 
-delegate@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.2.tgz#1e1bc6f5cadda6cb6cbf7e6d05d0bcdd5712aebe"
-
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -2234,12 +2222,6 @@ globals@^9.0.0:
   version "9.17.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.17.0.tgz#0c0ca696d9b9bb694d2e5470bd37777caad50286"
 
-good-listener@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
-  dependencies:
-    delegate "^3.1.2"
-
 graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -3923,12 +3905,6 @@ pretty-format@^19.0.0:
   dependencies:
     ansi-styles "^3.0.0"
 
-prismjs@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365"
-  optionalDependencies:
-    clipboard "^1.5.5"
-
 private@^0.1.6, private@~0.1.5:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
@@ -4366,10 +4342,6 @@ sax@^1.2.1, sax@~1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
 
-select@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
-
 "semver@2 || 3 || 4 || 5", semver@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -4736,10 +4708,6 @@ timers-browserify@^2.0.2:
   dependencies:
     setimmediate "^1.0.4"
 
-tiny-emitter@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.2.0.tgz#6dc845052cb08ebefc1874723b58f24a648c3b6f"
-
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"