diff --git a/lib/components/JsonSchemaView/json-schema-view.js b/lib/components/JsonSchemaView/json-schema-view.js
new file mode 100644
index 00000000..ba89fa77
--- /dev/null
+++ b/lib/components/JsonSchemaView/json-schema-view.js
@@ -0,0 +1,51 @@
+'use strict';
+
+import {RedocComponent, BaseComponent} from '../base';
+
+/* temporarily this component uses json-schema-view-js lib */
+import 'json-formatter-js/src/index';
+import 'json-formatter-js/dist/style.css!';
+import JSONSchemaView from 'json-schema-view-js/src/index';
+import 'json-schema-view-js/dist/style.css!';
+
+import {ElementRef} from 'angular2/angular2';
+
+@RedocComponent({
+  selector: 'schema',
+  template: '',
+  inputs: ['title', 'description']
+})
+export class JsonSchemaView extends BaseComponent {
+  constructor(schemaMgr, elementRef) {
+    super(schemaMgr);
+    this.element = elementRef.nativeElement;
+  }
+
+  dereference(schema = this.componentSchema) {
+    // simple in-place schema dereferencing. Schema is already bundled so no need in
+    // global dereferencing.
+    // TODO: doesn't support circular references
+    if (schema && schema.$ref) {
+      let resolved = this.schemaMgr.byPointer(schema.$ref);
+      Object.assign(schema, resolved);
+      delete schema.$ref;
+    }
+
+    Object.keys(schema).forEach((key) => {
+      let value = schema[key];
+      if (value && typeof value === 'object') {
+        this.dereference(value);
+      }
+    });
+  }
+
+  init() {
+    this.dereference();
+    const formatter = new JSONSchemaView(this.componentSchema);
+    this.componentSchema.title = this.componentSchema.title || this.title;
+    this.componentSchema.description = this.componentSchema.description || this.description;
+    this.element.appendChild(formatter.render());
+  }
+}
+
+JsonSchemaView.parameters = JsonSchemaView.parameters.concat([[ElementRef]]);
diff --git a/package.json b/package.json
index 6078350b..db0f4670 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,9 @@
       "@reactivex/rxjs": "npm:@reactivex/rxjs@^5.0.0-alpha.2",
       "angular2": "npm:angular2@^2.0.0-alpha.39",
       "es6-shim": "github:es-shims/es6-shim@^0.33.6",
+      "json-formatter-js": "npm:json-formatter-js@^0.2.0",
       "json-pointer": "npm:json-pointer@^0.3.0",
+      "json-schema-view-js": "npm:json-schema-view-js@^0.2.0",
       "reflect-metadata": "npm:reflect-metadata@^0.1.2",
       "swagger-parser": "npm:swagger-parser@^3.3.0",
       "zone.js": "npm:zone.js@^0.5.7"
@@ -33,7 +35,9 @@
       "babel": "npm:babel-core@^5.8.24",
       "babel-runtime": "npm:babel-runtime@^5.8.24",
       "core-js": "npm:core-js@^1.1.4",
