Add example docs to react-docs package

43 files changed, 2396 insertions, 141 deletions

diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 4b582edff..e38aef2e5 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -8,7 +8,8 @@
     "lint": "tslint --project . 'src/ts/**/*.ts' 'src/ts/**/*.tsx'",
     "build": "tsc",
     "build:watch": "tsc -w",
-    "clean": "shx rm -rf lib"
+    "clean": "shx rm -rf lib",
+    "dev": "webpack-dev-server --open"
   },
   "author": "Fabio Berger",
   "license": "MIT",
@@ -21,7 +22,15 @@
     "@types/react-dom": "^0.14.23",
     "shx": "^0.2.2",
     "tslint": "^5.9.1",
-    "typescript": "2.7.1"
+    "typescript": "2.7.1",
+    "webpack": "^3.11.0",
+    "webpack-dev-server": "^2.11.1",
+    "css-loader": "^0.28.9",
+    "source-map-loader": "^0.2.3",
+    "style-loader": "^0.20.2",
+    "json-loader": "^0.5.4",
+    "raw-loader": "^0.5.1",
+    "less-loader": "^2.2.3"
   },
   "dependencies": {
     "@0xproject/react-shared": "^0.0.1",
diff --git a/packages/react-docs/src/less/all.less b/packages/react-docs/src/less/all.less
new file mode 100644
index 000000000..4060b8128
--- /dev/null
+++ b/packages/react-docs/src/less/all.less
@@ -0,0 +1,37 @@
+/*
+ * Adds always visible scrollbars on OSX so that user knows the content is scrollable
+ * Source: https://davidwalsh.name/osx-overflow
+ */
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+    height: 2px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+#documentation {
+    p {
+        line-height: 1.5;
+    }
+
+    .comment {
+        p {
+            margin: 0px;
+        }
+    }
+
+    .typeTooltip {
+        border: 1px solid lightgray;
+        opacity: 1;
+    }
+}
+
+code {
+    border: 1px solid #e3eefe;
+    font-family: 'Roboto Mono';
+    background-color: #f2f6ff !important; // lightBlue
+}
diff --git a/packages/react-docs/src/md/introduction.md b/packages/react-docs/src/md/introduction.md
new file mode 100644
index 000000000..b8569576e
--- /dev/null
+++ b/packages/react-docs/src/md/introduction.md
@@ -0,0 +1 @@
+Welcome to the [Web3Wrapper](https://github.com/0xProject/0x-monorepo/packages/web3-wrapper) documentation! Web3Wrapper is a convenience wrapper around Web3.js, adding support for promises and other niceties.
diff --git a/packages/react-docs/src/public/css/basscss_responsive_custom.css b/packages/react-docs/src/public/css/basscss_responsive_custom.css
new file mode 100644
index 000000000..5f8bd9117
--- /dev/null
+++ b/packages/react-docs/src/public/css/basscss_responsive_custom.css
@@ -0,0 +1,85 @@
+/* Custom Basscss Responsive Utilities */
+
+@media (max-width: 52em) {
+    .sm-center {
+        text-align: center;
+    }
+    .sm-align-middle {
+        vertical-align: middle;
+    }
+    .sm-align-top {
+        vertical-align: top;
+    }
+    .sm-left-align {
+        text-align: left;
+    }
+    .sm-right-align {
+        text-align: right;
+    }
+    .sm-table-cell {
+        display: table-cell;
+    }
+    .sm-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .sm-right {
+        float: right;
+    }
+}
+
+@media (min-width: 52em) {
+    .md-center {
+        text-align: center;
+    }
+    .md-align-middle {
+        vertical-align: middle;
+    }
+    .md-align-top {
+        vertical-align: top;
+    }
+    .md-left-align {
+        text-align: left;
+    }
+    .md-right-align {
+        text-align: right;
+    }
+    .md-table-cell {
+        display: table-cell;
+    }
+    .md-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .md-right {
+        float: right;
+    }
+}
+
+@media (min-width: 64em) {
+    .lg-center {
+        text-align: center;
+    }
+    .lg-align-middle {
+        vertical-align: middle;
+    }
+    .lg-align-top {
+        vertical-align: top;
+    }
+    .lg-left-align {
+        text-align: left;
+    }
+    .lg-right-align {
+        text-align: right;
+    }
+    .lg-table-cell {
+        display: table-cell;
+    }
+    .lg-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .lg-right {
+        float: right;
+    }
+}
diff --git a/packages/react-docs/src/public/css/basscss_responsive_margin.css b/packages/react-docs/src/public/css/basscss_responsive_margin.css
new file mode 100644
index 000000000..b601bd491
--- /dev/null
+++ b/packages/react-docs/src/public/css/basscss_responsive_margin.css
@@ -0,0 +1,160 @@
+/* Basscss Responsive Margin */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+
+  .sm-m0  { margin:        0 }
+  .sm-mt0 { margin-top:    0 }
+  .sm-mr0 { margin-right:  0 }
+  .sm-mb0 { margin-bottom: 0 }
+  .sm-ml0 { margin-left:   0 }
+  .sm-mx0 { margin-left:   0; margin-right:  0 }
+  .sm-my0 { margin-top:    0; margin-bottom: 0 }
+
+  .sm-m1  { margin:        .5rem }
+  .sm-mt1 { margin-top:        .5rem }
+  .sm-mr1 { margin-right:        .5rem }
+  .sm-mb1 { margin-bottom:        .5rem }
+  .sm-ml1 { margin-left:        .5rem }
+  .sm-mx1 { margin-left:        .5rem; margin-right:        .5rem }
+  .sm-my1 { margin-top:        .5rem; margin-bottom:        .5rem }
+
+  .sm-m2  { margin:        1rem }
+  .sm-mt2 { margin-top:        1rem }
+  .sm-mr2 { margin-right:        1rem }
+  .sm-mb2 { margin-bottom:        1rem }
+  .sm-ml2 { margin-left:        1rem }
+  .sm-mx2 { margin-left:        1rem; margin-right:        1rem }
+  .sm-my2 { margin-top:        1rem; margin-bottom:        1rem }
+
+  .sm-m3  { margin:        2rem }
+  .sm-mt3 { margin-top:        2rem }
+  .sm-mr3 { margin-right:        2rem }
+  .sm-mb3 { margin-bottom:        2rem }
+  .sm-ml3 { margin-left:        2rem }
+  .sm-mx3 { margin-left:        2rem; margin-right:        2rem }
+  .sm-my3 { margin-top:        2rem; margin-bottom:        2rem }
+
+  .sm-m4  { margin:        4rem }
+  .sm-mt4 { margin-top:        4rem }
+  .sm-mr4 { margin-right:        4rem }
+  .sm-mb4 { margin-bottom:        4rem }
+  .sm-ml4 { margin-left:        4rem }
+  .sm-mx4 { margin-left:        4rem; margin-right:        4rem }
+  .sm-my4 { margin-top:        4rem; margin-bottom:        4rem }
+
+  .sm-mxn1 { margin-left:        -.5rem; margin-right:        -.5rem }
+  .sm-mxn2 { margin-left:        -1rem; margin-right:        -1rem }
+  .sm-mxn3 { margin-left:        -2rem; margin-right:        -2rem }
+  .sm-mxn4 { margin-left:        -4rem; margin-right:        -4rem }
+
+  .sm-ml-auto { margin-left:  auto }
+  .sm-mr-auto { margin-right: auto }
+  .sm-mx-auto { margin-left:  auto; margin-right: auto }
+
+}
+
+@media (min-width: 52em) {
+
+  .md-m0  { margin:        0 }
+  .md-mt0 { margin-top:    0 }
+  .md-mr0 { margin-right:  0 }
+  .md-mb0 { margin-bottom: 0 }
+  .md-ml0 { margin-left:   0 }
+  .md-mx0 { margin-left:   0; margin-right:  0 }
+  .md-my0 { margin-top:    0; margin-bottom: 0 }
+
+  .md-m1  { margin:        .5rem }
+  .md-mt1 { margin-top:        .5rem }
+  .md-mr1 { margin-right:        .5rem }
+  .md-mb1 { margin-bottom:        .5rem }
+  .md-ml1 { margin-left:        .5rem }
+  .md-mx1 { margin-left:        .5rem; margin-right:        .5rem }
+  .md-my1 { margin-top:        .5rem; margin-bottom:        .5rem }
+
+  .md-m2  { margin:        1rem }
+  .md-mt2 { margin-top:        1rem }
+  .md-mr2 { margin-right:        1rem }
+  .md-mb2 { margin-bottom:        1rem }
+  .md-ml2 { margin-left:        1rem }
+  .md-mx2 { margin-left:        1rem; margin-right:        1rem }
+  .md-my2 { margin-top:        1rem; margin-bottom:        1rem }
+
+  .md-m3  { margin:        2rem }
+  .md-mt3 { margin-top:        2rem }
+  .md-mr3 { margin-right:        2rem }
+  .md-mb3 { margin-bottom:        2rem }
+  .md-ml3 { margin-left:        2rem }
+  .md-mx3 { margin-left:        2rem; margin-right:        2rem }
+  .md-my3 { margin-top:        2rem; margin-bottom:        2rem }
+
+  .md-m4  { margin:        4rem }
+  .md-mt4 { margin-top:        4rem }
+  .md-mr4 { margin-right:        4rem }
+  .md-mb4 { margin-bottom:        4rem }
+  .md-ml4 { margin-left:        4rem }
+  .md-mx4 { margin-left:        4rem; margin-right:        4rem }
+  .md-my4 { margin-top:        4rem; margin-bottom:        4rem }
+
+  .md-mxn1 { margin-left:        -.5rem; margin-right:        -.5rem; }
+  .md-mxn2 { margin-left:        -1rem; margin-right:        -1rem; }
+  .md-mxn3 { margin-left:        -2rem; margin-right:        -2rem; }
+  .md-mxn4 { margin-left:        -4rem; margin-right:        -4rem; }
+
+  .md-ml-auto { margin-left:  auto }
+  .md-mr-auto { margin-right: auto }
+  .md-mx-auto { margin-left: auto; margin-right: auto; }
+
+}
+
+@media (min-width: 64em) {
+
+  .lg-m0  { margin:        0 }
+  .lg-mt0 { margin-top:    0 }
+  .lg-mr0 { margin-right:  0 }
+  .lg-mb0 { margin-bottom: 0 }
+  .lg-ml0 { margin-left:   0 }
+  .lg-mx0 { margin-left:   0; margin-right:  0 }
+  .lg-my0 { margin-top:    0; margin-bottom: 0 }
+
+  .lg-m1  { margin:        .5rem }
+  .lg-mt1 { margin-top:        .5rem }
+  .lg-mr1 { margin-right:        .5rem }
+  .lg-mb1 { margin-bottom:        .5rem }
+  .lg-ml1 { margin-left:        .5rem }
+  .lg-mx1 { margin-left:        .5rem; margin-right:        .5rem }
+  .lg-my1 { margin-top:        .5rem; margin-bottom:        .5rem }
+
+  .lg-m2  { margin:        1rem }
+  .lg-mt2 { margin-top:        1rem }
+  .lg-mr2 { margin-right:        1rem }
+  .lg-mb2 { margin-bottom:        1rem }
+  .lg-ml2 { margin-left:        1rem }
+  .lg-mx2 { margin-left:        1rem; margin-right:        1rem }
+  .lg-my2 { margin-top:        1rem; margin-bottom:        1rem }
+
+  .lg-m3  { margin:        2rem }
+  .lg-mt3 { margin-top:        2rem }
+  .lg-mr3 { margin-right:        2rem }
+  .lg-mb3 { margin-bottom:        2rem }
+  .lg-ml3 { margin-left:        2rem }
+  .lg-mx3 { margin-left:        2rem; margin-right:        2rem }
+  .lg-my3 { margin-top:        2rem; margin-bottom:        2rem }
+
+  .lg-m4  { margin:        4rem }
+  .lg-mt4 { margin-top:        4rem }
+  .lg-mr4 { margin-right:        4rem }
+  .lg-mb4 { margin-bottom:        4rem }
+  .lg-ml4 { margin-left:        4rem }
+  .lg-mx4 { margin-left:        4rem; margin-right:        4rem }
+  .lg-my4 { margin-top:        4rem; margin-bottom:        4rem }
+
+  .lg-mxn1 { margin-left:        -.5rem; margin-right:        -.5rem; }
+  .lg-mxn2 { margin-left:        -1rem; margin-right:        -1rem; }
+  .lg-mxn3 { margin-left:        -2rem; margin-right:        -2rem; }
+  .lg-mxn4 { margin-left:        -4rem; margin-right:        -4rem; }
+
+  .lg-ml-auto { margin-left:  auto }
+  .lg-mr-auto { margin-right: auto }
+  .lg-mx-auto { margin-left: auto; margin-right: auto; }
+
+}
diff --git a/packages/react-docs/src/public/css/basscss_responsive_padding.css b/packages/react-docs/src/public/css/basscss_responsive_padding.css
new file mode 100644
index 000000000..e027c2d65
--- /dev/null
+++ b/packages/react-docs/src/public/css/basscss_responsive_padding.css
@@ -0,0 +1,134 @@
+/* Basscss Responsive Padding */
+/* Modified by Fabio Berger to include xs prefix */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+
+  .sm-p0  { padding:        0 }
+  .sm-pt0 { padding-top:    0 }
+  .sm-pr0 { padding-right:  0 }
+  .sm-pb0 { padding-bottom: 0 }
+  .sm-pl0 { padding-left:   0 }
+  .sm-px0 { padding-left:   0; padding-right:  0 }
+  .sm-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .sm-p1  { padding:        .5rem }
+  .sm-pt1 { padding-top:        .5rem }
+  .sm-pr1 { padding-right:        .5rem }
+  .sm-pb1 { padding-bottom:        .5rem }
+  .sm-pl1 { padding-left:        .5rem }
+  .sm-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .sm-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .sm-p2  { padding:        1rem }
+  .sm-pt2 { padding-top:        1rem }
+  .sm-pr2 { padding-right:        1rem }
+  .sm-pb2 { padding-bottom:        1rem }
+  .sm-pl2 { padding-left:        1rem }
+  .sm-px2 { padding-left:        1rem; padding-right:        1rem }
+  .sm-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .sm-p3  { padding:        2rem }
+  .sm-pt3 { padding-top:        2rem }
+  .sm-pr3 { padding-right:        2rem }
+  .sm-pb3 { padding-bottom:        2rem }
+  .sm-pl3 { padding-left:        2rem }
+  .sm-px3 { padding-left:        2rem; padding-right:        2rem }
+  .sm-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .sm-p4  { padding:        4rem }
+  .sm-pt4 { padding-top:        4rem }
+  .sm-pr4 { padding-right:        4rem }
+  .sm-pb4 { padding-bottom:        4rem }
+  .sm-pl4 { padding-left:        4rem }
+  .sm-px4 { padding-left:        4rem; padding-right:        4rem }
+  .sm-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
+
+@media (min-width: 52em) {
+
+  .md-p0  { padding:        0 }
+  .md-pt0 { padding-top:    0 }
+  .md-pr0 { padding-right:  0 }
+  .md-pb0 { padding-bottom: 0 }
+  .md-pl0 { padding-left:   0 }
+  .md-px0 { padding-left:   0; padding-right:  0 }
+  .md-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .md-p1  { padding:        .5rem }
+  .md-pt1 { padding-top:        .5rem }
+  .md-pr1 { padding-right:        .5rem }
+  .md-pb1 { padding-bottom:        .5rem }
+  .md-pl1 { padding-left:        .5rem }
+  .md-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .md-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .md-p2  { padding:        1rem }
+  .md-pt2 { padding-top:        1rem }
+  .md-pr2 { padding-right:        1rem }
+  .md-pb2 { padding-bottom:        1rem }
+  .md-pl2 { padding-left:        1rem }
+  .md-px2 { padding-left:        1rem; padding-right:        1rem }
+  .md-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .md-p3  { padding:        2rem }
+  .md-pt3 { padding-top:        2rem }
+  .md-pr3 { padding-right:        2rem }
+  .md-pb3 { padding-bottom:        2rem }
+  .md-pl3 { padding-left:        2rem }
+  .md-px3 { padding-left:        2rem; padding-right:        2rem }
+  .md-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .md-p4  { padding:        4rem }
+  .md-pt4 { padding-top:        4rem }
+  .md-pr4 { padding-right:        4rem }
+  .md-pb4 { padding-bottom:        4rem }
+  .md-pl4 { padding-left:        4rem }
+  .md-px4 { padding-left:        4rem; padding-right:        4rem }
+  .md-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
+
+@media (min-width: 64em) {
+
+  .lg-p0  { padding:        0 }
+  .lg-pt0 { padding-top:    0 }
+  .lg-pr0 { padding-right:  0 }
+  .lg-pb0 { padding-bottom: 0 }
+  .lg-pl0 { padding-left:   0 }
+  .lg-px0 { padding-left:   0; padding-right:  0 }
+  .lg-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .lg-p1  { padding:        .5rem }
+  .lg-pt1 { padding-top:        .5rem }
+  .lg-pr1 { padding-right:        .5rem }
+  .lg-pb1 { padding-bottom:        .5rem }
+  .lg-pl1 { padding-left:        .5rem }
+  .lg-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .lg-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .lg-p2  { padding:        1rem }
+  .lg-pt2 { padding-top:        1rem }
+  .lg-pr2 { padding-right:        1rem }
+  .lg-pb2 { padding-bottom:        1rem }
+  .lg-pl2 { padding-left:        1rem }
+  .lg-px2 { padding-left:        1rem; padding-right:        1rem }
+  .lg-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .lg-p3  { padding:        2rem }
+  .lg-pt3 { padding-top:        2rem }
+  .lg-pr3 { padding-right:        2rem }
+  .lg-pb3 { padding-bottom:        2rem }
+  .lg-pl3 { padding-left:        2rem }
+  .lg-px3 { padding-left:        2rem; padding-right:        2rem }
+  .lg-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .lg-p4  { padding:        4rem }
+  .lg-pt4 { padding-top:        4rem }
+  .lg-pr4 { padding-right:        4rem }
+  .lg-pb4 { padding-bottom:        4rem }
+  .lg-pl4 { padding-left:        4rem }
+  .lg-px4 { padding-left:        4rem; padding-right:        4rem }
+  .lg-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
diff --git a/packages/react-docs/src/public/css/basscss_responsive_type_scale.css b/packages/react-docs/src/public/css/basscss_responsive_type_scale.css
new file mode 100644
index 000000000..cae23b4e7
--- /dev/null
+++ b/packages/react-docs/src/public/css/basscss_responsive_type_scale.css
@@ -0,0 +1,35 @@
+/* Basscss Responsive Type Scale */
+/* Modified by Fabio Berger to include xs prefix */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+  .sm-h00 { font-size: 4rem }
+  .sm-h0 { font-size: 3rem }
+  .sm-h1 { font-size: 2rem }
+  .sm-h2 { font-size: 1.5rem }
+  .sm-h3 { font-size: 1.25rem }
+  .sm-h4 { font-size: 1rem }
+  .sm-h5 { font-size: .875rem }
+  .sm-h6 { font-size: .75rem }
+}
+
+@media (min-width: 52em) {
+  .md-h00 { font-size: 4rem }
+  .md-h0 { font-size: 3rem }
+  .md-h1 { font-size: 2rem }
+  .md-h2 { font-size: 1.5rem }
+  .md-h3 { font-size: 1.25rem }
+  .md-h4 { font-size: 1rem }
+  .md-h5 { font-size: .875rem }
+  .md-h6 { font-size: .75rem }
+}
+
+@media (min-width: 64em) {
+  .lg-h00 { font-size: 4rem }
+  .lg-h0 { font-size: 3rem }
+  .lg-h1 { font-size: 2rem }
+  .lg-h2 { font-size: 1.5rem }
+  .lg-h3 { font-size: 1.25rem }
+  .lg-h4 { font-size: 1rem }
+  .lg-h5 { font-size: .875rem }
+  .lg-h6 { font-size: .75rem }
+}
diff --git a/packages/react-docs/src/public/css/github-gist.css b/packages/react-docs/src/public/css/github-gist.css
new file mode 100644
index 000000000..d5c8751c5
--- /dev/null
+++ b/packages/react-docs/src/public/css/github-gist.css
@@ -0,0 +1,71 @@
+/**
+ * GitHub Gist Theme
+ * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+ */
+
+.hljs {
+    display: block;
+    background: white;
+    padding: 0.5em;
+    color: #333333;
+    overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+    color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+    color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+    color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+    color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+    color: #63a35c;
+}
+
+.hljs-tag {
+    color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+    color: #795da3;
+}
+
+.hljs-addition {
+    color: #55a532;
+    background-color: #eaffea;
+}
+
+.hljs-deletion {
+    color: #bd2c00;
+    background-color: #ffecec;
+}
+
+.hljs-link {
+    text-decoration: underline;
+}
diff --git a/packages/react-docs/src/public/css/roboto.css b/packages/react-docs/src/public/css/roboto.css
new file mode 100644
index 000000000..7af568a74
--- /dev/null
+++ b/packages/react-docs/src/public/css/roboto.css
@@ -0,0 +1,83 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}*/
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}*/
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-RegularItalic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}*/
+
+/*@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+}*/
diff --git a/packages/react-docs/src/public/css/roboto_mono.css b/packages/react-docs/src/public/css/roboto_mono.css
new file mode 100644
index 000000000..f8159d35f
--- /dev/null
+++ b/packages/react-docs/src/public/css/roboto_mono.css
@@ -0,0 +1,69 @@
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}*/
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}*/
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-RegularItalic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}*/
+
+/*@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}*/
diff --git a/packages/react-docs/src/public/fonts/Roboto-Black.ttf b/packages/react-docs/src/public/fonts/Roboto-Black.ttf
new file mode 100755
index 000000000..689fe5cb3
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-Black.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-BlackItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-BlackItalic.ttf
new file mode 100755
index 000000000..0b4e0ee10
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-BlackItalic.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-Bold.ttf b/packages/react-docs/src/public/fonts/Roboto-Bold.ttf
new file mode 100755
index 000000000..d3f01ad24
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-Bold.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-BoldItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-BoldItalic.ttf
new file mode 100755
index 000000000..41cc1e753
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-BoldItalic.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-Italic.ttf b/packages/react-docs/src/public/fonts/Roboto-Italic.ttf
new file mode 100755
index 000000000..6a1cee5b2
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-Italic.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-Light.ttf b/packages/react-docs/src/public/fonts/Roboto-Light.ttf
new file mode 100755
index 000000000..219063a57
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-Light.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-LightItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-LightItalic.ttf
new file mode 100755
index 000000000..0e81e876f
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-LightItalic.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-Medium.ttf b/packages/react-docs/src/public/fonts/Roboto-Medium.ttf
new file mode 100755
index 000000000..1a7f3b0bb
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-Medium.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-MediumItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-MediumItalic.ttf
new file mode 100755
index 000000000..003029527
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-MediumItalic.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-Regular.ttf b/packages/react-docs/src/public/fonts/Roboto-Regular.ttf
new file mode 100755
index 000000000..2c97eeadf
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-Regular.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-Thin.ttf b/packages/react-docs/src/public/fonts/Roboto-Thin.ttf
new file mode 100755
index 000000000..b74a4fd1a
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-Thin.ttf
diff --git a/packages/react-docs/src/public/fonts/Roboto-ThinItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-ThinItalic.ttf
new file mode 100755
index 000000000..dd0ddb852
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/Roboto-ThinItalic.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Bold.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Bold.ttf
new file mode 100755
index 000000000..07ef607d5
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-Bold.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-BoldItalic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-BoldItalic.ttf
new file mode 100755
index 000000000..1cca0bf45
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-BoldItalic.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Italic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Italic.ttf
new file mode 100755
index 000000000..ef92c372c
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-Italic.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Light.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Light.ttf
new file mode 100755
index 000000000..63229b280
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-Light.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-LightItalic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-LightItalic.ttf
new file mode 100755
index 000000000..f25bed56a
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-LightItalic.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Medium.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Medium.ttf
new file mode 100755
index 000000000..88ff0c15a
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-Medium.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-MediumItalic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-MediumItalic.ttf
new file mode 100755
index 000000000..307efad8f
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-MediumItalic.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Regular.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Regular.ttf
new file mode 100755
index 000000000..b158a334e
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-Regular.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Thin.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Thin.ttf
new file mode 100755
index 000000000..309484d32
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-Thin.ttf
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-ThinItalic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-ThinItalic.ttf
new file mode 100755
index 000000000..e1bb9121e
--- /dev/null
+++ b/packages/react-docs/src/public/fonts/RobotoMono-ThinItalic.ttf
diff --git a/packages/react-docs/src/public/index.html b/packages/react-docs/src/public/index.html
new file mode 100644
index 000000000..9e7184941
--- /dev/null
+++ b/packages/react-docs/src/public/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Example Docs Page</title>
+    <link rel="stylesheet" href="/css/github-gist.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_custom.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_padding.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_margin.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css">
+    <link rel="stylesheet" href="/css/roboto.css">
+    <link rel="stylesheet" href="/css/roboto_mono.css">
+</head>
+
+<body style="margin: 0px; min-width: 355px; font-family: 'Roboto';">
+    <!-- Main -->
+    <div id="app"></div>
+    <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
+</body>
+
+</html>
diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 8be7cd62d..8db9b34b4 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -37,8 +37,6 @@ import { SourceLink } from './source_link';
 import { Type } from './type';
 import { TypeDefinition } from './type_definition';
 
