diff --git a/open-rpc-docs-react-0.0.0-development.tgz b/open-rpc-docs-react-0.0.0-development.tgz
new file mode 100644
index 0000000..d830e46
Binary files /dev/null and b/open-rpc-docs-react-0.0.0-development.tgz differ
diff --git a/package-lock.json b/package-lock.json
index 001f204..0c8c7c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1906,7 +1906,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1927,12 +1928,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1947,17 +1950,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2074,7 +2080,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2086,6 +2093,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2100,6 +2108,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -2107,12 +2116,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -2131,6 +2142,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2211,7 +2223,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -2223,6 +2236,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2308,7 +2322,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -2344,6 +2359,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2363,6 +2379,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2406,12 +2423,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/src/JSONSchema/JSONSchema.tsx b/src/JSONSchema/JSONSchema.tsx
index 9daafc1..f9c021f 100644
--- a/src/JSONSchema/JSONSchema.tsx
+++ b/src/JSONSchema/JSONSchema.tsx
@@ -1,8 +1,6 @@
 import React, { Component } from "react";
-import { Typography } from "@material-ui/core";
 import _ from "lodash";
 import JSONSchemaFields from "./fields/JSONSchemaFields";
-import PrimitiveField from "./fields/JSONSchemaPrimitiveField";
 import { JSONSchema4 } from "json-schema";
 
 interface IProps {
@@ -12,44 +10,7 @@ interface IProps {
 class JSONSchema extends Component<IProps> {
   public render() {
     const { schema } = this.props;
-    if (!schema) { return null; }
-    if (_.isEmpty(schema)) { return null; }
-    if (schema && !schema.properties && schema.oneOf) {
-      return (
-        <>
-          {schema.oneOf &&
-            <>
-              <Typography variant="body1">one of</Typography>
-              {schema.oneOf.map((item) => {
-                return (
-                  <JSONSchema schema={item} />
-                );
-              })}
-            </>
-          }
-      </>
-      );
-    }
-    let arrayWithItems = schema && schema.type === "array" && (schema.items || schema.contains);
-    if (arrayWithItems) {
-      arrayWithItems = _.isArray(arrayWithItems) ? arrayWithItems : [arrayWithItems];
-      return (
-        <>
-          <Typography variant="body1">array of</Typography>
-          <JSONSchemaFields schema={schema} />
-          {arrayWithItems.map((item: JSONSchema4) => {
-            return (
-              <JSONSchema schema={item} />
-            );
-          })}
-        </>
-      );
-    }
-    if (schema && schema.properties) {
-      return <JSONSchemaFields schema={schema} />;
-    }
-
-    return <PrimitiveField schema={schema} />;
+    return <JSONSchemaFields schema={schema} />;
   }
 }
 
diff --git a/src/JSONSchema/SchemaRenderer.tsx b/src/JSONSchema/SchemaRenderer.tsx
new file mode 100644
index 0000000..da60b84
--- /dev/null
+++ b/src/JSONSchema/SchemaRenderer.tsx
@@ -0,0 +1,149 @@
+import React from "react";
+import { JSONSchema4 } from "json-schema";
+import { TableRow, TableCell, Typography } from "@material-ui/core";
+import JSONSchemaFields from "./fields/JSONSchemaFields";
+import _ from "lodash";
+import { grey, green, purple, yellow, blue } from "@material-ui/core/colors";
+
+interface IProps {
+  schema: JSONSchema4;
+  required?: boolean;
+  name?: string;
+}
+
+const styles = {
+  cellWidth: {
+    width: "70px",
+  },
+};
+
+const SchemaRenderer: React.FC<IProps> = ({ schema, required, name }) => {
+  if (schema.anyOf) {
+    return (
+      <TableRow>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          {schema.title || name}
+        </TableCell>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          <Typography variant="body1" color="primary">any of</Typography>
+        </TableCell>
+        <TableCell colSpan={5}>
+          {schema.anyOf.map((p, i) => <JSONSchemaFields schema={p} key={i} />)}
+        </TableCell>
+      </TableRow>
+    );
+  }
+  if (schema.allOf) {
+    return (
+      <TableRow>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          {schema.title || name}
+        </TableCell>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          <Typography variant="body1" color="primary">all of</Typography>
+        </TableCell>
+        <TableCell colSpan={5}>
+          {schema.allOf.map((p, i) => <JSONSchemaFields schema={p} key={i} />)}
+        </TableCell>
+      </TableRow>
+    );
+  }
+  if (schema.oneOf) {
+    return (
+      <TableRow>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          {schema.title || name}
+        </TableCell>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          <Typography variant="body1" color="primary">one of</Typography>
+        </TableCell>
+        <TableCell colSpan={5}>
+          {schema.oneOf.map((p, i) => <JSONSchemaFields schema={p} key={i} />)}
+        </TableCell>
+      </TableRow>
+    );
+  }
+  if (schema.items instanceof Array) {
+    return (
+      <TableRow>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          {schema.title || name}
+        </TableCell>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          <Typography variant="body1" color="primary">array of</Typography>
+        </TableCell>
+        <TableCell colSpan={5}>
+          {schema.items.map((p, i) => <JSONSchemaFields schema={p} key={i} />)}
+        </TableCell>
+      </TableRow>
+    );
+  }
+  if (schema.items) {
+    return (
+      <TableRow>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          {schema.title || name}
+        </TableCell>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          <Typography variant="body1" color="primary">array of</Typography>
+        </TableCell>
+        <TableCell colSpan={5}>
+          <JSONSchemaFields schema={schema.items} />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  if (schema.properties) {
+    return (
+      <TableRow>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          {schema.title || name}
+        </TableCell>
+        <TableCell colSpan={1} style={styles.cellWidth}>
+          <Typography variant="body1" color="primary">object</Typography>
+        </TableCell>
+        <TableCell colSpan={5}>
+          {schema.properties && Object.entries(schema.properties).map(([n, prop]: [string, JSONSchema4], i: number) => {
+            return (
+              <JSONSchemaFields
+                key={n}
+                schema={prop}
+                name={n}
+                hideHeader={i !== 0}
+                required={schema.required && schema.required.includes(n)}
+              />
+            );
+          })}
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  const colorMap: {[k: string]: string} = {
+    any: grey[500],
+    array: blue[300],
+    boolean: blue[500],
+    integer: purple[800],
+    null: yellow[900],
+    number: purple[500],
+    string: green[500],
+    undefined: grey[500],
+  };
+  return (
+    <TableRow key={schema.title}>
+      <TableCell component="th" scope="row" style={styles.cellWidth}>
+        {schema.title || name}
+      </TableCell>
+      <TableCell style={{
+        ...styles.cellWidth,
+        color: colorMap[schema.type as any],
+      }}>{schema.type}</TableCell>
+      <TableCell style={styles.cellWidth}>{schema.pattern}</TableCell>
+      <TableCell style={styles.cellWidth}>{required ? "true" : "false"}</TableCell>
+      <TableCell style={styles.cellWidth}>{schema.description}</TableCell>
+    </TableRow>
+  );
+};
+
+export default SchemaRenderer;
diff --git a/src/JSONSchema/fields/JSONSchemaFields.test.tsx b/src/JSONSchema/fields/JSONSchemaFields.test.tsx
index 7dc093a..1bfb298 100644
--- a/src/JSONSchema/fields/JSONSchemaFields.test.tsx
+++ b/src/JSONSchema/fields/JSONSchemaFields.test.tsx
@@ -12,7 +12,7 @@ it("renders empty with no schema", () => {
 
 it("renders empty with empty schema", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<JSONSchemaFields schema={{}}/>, div);
+  ReactDOM.render(<JSONSchemaFields schema={{}} />, div);
   expect(div.innerHTML).toBe("");
   ReactDOM.unmountComponentAtNode(div);
 });
@@ -32,7 +32,7 @@ it("renders with a schema", () => {
     },
     /* tslint:disable */
   } as JSONSchema4;
-  ReactDOM.render(<JSONSchemaFields schema={schema}/>, div);
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
   expect(div.innerHTML.includes("name")).toBe(true);
   expect(div.innerHTML.includes("string")).toBe(true);
 
@@ -53,8 +53,7 @@ it("renders with a schema required", () => {
       "name",
     ],
   } as JSONSchema4;
-  ReactDOM.render(<JSONSchemaFields schema={schema}/>, div);
-  expect(div.innerHTML.includes("Required")).toBe(true);
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
   expect(div.innerHTML.includes("true")).toBe(true);
 
   ReactDOM.unmountComponentAtNode(div);
@@ -69,10 +68,8 @@ it("renders with a schema without required", () => {
       },
     },
   } as JSONSchema4;
-  ReactDOM.render(<JSONSchemaFields schema={schema}/>, div);
-  expect(div.innerHTML.includes("Required")).toBe(true);
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
   expect(div.innerHTML.includes("false")).toBe(true);
-
   ReactDOM.unmountComponentAtNode(div);
 });
 
@@ -90,10 +87,287 @@ it("renders with a nested schema object", () => {
       },
     },
   } as JSONSchema4;
-  ReactDOM.render(<JSONSchemaFields schema={schema}/>, div);
-  console.log('div', div.innerHTML);
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
   expect(div.innerHTML.includes("foo")).toBe(true);
   expect(div.innerHTML.includes("string")).toBe(true);
   expect(div.innerHTML.includes("object")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
-});
\ No newline at end of file
+});
+
+it("renders with a anyOf with nested objects", () => {
+  const div = document.createElement("div");
+  const schema = {
+    anyOf: [
+      {
+        title: "foo",
+        properties: {
+          name: {
+            type: "object",
+            properties: {
+              potato: {
+                type: "string"
+              }
+            }
+          },
+        },
+      },
+      {
+        title: "bar",
+        properties: {
+          name: {
+            type: "object",
+            properties: {
+              baz: {
+                type: "string"
+              }
+            }
+          },
+        },
+      }
+    ]
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
+  expect(div.innerHTML.includes("foo")).toBe(true);
+  expect(div.innerHTML.includes("bar")).toBe(true);
+  expect(div.innerHTML.includes("baz")).toBe(true);
+  expect(div.innerHTML.includes("potato")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders with a allOf with nested objects", () => {
+  const div = document.createElement("div");
+  const schema = {
+    allOf: [
+      {
+        title: "foo",
+        properties: {
+          name: {
+            type: "object",
+            properties: {
+              potato: {
+                type: "string"
+              }
+            }
+          },
+        },
+      },
+      {
+        title: "bar",
+        properties: {
+          name: {
+            type: "object",
+            properties: {
+              baz: {
+                type: "string"
+              }
+            }
+          },
+        },
+      }
+    ]
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
+  expect(div.innerHTML.includes("foo")).toBe(true);
+  expect(div.innerHTML.includes("bar")).toBe(true);
+  expect(div.innerHTML.includes("baz")).toBe(true);
+  expect(div.innerHTML.includes("potato")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+
+it("renders with a oneOf with nested objects", () => {
+  const div = document.createElement("div");
+  const schema = {
+    oneOf: [
+      {
+        title: "foo",
+        properties: {
+          name: {
+            type: "object",
+            properties: {
+              potato: {
+                type: "string"
+              }
+            }
+          },
+        },
+      },
+      {
+        title: "bar",
+        properties: {
+          name: {
+            type: "object",
+            properties: {
+              baz: {
+                type: "string"
+              }
+            }
+          },
+        },
+      }
+    ]
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
+  expect(div.innerHTML.includes("foo")).toBe(true);
+  expect(div.innerHTML.includes("bar")).toBe(true);
+  expect(div.innerHTML.includes("baz")).toBe(true);
+  expect(div.innerHTML.includes("potato")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders with a nested arrays of objects", () => {
+  const div = document.createElement("div");
+  const schema = {
+    title: "MyPotatoObject",
+    type: "array",
+    items: [
+      {
+        title: "foo",
+        properties: {
+          name: {
+            type: "object",
+            properties: {
+              potato: {
+                type: "string"
+              }
+            }
+          },
+        },
+      },
+      {
+        title: "bar",
+        properties: {
+          name: {
+            type: "object",
+            properties: {
+              baz: {
+                type: "string"
+              }
+            }
+          },
+        },
+      }
+    ]
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
+  expect(div.innerHTML.includes("foo")).toBe(true);
+  expect(div.innerHTML.includes("bar")).toBe(true);
+  expect(div.innerHTML.includes("baz")).toBe(true);
+  expect(div.innerHTML.includes("potato")).toBe(true);
+  expect(div.innerHTML.includes("string")).toBe(true);
+  expect(div.innerHTML.includes("MyPotatoObject")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders with a nested arrays of object", () => {
+  const div = document.createElement("div");
+  const schema = {
+    title: "MyPotatoObject",
+    type: "array",
+    items: {
+      title: "foo",
+      properties: {
+        name: {
+          type: "object",
+          properties: {
+            potato: {
+              type: "string"
+            }
+          }
+        },
+      },
+    }
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
+  expect(div.innerHTML.includes("foo")).toBe(true);
+  expect(div.innerHTML.includes("object")).toBe(true);
+  expect(div.innerHTML.includes("potato")).toBe(true);
+  expect(div.innerHTML.includes("string")).toBe(true);
+  expect(div.innerHTML.includes("MyPotatoObject")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders with a nested arrays of object with name passed explicitly", () => {
+  const div = document.createElement("div");
+  const schema = {
+    type: "array",
+    items: {
+      title: "foo",
+      properties: {
+        name: {
+          type: "object",
+          properties: {
+            potato: {
+              type: "string"
+            }
+          }
+        },
+      },
+    }
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchemaFields schema={schema} name={"My Name"} />, div);
+  expect(div.innerHTML.includes("foo")).toBe(true);
+  expect(div.innerHTML.includes("object")).toBe(true);
+  expect(div.innerHTML.includes("potato")).toBe(true);
+  expect(div.innerHTML.includes("string")).toBe(true);
+  expect(div.innerHTML.includes("My Name")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders with a nested arrays of objects with name passed explicitly", () => {
+  const div = document.createElement("div");
+  const schema = {
+    type: "array",
+    items: [
+      {
+        title: "foo",
+        properties: {
+          name: {
+            type: "object",
+            properties: {
+              potato: {
+                type: "string"
+              }
+            }
+          },
+        },
+      }
+    ]
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchemaFields schema={schema} name={"My Name"} />, div);
+  expect(div.innerHTML.includes("foo")).toBe(true);
+  expect(div.innerHTML.includes("object")).toBe(true);
+  expect(div.innerHTML.includes("potato")).toBe(true);
+  expect(div.innerHTML.includes("string")).toBe(true);
+  expect(div.innerHTML.includes("My Name")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders with a nested oneOf with nested allOf", () => {
+  const div = document.createElement("div");
+  const schema = {
+    title: "MyPotatoObject",
+    oneOf: [
+      {
+        title: "Apple",
+        allOf: [
+          {
+            title: "Banana",
+            type: "string"
+          },
+          {
+            title: "Pear",
+            type: "string"
+          },
+        ]
+      }
+    ]
+  } as JSONSchema4;
+  ReactDOM.render(<JSONSchemaFields schema={schema} />, div);
+  expect(div.innerHTML.includes("MyPotatoObject")).toBe(true);
+  expect(div.innerHTML.includes("Apple")).toBe(true);
+  expect(div.innerHTML.includes("Banana")).toBe(true);
+  expect(div.innerHTML.includes("string")).toBe(true);
+  expect(div.innerHTML.includes("Pear")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/JSONSchema/fields/JSONSchemaFields.tsx b/src/JSONSchema/fields/JSONSchemaFields.tsx
index e7f4a80..26a9e4a 100644
--- a/src/JSONSchema/fields/JSONSchemaFields.tsx
+++ b/src/JSONSchema/fields/JSONSchemaFields.tsx
@@ -5,10 +5,9 @@ import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
-import { Typography } from "@material-ui/core";
 import _ from "lodash";
-import JSONSchema from "../JSONSchema";
 import { JSONSchema4 } from "json-schema";
+import SchemaRenderer from "../SchemaRenderer";
 
 const styles = (theme: Theme) => ({
   table: {
@@ -18,77 +17,37 @@ const styles = (theme: Theme) => ({
 
 interface IProps extends WithStyles<typeof styles> {
   schema?: JSONSchema4;
+  name?: string;
+  required?: boolean;
+  hideHeader?: boolean;
 }
 
 class JSONSchemaFields extends Component<IProps> {
   public render() {
-    const { schema, classes } = this.props;
+    const { schema, classes, name, required, hideHeader } = this.props;
     if (!schema) { return null; }
+    if (_.isEmpty(schema)) { return null; }
     return (
       <>
-        {schema.title && <Typography variant="h5">{schema.title}</Typography>}
-        {schema.description && <Typography variant="body1">{schema.description}</Typography>}
-        {schema.properties &&
+        {!hideHeader &&
           <Table className={classes.table}>
             <TableHead>
               <TableRow>
                 <TableCell>Name</TableCell>
-                <TableCell align="right">Type</TableCell>
-                <TableCell align="right" style={{ width: "90px" }}>Pattern</TableCell>
-                <TableCell align="right">Required</TableCell>
-                <TableCell align="right">Description</TableCell>
+                <TableCell>Type</TableCell>
+                <TableCell>Pattern</TableCell>
+                <TableCell>Required</TableCell>
+                <TableCell>Description</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
-              {schema.properties && _.map(schema.properties, (prop, name) => {
-                // support nested objects
-                if (prop.type === "object") {
-                  return (
-                    <TableRow>
-                      <TableCell colSpan={1}>
-                        {name}
-                      </TableCell>
-                      <TableCell colSpan={1}>
-                        <Typography variant="body1" color="primary">object</Typography>
-                      </TableCell>
-                      <TableCell colSpan={5}>
-                         <WrappedJSONSchemaFields schema={prop}/>
-                      </TableCell>
-                    </TableRow>
-                  );
-                }
-                if (prop.oneOf) {
-                  return (
-                    <TableRow>
-                      <TableCell colSpan={1}>
-                        {name}
-                      </TableCell>
-                      <TableCell colSpan={1}>
-                        <Typography variant="body1" color="primary">one of</Typography>
-                      </TableCell>
-                      <TableCell colSpan={5}>
-                        {prop.oneOf.map((p) => <JSONSchema schema={p} />)}
-                      </TableCell>
-                    </TableRow>
-                  );
-                }
-                return (
-                  <TableRow key={name}>
-                    <TableCell component="th" scope="row">
-                      {name}
-                    </TableCell>
-                    <TableCell align="right">{prop.type}</TableCell>
-                    <TableCell align="right">{prop.pattern}</TableCell>
-                    <TableCell align="right">
-                      {schema.required && schema.required.includes(name) ? "true" : "false"}
-                    </TableCell>
-                    <TableCell align="right">{prop.description}</TableCell>
-                  </TableRow>
-                );
-              })}
+              <SchemaRenderer schema={schema} required={required} name={name} />
             </TableBody>
           </Table>
         }
+        {hideHeader &&
+          <SchemaRenderer schema={schema} required={required} name={name} />
+        }
       </>
     );
   }
diff --git a/src/JSONSchema/fields/JSONSchemaPrimitiveField.tsx b/src/JSONSchema/fields/JSONSchemaPrimitiveField.tsx
deleted file mode 100644
index a03bf8a..0000000
--- a/src/JSONSchema/fields/JSONSchemaPrimitiveField.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { Component } from "react";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
-import { TableHead, Table, withStyles, Theme, WithStyles } from "@material-ui/core";
-import { JSONSchema4 } from "json-schema";
-
-const styles = (theme: Theme) => ({
-  root: {
-    background: theme.palette.grey[50],
-    width: "330px",
-  },
-});
-
-interface IProps extends WithStyles<typeof styles> {
-  schema?: JSONSchema4;
-}
-
-class PrimitiveField extends Component<IProps> {
-  public render() {
-    const { schema, classes } = this.props;
-    if (!schema) {
-      return null;
-    }
-    return (
-      <Table className={classes.root}>
-        <TableHead>
-          <TableRow>
-            <TableCell>Field</TableCell>
-            <TableCell align="right">Value</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell align="left">Type</TableCell>
-            <TableCell align="right">{schema.type}</TableCell>
-          </TableRow>
-          {schema.pattern &&
-            <>
-              <TableRow>
-                <TableCell align="left">Pattern</TableCell>
-                <TableCell align="right">{schema.pattern}</TableCell>
-              </TableRow>
-            </>
-          }
-          {schema.enum &&
-            <>
-              <TableRow>
-                <TableCell align="left">Enum</TableCell>
-                <TableCell align="right">{schema.enum.join("  ")}</TableCell>
-              </TableRow>
-            </>
-          }
-        </TableBody>
-      </Table>
-
-    );
-  }
-}
-
-export default withStyles(styles)(PrimitiveField);