-      "systemjs/plugin-json": "github:systemjs/plugin-json@^0.1.0"
+      "css": "github:systemjs/plugin-css@^0.1.18",
+      "systemjs/plugin-json": "github:systemjs/plugin-json@^0.1.0",
+      "clean-css": "npm:clean-css@^3.4.6"
     }
   },
   "devDependencies": {
diff --git a/system.config.js b/system.config.js
index c79aba03..295bd0d8 100644
--- a/system.config.js
+++ b/system.config.js
@@ -27,15 +27,28 @@ System.config({
     }
   },
 
+  meta: {
+    "jspm_packages/npm/json-formatter-js@0.2.0/src/*": {
+      "format": "es6"
+    },
+    "jspm_packages/npm/json-schema-view-js@0.2.0/src/*": {
+      "format": "es6"
+    }
+  },
+
   map: {
     "@reactivex/rxjs": "npm:@reactivex/rxjs@5.0.0-alpha.2",
     "angular2": "npm:angular2@2.0.0-alpha.39",
     "babel": "npm:babel-core@5.8.25",
     "babel-runtime": "npm:babel-runtime@5.8.25",
+    "clean-css": "npm:clean-css@3.4.6",
     "core-js": "npm:core-js@1.2.0",
+    "css": "github:systemjs/plugin-css@0.1.18",
     "es6-shim": "github:es-shims/es6-shim@0.33.6",
     "json": "github:systemjs/plugin-json@0.1.0",
+    "json-formatter-js": "npm:json-formatter-js@0.2.0",
     "json-pointer": "npm:json-pointer@0.3.0",
+    "json-schema-view-js": "npm:json-schema-view-js@0.2.0",
     "reflect-metadata": "npm:reflect-metadata@0.1.2",
     "swagger-parser": "npm:swagger-parser@3.3.0",
     "systemjs/plugin-json": "github:systemjs/plugin-json@0.1.0",
@@ -76,6 +89,9 @@ System.config({
       "timers": "github:jspm/nodelibs-timers@0.1.0",
       "util": "github:jspm/nodelibs-util@0.1.0"
     },
+    "github:jspm/nodelibs-os@0.1.0": {
+      "os-browserify": "npm:os-browserify@0.1.2"
+    },
     "github:jspm/nodelibs-path@0.1.0": {
       "path-browserify": "npm:path-browserify@0.0.0"
     },
@@ -116,6 +132,12 @@ System.config({
       "buffer": "github:jspm/nodelibs-buffer@0.1.0",
       "process": "github:jspm/nodelibs-process@0.1.2"
     },
+    "npm:amdefine@1.0.0": {
+      "fs": "github:jspm/nodelibs-fs@0.1.2",
+      "module": "github:jspm/nodelibs-module@0.1.0",
+      "path": "github:jspm/nodelibs-path@0.1.0",
+      "process": "github:jspm/nodelibs-process@0.1.2"
+    },
     "npm:angular2@2.0.0-alpha.39": {
       "buffer": "github:jspm/nodelibs-buffer@0.1.0",
       "crypto": "github:jspm/nodelibs-crypto@0.1.0",
@@ -259,6 +281,19 @@ System.config({
       "stream": "github:jspm/nodelibs-stream@0.1.0",
       "string_decoder": "github:jspm/nodelibs-string_decoder@0.1.0"
     },
+    "npm:clean-css@3.4.6": {
+      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
+      "commander": "npm:commander@2.8.1",
+      "fs": "github:jspm/nodelibs-fs@0.1.2",
+      "http": "github:jspm/nodelibs-http@1.7.1",
+      "https": "github:jspm/nodelibs-https@0.1.0",
+      "os": "github:jspm/nodelibs-os@0.1.0",
+      "path": "github:jspm/nodelibs-path@0.1.0",
+      "process": "github:jspm/nodelibs-process@0.1.2",
+      "source-map": "npm:source-map@0.4.4",
+      "url": "github:jspm/nodelibs-url@0.1.0",
+      "util": "github:jspm/nodelibs-util@0.1.0"
+    },
     "npm:combined-stream@1.0.5": {
       "buffer": "github:jspm/nodelibs-buffer@0.1.0",
       "delayed-stream": "npm:delayed-stream@1.0.0",
@@ -466,6 +501,11 @@ System.config({
       "systemjs-json": "github:systemjs/plugin-json@0.1.0",
       "util": "github:jspm/nodelibs-util@0.1.0"
     },
+    "npm:json-formatter-js@0.2.0": {
+      "fs": "github:jspm/nodelibs-fs@0.1.2",
+      "process": "github:jspm/nodelibs-process@0.1.2",
+      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
+    },
     "npm:json-pointer@0.3.0": {
       "foreach": "npm:foreach@2.0.5"
     },
@@ -488,6 +528,11 @@ System.config({
       "url": "github:jspm/nodelibs-url@0.1.0",
       "util": "github:jspm/nodelibs-util@0.1.0"
     },
+    "npm:json-schema-view-js@0.2.0": {
+      "fs": "github:jspm/nodelibs-fs@0.1.2",
+      "process": "github:jspm/nodelibs-process@0.1.2",
+      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
+    },
     "npm:jsonpointer@2.0.0": {
       "assert": "github:jspm/nodelibs-assert@0.1.0"
     },
@@ -529,6 +574,9 @@ System.config({
       "process": "github:jspm/nodelibs-process@0.1.2",
       "util": "github:jspm/nodelibs-util@0.1.0"
     },
+    "npm:os-browserify@0.1.2": {
+      "os": "github:jspm/nodelibs-os@0.1.0"
+    },
     "npm:pako@0.2.8": {
       "buffer": "github:jspm/nodelibs-buffer@0.1.0",
       "process": "github:jspm/nodelibs-process@0.1.2"
@@ -654,6 +702,10 @@ System.config({
       "hoek": "npm:hoek@2.16.3",
       "process": "github:jspm/nodelibs-process@0.1.2"
     },
+    "npm:source-map@0.4.4": {
+      "amdefine": "npm:amdefine@1.0.0",
+      "process": "github:jspm/nodelibs-process@0.1.2"
+    },
     "npm:stream-browserify@1.0.0": {
       "events": "github:jspm/nodelibs-events@0.1.1",
       "inherits": "npm:inherits@2.0.1",