-const TOP_BAR_HEIGHT = 60;
-
 const networkNameToColor: { [network: string]: string } = {
     [Networks.Kovan]: colors.purple,
     [Networks.Ropsten]: colors.red,
@@ -53,30 +51,15 @@ export interface DocumentationProps {
     docAgnosticFormat?: DocAgnosticFormat;
     sidebarHeader?: React.ReactNode;
     sourceUrl: string;
+    topBarHeight?: number;
 }
 
 export interface DocumentationState {}
 
-const styles: Styles = {
-    mainContainers: {
-        position: 'absolute',
-        top: 1,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        overflowZ: 'hidden',
-        overflowY: 'scroll',
-        minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-        WebkitOverflowScrolling: 'touch',
-    },
-    menuContainer: {
-        borderColor: colors.grey300,
-        maxWidth: 330,
-        marginLeft: 20,
-    },
-};
-
 export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
+    public static defaultProps: Partial<DocumentationProps> = {
+        topBarHeight: 0,
+    };
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
             const hash = window.location.hash.slice(1);
@@ -84,27 +67,45 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
         }
     }
     public render() {
+        const styles: Styles = {
+            mainContainers: {
+                position: 'absolute',
+                top: 1,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                overflowZ: 'hidden',
+                overflowY: 'scroll',
+                minHeight: `calc(100vh - ${this.props.topBarHeight}px)`,
+                WebkitOverflowScrolling: 'touch',
+            },
+            menuContainer: {
+                borderColor: colors.grey300,
+                maxWidth: 330,
+                marginLeft: 20,
+            },
+        };
         const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat);
         return (
             <div>
                 {_.isUndefined(this.props.docAgnosticFormat) ? (
-                    this._renderLoading()
+                    this._renderLoading(styles.mainContainers)
                 ) : (
                     <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}>
                         <div
                             className="mx-auto max-width-4 flex"
-                            style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+                            style={{ color: colors.grey800, height: `calc(100vh - ${this.props.topBarHeight}px)` }}
                         >
                             <div
                                 className="relative sm-hide xs-hide"
-                                style={{ width: '36%', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+                                style={{ width: '36%', height: `calc(100vh - ${this.props.topBarHeight}px)` }}
                             >
                                 <div
                                     className="border-right absolute"
                                     style={{
                                         ...styles.menuContainer,
                                         ...styles.mainContainers,
-                                        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+                                        height: `calc(100vh - ${this.props.topBarHeight}px)`,
                                     }}
                                 >
                                     <NestedSidebarMenu
@@ -135,9 +136,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             </div>
         );
     }
-    private _renderLoading() {
+    private _renderLoading(mainContainersStyles: React.CSSProperties) {
         return (
-            <div className="col col-12" style={styles.mainContainers}>
+            <div className="col col-12" style={mainContainersStyles}>
                 <div
                     className="relative sm-px2 sm-pt2 sm-m1"
                     style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
@@ -210,6 +211,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 />
             );
         });
+        const headerStyle: React.CSSProperties = {
+            fontWeight: 100,
+        };
         return (
             <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
                 <div className="flex pb2">
@@ -222,26 +226,26 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 {docSection.constructors.length > 0 &&
                     this.props.docsInfo.isVisibleConstructor(sectionName) && (
                         <div>
-                            <h2 className="thin">Constructor</h2>
+                            <h2 style={headerStyle}>Constructor</h2>
                             {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
                         </div>
                     )}
                 {docSection.properties.length > 0 && (
                     <div>
-                        <h2 className="thin">Properties</h2>
+                        <h2 style={headerStyle}>Properties</h2>
                         <div>{propertyDefs}</div>
                     </div>
                 )}
                 {docSection.methods.length > 0 && (
                     <div>
-                        <h2 className="thin">Methods</h2>
+                        <h2 style={headerStyle}>Methods</h2>
                         <div>{methodDefs}</div>
                     </div>
                 )}
                 {!_.isUndefined(docSection.events) &&
                     docSection.events.length > 0 && (
                         <div>
-                            <h2 className="thin">Events</h2>
+                            <h2 style={headerStyle}>Events</h2>
                             <div>{eventDefs}</div>
                         </div>
                     )}
diff --git a/packages/react-docs/src/ts/example/index.tsx b/packages/react-docs/src/ts/example/index.tsx
new file mode 100644
index 000000000..7a0eab882
--- /dev/null
+++ b/packages/react-docs/src/ts/example/index.tsx
@@ -0,0 +1,67 @@
+import 'basscss/css/basscss.css';
+import 'less/all.less';
+import { MuiThemeProvider } from 'material-ui/styles';
+import * as React from 'react';
+import { render } from 'react-dom';
+import * as injectTapEventPlugin from 'react-tap-event-plugin';
+
+import { Documentation } from '../components/documentation';
+import { DocsInfo } from '../docs_info';
+import { DocsInfoConfig, SupportedDocJson } from '../types';
+injectTapEventPlugin();
+
+/* tslint:disable:no-var-requires */
+const IntroMarkdown = require('md/introduction');
+/* tslint:enable:no-var-requires */
+
+const docSections = {
+    introduction: 'introduction',
+    web3Wrapper: 'web3Wrapper',
+};
+
+const docsInfoConfig: DocsInfoConfig = {
+    id: 'web3Wrapper',
+    type: SupportedDocJson.TypeDoc,
+    displayName: 'Web3 Wrapper',
+    packageUrl: 'https://github.com/0xProject/0x-monorepo',
+    menu: {
+        introduction: [docSections.introduction],
+        web3Wrapper: [docSections.web3Wrapper],
+    },
+    sectionNameToMarkdown: {
+        [docSections.introduction]: IntroMarkdown,
+    },
+    // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is
+    // currently no way to extract the re-exported types from index.ts via TypeDoc :(
+    publicTypes: ['TxData', 'TransactionReceipt', 'RawLogEntry'],
+    sectionNameToModulePath: {
+        [docSections.web3Wrapper]: ['"index"'],
+    },
+    menuSubsectionToVersionWhenIntroduced: {},
+    sections: docSections,
+    visibleConstructors: [docSections.web3Wrapper],
+};
+const docsInfo = new DocsInfo(docsInfoConfig);
+
+const selectedVersion = '0.2.0';
+const availableVersions = ['0.1.12', '0.1.13', '0.1.14', '0.2.0'];
+
+const sourceUrl = `${
+    docsInfoConfig.packageUrl
+}/blob/@0xproject/web3-wrapper%40${selectedVersion}/packages/web3-wrapper`;
+
+import * as typeDocJson from './json/web3_wrapper_typedoc_output.json';
+const docAgnosticFormat = docsInfo.convertToDocAgnosticFormat(typeDocJson);
+
+render(
+    <MuiThemeProvider>
+        <Documentation
+            selectedVersion={selectedVersion}
+            availableVersions={availableVersions}
+            docsInfo={docsInfo}
+            docAgnosticFormat={docAgnosticFormat}
+            sourceUrl={sourceUrl}
+        />
+    </MuiThemeProvider>,
+    document.getElementById('app'),
+);
diff --git a/packages/react-docs/src/ts/example/json/web3_wrapper_typedoc_output.json b/packages/react-docs/src/ts/example/json/web3_wrapper_typedoc_output.json
new file mode 100644
index 000000000..b2e01f614
--- /dev/null
+++ b/packages/react-docs/src/ts/example/json/web3_wrapper_typedoc_output.json
@@ -0,0 +1,1364 @@
+{
+	"id": 0,
+	"name": "@0xproject/web3-wrapper",
+	"kind": 0,
+	"flags": {},
+	"children": [
+		{
+			"id": 1,
+			"name": "\"index\"",
+			"kind": 1,
+			"kindString": "External module",
+			"flags": {
+				"isExported": true
+			},
+			"originalName": "/Users/fabioberger/Documents/projects/0x_project/0x-monorepo/packages/web3-wrapper/src/index.ts",
+			"children": [
+				{
+					"id": 11,
+					"name": "Web3Wrapper",
+					"kind": 128,
+					"kindString": "Class",
+					"flags": {
+						"isExported": true
+					},
+					"children": [
+						{
+							"id": 12,
+							"name": "constructor",
+							"kind": 512,
+							"kindString": "Constructor",
+							"flags": {
+								"isExported": true
+							},
+							"signatures": [
+								{
+									"id": 13,
+									"name": "new Web3Wrapper",
+									"kind": 16384,
+									"kindString": "Constructor signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 14,
+											"name": "provider",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "Provider"
+											}
+										},
+										{
+											"id": 15,
+											"name": "defaults",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {
+												"isOptional": true
+											},
+											"type": {
+												"type": "reference",
+												"name": "Partial",
+												"typeArguments": [
+													{
+														"type": "reference",
+														"name": "TxData"
+													}
+												]
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Web3Wrapper",
+										"id": 11
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 20,
+									"character": 38
+								}
+							]
+						},
+						{
+							"id": 68,
+							"name": "callAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 69,
+									"name": "callAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 70,
+											"name": "callData",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "CallData"
+											}
+										},
+										{
+											"id": 71,
+											"name": "defaultBlock",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {
+												"isOptional": true
+											},
+											"type": {
+												"type": "reference",
+												"name": "Web3.BlockParam"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "string"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 135,
+									"character": 26
+								}
+							]
+						},
+						{
+							"id": 42,
+							"name": "doesContractExistAtAddressAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 43,
+									"name": "doesContractExistAtAddressAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 44,
+											"name": "address",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "boolean"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 76,
+									"character": 48
+								}
+							]
+						},
+						{
+							"id": 65,
+							"name": "estimateGasAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 66,
+									"name": "estimateGasAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 67,
+											"name": "txData",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "Partial",
+												"typeArguments": [
+													{
+														"type": "reference",
+														"name": "TxData"
+													}
+												]
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "number"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 131,
+									"character": 33
+								}
+							]
+						},
+						{
+							"id": 57,
+							"name": "getAvailableAddressesAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 58,
+									"name": "getAvailableAddressesAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "array",
+												"elementType": {
+													"type": "intrinsic",
+													"name": "string"
+												}
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 98,
+									"character": 43
+								}
+							]
+						},
+						{
+							"id": 39,
+							"name": "getBalanceInWeiAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 40,
+									"name": "getBalanceInWeiAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 41,
+											"name": "owner",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "reference",
+												"name": "BigNumber"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 70,
+									"character": 37
+								}
+							]
+						},
+						{
+							"id": 51,
+							"name": "getBlockAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 52,
+									"name": "getBlockAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 53,
+											"name": "blockParam",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "union",
+												"types": [
+													{
+														"type": "intrinsic",
+														"name": "string"
+													},
+													{
+														"type": "reference",
+														"name": "Web3.BlockParam"
+													}
+												]
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "reference",
+												"name": "BlockWithoutTransactionData"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 90,
+									"character": 30
+								}
+							]
+						},
+						{
+							"id": 49,
+							"name": "getBlockNumberAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 50,
+									"name": "getBlockNumberAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "number"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 86,
+									"character": 36
+								}
+							]
+						},
+						{
+							"id": 54,
+							"name": "getBlockTimestampAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 55,
+									"name": "getBlockTimestampAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 56,
+											"name": "blockParam",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "union",
+												"types": [
+													{
+														"type": "intrinsic",
+														"name": "string"
+													},
+													{
+														"type": "reference",
+														"name": "Web3.BlockParam"
+													}
+												]
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "number"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 94,
+									"character": 39
+								}
+							]
+						},
+						{
+							"id": 16,
+							"name": "getContractDefaults",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 17,
+									"name": "getContractDefaults",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Partial",
+										"typeArguments": [
+											{
+												"type": "reference",
+												"name": "TxData"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 33,
+									"character": 30
+								}
+							]
+						},
+						{
+							"id": 62,
+							"name": "getContractFromAbi",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 63,
+									"name": "getContractFromAbi",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 64,
+											"name": "abi",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "Web3.ContractAbi"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Contract",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "any"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 127,
+									"character": 29
+								}
+							]
+						},
+						{
+							"id": 34,
+							"name": "getCurrentProvider",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 35,
+									"name": "getCurrentProvider",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Provider"
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 63,
+									"character": 29
+								}
+							]
+						},
+						{
+							"id": 59,
+							"name": "getLogsAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 60,
+									"name": "getLogsAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 61,
+											"name": "filter",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "FilterObject"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "array",
+												"elementType": {
+													"type": "reference",
+													"name": "LogEntry"
+												}
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 103,
+									"character": 29
+								}
+							]
+						},
+						{
+							"id": 29,
+							"name": "getNetworkIdAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 30,
+									"name": "getNetworkIdAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "number"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 51,
+									"character": 34
+								}
+							]
+						},
+						{
+							"id": 27,
+							"name": "getNodeVersionAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 28,
+									"name": "getNodeVersionAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "string"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 47,
+									"character": 36
+								}
+							]
+						},
+						{
+							"id": 31,
+							"name": "getTransactionReceiptAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 32,
+									"name": "getTransactionReceiptAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 33,
+											"name": "txHash",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "reference",
+												"name": "TransactionReceipt"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 56,
+									"character": 43
+								}
+							]
+						},
+						{
+							"id": 21,
+							"name": "isAddress",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 22,
+									"name": "isAddress",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 23,
+											"name": "address",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "intrinsic",
+										"name": "boolean"
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 39,
+									"character": 20
+								}
+							]
+						},
+						{
+							"id": 24,
+							"name": "isSenderAddressAvailableAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 25,
+									"name": "isSenderAddressAvailableAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 26,
+											"name": "senderAddress",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "boolean"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 42,
+									"character": 46
+								}
+							]
+						},
+						{
+							"id": 72,
+							"name": "sendTransactionAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 73,
+									"name": "sendTransactionAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 74,
+											"name": "txData",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "TxData"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "string"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 139,
+									"character": 37
+								}
+							]
+						},
+						{
+							"id": 18,
+							"name": "setProvider",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 19,
+									"name": "setProvider",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 20,
+											"name": "provider",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "Provider"
+											}
+										}
+									],
+									"type": {
+										"type": "intrinsic",
+										"name": "void"
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 36,
+									"character": 22
+								}
+							]
+						},
+						{
+							"id": 45,
+							"name": "signTransactionAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 46,
+									"name": "signTransactionAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 47,
+											"name": "address",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										},
+										{
+											"id": 48,
+											"name": "message",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "string"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 82,
+									"character": 37
+								}
+							]
+						},
+						{
+							"id": 36,
+							"name": "toWei",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 37,
+									"name": "toWei",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 38,
+											"name": "ethAmount",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "BigNumber"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "BigNumber"
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 66,
+									"character": 16
+								}
+							]
+						}
+					],
+					"groups": [
+						{
+							"title": "Constructors",
+							"kind": 512,
+							"children": [
+								12
+							]
+						},
+						{
+							"title": "Methods",
+							"kind": 2048,
+							"children": [
+								68,
+								42,
+								65,
+								57,
+								39,
+								51,
+								49,
+								54,
+								16,
+								62,
+								34,
+								59,
+								29,
+								27,
+								31,
+								21,
+								24,
+								72,
+								18,
+								45,
+								36
+							]
+						}
+					],
+					"sources": [
+						{
+							"fileName": "index.ts",
+							"line": 17,
+							"character": 24
+						}
+					]
+				},
+				{
+					"id": 2,
+					"name": "RawLogEntry",
+					"kind": 256,
+					"kindString": "Interface",
+					"flags": {},
+					"children": [
+						{
+							"id": 8,
+							"name": "address",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 12,
+									"character": 11
+								}
+							],
+							"type": {
+								"type": "intrinsic",
+								"name": "string"
+							}
+						},
+						{
+							"id": 6,
+							"name": "blockHash",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 10,
+									"character": 13
+								}
+							],
+							"type": {
+								"type": "union",
+								"types": [
+									{
+										"type": "intrinsic",
+										"name": "string"
+									},
+									{
+										"type": "intrinsic",
+										"name": "null"
+									}
+								]
+							}
+						},
+						{
+							"id": 7,
+							"name": "blockNumber",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 11,
+									"character": 15
+								}
+							],
+							"type": {
+								"type": "union",
+								"types": [
+									{
+										"type": "intrinsic",
+										"name": "string"
+									},
+									{
+										"type": "intrinsic",
+										"name": "null"
+									}
+								]
+							}
+						},
+						{
+							"id": 9,
+							"name": "data",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 13,
+									"character": 8
+								}
+							],
+							"type": {
+								"type": "intrinsic",
+								"name": "string"
+							}
+						},
+						{
+							"id": 3,
+							"name": "logIndex",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 7,
+									"character": 12
+								}
+							],
+							"type": {
+								"type": "union",
+								"types": [
+									{
+										"type": "intrinsic",
+										"name": "string"
+									},
+									{
+										"type": "intrinsic",
+										"name": "null"
+									}
+								]
+							}
+						},
+						{
+							"id": 10,
+							"name": "topics",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 14,
+									"character": 10
+								}
+							],
+							"type": {
+								"type": "array",
+								"elementType": {
+									"type": "intrinsic",
+									"name": "string"
+								}
+							}
+						},
+						{
+							"id": 5,
+							"name": "transactionHash",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 9,
+									"character": 19
+								}
+							],
+							"type": {
+								"type": "intrinsic",
+								"name": "string"
+							}
+						},
+						{
+							"id": 4,
+							"name": "transactionIndex",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 8,
+									"character": 20
+								}
+							],
+							"type": {
+								"type": "union",
+								"types": [
+									{
+										"type": "intrinsic",
+										"name": "string"
+									},
+									{
+										"type": "intrinsic",
+										"name": "null"
+									}
+								]
+							}
+						}
+					],
+					"groups": [
+						{
+							"title": "Properties",
+							"kind": 1024,
+							"children": [
+								8,
+								6,
+								7,
+								9,
+								3,
+								10,
+								5,
+								4
+							]
+						}
+					],
+					"sources": [
+						{
+							"fileName": "index.ts",
+							"line": 6,
+							"character": 21
+						}
+					]
+				}
+			],
+			"groups": [
+				{
+					"title": "Classes",
+					"kind": 128,
+					"children": [
+						11
+					]
+				},
+				{
+					"title": "Interfaces",
+					"kind": 256,
+					"children": [
+						2
+					]
+				}
+			],
+			"sources": [
+				{
+					"fileName": "index.ts",
+					"line": 1,
+					"character": 0
+				}
+			]
+		}
+	],
+	"groups": [
+		{
+			"title": "External modules",
+			"kind": 1,
+			"children": [
+				1
+			]
+		}
+	]
+}
\ No newline at end of file
diff --git a/packages/react-docs/src/ts/globals.d.ts b/packages/react-docs/src/ts/globals.d.ts
index 31c8a2c1f..c7cd53854 100644
--- a/packages/react-docs/src/ts/globals.d.ts
+++ b/packages/react-docs/src/ts/globals.d.ts
@@ -5,3 +5,10 @@ declare function compareVersions(firstVersion: string, secondVersion: string): n
 declare module 'compare-versions' {
     export = compareVersions;
 }
