diff --git a/package-lock.json b/package-lock.json
index d648c625..8c274b3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,16 +5,16 @@
   "requires": true,
   "dependencies": {
     "@mcschema/core": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.8.4.tgz",
-      "integrity": "sha512-R61pisk9vk3rU04KGqOqHuimoM0IutDVAXwdhRvHr1JQbFKyIRVR6KC9pMaHo9lxlbX62md29+QT+HUMUTZZUw=="
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.9.0.tgz",
+      "integrity": "sha512-A7sPk/EXMDbq8IfU1Tq6RnwHCD+j1EoLgfqxL4DEZC5QjceprSfmDCZbRoO/4Ak48v8I7mY1GKMGOs0pCzLcsQ=="
     },
     "@mcschema/java-1.16": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.4.tgz",
-      "integrity": "sha512-iFF9EILZ9Kf8SNmidng3gMWjiiSlpaLTOPKuFsw/19mywFsqgqqG0jYX9/ilVbDz8gVUzLvZ+1KFa3jjLmnSXw==",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.6.tgz",
+      "integrity": "sha512-NTrvXDrWOQIlkJqiYDEH1DZeCC6moZ0/ks7HI9cAFbHMStIrKjEl2VPjT7HQlg/ZnknnuO4QmqLGsbMoNpimuw==",
       "requires": {
-        "@mcschema/core": "^0.8.1"
+        "@mcschema/core": "^0.9.0"
       }
     },
     "@mcschema/locales": {
diff --git a/package.json b/package.json
index ee97848f..f6fc251c 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,8 @@
   "author": "Misode",
   "license": "MIT",
   "dependencies": {
-    "@mcschema/core": "^0.8.4",
-    "@mcschema/java-1.16": "^0.5.4",
+    "@mcschema/core": "^0.9.0",
+    "@mcschema/java-1.16": "^0.5.6",
     "@mcschema/locales": "^0.1.11",
     "@types/google.analytics": "0.0.40",
     "@types/split.js": "^1.4.0",
diff --git a/src/app/AbstractView.ts b/src/app/AbstractView.ts
new file mode 100644
index 00000000..78048fe9
--- /dev/null
+++ b/src/app/AbstractView.ts
@@ -0,0 +1,18 @@
+import { ModelListener, DataModel } from '@mcschema/core';
+
+export abstract class AbstractView implements ModelListener {
+  model: DataModel
+
+  constructor(model: DataModel) {
+    this.model = model
+    this.model.addListener(this)
+  }
+
+  setModel(model: DataModel) {
+    this.model.removeListener(this)
+    this.model = model
+    this.model.addListener(this)
+  }
+
+  invalidated(model: DataModel): void {}
+}
diff --git a/src/app/ErrorsView.ts b/src/app/ErrorsView.ts
index 8b124b4c..9664d230 100644
--- a/src/app/ErrorsView.ts
+++ b/src/app/ErrorsView.ts
@@ -1,9 +1,9 @@
 import {
-  AbstractView,
   DataModel,
   Errors,
   locale,
 } from '@mcschema/core'
+import { AbstractView } from './AbstractView'
 
 export class ErrorsView extends AbstractView {
   target: HTMLElement
diff --git a/src/app/SourceView.ts b/src/app/SourceView.ts
new file mode 100644
index 00000000..f8f88a35
--- /dev/null
+++ b/src/app/SourceView.ts
@@ -0,0 +1,44 @@
+import { DataModel, Path, ModelPath } from '@mcschema/core'
+import { AbstractView } from './AbstractView'
+
+type SourceViewOptions = {
+  indentation?: number | string,
+  rows?: number
+}
+
+/**
+ * JSON representation view of the model.
+ * Renders the result in a <textarea>.
+ */
+export class SourceView extends AbstractView {
+  target: HTMLTextAreaElement
+  options?: SourceViewOptions
+
+  /**
+   * @param model data model this view represents and listens to
+   * @param target DOM element to render the view
+   * @param options optional options for the view
+   */
+  constructor(model: DataModel, target: HTMLTextAreaElement, options?: SourceViewOptions) {
+    super(model)
+    this.target = target
+    this.options = options
+    this.target.addEventListener('change', evt => this.updateModel())
+  }
+
+  invalidated() {
+    const transformed = this.model.schema.transform(new ModelPath(this.model), this.model.data)
+    this.target.value = JSON.stringify(transformed, null, this.options?.indentation)
+  }
+
+  updateModel() {
+    let parsed = {}
+    try {
+      parsed = JSON.parse(this.target.value)
+    } catch (err) {
+      this.model.error(new Path().push('JSON'), err.message)
+      return
+    }
+    this.model.reset(parsed)
+  }
+}
diff --git a/src/app/TreeView.ts b/src/app/TreeView.ts
new file mode 100644
index 00000000..cd3a1b1e
--- /dev/null
+++ b/src/app/TreeView.ts
@@ -0,0 +1,46 @@
+import { DataModel, ModelPath, Mounter } from '@mcschema/core'
+import { AbstractView } from './AbstractView'
+
+type Registry = {
+  [id: string]: (el: Element) => void
+}
+
+type TreeViewOptions = {
+  showErrors?: boolean
+  observer?: (el: HTMLElement) => void
+  nodeInjector?: (path: ModelPath, mounter: Mounter) => string
+}
+
+/**
+ * DOM representation view of the model.
+ */
+export class TreeView extends AbstractView {
+  target: HTMLElement
+  registry: Registry = {}
+  showErrors: boolean
+  observer: (el: HTMLElement) => void
+  nodeInjector: (path: ModelPath, mounter: Mounter) => string
+
+  /**
+   * @param model data model this view represents and listens to
+   * @param target DOM element to render the view
+   */
+  constructor(model: DataModel, target: HTMLElement, options?: TreeViewOptions) {
+    super(model)
+    this.target = target
+    this.showErrors = options?.showErrors ?? false
+    this.observer = options?.observer ?? (() => {})
+    this.nodeInjector = options?.nodeInjector ?? (() => '')
+  }
+
+  /**
+   * @override
+   */
+  invalidated() {
+    const mounter = new Mounter({nodeInjector: this.nodeInjector})
+    const rendered = this.model.schema.render(new ModelPath(this.model), this.model.data, mounter)
+    this.target.innerHTML = rendered[2];
+    mounter.mount(this.target);
+    this.observer(this.target)
+  }
+}
diff --git a/src/app/app.ts b/src/app/app.ts
index 7b12ed5b..d31d97c1 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -5,13 +5,14 @@ import {
   locale,
   LOCALES,
   ModelPath,
-  SourceView,
-  TreeView,
+  Mounter,
   Path,
 } from '@mcschema/core'
 import { getCollections, getSchemas } from '@mcschema/java-1.16'
 import { VisualizerView } from './visualization/VisualizerView'
 import { RegistryFetcher } from './RegistryFetcher'
+import { TreeView } from './TreeView'
+import { SourceView } from './SourceView'
 import { ErrorsView } from './ErrorsView'
 import config from '../config.json'
 import { BiomeNoiseVisualizer } from './visualization/BiomeNoiseVisualizer'
@@ -63,11 +64,11 @@ const treeViewObserver = (el: HTMLElement) => {
   })
 }
 
-const treeViewNodeInjector = (path: ModelPath, view: TreeView) => {
+const treeViewNodeInjector = (path: ModelPath, mounter: Mounter) => {
   let res = VisualizerView.visualizers
     .filter(v => v.active(path))
     .map(v => {
-      const id = view.registerClick(() => {
+      const id = mounter.registerClick(() => {
         views.visualizer.set(v, path)
         views.visualizer.model.invalidate()
       })
@@ -78,7 +79,7 @@ const treeViewNodeInjector = (path: ModelPath, view: TreeView) => {
     if (path.pop().endsWith(new Path(['generator', 'biome_source', 'biomes']))) {
       const biomeVisualizer = views.visualizer.visualizer as BiomeNoiseVisualizer
       const biome = path.push('biome').get()
-      const id = view.registerChange(el => {
+      const id = mounter.registerChange(el => {
         biomeVisualizer.setBiomeColor(biome, (el as HTMLInputElement).value)
         views.visualizer.visualizer!.state = {}
         views.visualizer.invalidated()
@@ -166,7 +167,6 @@ Promise.all([
     }
   }
   config.models.forEach(buildModel)
-  
 
   let selected = ''
   Object.values(models).forEach(m => m.validate(true))
diff --git a/src/app/visualization/VisualizerView.ts b/src/app/visualization/VisualizerView.ts
index 8445e0e5..432b0706 100644
--- a/src/app/visualization/VisualizerView.ts
+++ b/src/app/visualization/VisualizerView.ts
@@ -1,4 +1,5 @@
-import { AbstractView, DataModel, Path, ModelPath } from "@mcschema/core"
+import { DataModel, ModelPath } from "@mcschema/core"
+import { AbstractView } from "../AbstractView"
 import { BiomeNoiseVisualizer } from "./BiomeNoiseVisualizer"
 import { NoiseSettingsVisualizer } from "./NoiseSettingsVisualizer"
 import { Visualizer } from "./Visualizer"