+
+declare module '*.json' {
+    const json: any;
+    /* tslint:disable */
+    export default json;
+    /* tslint:enable */
+}
diff --git a/packages/react-docs/webpack.config.js b/packages/react-docs/webpack.config.js
new file mode 100644
index 000000000..768bb238c
--- /dev/null
+++ b/packages/react-docs/webpack.config.js
@@ -0,0 +1,79 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: ['./src/ts/example/index.tsx'],
+    output: {
+        path: path.join(__dirname, '/src/public'),
+        filename: 'bundle.js',
+        chunkFilename: 'bundle-[name].js',
+        publicPath: '/',
+    },
+    devtool: 'source-map',
+    resolve: {
+        modules: [path.join(__dirname, '/src/ts'), 'node_modules'],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.md'],
+        alias: {
+            ts: path.join(__dirname, '/src/ts'),
+            less: path.join(__dirname, '/src/less'),
+            md: path.join(__dirname, '/src/md'),
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                loader: 'source-map-loader',
+            },
+            {
+                test: /\.tsx?$/,
+                loader: 'awesome-typescript-loader',
+            },
+            {
+                test: /\.css$/,
+                loaders: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.less$/,
+                loader: 'style-loader!css-loader!less-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.json$/,
+                loader: 'json-loader',
+            },
+            {
+                test: /\.md$/,
+                use: 'raw-loader',
+            },
+        ],
+    },
+    devServer: {
+        port: 3000,
+        disableHostCheck: true,
+        historyApiFallback: {
+            // Fixes issue where having dots in URL path that aren't part of fileNames causes webpack-dev-server
+            // to fail.
+            // Source: https://github.com/cvut/fittable/issues/171
+            rewrites: [
+                {
+                    from: /.*$/,
+                    to: function() {
+                        return 'index.html';
+                    },
+                },
+            ],
+        },
+        contentBase: path.join(__dirname, '/src/public'),
+    },
+    plugins:
+        process.env.NODE_ENV === 'production'
+            ? [
+                  new webpack.DefinePlugin({
+                      'process.env': {
+                          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+                      },
+                  }),
+              ]
+            : [],
+};
diff --git a/packages/website/less/all.less b/packages/website/less/all.less
index 113dff0be..c62db0d20 100644
--- a/packages/website/less/all.less
+++ b/packages/website/less/all.less
@@ -2,10 +2,6 @@ body {
     font-family: 'Roboto';
 }
 
-.robotoMono {
-    font-family: 'Roboto Mono';
-}
-
 a {
     color: black;
 }
diff --git a/packages/website/public/css/atom-one-light.css b/packages/website/public/css/atom-one-light.css
deleted file mode 100644
index d5bd1d2a9..000000000
--- a/packages/website/public/css/atom-one-light.css
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
-
-Atom One Light by Daniel Gamage
-Original One Light Syntax theme from https://github.com/atom/one-light-syntax
-
-base:    #fafafa
-mono-1:  #383a42
-mono-2:  #686b77
-mono-3:  #a0a1a7
-hue-1:   #0184bb
-hue-2:   #4078f2
-hue-3:   #a626a4
-hue-4:   #50a14f
-hue-5:   #e45649
-hue-5-2: #c91243
-hue-6:   #986801
-hue-6-2: #c18401
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #383a42;
-  background: #fafafa;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #a0a1a7;
-  font-style: italic;
-}
-
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
-  color: #a626a4;
-}
-
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-  color: #e45649;
-}
-
-.hljs-literal {
-  color: #0184bb;
-}
-
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string {
-  color: #50a14f;
-}
-
-.hljs-built_in,
-.hljs-class .hljs-title {
-  color: #c18401;
-}
-
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-  color: #986801;
-}
-
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-  color: #4078f2;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx
index 132606ddd..519b23d80 100644
--- a/packages/website/ts/components/sidebar_header.tsx
+++ b/packages/website/ts/components/sidebar_header.tsx
@@ -22,9 +22,7 @@ export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHe
         return (
             <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
                 <div className="flex" style={{ fontSize: 25 }}>
-                    <div className="robotoMono" style={{ fontWeight: 'bold' }}>
-                        0x
-                    </div>
+                    <div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div>
                     <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
                         docs
                     </div>
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index bc01dc728..e0d7b272d 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -88,6 +88,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
                     docAgnosticFormat={this.state.docAgnosticFormat}
                     sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />}
                     sourceUrl={sourceUrl}
+                    topBarHeight={60}
                 />
             </div>
         );
@@ -112,7 +113,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
 
         const versionFileNameToFetch = versionToFileName[versionToFetch];
         const versionDocObj = await docUtils.getJSONDocFileAsync(versionFileNameToFetch, docsJsonRoot);
-        const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj);
+        const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj);
 
         if (!this._isUnmounted) {
             this.setState({
diff --git a/yarn.lock b/yarn.lock
index e3b20ba33..81cfdce40 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -349,6 +349,10 @@ ajv-keywords@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
 
+ajv-keywords@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
+
 ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
@@ -365,6 +369,14 @@ ajv@^5.1.0, ajv@^5.1.5:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
+ajv@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.2.1.tgz#28a6abc493a2abe0fb4c8507acaedb43fa550671"
+  dependencies:
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -2479,6 +2491,25 @@ css-loader@0.23.x:
     postcss-modules-values "^1.1.0"
     source-list-map "^0.1.4"
 
+css-loader@^0.28.9:
+  version "0.28.10"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.10.tgz#40282e79230f7bcb4e483efa631d670b735ebf42"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano "^3.10.0"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.1.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.2.0"
+    postcss-modules-local-by-default "^1.2.0"
+    postcss-modules-scope "^1.1.0"
+    postcss-modules-values "^1.3.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
+
 css-selector-tokenizer@^0.5.1:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.5.4.tgz#139bafd34a35fd0c1428487049e0699e6f6a2c21"
@@ -2498,7 +2529,7 @@ cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
-"cssnano@>=2.6.1 <4":
+"cssnano@>=2.6.1 <4", cssnano@^3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
   dependencies:
@@ -4468,6 +4499,12 @@ icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
 
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  dependencies:
+    postcss "^6.0.1"
+
 ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
@@ -5501,6 +5538,10 @@ lodash.camelcase@^3.0.1:
   dependencies:
     lodash._createcompounder "^3.0.0"
 
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
 lodash.deburr@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash.deburr/-/lodash.deburr-3.2.0.tgz#6da8f54334a366a7cf4c4c76ef8d80aa1b365ed5"
@@ -6912,21 +6953,27 @@ postcss-modules-extract-imports@^1.0.0:
   dependencies:
     postcss "^6.0.1"
 
-postcss-modules-local-by-default@^1.0.1:
+postcss-modules-extract-imports@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-modules-local-by-default@^1.0.1, postcss-modules-local-by-default@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
   dependencies:
     css-selector-tokenizer "^0.7.0"
     postcss "^6.0.1"
 
-postcss-modules-scope@^1.0.0:
+postcss-modules-scope@^1.0.0, postcss-modules-scope@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
   dependencies:
     css-selector-tokenizer "^0.7.0"
     postcss "^6.0.1"
 
-postcss-modules-values@^1.1.0:
+postcss-modules-values@^1.1.0, postcss-modules-values@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
   dependencies:
@@ -8027,6 +8074,13 @@ sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
+schema-utils@^0.4.3:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 scroll-to-element@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/scroll-to-element/-/scroll-to-element-2.0.0.tgz#3467330e3384743b7295ac64b30279990c5ac164"
@@ -8419,6 +8473,14 @@ source-map-loader@^0.1.6:
     loader-utils "~0.2.2"
     source-map "~0.1.33"
 
+source-map-loader@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.3.tgz#d4b0c8cd47d54edce3e6bfa0f523f452b5b0e521"
+  dependencies:
+    async "^2.5.0"
+    loader-utils "~0.2.2"
+    source-map "~0.6.1"
+
 source-map-resolve@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a"
@@ -8762,6 +8824,13 @@ style-loader@0.13.x:
   dependencies:
     loader-utils "^1.0.2"
 
+style-loader@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.20.2.tgz#851b373c187890331776e9cde359eea9c95ecd00"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^0.4.3"
+
 supports-color@4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
@@ -9811,6 +9880,38 @@ webpack-dev-middleware@1.12.2, webpack-dev-middleware@^1.10.0:
     range-parser "^1.0.3"
     time-stamp "^2.0.0"
 
+webpack-dev-server@^2.11.1:
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.2.tgz#1f4f4c78bf1895378f376815910812daf79a216f"
+  dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^2.0.0"
+    compression "^1.5.2"
+    connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
+    del "^3.0.0"
+    express "^4.16.2"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
+    import-local "^1.0.0"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    killable "^1.0.0"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
+    serve-index "^1.7.2"
+    sockjs "0.3.19"
+    sockjs-client "1.1.4"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.0"
+    supports-color "^5.1.0"
+    webpack-dev-middleware "1.12.2"
+    yargs "6.6.0"
+
 webpack-dev-server@^2.5.0:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.10.1.tgz#a9768375346e62155860fe3cef3d4d641b24273e"
@@ -9881,6 +9982,33 @@ webpack@^3.0.0, webpack@^3.1.0:
     webpack-sources "^1.0.1"
     yargs "^8.0.2"
 
+webpack@^3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.11.0.tgz#77da451b1d7b4b117adaf41a1a93b5742f24d894"
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^2.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+    async "^2.1.2"
+    enhanced-resolve "^3.4.0"
+    escope "^3.6.0"
+    interpret "^1.0.0"
+    json-loader "^0.5.4"
+    json5 "^0.5.1"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    mkdirp "~0.5.0"
+    node-libs-browser "^2.0.0"
+    source-map "^0.5.3"
+    supports-color "^4.2.1"
+    tapable "^0.2.7"
+    uglifyjs-webpack-plugin "^0.4.6"
+    watchpack "^1.4.0"
+    webpack-sources "^1.0.1"
+    yargs "^8.0.2"
+
 websocket-driver@>=0.5.1:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"