Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into PDFNode

98 files changed, 5516 insertions, 2396 deletions

diff --git a/src/Main.tsx b/src/Main.tsx
deleted file mode 100644
index e2e1137da..000000000
--- a/src/Main.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { action, configure } from 'mobx';
-import "normalize.css";
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { DocumentDecorations } from './DocumentDecorations';
-import { Documents } from './documents/Documents';
-import { Document } from './fields/Document';
-import { KeyStore, KeyStore as KS } from './fields/Key';
-import { ListField } from './fields/ListField';
-import { NumberField } from './fields/NumberField';
-import { TextField } from './fields/TextField';
-import "./Main.scss";
-import { ContextMenu } from './views/ContextMenu';
-import { DocumentView } from './views/nodes/DocumentView';
-import { CompileScript } from './util/Scripting';
-
-//pdf url: https://arxiv.org/pdf/1708.08021.pdf
-
-configure({
-    enforceActions: "observed"
-});
-
-const mainNodeCollection = new Array<Document>();
-let mainContainer = Documents.DockDocument(mainNodeCollection, {
-    x: 0, y: 0, title: "main container"
-})
-
-window.addEventListener("drop", function (e) {
-    e.preventDefault();
-}, false)
-window.addEventListener("dragover", function (e) {
-    e.preventDefault();
-}, false)
-document.addEventListener("pointerdown", action(function (e: PointerEvent) {
-    if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
-        ContextMenu.Instance.clearItems()
-    }
-}), true)
-
-
-//runInAction(() =>
-{
-    let PDFDoc = Documents.PDFDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x:0, y:0, width: 500, height: 500, title: "PDF"
-    }); 
-
-    let doc1 = Documents.TextDocument({ title: "hello" });
-    let doc2 = doc1.MakeDelegate();
-    doc2.Set(KS.X, new NumberField(150));
-    doc2.Set(KS.Y, new NumberField(20));
-    
-   //let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-       //x:0, y: 0, width: 500, height: 500,title: "cat 1"
-   //});
-
-    // const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-    //     x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
-    // }));
-    // schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
-    // schemaDocs[4].SetData(KS.Author, "Bob", TextField);
-    // schemaDocs.push(doc2);
-    // const doc7 = Documents.SchemaDocument(schemaDocs)
-    
-
-
-   const docset = [PDFDoc]; //pdfDoc
-   let doc4 = Documents.CollectionDocument(docset, {
-        x: 0, y: 400, title: "mini collection"
-   });
-
-    // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-    //     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
-    // });
-  //  let docset2 = new Array<Document>(doc4);//, doc1, doc3);
-   // let doc6 = Documents.CollectionDocument(docset2, {
-    //    x: 350, y: 100, width: 600, height: 600, title: "docking collection"
-    //});
-    let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField);
-    if (!mainNodes) {
-        mainNodes = new ListField<Document>();
-    }
-    // mainNodes.Data.push(doc6);
-    // mainNodes.Data.push(doc2);
-    mainNodes.Data.push(doc4);
-    //mainNodes.Data.push(doc3);
-    mainNodes.Data.push(PDFDoc); 
-    // mainNodes.Data.push(doc5);
-    // mainNodes.Data.push(doc1);
-    //mainNodes.Data.push(doc2);
-    //mainNodes.Data.push(doc6);
-    mainContainer.Set(KeyStore.Data, mainNodes);
-}
-//}
-//);
-
-ReactDOM.render((
-    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-        <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
-        <DocumentDecorations />
-        <ContextMenu />
-    </div>),
-    document.getElementById('root'));
\ No newline at end of file
diff --git a/src/Server.tsx b/src/Server.tsx
deleted file mode 100644
index 04473424a..000000000
--- a/src/Server.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Field, FieldWaiting, FIELD_ID, DOC_ID, FIELD_WAITING } from "./fields/Field"
-import { Key, KeyStore } from "./fields/Key"
-import { ObservableMap, computed, action, observable } from "mobx";
-import { Document } from "./fields/Document"
-
-export class Server {
-    static FieldStore: ObservableMap<FIELD_ID, Field> = new ObservableMap();
-    static DocumentStore: ObservableMap<DOC_ID, ObservableMap<Key, FIELD_ID>> = new ObservableMap();
-    public static ClientFieldsCached: ObservableMap<DOC_ID, Field | FIELD_WAITING> = new ObservableMap();
-
-    // 'hack' is here temoporarily for simplicity when debugging things.
-    // normally, you can't assume this will return a document since the server responds asynchronously 
-    // and there might not actually be a matching document on the server.
-    // the right way to call this is from within a reaction where you test whether the return value is FieldWaiting.
-    public static GetDocument(docid: DOC_ID, hack: boolean = false) {
-        if (!this.ClientFieldsCached.has(docid)) {
-            this.SEND_DOCUMENT_REQUEST(docid, hack);
-        }
-        return this.ClientFieldsCached.get(docid) as Document;
-    }
-    public static AddDocument(document: Document) {
-        // Replace with call to server
-        this.DocumentStore.set(document.Id, new ObservableMap());
-        document.fields.forEach((field, key) => {
-            this.FieldStore.set((field as Field).Id, (field as Field));
-            this.DocumentStore.get(document.Id)!.set(key, (field as Field).Id);
-        });
-    }
-    public static AddDocumentField(doc: Document, key: Key, value: Field) {
-        // Replace with call to server
-        if (this.DocumentStore.get(doc.Id))
-            this.DocumentStore.get(doc.Id)!.set(key, value.Id);
-    }
-    public static DeleteDocumentField(doc: Document, key: Key) {
-        // Replace with call to server
-        if (this.DocumentStore.get(doc.Id))
-            this.DocumentStore.get(doc.Id)!.delete(key);
-    }
-    public static SetFieldValue(field: Field, value: any) {
-        // Replace with call to server
-        if (this.FieldStore.get(field.Id))
-            this.FieldStore.get(field.Id)!.TrySetValue(value);
-    }
-
-
-    @action
-    public static GetDocumentField(doc: Document, key: Key) {
-        var fieldid = doc._proxies.get(key);
-        if (!this.ClientFieldsCached.has(fieldid)) {
-            this.ClientFieldsCached.set(fieldid, FieldWaiting);
-            this.SEND_DOCUMENT_FIELD_REQUEST(doc, key, fieldid);
-        }
-
-        var field = this.ClientFieldsCached.get(fieldid);
-        if (field != FieldWaiting) {
-            doc._proxies.delete(key); // perhaps another document inquired the same field 
-        }
-        return field;
-    }
-    static times = 0; // hack for testing
-
-    @action
-    static cacheField(clientField: Field) {
-        var cached = this.ClientFieldsCached.get(clientField.Id);
-        if (!cached || cached == FieldWaiting) {
-            this.ClientFieldsCached.set(clientField.Id, clientField);
-        } else {
-            // probably should overwrite the values within any field that was already here...
-        }
-        return this.ClientFieldsCached.get(clientField.Id) as Field;
-    }
-
-    public static SEND_DOCUMENT_FIELD_REQUEST(doc: Document, key: Key, fieldid: FIELD_ID) {
-        //simulating a server call with a registered callback action
-        setTimeout(() => this.receivedDocumentField(doc, key, fieldid, this.FieldStore.get(fieldid)),
-            key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500
-        )
-    }
-
-    public static SEND_DOCUMENT_REQUEST(docid: DOC_ID, hack: boolean = false) {
-        if (hack) { // temporary for debugging
-            this.receivedDocument(docid, this.DocumentStore.get(docid)!)
-        } else {
-            //simulating a server call with a registered callback action
-            setTimeout(() => this.receivedDocument(docid, this.DocumentStore.get(docid)!), 1500);
-        }
-    }
-
-    @action
-    static receivedDocument(docid: DOC_ID, fieldlist: ObservableMap<Key, FIELD_ID>) {
-        var cachedDoc = this.cacheField(new Document(docid));
-        fieldlist!.forEach((field: FIELD_ID, key: Key) => (cachedDoc as Document)._proxies.set(key, field));
-    }
-
-    @action
-    static receivedDocumentField(doc: Document, key: Key, fieldid: FIELD_ID, fieldfromserver: Field | undefined) {
-        doc._proxies.delete(key);
-        var cachedField = this.cacheField(fieldfromserver!);
-
-        // if the field is a document and it wasn't already cached, then we need to inquire all of its fields from the server...
-        if (cachedField instanceof Document && fieldfromserver! == cachedField) {
-            this.SEND_DOCUMENT_REQUEST(cachedField.Id);
-        }
-        doc.fields.set(key, cachedField);
-    }
-}
diff --git a/src/Utils.ts b/src/Utils.ts
index e2b4309bb..d4b7da52c 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -1,17 +1,22 @@
 import v4 = require('uuid/v4');
 import v5 = require("uuid/v5");
+import { Socket } from 'socket.io';
+import { Message, Types } from './server/Message';
 
 export class Utils {
 
     public static GenerateGuid(): string {
-        return v4();
+        return v4()
     }
 
     public static GenerateDeterministicGuid(seed: string): string {
-        return v5(seed, v5.URL);
+        return v5(seed, v5.URL)
     }
 
     public static GetScreenTransform(ele: HTMLElement): { scale: number, translateX: number, translateY: number } {
+        if (!ele) {
+            return { scale: 1, translateX: 1, translateY: 1 }
+        }
         const rect = ele.getBoundingClientRect();
         const scale = ele.offsetWidth == 0 && rect.width == 0 ? 1 : rect.width / ele.offsetWidth;
         const translateX = rect.left;
@@ -20,5 +25,31 @@ export class Utils {
         return { scale, translateX, translateY };
     }
 
-    public static pdf_example = require('../deploy/test.pdf');
+    public static CopyText(text: string) {
+        var textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
+        try { document.execCommand('copy'); } catch (err) { }
+
+        document.body.removeChild(textArea);
+    }
+
+    public static Emit<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T) {
+        socket.emit(message.Message, args);
+    }
+
+    public static EmitCallback<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T, fn: (args: any) => any) {
+        socket.emit(message.Message, args, fn);
+    }
+
+    public static AddServerHandler<T>(socket: Socket, message: Message<T>, handler: (args: T) => any) {
+        socket.on(message.Message, handler);
+    }
+
+    public static AddServerHandlerCallback<T>(socket: Socket, message: Message<T>, handler: (args: [T, (res: any) => any]) => any) {
+        socket.on(message.Message, (arg: T, fn: (res: any) => any) => handler([arg, fn]));
+    }
 }
\ No newline at end of file
diff --git a/src/client/Server.ts b/src/client/Server.ts
new file mode 100644
index 000000000..2d162b93a
--- /dev/null
+++ b/src/client/Server.ts
@@ -0,0 +1,124 @@
+import { Key } from "../fields/Key"
+import { ObservableMap, action, reaction } from "mobx";
+import { Field, FieldWaiting, FIELD_WAITING, Opt, FieldId } from "../fields/Field"
+import { Document } from "../fields/Document"
+import { SocketStub } from "./SocketStub";
+import * as OpenSocket from 'socket.io-client';
+import { Utils } from "./../Utils";
+import { MessageStore, Types } from "./../server/Message";
+
+export class Server {
+    public static ClientFieldsCached: ObservableMap<FieldId, Field | FIELD_WAITING> = new ObservableMap();
+    static Socket: SocketIOClient.Socket = OpenSocket("http://localhost:1234");
+    static GUID: string = Utils.GenerateGuid()
+
+
+    // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
+    // Call this is from within a reaction and test whether the return value is FieldWaiting.
+    // 'hackTimeout' is here temporarily for simplicity when debugging things.
+    public static GetField(fieldid: FieldId, callback: (field: Opt<Field>) => void): Opt<Field> | FIELD_WAITING {
+        let cached = this.ClientFieldsCached.get(fieldid);
+        if (!cached) {
+            this.ClientFieldsCached.set(fieldid, FieldWaiting);
+            SocketStub.SEND_FIELD_REQUEST(fieldid, action((field: Field | undefined) => {
+                let cached = this.ClientFieldsCached.get(fieldid);
+                if (cached != FieldWaiting)
+                    callback(cached);
+                else {
+                    if (field) {
+                        this.ClientFieldsCached.set(fieldid, field);
+                    } else {
+                        this.ClientFieldsCached.delete(fieldid)
+                    }
+                    callback(field)
+                }
+            }));
+        } else if (cached != FieldWaiting) {
+            setTimeout(() => callback(cached as Field), 0);
+        } else {
+            reaction(() => {
+                return this.ClientFieldsCached.get(fieldid);
+            }, (field, reaction) => {
+                if (field !== "<Waiting>") {
+                    callback(field)
+                    reaction.dispose()
+                }
+            })
+        }
+        return cached;
+    }
+
+    public static GetFields(fieldIds: FieldId[], callback: (fields: { [id: string]: Field }) => any) {
+        SocketStub.SEND_FIELDS_REQUEST(fieldIds, (fields) => {
+            for (let key in fields) {
+                let field = fields[key];
+                if (!this.ClientFieldsCached.has(field.Id)) {
+                    this.ClientFieldsCached.set(field.Id, field)
+                }
+            }
+            callback(fields)
+        });
+    }
+
+    public static GetDocumentField(doc: Document, key: Key, callback?: (field: Field) => void) {
+        let field = doc._proxies.get(key.Id);
+        if (field) {
+            this.GetField(field,
+                action((fieldfromserver: Opt<Field>) => {
+                    if (fieldfromserver) {
+                        doc.fields.set(key.Id, { key, field: fieldfromserver });
+                        if (callback) {
+                            callback(fieldfromserver);
+                        }
+                    }
+                }));
+        }
+    }
+
+    public static AddDocument(document: Document) {
+        SocketStub.SEND_ADD_DOCUMENT(document);
+    }
+    public static AddDocumentField(doc: Document, key: Key, value: Field) {
+        console.log("Add doc field " + doc.Title + " " + key.Name + " fid " + value.Id + " " + value);
+        SocketStub.SEND_ADD_DOCUMENT_FIELD(doc, key, value);
+    }
+    public static DeleteDocumentField(doc: Document, key: Key) {
+        SocketStub.SEND_DELETE_DOCUMENT_FIELD(doc, key);
+    }
+
+    public static UpdateField(field: Field) {
+        if (!this.ClientFieldsCached.has(field.Id)) {
+            this.ClientFieldsCached.set(field.Id, field)
+        }
+        SocketStub.SEND_SET_FIELD(field);
+    }
+
+    static connected(message: string) {
+        Server.Socket.emit(MessageStore.Bar.Message, Server.GUID);
+    }
+
+    @action
+    private static cacheField(clientField: Field) {
+        var cached = this.ClientFieldsCached.get(clientField.Id);
+        if (!cached || cached == FieldWaiting) {
+            this.ClientFieldsCached.set(clientField.Id, clientField);
+        } else {
+            // probably should overwrite the values within any field that was already here...
+        }
+        return this.ClientFieldsCached.get(clientField.Id) as Field;
+    }
+
+    @action
+    static updateField(field: { _id: string, data: any, type: Types }) {
+        if (Server.ClientFieldsCached.has(field._id)) {
+            var f = Server.ClientFieldsCached.get(field._id);
+            if (f && f != FieldWaiting) {
+                f.UpdateFromServer(field.data);
+                f.init(() => { });
+            }
+        }
+    }
+}
+
+Server.Socket.on(MessageStore.Foo.Message, Server.connected);
+Server.Socket.on(MessageStore.SetField.Message, Server.updateField);
\ No newline at end of file
diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts
new file mode 100644
index 000000000..18df4ca0a
--- /dev/null
+++ b/src/client/SocketStub.ts
@@ -0,0 +1,95 @@
+import { Key } from "../fields/Key"
+import { Field, FieldId, Opt } from "../fields/Field"
+import { ObservableMap } from "mobx";
+import { Document } from "../fields/Document"
+import { MessageStore, DocumentTransfer } from "../server/Message";
+import { Utils } from "../Utils";
+import { Server } from "./Server";
+import { ServerUtils } from "../server/ServerUtil";
+
+export class SocketStub {
+
+    static FieldStore: ObservableMap<FieldId, Field> = new ObservableMap();
+    public static SEND_ADD_DOCUMENT(document: Document) {
+
+        // Send a serialized version of the document to the server
+        // ...SOCKET(ADD_DOCUMENT, serialied document)
+
+        // server stores each document field in its repository of stored fields
+        // document.fields.forEach((f, key) => this.FieldStore.set((f as Field).Id, f as Field));
+        // let strippedDoc = new Document(document.Id);
+        // document.fields.forEach((f, key) => {
+        //     if (f) {
+        //         // let args: SetFieldArgs = new SetFieldArgs(f.Id, f.GetValue())
+        //         let args: Transferable = f.ToJson()
+        //         Utils.Emit(Server.Socket, MessageStore.SetField, args)
+        //     }
+        // })
+
+        // // server stores stripped down document (w/ only field id proxies) in the field store
+        // this.FieldStore.set(document.Id, new Document(document.Id));
+        // document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key.Id, (f as Field).Id));
+
+        console.log("sending " + document.Title);
+        Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(document.ToJson()))
+    }
+
+    public static SEND_FIELD_REQUEST(fieldid: FieldId, callback: (field: Opt<Field>) => void) {
+        if (fieldid) {
+            Utils.EmitCallback(Server.Socket, MessageStore.GetField, fieldid, (field: any) => {
+                if (field) {
+                    ServerUtils.FromJson(field).init(callback);
+                } else {
+                    callback(undefined);
+                }
+            })
+        }
+    }
+
+    public static SEND_FIELDS_REQUEST(fieldIds: FieldId[], callback: (fields: { [key: string]: Field }) => any) {
+        Utils.EmitCallback(Server.Socket, MessageStore.GetFields, fieldIds, (fields: any[]) => {
+            let fieldMap: any = {};
+            for (let field of fields) {
+                fieldMap[field._id] = ServerUtils.FromJson(field);
+            }
+            callback(fieldMap)
+        });
+    }
+
+    public static SEND_ADD_DOCUMENT_FIELD(doc: Document, key: Key, value: Field) {
+
+        // Send a serialized version of the field to the server along with the
+        // associated info of the document id and key where it is used.
+
+        // ...SOCKET(ADD_DOCUMENT_FIELD, document id, key id, serialized field)
+
+        // server updates its document to hold a proxy mapping from key => fieldId
+        var document = this.FieldStore.get(doc.Id) as Document;
+        if (document)
+            document._proxies.set(key.Id, value.Id);
+
+        // server adds the field to its repository of fields
+        this.FieldStore.set(value.Id, value);
+        // Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(doc.ToJson()))
+    }
+
+    public static SEND_DELETE_DOCUMENT_FIELD(doc: Document, key: Key) {
+        // Send a request to delete the field stored under the specified key from the document
+
+        // ...SOCKET(DELETE_DOCUMENT_FIELD, document id, key id)
+
+        // Server removes the field id from the document's list of field proxies
+        var document = this.FieldStore.get(doc.Id) as Document;
+        if (document)
+            document._proxies.delete(key.Id);
+    }
+
+    public static SEND_SET_FIELD(field: Field) {
+        // Send a request to set the value of a field
+
+        // ...SOCKET(SET_FIELD, field id, serialized field value)
+
+        // Server updates the value of the field in its fieldstore
+        Utils.Emit(Server.Socket, MessageStore.SetField, field.ToJson())
+    }
+}
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
new file mode 100644
index 000000000..94e1cb8dd
--- /dev/null
+++ b/src/client/documents/Documents.ts
@@ -0,0 +1,171 @@
+import { Document } from "../../fields/Document";
+import { Server } from "../Server";
+import { KeyStore } from "../../fields/KeyStore";
+import { TextField } from "../../fields/TextField";
+import { NumberField } from "../../fields/NumberField";
+import { ListField } from "../../fields/ListField";
+import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
+import { ImageField } from "../../fields/ImageField";
+import { ImageBox } from "../views/nodes/ImageBox";
+import { WebField } from "../../fields/WebField";
+import { WebBox } from "../views/nodes/WebBox";
+import { CollectionView, CollectionViewType } from "../views/collections/CollectionView";
+import { HtmlField } from "../../fields/HtmlField";
+import { Key } from "../../fields/Key"
+import { Field } from "../../fields/Field";
+import { KeyValueBox } from "../views/nodes/KeyValueBox"
+import { KVPField } from "../../fields/KVPField";
+import { PDFField } from "../../fields/PDFField";
+import { PDFNode } from "../views/nodes/PDFNode";
+
+export interface DocumentOptions {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    nativeWidth?: number;
+    nativeHeight?: number;
+    title?: string;
+    panx?: number;
+    pany?: number;
+    scale?: number;
+    layout?: string;
+    layoutKeys?: Key[];
+    viewType?: number;
+}
+
+export namespace Documents {
+    let textProto: Document;
+    let imageProto: Document;
+    let webProto: Document;
+    let collProto: Document;
+    let kvpProto: Document;
+    const textProtoId = "textProto";
+    const pdfProtoId = "textProto";
+    const imageProtoId = "imageProto";
+    const webProtoId = "webProto";
+    const collProtoId = "collectionProto";
+    const kvpProtoId = "kvpProto";
+
+    export function initProtos(mainDocId: string, callback: (mainDoc?: Document) => void) {
+        Server.GetFields([collProtoId, textProtoId, imageProtoId, mainDocId], (fields) => {
+            collProto = fields[collProtoId] as Document;
+            imageProto = fields[imageProtoId] as Document;
+            textProto = fields[textProtoId] as Document;
+            webProto = fields[webProtoId] as Document;
+            kvpProto = fields[kvpProtoId] as Document;
+            callback(fields[mainDocId] as Document)
+        });
+    }
+    function assignOptions(doc: Document, options: DocumentOptions): Document {
+        if (options.x !== undefined) { doc.SetNumber(KeyStore.X, options.x); }
+        if (options.y !== undefined) { doc.SetNumber(KeyStore.Y, options.y); }
+        if (options.width !== undefined) { doc.SetNumber(KeyStore.Width, options.width); }
+        if (options.height !== undefined) { doc.SetNumber(KeyStore.Height, options.height); }
+        if (options.nativeWidth !== undefined) { doc.SetNumber(KeyStore.NativeWidth, options.nativeWidth); }
+        if (options.nativeHeight !== undefined) { doc.SetNumber(KeyStore.NativeHeight, options.nativeHeight); }
+        if (options.title !== undefined) { doc.SetText(KeyStore.Title, options.title); }
+        if (options.panx !== undefined) { doc.SetNumber(KeyStore.PanX, options.panx); }
+        if (options.pany !== undefined) { doc.SetNumber(KeyStore.PanY, options.pany); }
+        if (options.scale !== undefined) { doc.SetNumber(KeyStore.Scale, options.scale); }
+        if (options.viewType !== undefined) { doc.SetNumber(KeyStore.ViewType, options.viewType); }
+        if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); }
+        if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); }
+        return doc;
+    }
+    function setupPrototypeOptions(protoId: string, title: string, layout: string, options: DocumentOptions): Document {
+        return assignOptions(new Document(protoId), { ...options, title: title, layout: layout });
+    }
+    function SetInstanceOptions<T, U extends Field & { Data: T }>(doc: Document, options: DocumentOptions, value: T, ctor: { new(): U }, id?: string) {
+        var deleg = doc.MakeDelegate(id);
+        deleg.SetData(KeyStore.Data, value, ctor);
+        return assignOptions(deleg, options);
+    }
+
+    function GetImagePrototype(): Document {
+        if (!imageProto) {
+            imageProto = setupPrototypeOptions(imageProtoId, "IMAGE_PROTO", CollectionView.LayoutString("AnnotationsKey"),
+                { x: 0, y: 0, nativeWidth: 300, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] });
+            imageProto.SetText(KeyStore.BackgroundLayout, ImageBox.LayoutString());
+        }
+        return imageProto;
+    }
+    function GetTextPrototype(): Document {
+        return textProto ? textProto :
+            textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] });
+    }
+    function GetPdfPrototype(): Document {
+        return textProto ? textProto :
+            textProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", PDFNode.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] });
+    }
+    function GetWebPrototype(): Document {
+        return webProto ? webProto :
+            webProto = setupPrototypeOptions(webProtoId, "WEB_PROTO", WebBox.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 300, layoutKeys: [KeyStore.Data] });
+    }
+    function GetCollectionPrototype(): Document {
+        return collProto ? collProto :
+            collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("DataKey"),
+                { panx: 0, pany: 0, scale: 1, layoutKeys: [KeyStore.Data] });
+    }
+
+    function GetKVPPrototype(): Document {
+        return kvpProto ? kvpProto :
+            kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValueBox.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] })
+    }
+
+    export function ImageDocument(url: string, options: DocumentOptions = {}) {
+        let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] },
+            new URL(url), ImageField);
+        doc.SetText(KeyStore.Caption, "my caption...");
+        doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption());
+        doc.SetText(KeyStore.OverlayLayout, FixedCaption());
+        return doc;
+    }
+    export function TextDocument(options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetTextPrototype(), options, "", TextField);
+    }
+    export function PdfDocument(url: string, options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetPdfPrototype(), options, new URL(url), PDFField);
+    }
+    export function WebDocument(url: string, options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetWebPrototype(), options, new URL(url), WebField);
+    }
+    export function HtmlDocument(html: string, options: DocumentOptions = {}) {
+        return SetInstanceOptions(GetWebPrototype(), options, html, HtmlField);
+    }
+    export function FreeformDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
+        return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Freeform }, documents, ListField, id)
+    }
+    export function SchemaDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
+        return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Schema }, documents, ListField, id)
+    }
+    export function DockDocument(config: string, options: DocumentOptions, id?: string) {
+        return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Docking }, config, TextField, id)
+    }
+    export function KVPDocument(document: Document, options: DocumentOptions = {}, id?: string) {
+        var deleg = GetKVPPrototype().MakeDelegate(id);
+        deleg.Set(KeyStore.Data, document);
+        return assignOptions(deleg, options);
+    }
+
+    // example of custom display string for an image that shows a caption.
+    function EmbeddedCaption() {
+        return `<div style="height:100%">
+            <div style="position:relative; margin:auto; height:85%;" >`
+            + ImageBox.LayoutString() +
+            `</div>
+            <div style="position:relative; height:15%; text-align:center; ">`
+            + FormattedTextBox.LayoutString("CaptionKey") +
+            `</div> 
+        </div>` };
+    function FixedCaption() {
+        return `<div style="position:absolute; height:30px; bottom:0; width:100%">
+            <div style="position:absolute; width:100%; height:100%; text-align:center;bottom:0;">`
+            + FormattedTextBox.LayoutString("CaptionKey") +
+            `</div> 
+        </div>` };
+}
\ No newline at end of file
diff --git a/src/util/DragManager.ts b/src/client/util/DragManager.ts
index 63d6a88f8..60910a40b 100644
--- a/src/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,9 +1,37 @@
-import { Opt } from "../fields/Field";
-import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
-import { DocumentDecorations } from "../DocumentDecorations";
-import { SelectionManager } from "./SelectionManager";
+import { DocumentDecorations } from "../views/DocumentDecorations";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
-import { Document } from "../fields/Document";
+import { Document } from "../../fields/Document"
+import { action } from "mobx";
+import { DocumentView } from "../views/nodes/DocumentView";
+
+export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Document) {
+    let onRowMove = action((e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+        DragManager.StartDrag(_reference.current!, { document: docFunc() });
+    });
+    let onRowUp = action((e: PointerEvent): void => {
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+    });
+    let onItemDown = (e: React.PointerEvent) => {
+        // if (this.props.isSelected() || this.props.isTopMost) {
+        if (e.button == 0) {
+            e.stopPropagation();
+            if (e.shiftKey) {
+                CollectionDockingView.Instance.StartOtherDrag(docFunc(), e);
+            } else {
+                document.addEventListener("pointermove", onRowMove);
+                document.addEventListener('pointerup', onRowUp);
+            }
+        }
+        //}
+    }
+    return onItemDown;
+}
 
 export namespace DragManager {
     export function Root() {
@@ -49,6 +77,7 @@ export namespace DragManager {
         drop: (e: Event, de: DropEvent) => void;
     }
 
+
     export function MakeDropTarget(element: HTMLElement, options: DropOptions): DragDropDisposer {
         if ("canDrop" in element.dataset) {
             throw new Error("Element is already droppable, can't make it droppable again");
@@ -65,10 +94,8 @@ export namespace DragManager {
         };
     }
 
-
-    let _lastPointerX: number = 0;
-    let _lastPointerY: number = 0;
-    export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options: DragOptions) {
+    export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options?: DragOptions) {
+        DocumentDecorations.Instance.Hidden = true;
         if (!dragDiv) {
             dragDiv = document.createElement("div");
             DragManager.Root().appendChild(dragDiv);
@@ -81,46 +108,68 @@ export namespace DragManager {
         let dragElement = ele.cloneNode(true) as HTMLElement;
         dragElement.style.opacity = "0.7";
         dragElement.style.position = "absolute";
+        dragElement.style.bottom = "";
+        dragElement.style.left = "";
         dragElement.style.transformOrigin = "0 0";
         dragElement.style.zIndex = "1000";
         dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
+        dragElement.style.width = `${rect.width / scaleX}px`;
+        dragElement.style.height = `${rect.height / scaleY}px`;
+        // It seems like the above code should be able to just be this:
+        // dragElement.style.transform = `translate(${x}px, ${y}px)`;
+        // dragElement.style.width = `${rect.width}px`;
+        // dragElement.style.height = `${rect.height}px`;
         dragDiv.appendChild(dragElement);
-        _lastPointerX = dragData["xOffset"] + rect.left;
-        _lastPointerY = dragData["yOffset"] + rect.top;
 
         let hideSource = false;
-        if (typeof options.hideSource === "boolean") {
-            hideSource = options.hideSource;
-        } else {
-            hideSource = options.hideSource();
+        if (options) {
+            if (typeof options.hideSource === "boolean") {
+                hideSource = options.hideSource;
+            } else {
+                hideSource = options.hideSource();
+            }
         }
         const wasHidden = ele.hidden;
         if (hideSource) {
             ele.hidden = true;
         }
-
         const moveHandler = (e: PointerEvent) => {
             e.stopPropagation();
             e.preventDefault();
-            x += e.clientX - _lastPointerX; _lastPointerX = e.clientX;
-            y += e.clientY - _lastPointerY; _lastPointerY = e.clientY;
+            x += e.movementX;
+            y += e.movementY;
+            if (e.shiftKey) {
+                abortDrag();
+                const docView: DocumentView = dragData["documentView"];
+                const doc: Document = docView ? docView.props.Document : dragData["document"];
+                CollectionDockingView.Instance.StartOtherDrag(doc, { pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 });
+            }
             dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         };
-        const upHandler = (e: PointerEvent) => {
+
+        const abortDrag = () => {
             document.removeEventListener("pointermove", moveHandler, true);
             document.removeEventListener("pointerup", upHandler);
-            FinishDrag(dragElement, e, options, dragData);
+            dragDiv.removeChild(dragElement);
             if (hideSource && !wasHidden) {
                 ele.hidden = false;
             }
+        }
+        const upHandler = (e: PointerEvent) => {
+            abortDrag();
+            FinishDrag(ele, e, dragData, options);
         };
         document.addEventListener("pointermove", moveHandler, true);
         document.addEventListener("pointerup", upHandler);
     }
 
-    function FinishDrag(dragEle: HTMLElement, e: PointerEvent, options: DragOptions, dragData: { [index: string]: any }) {
-        dragDiv.removeChild(dragEle);
+    function FinishDrag(dragEle: HTMLElement, e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions) {
+        let parent = dragEle.parentElement;
+        if (parent)
+            parent.removeChild(dragEle);
         const target = document.elementFromPoint(e.x, e.y);
+        if (parent)
+            parent.appendChild(dragEle);
         if (!target) {
             return;
         }
@@ -132,6 +181,9 @@ export namespace DragManager {
                 data: dragData
             }
         }));
-        options.handlers.dragComplete({});
+        if (options) {
+            options.handlers.dragComplete({});
+        }
+        DocumentDecorations.Instance.Hidden = false;
     }
 }
\ No newline at end of file
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
new file mode 100644
index 000000000..46bd1a206
--- /dev/null
+++ b/src/client/util/Scripting.ts
@@ -0,0 +1,132 @@
+// import * as ts from "typescript"
+let ts = (window as any).ts;
+import { Opt, Field } from "../../fields/Field";
+import { Document } from "../../fields/Document";
+import { NumberField } from "../../fields/NumberField";
+import { ImageField } from "../../fields/ImageField";
+import { TextField } from "../../fields/TextField";
+import { RichTextField } from "../../fields/RichTextField";
+import { KeyStore } from "../../fields/KeyStore";
+import { ListField } from "../../fields/ListField";
+// // @ts-ignore
+// import * as typescriptlib from '!!raw-loader!../../../node_modules/typescript/lib/lib.d.ts'
+// // @ts-ignore
+// import * as typescriptes5 from '!!raw-loader!../../../node_modules/typescript/lib/lib.es5.d.ts'
+
+// @ts-ignore
+import * as typescriptlib from '!!raw-loader!./type_decls.d'
+
+
+export interface ExecutableScript {
+    (): any;
+
+    compiled: boolean;
+}
+
+function Compile(script: string | undefined, diagnostics: Opt<any[]>, scope: { [name: string]: any }): ExecutableScript {
+    const compiled = !(diagnostics && diagnostics.some(diag => diag.category == ts.DiagnosticCategory.Error));
+
+    let func: () => Opt<Field>;
+    if (compiled && script) {
+        let fieldTypes = [Document, NumberField, TextField, ImageField, RichTextField, ListField];
+        let paramNames = ["KeyStore", ...fieldTypes.map(fn => fn.name)];
+        let params: any[] = [KeyStore, ...fieldTypes]
+        for (let prop in scope) {
+            if (prop === "this") {
+                continue;
+            }
+            paramNames.push(prop);
+            params.push(scope[prop]);
+        }
+        let thisParam = scope["this"];
+        let compiledFunction = new Function(...paramNames, script);
+        func = function (): Opt<Field> {
+            return compiledFunction.apply(thisParam, params)
+        };
+    } else {
+        func = () => undefined;
+    }
+
+    return Object.assign(func,
+        {
+            compiled
+        });
+}
+
+interface File {
+    fileName: string;
+    content: string;
+}
+
+// class ScriptingCompilerHost implements ts.CompilerHost {
+class ScriptingCompilerHost {
+    files: File[] = [];
+
+    // getSourceFile(fileName: string, languageVersion: ts.ScriptTarget, onError?: ((message: string) => void) | undefined, shouldCreateNewSourceFile?: boolean | undefined): ts.SourceFile | undefined {
+    getSourceFile(fileName: string, languageVersion: any, onError?: ((message: string) => void) | undefined, shouldCreateNewSourceFile?: boolean | undefined): any | undefined {
+        let contents = this.readFile(fileName);
+        if (contents !== undefined) {
+            return ts.createSourceFile(fileName, contents, languageVersion, true);
+        }
+        return undefined;
+    }
+    // getDefaultLibFileName(options: ts.CompilerOptions): string {
+    getDefaultLibFileName(options: any): string {
+        return 'node_modules/typescript/lib/lib.d.ts' // No idea what this means...
+    }
+    writeFile(fileName: string, content: string) {
+        const file = this.files.find(file => file.fileName === fileName);
+        if (file) {
+            file.content = content;
+        } else {
+            this.files.push({ fileName, content })
+        }
+    }
+    getCurrentDirectory(): string {
+        return '';
+    }
+    getCanonicalFileName(fileName: string): string {
+        return this.useCaseSensitiveFileNames() ? fileName : fileName.toLowerCase();
+    }
+    useCaseSensitiveFileNames(): boolean {
+        return true;
+    }
+    getNewLine(): string {
+        return '\n';
+    }
+    fileExists(fileName: string): boolean {
+        return this.files.some(file => file.fileName === fileName);
+    }
+    readFile(fileName: string): string | undefined {
+        let file = this.files.find(file => file.fileName === fileName);
+        if (file) {
+            return file.content;
+        }
+        return undefined;
+    }
+}
+
+export function CompileScript(script: string, scope?: { [name: string]: any }, addReturn: boolean = false): ExecutableScript {
+    let host = new ScriptingCompilerHost;
+    let funcScript = `(function() {
+        ${addReturn ? `return ${script};` : script}
+    })()`
+    host.writeFile("file.ts", funcScript);
+    host.writeFile('node_modules/typescript/lib/lib.d.ts', typescriptlib);
+    let program = ts.createProgram(["file.ts"], {}, host);
+    let testResult = program.emit();
+    let outputText = "return " + host.readFile("file.js");
+
+    let diagnostics = ts.getPreEmitDiagnostics(program).concat(testResult.diagnostics);
+
+    return Compile(outputText, diagnostics, scope || {});
+}
+
+export function ToField(data: any): Opt<Field> {
+    if (typeof data == "string") {
+        return new TextField(data);
+    } else if (typeof data == "number") {
+        return new NumberField(data);
+    }
+    return undefined;
+}
\ No newline at end of file
diff --git a/src/util/ScrollBox.tsx b/src/client/util/ScrollBox.tsx
index b6b088170..b6b088170 100644
--- a/src/util/ScrollBox.tsx
+++ b/src/client/util/ScrollBox.tsx
diff --git a/src/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 0759ae110..1a711ae64 100644
--- a/src/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -1,13 +1,13 @@
-import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
 import { observable, action } from "mobx";
+import { DocumentView } from "../views/nodes/DocumentView";
 
 export namespace SelectionManager {
     class Manager {
         @observable
-        SelectedDocuments: Array<CollectionFreeFormDocumentView> = [];
+        SelectedDocuments: Array<DocumentView> = [];
 
         @action
-        SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
+        SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
             // if doc is not in SelectedDocuments, add it
             if (!ctrlPressed) {
                 manager.SelectedDocuments = [];
@@ -21,11 +21,11 @@ export namespace SelectionManager {
 
     const manager = new Manager;
 
-    export function SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
+    export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
         manager.SelectDoc(doc, ctrlPressed)
     }
 
-    export function IsSelected(doc: CollectionFreeFormDocumentView): boolean {
+    export function IsSelected(doc: DocumentView): boolean {
         return manager.SelectedDocuments.indexOf(doc) !== -1;
     }
 
@@ -33,7 +33,7 @@ export namespace SelectionManager {
         manager.SelectedDocuments = []
     }
 
-    export function SelectedDocuments(): Array<CollectionFreeFormDocumentView> {
+    export function SelectedDocuments(): Array<DocumentView> {
         return manager.SelectedDocuments;
     }
 }
\ No newline at end of file
diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts
new file mode 100644
index 000000000..3e1039166
--- /dev/null
+++ b/src/client/util/Transform.ts
@@ -0,0 +1,119 @@
+export class Transform {
+    private _translateX: number = 0;
+    private _translateY: number = 0;
+    private _scale: number = 1;
+
+    static get Identity(): Transform {
+        return new Transform(0, 0, 1);
+    }
+
+    get TranslateX(): number { return this._translateX; }
+    get TranslateY(): number { return this._translateY; }
+    get Scale(): number { return this._scale; }
+
+    constructor(x: number, y: number, scale: number) {
+        this._translateX = x;
+        this._translateY = y;
+        this._scale = scale;
+    }
+
+    translate = (x: number, y: number): Transform => {
+        this._translateX += x;
+        this._translateY += y;
+        return this;
+    }
+
+    scale = (scale: number): Transform => {
+        this._scale *= scale;
+        this._translateX *= scale;
+        this._translateY *= scale;
+        return this;
+    }
+
+    scaleAbout = (scale: number, x: number, y: number): Transform => {
+        this._translateX += x * this._scale - x * this._scale * scale;
+        this._translateY += y * this._scale - y * this._scale * scale;
+        this._scale *= scale;
+        return this;
+    }
+
+    transform = (transform: Transform): Transform => {
+        this._translateX = transform._translateX + transform._scale * this._translateX;
+        this._translateY = transform._translateY + transform._scale * this._translateY;
+        this._scale *= transform._scale;
+        return this;
+    }
+
+    preTranslate = (x: number, y: number): Transform => {
+        this._translateX += this._scale * x;
+        this._translateY += this._scale * y;
+        return this;
+    }
+
+    preScale = (scale: number): Transform => {
+        this._scale *= scale;
+        return this;
+    }
+
+    preTransform = (transform: Transform): Transform => {
+        this._translateX += transform._translateX * this._scale;
+        this._translateY += transform._translateY * this._scale;
+        this._scale *= transform._scale;
+        return this;
+    }
+
+    translated = (x: number, y: number): Transform => {
+        return this.copy().translate(x, y);
+    }
+
+    preTranslated = (x: number, y: number): Transform => {
+        return this.copy().preTranslate(x, y);
+    }
+
+    scaled = (scale: number): Transform => {
+        return this.copy().scale(scale);
+    }
+
+    scaledAbout = (scale: number, x: number, y: number): Transform => {
+        return this.copy().scaleAbout(scale, x, y);
+    }
+
+    preScaled = (scale: number): Transform => {
+        return this.copy().preScale(scale);
+    }
+
+    transformed = (transform: Transform): Transform => {
+        return this.copy().transform(transform);
+    }
+
+    preTransformed = (transform: Transform): Transform => {
+        return this.copy().preTransform(transform);
+    }
+
+    transformPoint = (x: number, y: number): [number, number] => {
+        x *= this._scale;
+        x += this._translateX;
+        y *= this._scale;
+        y += this._translateY;
+        return [x, y];
+    }
+
+    transformDirection = (x: number, y: number): [number, number] => {
+        return [x * this._scale, y * this._scale];
+    }
+
+    transformBounds(x: number, y: number, width: number, height: number): { x: number, y: number, width: number, height: number } {
+        [x, y] = this.transformPoint(x, y);
+        [width, height] = this.transformDirection(width, height);
+        return { x, y, width, height };
+    }
+
+    inverse = () => {
+        return new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale)
+    }
+
+    copy = () => {
+        return new Transform(this._translateX, this._translateY, this._scale);
+    }
+
+}
\ No newline at end of file
diff --git a/src/util/TypedEvent.ts b/src/client/util/TypedEvent.ts
index 0714a7f5c..0714a7f5c 100644
--- a/src/util/TypedEvent.ts
+++ b/src/client/util/TypedEvent.ts
diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts
new file mode 100644
index 000000000..46ad558f3
--- /dev/null
+++ b/src/client/util/UndoManager.ts
@@ -0,0 +1,133 @@
+import { observable, action } from "mobx";
+
+function propertyDecorator(target: any, key: string | symbol) {
+    Object.defineProperty(target, key, {
+        configurable: true,
+        enumerable: false,
+        get: function () {
+            return 5;
+        },
+        set: function (value: any) {
+            Object.defineProperty(this, key, {
+                enumerable: false,
+                writable: true,
+                configurable: true,
+                value: function (...args: any[]) {
+                    try {
+                        UndoManager.StartBatch();
+                        return value.apply(this, args);
+                    } finally {
+                        UndoManager.EndBatch();
+                    }
+                }
+            })
+        }
+    })
+}
+export function undoBatch(target: any, key: string | symbol, descriptor?: TypedPropertyDescriptor<any>): any {
+    if (!descriptor) {
+        propertyDecorator(target, key);
+        return;
+    }
+    const oldFunction = descriptor.value;
+
+    descriptor.value = function (...args: any[]) {
+        try {
+            UndoManager.StartBatch()
+            return oldFunction.apply(this, args)
+        } finally {
+            UndoManager.EndBatch()
+        }
+    }
+
+    return descriptor;
+}
+
+export namespace UndoManager {
+    export interface UndoEvent {
+        undo: () => void;
+        redo: () => void;
+    }
+    type UndoBatch = UndoEvent[];
+
+    let undoStack: UndoBatch[] = observable([]);
+    let redoStack: UndoBatch[] = observable([]);
+    let currentBatch: UndoBatch | undefined;
+    let batchCounter = 0;
+    let undoing = false;
+
+    export function AddEvent(event: UndoEvent): void {
+        if (currentBatch && batchCounter && !undoing) {
+            currentBatch.push(event);
+        }
+    }
+
+    export function CanUndo(): boolean {
+        return undoStack.length > 0;
+    }
+
+    export function CanRedo(): boolean {
+        return redoStack.length > 0;
+    }
+
+    export function StartBatch(): void {
+        batchCounter++;
+        if (batchCounter > 0) {
+            currentBatch = [];
+        }
+    }
+
+    export const EndBatch = action(() => {
+        batchCounter--;
+        if (batchCounter === 0 && currentBatch && currentBatch.length) {
+            undoStack.push(currentBatch);
+            redoStack.length = 0;
+            currentBatch = undefined;
+        }
+    })
+
+    export function RunInBatch(fn: () => void) {
+        StartBatch();
+        fn();
+        EndBatch();
+    }
+
+    export const Undo = action(() => {
+        if (undoStack.length === 0) {
+            return;
+        }
+
+        let commands = undoStack.pop();
+        if (!commands) {
+            return;
+        }
+
+        undoing = true;
+        for (let i = commands.length - 1; i >= 0; i--) {
+            commands[i].undo();
+        }
+        undoing = false;
+
+        redoStack.push(commands);
+    })
+
+    export const Redo = action(() => {
+        if (redoStack.length === 0) {
+            return;
+        }
+
+        let commands = redoStack.pop();
+        if (!commands) {
+            return;
+        }
+
+        undoing = true;
+        for (let i = 0; i < commands.length; i++) {
+            commands[i].redo();
+        }
+        undoing = false;
+
+        undoStack.push(commands);
+    })
+
+}
\ No newline at end of file
diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d
new file mode 100644
index 000000000..679f73f42
--- /dev/null
+++ b/src/client/util/type_decls.d
@@ -0,0 +1,215 @@
+//@ts-ignore
+declare type PropertyKey = string | number | symbol;
+interface Array<T> {
+    length: number;
+    toString(): string;
+    toLocaleString(): string;
+    pop(): T | undefined;
+    push(...items: T[]): number;
+    concat(...items: ConcatArray<T>[]): T[];
+    concat(...items: (T | ConcatArray<T>)[]): T[];
+    join(separator?: string): string;
+    reverse(): T[];
+    shift(): T | undefined;
+    slice(start?: number, end?: number): T[];
+    sort(compareFn?: (a: T, b: T) => number): this;
+    splice(start: number, deleteCount?: number): T[];
+    splice(start: number, deleteCount: number, ...items: T[]): T[];
+    unshift(...items: T[]): number;
+    indexOf(searchElement: T, fromIndex?: number): number;
+    lastIndexOf(searchElement: T, fromIndex?: number): number;
+    every(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;
+    some(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;
+    forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
+    map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
+    filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
+    filter(callbackfn: (value: T, index: number, array: T[]) => any, thisArg?: any): T[];
+    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
+    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
+    reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
+    reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
+    reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
+    reduceRight<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
+
+    [n: number]: T;
+}
+
+interface Function {
+    apply(this: Function, thisArg: any, argArray?: any): any;
+    call(this: Function, thisArg: any, ...argArray: any[]): any;
+    bind(this: Function, thisArg: any, ...argArray: any[]): any;
+    toString(): string;
+
+    prototype: any;
+    readonly length: number;
+
+    // Non-standard extensions
+    arguments: any;
+    caller: Function;
+}
+interface Boolean {
+    valueOf(): boolean;
+}
+interface Number {
+    toString(radix?: number): string;
+    toFixed(fractionDigits?: number): string;
+    toExponential(fractionDigits?: number): string;
+    toPrecision(precision?: number): string;
+    valueOf(): number;
+}
+interface IArguments {
+    [index: number]: any;
+    length: number;
+    callee: Function;
+}
+interface RegExp {
+    readonly flags: string;
+    readonly sticky: boolean;
+    readonly unicode: boolean;
+}
+interface String {
+    codePointAt(pos: number): number | undefined;
+    includes(searchString: string, position?: number): boolean;
+    endsWith(searchString: string, endPosition?: number): boolean;
+    normalize(form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
+    normalize(form?: string): string;
+    repeat(count: number): string;
+    startsWith(searchString: string, position?: number): boolean;
+    anchor(name: string): string;
+    big(): string;
+    blink(): string;
+    bold(): string;
+    fixed(): string;
+    fontcolor(color: string): string;
+    fontsize(size: number): string;
+    fontsize(size: string): string;
+    italics(): string;
+    link(url: string): string;
+    small(): string;
+    strike(): string;
+    sub(): string;
+    sup(): string;
+}
+interface Object {
+    constructor: Function;
+    toString(): string;
+    toLocaleString(): string;
+    valueOf(): Object;
+    hasOwnProperty(v: PropertyKey): boolean;
+    isPrototypeOf(v: Object): boolean;
+    propertyIsEnumerable(v: PropertyKey): boolean;
+}
+interface ConcatArray<T> {
+    readonly length: number;
+    readonly [n: number]: T;
+    join(separator?: string): string;
+    slice(start?: number, end?: number): T[];
+}
+interface URL {
+    hash: string;
+    host: string;
+    hostname: string;
+    href: string;
+    readonly origin: string;
+    password: string;
+    pathname: string;
+    port: string;
+    protocol: string;
+    search: string;
+    username: string;
+    toJSON(): string;
+}
+
+declare type FieldId = string;
+
+declare abstract class Field {
+    Id: FieldId;
+    abstract ToScriptString(): string;
+    abstract TrySetValue(value: any): boolean;
+    abstract GetValue(): any;
+    abstract Copy(): Field;
+}
+
+declare abstract class BasicField<T> extends Field {
+    constructor(data: T);
+    Data: T;
+    TrySetValue(value: any): boolean;
+    GetValue(): any;
+}
+
+declare class TextField extends BasicField<string>{
+    constructor();
+    constructor(data: string);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class ImageField extends BasicField<URL>{
+    constructor();
+    constructor(data: URL);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class HtmlField extends BasicField<string>{
+    constructor();
+    constructor(data: string);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class NumberField extends BasicField<number>{
+    constructor();
+    constructor(data: number);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class WebField extends BasicField<URL>{
+    constructor();
+    constructor(data: URL);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class ListField<T> extends BasicField<T[]>{
+    constructor();
+    constructor(data: T[]);
+    ToScriptString(): string;
+    Copy(): Field;
+}
+declare class Key extends Field {
+    Name: string;
+    TrySetValue(value: any): boolean;
+    GetValue(): any;
+    Copy(): Field;
+    ToScriptString(): string;
+}
+declare type FIELD_WAITING = "<Waiting>";
+declare type Opt<T> = T | undefined;
+declare type FieldValue<T> = Opt<T> | FIELD_WAITING;
+// @ts-ignore
+declare class Document extends Field {
+    TrySetValue(value: any): boolean;
+    GetValue(): any;
+    Copy(): Field;
+    ToScriptString(): string;
+
+    Width(): number;
+    Height(): number;
+    Scale(): number;
+    Title: string;
+
+    Get(key: Key): FieldValue<Field>;
+    GetAsync(key: Key, callback: (field: Field) => void): boolean;
+    GetOrCreateAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: T) => void): void;
+    GetT<T extends Field>(key: Key, ctor: { new(): T }): FieldValue<T>;
+    GetOrCreate<T extends Field>(key: Key, ctor: { new(): T }): T;
+    GetData<T, U extends Field & { Data: T }>(key: Key, ctor: { new(): U }, defaultVal: T): T;
+    GetHtml(key: Key, defaultVal: string): string;
+    GetNumber(key: Key, defaultVal: number): number;
+    GetText(key: Key, defaultVal: string): string;
+    GetList<T extends Field>(key: Key, defaultVal: T[]): T[];
+    Set(key: Key, field: Field | undefined): void;
+    SetData<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(): U }): void;
+    SetText(key: Key, value: string): void;
+    SetNumber(key: Key, value: number): void;
+    GetPrototype(): FieldValue<Document>;
+    GetAllPrototypes(): Document[];
+    MakeDelegate(): Document;
+}
diff --git a/src/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 234f82eb9..ea40c8e99 100644
--- a/src/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -3,16 +3,16 @@
     display: flex;
     z-index: 1000;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
+    flex-direction: column;
 }
 
 .contextMenu-item {
-    width: 10vw;
-    height: 4vh;
-    background: #DDDDDD;
+    width: auto;
+    height: auto;
+    background: #F0F8FF;
     display: flex;
-    justify-content: center;
+    justify-content: left;
     align-items: center;
-    flex-direction: column;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -20,11 +20,18 @@
     -ms-user-select: none;
     user-select: none;
     transition: all .1s;
+    border-width: .11px;
+    border-style: none;
+    border-color: rgb(187, 186, 186);
+    border-bottom-style: solid;
+    padding: 10px;
+    white-space: nowrap;
+    font-size: 1.5vw;
 }
 
 .contextMenu-item:hover {
     transition: all .1s;
-    background: #AAAAAA
+    background: #B0E0E6;
 }
 
 .contextMenu-description {
diff --git a/src/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 4f26a75d2..fcb934860 100644
--- a/src/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem";
-import { observable } from "mobx";
+import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 import "./ContextMenu.scss"
 
@@ -12,6 +12,8 @@ export class ContextMenu extends React.Component {
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _display: string = "none";
+    @observable private _searchString: string = "";
+
 
     private ref: React.RefObject<HTMLDivElement>;
 
@@ -23,11 +25,13 @@ export class ContextMenu extends React.Component {
         ContextMenu.Instance = this;
     }
 
+    @action
     clearItems() {
         this._items = []
         this._display = "none"
     }
 
+    @action
     addItem(item: ContextMenuProps) {
         if (this._items.indexOf(item) === -1) {
             this._items.push(item);
@@ -38,10 +42,13 @@ export class ContextMenu extends React.Component {
         return this._items;
     }
 
+    @action
     displayMenu(x: number, y: number) {
         this._pageX = x
         this._pageY = y
 
+        this._searchString = "";
+
         this._display = "flex"
     }
 
@@ -59,10 +66,18 @@ export class ContextMenu extends React.Component {
     render() {
         return (
             <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
-                {this._items.map(prop => {
+                <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
+                {this._items.filter(prop => {
+                    return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
+                }).map(prop => {
                     return <ContextMenuItem {...prop} key={prop.description} />
                 })}
             </div>
         )
     }
+
+    @action
+    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._searchString = e.target.value;
+    }
 }
\ No newline at end of file
diff --git a/src/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 8f00f8b3d..4801c1555 100644
--- a/src/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,11 +1,19 @@
 import React = require("react");
-import { ContextMenu } from "./ContextMenu";
 
 export interface ContextMenuProps {
     description: string;
     event: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
+export interface SubmenuProps {
+    description: string;
+    subitems: ContextMenuProps[];
+}
+
+export interface ContextMenuItemProps {
+    type: ContextMenuProps | SubmenuProps
+}
+
 export class ContextMenuItem extends React.Component<ContextMenuProps> {
     render() {
         return (
diff --git a/src/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e8b93a18b..e8b93a18b 100644
--- a/src/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
diff --git a/src/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 1cf875ea5..9fd73a33b 100644
--- a/src/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,16 +1,17 @@
 import { observable, computed } from "mobx";
 import React = require("react");
-import { SelectionManager } from "./util/SelectionManager";
+import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
-import { CollectionFreeFormView } from "./views/collections/CollectionFreeFormView";
+import { KeyStore } from '../../fields/KeyStore'
+import { NumberField } from "../../fields/NumberField";
 
 @observer
 export class DocumentDecorations extends React.Component {
     static Instance: DocumentDecorations
     private _resizer = ""
     private _isPointerDown = false;
-    @observable private _opacity = 1;
+    @observable private _hidden = false;
 
     constructor(props: Readonly<{}>) {
         super(props)
@@ -20,28 +21,24 @@ export class DocumentDecorations extends React.Component {
 
     @computed
     get Bounds(): { x: number, y: number, b: number, r: number } {
-        return SelectionManager.SelectedDocuments().reduce((bounds, element) => {
-            if (element.props.ContainingCollectionView != undefined &&
-                !(element.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
+        return SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
+            if (documentView.props.isTopMost) {
                 return bounds;
             }
-            var spt = element.TransformToScreenPoint(0, 0);
-            var bpt = element.TransformToScreenPoint(element.width, element.height);
+            let transform = (documentView.props.ScreenToLocalTransform().scale(documentView.props.ContentScaling())).inverse();
+            var [sptX, sptY] = transform.transformPoint(0, 0);
+            let [bptX, bptY] = transform.transformPoint(documentView.props.PanelWidth(), documentView.props.PanelHeight());
             return {
-                x: Math.min(spt.ScreenX, bounds.x), y: Math.min(spt.ScreenY, bounds.y),
-                r: Math.max(bpt.ScreenX, bounds.r), b: Math.max(bpt.ScreenY, bounds.b)
+                x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
+                r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
             }
         }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
     }
 
-    @computed
-    get opacity(): number {
-        return this._opacity
-    }
 
-    set opacity(o: number) {
-        this._opacity = Math.min(Math.max(0, o), 1)
-    }
+    @computed
+    public get Hidden() { return this._hidden; }
+    public set Hidden(value: boolean) { this._hidden = value; }
 
     onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
@@ -104,15 +101,29 @@ export class DocumentDecorations extends React.Component {
         }
 
         SelectionManager.SelectedDocuments().forEach(element => {
-            const rect = element.screenRect;
+            const rect = element.screenRect();
             if (rect.width !== 0) {
-                let scale = element.width / rect.width;
-                let actualdW = Math.max(element.width + (dW * scale), 20);
-                let actualdH = Math.max(element.height + (dH * scale), 20);
-                element.x += dX * (actualdW - element.width);
-                element.y += dY * (actualdH - element.height);
-                element.width = actualdW;
-                element.height = actualdH;
+                let doc = element.props.Document;
+                let width = doc.GetNumber(KeyStore.Width, 0);
+                let nwidth = doc.GetNumber(KeyStore.NativeWidth, 0);
+                let nheight = doc.GetNumber(KeyStore.NativeHeight, 0);
+                let height = doc.GetNumber(KeyStore.Height, nwidth ? nheight / nwidth * width : 0);
+                let x = doc.GetOrCreate(KeyStore.X, NumberField);
+                let y = doc.GetOrCreate(KeyStore.Y, NumberField);
+                let scale = width / rect.width;
+                let actualdW = Math.max(width + (dW * scale), 20);
+                let actualdH = Math.max(height + (dH * scale), 20);
+                x.Data += dX * (actualdW - width);
+                y.Data += dY * (actualdH - height);
+                var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0);
+                var nativeHeight = doc.GetNumber(KeyStore.NativeHeight, 0);
+                if (nativeWidth > 0 && nativeHeight > 0) {
+                    if (Math.abs(dW) > Math.abs(dH))
+                        actualdH = nativeHeight / nativeWidth * actualdW;
+                    else actualdW = nativeWidth / nativeHeight * actualdH;
+                }
+                doc.SetNumber(KeyStore.Width, actualdW);
+                doc.SetNumber(KeyStore.Height, actualdH);
             }
         })
     }
@@ -129,13 +140,19 @@ export class DocumentDecorations extends React.Component {
 
     render() {
         var bounds = this.Bounds;
+        if (this.Hidden) {
+            return (null);
+        }
+        if (isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) {
+            console.log("DocumentDecorations: Bounds Error")
+            return (null);
+        }
         return (
             <div id="documentDecorations-container" style={{
                 width: (bounds.r - bounds.x + 40) + "px",
                 height: (bounds.b - bounds.y + 40) + "px",
                 left: bounds.x - 20,
                 top: bounds.y - 20,
-                opacity: this.opacity
             }}>
                 <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
@@ -146,7 +163,6 @@ export class DocumentDecorations extends React.Component {
                 <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-
             </div>
         )
     }
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
new file mode 100644
index 000000000..84b1b91c3
--- /dev/null
+++ b/src/client/views/EditableView.tsx
@@ -0,0 +1,59 @@
+import React = require('react')
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+
+export interface EditableProps {
+    /**
+     * Called to get the initial value for editing
+     *  */
+    GetValue(): string;
+
+    /**
+     * Called to apply changes
+     * @param value - The string entered by the user to set the value to
+     * @returns `true` if setting the value was successful, `false` otherwise
+     *  */
+    SetValue(value: string): boolean;
+
+    /**
+     * The contents to render when not editing
+     */
+    contents: any;
+    height: number
+}
+
+/**
+ * Customizable view that can be given an arbitrary view to render normally,
+ * but can also be edited with customizable functions to get a string version
+ * of the content, and set the value based on the entered string.
+ */
+@observer
+export class EditableView extends React.Component<EditableProps> {
+    @observable
+    editing: boolean = false;
+
+    @action
+    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key == "Enter" && !e.ctrlKey) {
+            if (this.props.SetValue(e.currentTarget.value)) {
+                this.editing = false;
+            }
+        } else if (e.key == "Escape") {
+            this.editing = false;
+        }
+    }
+
+    render() {
+        if (this.editing) {
+            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
+                style={{ display: "inline" }}></input>
+        } else {
+            return (
+                <div className="editableView-container-editing" style={{ display: "inline", height: "100%", maxHeight: `${this.props.height}` }}
+                    onClick={action(() => this.editing = true)}>
+                    {this.props.contents}
+                </div>
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Main.scss b/src/client/views/Main.scss
index e73f62904..4334ed299 100644
--- a/src/Main.scss
+++ b/src/client/views/Main.scss
@@ -28,4 +28,24 @@ h1 {
 p {
     margin: 0px;
     padding: 0px;
-}
\ No newline at end of file
+}
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+    height:5px;
+    width:5px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: rgba(0,0,0,.5);
+}
+
+.main-buttonDiv {
+    position: absolute;
+    width: 150px;
+    left: 0px;
+}
+.main-undoButtons {
+    position: absolute;
+    width: 150px;
+    right: 0px;
+}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
new file mode 100644
index 000000000..d845fa7a3
--- /dev/null
+++ b/src/client/views/Main.tsx
@@ -0,0 +1,101 @@
+import { action, configure } from 'mobx';
+import "normalize.css";
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Document } from '../../fields/Document';
+import { KeyStore } from '../../fields/KeyStore';
+import "./Main.scss";
+import { MessageStore } from '../../server/Message';
+import { Utils } from '../../Utils';
+import { Documents } from '../documents/Documents';
+import { Server } from '../Server';
+import { setupDrag } from '../util/DragManager';
+import { Transform } from '../util/Transform';
+import { UndoManager } from '../util/UndoManager';
+import { CollectionDockingView } from './collections/CollectionDockingView';
+import { ContextMenu } from './ContextMenu';
+import { DocumentDecorations } from './DocumentDecorations';
+import { DocumentView } from './nodes/DocumentView';
+import "./Main.scss";
+
+
+configure({ enforceActions: "observed" });  // causes errors to be generated when modifying an observable outside of an action
+window.addEventListener("drop", (e) => e.preventDefault(), false)
+window.addEventListener("dragover", (e) => e.preventDefault(), false)
+document.addEventListener("pointerdown", action(function (e: PointerEvent) {
+    if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
+        ContextMenu.Instance.clearItems()
+    }
+}), true)
+
+
+const mainDocId = "mainDoc";
+let mainContainer: Document;
+let mainfreeform: Document;
+Documents.initProtos(mainDocId, (res?: Document) => {
+    if (res instanceof Document) {
+        mainContainer = res;
+        mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document);
+    }
+    else {
+        mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId);
+
+        // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
+        setTimeout(() => {
+            mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" });
+
+            var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(mainfreeform)] }] };
+            mainContainer.SetText(KeyStore.Data, JSON.stringify(dockingLayout));
+            mainContainer.Set(KeyStore.ActiveFrame, mainfreeform);
+        }, 0);
+    }
+
+    let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";
+    let weburl = "https://cs.brown.edu/courses/cs166/";
+    let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
+    let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
+    let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
+    let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
+    let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
+    let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
+
+    let addClick = (creator: () => Document) => action(() =>
+        mainfreeform.GetList<Document>(KeyStore.Data, []).push(creator())
+    );
+
+    let imgRef = React.createRef<HTMLDivElement>();
+    let webRef = React.createRef<HTMLDivElement>();
+    let textRef = React.createRef<HTMLDivElement>();
+    let schemaRef = React.createRef<HTMLDivElement>();
+    let colRef = React.createRef<HTMLDivElement>();
+
+    ReactDOM.render((
+        <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+            <DocumentView Document={mainContainer}
+                AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
+                ContentScaling={() => 1}
+                PanelWidth={() => 0}
+                PanelHeight={() => 0}
+                isTopMost={true}
+                SelectOnLoad={false}
+                focus={() => { }}
+                ContainingCollectionView={undefined} />
+            <DocumentDecorations />
+            <ContextMenu />
+            <div className="main-buttonDiv" style={{ bottom: '0px' }} ref={imgRef} >
+                <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '25px' }} ref={webRef} >
+                <button onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>Add Web</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '50px' }} ref={textRef}>
+                <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '75px' }} ref={colRef}>
+                <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '100px' }} ref={schemaRef}>
+                <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '125px' }} >
+                <button onClick={clearDatabase}>Clear Database</button></div>
+            <button className="main-undoButtons" style={{ bottom: '25px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+            <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
+        </div>),
+        document.getElementById('root'));
+})
diff --git a/src/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index db924b57f..2706c3272 100644
--- a/src/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,3 +1,7 @@
+.collectiondockingview-content {
+    height: 100%;
+}
+
 .collectiondockingview-container {
     position: relative;
     top: 0;
@@ -126,7 +130,7 @@
     }
     .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
     .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
-        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
     .flexlayout__tab_button_overflow {
         float: left;
@@ -138,7 +142,7 @@
         font-size: 10px;
         color: lightgray;
         font-family: Arial, sans-serif;
-        background: transparent url("../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
     }
     .flexlayout__tabset_header {
         position: absolute;
@@ -186,14 +190,14 @@
         height: 20px;
         border: none;
         outline-width: 0;
-        background: transparent url("../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
     }
     .flexlayout__tab_toolbar_button-max {
         width: 20px;
         height: 20px;
         border: none;
         outline-width: 0;
-        background: transparent url("../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
     }
     .flexlayout__popup_menu {}
     .flexlayout__popup_menu_item {
@@ -295,7 +299,7 @@
     }
     .flexlayout__border_button:hover .flexlayout__border_button_trailing,
     .flexlayout__border_button--selected .flexlayout__border_button_trailing {
-        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
     .flexlayout__border_toolbar_left {
         position: absolute;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
new file mode 100644
index 000000000..c51fba908
--- /dev/null
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -0,0 +1,280 @@
+import * as GoldenLayout from "golden-layout";
+import 'golden-layout/src/css/goldenlayout-base.css';
+import 'golden-layout/src/css/goldenlayout-dark-theme.css';
+import { action, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
+import * as ReactDOM from 'react-dom';
+import { Document } from "../../../fields/Document";
+import { KeyStore } from "../../../fields/KeyStore";
+import Measure from "react-measure";
+import { FieldId, Opt, Field } from "../../../fields/Field";
+import { Utils } from "../../../Utils";
+import { Server } from "../../Server";
+import { undoBatch } from "../../util/UndoManager";
+import { DocumentView } from "../nodes/DocumentView";
+import "./CollectionDockingView.scss";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+import React = require("react");
+import { SubCollectionViewProps } from "./CollectionViewBase";
+
+@observer
+export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
+    public static Instance: CollectionDockingView;
+    public static makeDocumentConfig(document: Document) {
+        return {
+            type: 'react-component',
+            component: 'DocumentFrameRenderer',
+            title: document.Title,
+            props: {
+                documentId: document.Id,
+                //collectionDockingView: CollectionDockingView.Instance
+            }
+        }
+    }
+
+    private _goldenLayout: any = null;
+    private _containerRef = React.createRef<HTMLDivElement>();
+    private _fullScreen: any = null;
+
+    constructor(props: SubCollectionViewProps) {
+        super(props);
+        CollectionDockingView.Instance = this;
+        (window as any).React = React;
+        (window as any).ReactDOM = ReactDOM;
+    }
+    public StartOtherDrag(dragDoc: Document, e: any) {
+        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: e.button })
+    }
+
+    @action
+    public OpenFullScreen(document: Document) {
+        let newItemStackConfig = {
+            type: 'stack',
+            content: [CollectionDockingView.makeDocumentConfig(document)]
+        }
+        var docconfig = this._goldenLayout.root.layoutManager.createContentItem(newItemStackConfig, this._goldenLayout);
+        this._goldenLayout.root.contentItems[0].addChild(docconfig);
+        docconfig.callDownwards('_$init');
+        this._goldenLayout._$maximiseItem(docconfig);
+        this._fullScreen = docconfig;
+        this.stateChanged();
+    }
+    @action
+    public CloseFullScreen() {
+        if (this._fullScreen) {
+            this._goldenLayout._$minimiseItem(this._fullScreen);
+            this._goldenLayout.root.contentItems[0].removeChild(this._fullScreen);
+            this._fullScreen = null;
+            this.stateChanged();
+        }
+    }
+
+    //
+    //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
+    //
+    @action
+    public AddRightSplit(document: Document, minimize: boolean = false) {
+        this._goldenLayout.emit('stateChanged');
+        let newItemStackConfig = {
+            type: 'stack',
+            content: [CollectionDockingView.makeDocumentConfig(document)]
+        }
+
+        var newContentItem = this._goldenLayout.root.layoutManager.createContentItem(newItemStackConfig, this._goldenLayout);
+
+        if (this._goldenLayout.root.contentItems[0].isRow) {
+            this._goldenLayout.root.contentItems[0].addChild(newContentItem);
+        }
+        else {
+            var collayout = this._goldenLayout.root.contentItems[0];
+            var newRow = collayout.layoutManager.createContentItem({ type: "row" }, this._goldenLayout);
+            collayout.parent.replaceChild(collayout, newRow);
+
+            newRow.addChild(newContentItem, undefined, true);
+            newRow.addChild(collayout, 0, true);
+
+            collayout.config["width"] = 50;
+            newContentItem.config["width"] = 50;
+        }
+        if (minimize) {
+            newContentItem.config["width"] = 10;
+            newContentItem.config["height"] = 10;
+        }
+        newContentItem.callDownwards('_$init');
+        this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
+        this._goldenLayout.emit('stateChanged');
+        this.stateChanged();
+        return newContentItem;
+    }
+
+    setupGoldenLayout() {
+        var config = this.props.Document.GetText(KeyStore.Data, "");
+        if (config) {
+            if (!this._goldenLayout) {
+                this._goldenLayout = new GoldenLayout(JSON.parse(config));
+            }
+            else {
+                if (config == JSON.stringify(this._goldenLayout.toConfig()))
+                    return;
+                try {
+                    this._goldenLayout.unbind('itemDropped', this.itemDropped);
+                    this._goldenLayout.unbind('tabCreated', this.tabCreated);
+                    this._goldenLayout.unbind('stackCreated', this.stackCreated);
+                } catch (e) { }
+                this._goldenLayout.destroy();
+                this._goldenLayout = new GoldenLayout(JSON.parse(config));
+            }
+            this._goldenLayout.on('itemDropped', this.itemDropped);
+            this._goldenLayout.on('tabCreated', this.tabCreated);
+            this._goldenLayout.on('stackCreated', this.stackCreated);
+            this._goldenLayout.registerComponent('DocumentFrameRenderer', DockedFrameRenderer);
+            this._goldenLayout.container = this._containerRef.current;
+            if (this._goldenLayout.config.maximisedItemId === '__glMaximised') {
+                try {
+                    this._goldenLayout.config.root.getItemsById(this._goldenLayout.config.maximisedItemId)[0].toggleMaximise();
+                } catch (e) {
+                    this._goldenLayout.config.maximisedItemId = null;
+                }
+            }
+            this._goldenLayout.init();
+        }
+    }
+    componentDidMount: () => void = () => {
+        if (this._containerRef.current) {
+            reaction(
+                () => this.props.Document.GetText(KeyStore.Data, ""),
+                () => this.setupGoldenLayout(), { fireImmediately: true });
+
+            window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
+        }
+    }
+    componentWillUnmount: () => void = () => {
+        this._goldenLayout.unbind('itemDropped', this.itemDropped);
+        this._goldenLayout.unbind('tabCreated', this.tabCreated);
+        this._goldenLayout.unbind('stackCreated', this.stackCreated);
+        this._goldenLayout.destroy();
+        this._goldenLayout = null;
+        window.removeEventListener('resize', this.onResize);
+    }
+    @action
+    onResize = (event: any) => {
+        var cur = this._containerRef.current;
+
+        // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed
+        this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
+    }
+
+    _flush: boolean = false;
+    @action
+    onPointerUp = (e: React.PointerEvent): void => {
+        if (this._flush) {
+            this._flush = false;
+            setTimeout(() => this.stateChanged(), 10);
+        }
+    }
+    @action
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (e.button === 2 && this.props.active()) {
+            e.stopPropagation();
+            e.preventDefault();
+        } else {
+            var className = (e.target as any).className;
+            if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") {
+                this._flush = true;
+            }
+            if (e.buttons === 1 && this.props.active()) {
+                e.stopPropagation();
+            }
+        }
+    }
+
+    @undoBatch
+    stateChanged = () => {
+        var json = JSON.stringify(this._goldenLayout.toConfig());
+        this.props.Document.SetText(KeyStore.Data, json)
+    }
+
+    itemDropped = () => {
+        this.stateChanged();
+    }
+    tabCreated = (tab: any) => {
+        tab.closeElement.off('click') //unbind the current click handler
+            .click(function () {
+                tab.contentItem.remove();
+            });
+    }
+
+    stackCreated = (stack: any) => {
+        //stack.header.controlsContainer.find('.lm_popout').hide();
+        stack.header.controlsContainer.find('.lm_close') //get the close icon
+            .off('click') //unbind the current click handler
+            .click(action(function () {
+                //if (confirm('really close this?')) {
+                stack.remove();
+                //}
+            }));
+    }
+
+    render() {
+        return (
+            <div className="collectiondockingview-container" id="menuContainer"
+                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} ref={this._containerRef}
+                style={{
+                    width: "100%",
+                    height: "100%",
+                    borderStyle: "solid",
+                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+                }} />
+        );
+    }
+}
+
+interface DockedFrameProps {
+    documentId: FieldId,
+    //collectionDockingView: CollectionDockingView
+}
+@observer
+export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
+
+    private _mainCont = React.createRef<HTMLDivElement>();
+    @observable private _panelWidth = 0;
+    @observable private _panelHeight = 0;
+    @observable private _document: Opt<Document>;
+
+    constructor(props: any) {
+        super(props);
+        Server.GetField(this.props.documentId, action((f: Opt<Field>) => this._document = f as Document));
+    }
+
+    private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); }
+    private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); }
+    private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); }
+
+    ScreenToLocalTransform = () => {
+        let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!);
+        return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling())
+    }
+
+    render() {
+        if (!this._document)
+            return (null);
+        var content =
+            <div className="collectionDockingView-content" ref={this._mainCont}>
+                <DocumentView key={this._document.Id} Document={this._document}
+                    AddDocument={undefined}
+                    RemoveDocument={undefined}
+                    ContentScaling={this._contentScaling}
+                    PanelWidth={this._nativeWidth}
+                    PanelHeight={this._nativeHeight}
+                    ScreenToLocalTransform={this.ScreenToLocalTransform}
+                    isTopMost={true}
+                    SelectOnLoad={false}
+                    focus={(doc: Document) => { }}
+                    ContainingCollectionView={undefined} />
+            </div>
+
+        return <Measure onResize={action((r: any) => { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}>
+            {({ measureRef }) => <div ref={measureRef}>  {content} </div>}
+        </Measure>
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
new file mode 100644
index 000000000..f432e8cc3
--- /dev/null
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -0,0 +1,41 @@
+.collectionfreeformview-container {
+
+    .collectionfreeformview > .jsx-parser{
+        position:absolute;
+        height: 100%;
+    }
+        
+    border-style: solid;
+    box-sizing: border-box;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    .collectionfreeformview {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width:100%;
+        height: 100%
+    }
+}
+
+.border {
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+}
+
+//this is an animation for the blinking cursor!
+@keyframes blink {
+	0% {opacity: 0}
+	49%{opacity: 0}
+	50% {opacity: 1}
+}
+
+#prevCursor {
+    animation: blink 1s infinite;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
new file mode 100644
index 000000000..f71f2791c
--- /dev/null
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -0,0 +1,312 @@
+import { observable, action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { FieldWaiting } from "../../../fields/Field";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import { TextField } from "../../../fields/TextField";
+import { DragManager } from "../../util/DragManager";
+import { Transform } from "../../util/Transform";
+import { undoBatch } from "../../util/UndoManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionView } from "../collections/CollectionView";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { DocumentView } from "../nodes/DocumentView";
+import { FormattedTextBox } from "../nodes/FormattedTextBox";
+import { ImageBox } from "../nodes/ImageBox";
+import { WebBox } from "../nodes/WebBox";
+import { KeyValueBox } from "../nodes/KeyValueBox"
+import "./CollectionFreeFormView.scss";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+import { CollectionViewBase } from "./CollectionViewBase";
+import { Documents } from "../../documents/Documents";
+import React = require("react");
+const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
+
+@observer
+export class CollectionFreeFormView extends CollectionViewBase {
+    private _canvasRef = React.createRef<HTMLDivElement>();
+    private _lastX: number = 0;
+    private _lastY: number = 0;
+    private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type)
+
+    @observable
+    private _downX: number = 0;
+    @observable
+    private _downY: number = 0;
+
+    //determines whether the blinking cursor for indicating whether a text will be made on key down is visible
+    @observable
+    private _previewCursorVisible: boolean = false;
+
+    @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
+    @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
+    @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+    @computed get isAnnotationOverlay() { return this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's?
+    @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+    @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
+    @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+    @computed get centeringShiftX() { return !this.props.Document.GetNumber(KeyStore.NativeWidth, 0) ? this.props.panelWidth() / 2 : 0; }  // shift so pan position is at center of window for non-overlay collections
+    @computed get centeringShiftY() { return !this.props.Document.GetNumber(KeyStore.NativeHeight, 0) ? this.props.panelHeight() / 2 : 0; }// shift so pan position is at center of window for non-overlay collections
+
+    @undoBatch
+    @action
+    drop = (e: Event, de: DragManager.DropEvent) => {
+        super.drop(e, de);
+        const docView: DocumentView = de.data["documentView"];
+        let doc: Document = docView ? docView.props.Document : de.data["document"];
+        let screenX = de.x - (de.data["xOffset"] as number || 0);
+        let screenY = de.y - (de.data["yOffset"] as number || 0);
+        const [x, y] = this.getTransform().transformPoint(screenX, screenY);
+        doc.SetNumber(KeyStore.X, x);
+        doc.SetNumber(KeyStore.Y, y);
+        this.bringToFront(doc);
+    }
+
+    @action
+    onPointerDown = (e: React.PointerEvent): void => {
+        if ((e.button === 2 && this.props.active()) ||
+            !e.defaultPrevented) {
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointerup", this.onPointerUp);
+            this._lastX = e.pageX;
+            this._lastY = e.pageY;
+            this._downX = e.pageX;
+            this._downY = e.pageY;
+        }
+    }
+
+    @action
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        e.stopPropagation();
+        if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+            //show preview text cursor on tap
+            this._previewCursorVisible = true;
+            //select is not already selected
+            if (!this.props.isSelected()) {
+                this.props.select(false);
+            }
+        }
+
+    }
+
+    @action
+    onPointerMove = (e: PointerEvent): void => {
+        if (!e.cancelBubble && this.props.active()) {
+            e.stopPropagation();
+            let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
+            let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
+            let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+            this._previewCursorVisible = false;
+            this.SetPan(x - dx, y - dy);
+        }
+        this._lastX = e.pageX;
+        this._lastY = e.pageY;
+    }
+
+    @action
+    onPointerWheel = (e: React.WheelEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        let coefficient = 1000;
+
+        if (e.ctrlKey) {
+            var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+            var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+            const coefficient = 1000;
+            let deltaScale = (1 - (e.deltaY / coefficient));
+            this.props.Document.SetNumber(KeyStore.NativeWidth, nativeWidth * deltaScale);
+            this.props.Document.SetNumber(KeyStore.NativeHeight, nativeHeight * deltaScale);
+            e.stopPropagation();
+            e.preventDefault();
+        } else {
+            // if (modes[e.deltaMode] == 'pixels') coefficient = 50;
+            // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
+            let transform = this.getTransform();
+
+            let deltaScale = (1 - (e.deltaY / coefficient));
+            if (deltaScale * this.zoomScaling < 1 && this.isAnnotationOverlay)
+                deltaScale = 1 / this.zoomScaling;
+            let [x, y] = transform.transformPoint(e.clientX, e.clientY);
+
+            let localTransform = this.getLocalTransform()
+            localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
+            console.log(localTransform)
+
+            this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale);
+            this.SetPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale);
+        }
+    }
+
+    @action
+    private SetPan(panX: number, panY: number) {
+        const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX));
+        const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY));
+        this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
+        this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
+    }
+
+    @action
+    onDrop = (e: React.DragEvent): void => {
+        var pt = this.getTransform().transformPoint(e.pageX, e.pageY);
+        super.onDrop(e, { x: pt[0], y: pt[1] });
+    }
+
+    onDragOver = (): void => {
+    }
+
+    @action
+    onKeyDown = (e: React.KeyboardEvent<Element>) => {
+        //if not these keys, make a textbox if preview cursor is active!
+        if (!e.ctrlKey && !e.altKey) {
+            if (this._previewCursorVisible) {
+                //make textbox and add it to this collection
+                let [x, y] = this.getTransform().transformPoint(this._downX, this._downY); (this._downX, this._downY);
+                let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
+                // mark this collection so that when the text box is created we can send it the SelectOnLoad prop to focus itself
+                this._selectOnLoaded = newBox.Id;
+                //set text to be the typed key and get focus on text box
+                this.props.CollectionView.addDocument(newBox);
+                //remove cursor from screen
+                this._previewCursorVisible = false;
+            }
+        }
+    }
+
+    @action
+    bringToFront(doc: Document) {
+        const { fieldKey: fieldKey, Document: Document } = this.props;
+
+        const value: Document[] = Document.GetList<Document>(fieldKey, []).slice();
+        value.sort((doc1, doc2) => {
+            if (doc1 === doc) {
+                return 1;
+            }
+            if (doc2 === doc) {
+                return -1;
+            }
+            return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0);
+        }).map((doc, index) => {
+            doc.SetNumber(KeyStore.ZIndex, index + 1)
+        });
+    }
+
+    @computed get backgroundLayout(): string | undefined {
+        let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
+        if (field && field !== "<Waiting>") {
+            return field.Data;
+        }
+    }
+    @computed get overlayLayout(): string | undefined {
+        let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField);
+        if (field && field !== "<Waiting>") {
+            return field.Data;
+        }
+    }
+
+    focusDocument = (doc: Document) => {
+        let x = doc.GetNumber(KeyStore.X, 0) + doc.GetNumber(KeyStore.Width, 0) / 2;
+        let y = doc.GetNumber(KeyStore.Y, 0) + doc.GetNumber(KeyStore.Height, 0) / 2;
+        this.SetPan(x, y);
+        this.props.focus(this.props.Document);
+    }
+
+
+    @computed
+    get views() {
+        const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
+        if (lvalue && lvalue != FieldWaiting) {
+            return lvalue.Data.map(doc => {
+                return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
+                    AddDocument={this.props.addDocument}
+                    RemoveDocument={this.props.removeDocument}
+                    ScreenToLocalTransform={this.getTransform}
+                    isTopMost={false}
+                    SelectOnLoad={doc.Id === this._selectOnLoaded}
+                    ContentScaling={this.noScaling}
+                    PanelWidth={doc.Width}
+                    PanelHeight={doc.Height}
+                    ContainingCollectionView={this.props.CollectionView}
+                    focus={this.focusDocument}
+                />);
+            })
+        }
+        return null;
+    }
+
+    @computed
+    get backgroundView() {
+        return !this.backgroundLayout ? (null) :
+            (<JsxParser
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+                bindings={this.props.bindings}
+                jsx={this.backgroundLayout}
+                showWarnings={true}
+                onError={(test: any) => console.log(test)}
+            />);
+    }
+    @computed
+    get overlayView() {
+        return !this.overlayLayout ? (null) :
+            (<JsxParser
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+                bindings={this.props.bindings}
+                jsx={this.overlayLayout}
+                showWarnings={true}
+                onError={(test: any) => console.log(test)}
+            />);
+    }
+
+    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform())
+    getLocalTransform = (): Transform => Transform.Identity.scale(1 / this.scale).translate(this.panX, this.panY);
+    noScaling = () => 1;
+
+    //when focus is lost, this will remove the preview cursor
+    @action
+    onBlur = (e: React.FocusEvent<HTMLDivElement>): void => {
+        this._previewCursorVisible = false;
+    }
+
+    render() {
+
+        //determines whether preview text cursor should be visible (ie when user taps this collection it should)
+        let cursor = null;
+        if (this._previewCursorVisible) {
+            //get local position and place cursor there!
+            let [x, y] = this.getTransform().transformPoint(this._downX, this._downY);
+            cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div>
+        }
+
+        let [dx, dy] = [this.centeringShiftX, this.centeringShiftY];
+
+        const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
+        const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
+
+        return (
+            <div className="collectionfreeformview-container"
+                onPointerDown={this.onPointerDown}
+                onKeyPress={this.onKeyDown}
+                onWheel={this.onPointerWheel}
+                onDrop={this.onDrop.bind(this)}
+                onDragOver={this.onDragOver}
+                onBlur={this.onBlur}
+                style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
+                tabIndex={0}
+                ref={this.createDropTarget}>
+                <div className="collectionfreeformview"
+                    style={{ transformOrigin: "left top", transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}
+                    ref={this._canvasRef}>
+                    {this.backgroundView}
+                    {cursor}
+                    {this.views}
+                </div>
+                {this.overlayView}
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
new file mode 100644
index 000000000..d40e6d314
--- /dev/null
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -0,0 +1,207 @@
+
+
+.collectionSchemaView-container {
+    border-style: solid;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    .collectionSchemaView-previewRegion {
+        position: relative; 
+        background: black; 
+        float: left; 
+        height: 100%;
+    }
+    .collectionSchemaView-previewHandle {
+        position: absolute;
+        height: 37px;
+        width: 20px; 
+        z-index: 20; 
+        right: 0; 
+        top: 0; 
+        background: Black ;
+    }
+    .collectionSchemaView-dividerDragger{
+        position: relative; 
+        background: black; 
+        float: left; 
+        height: 100%;
+    }
+    .collectionSchemaView-tableContainer {
+        position: relative;
+        float: left;
+        height: 100%; 
+    }
+
+    .ReactTable {
+        position: absolute;
+       // display: inline-block;
+       // overflow: auto;
+        width: 100%;
+        height: 100%;
+        background: white;
+        box-sizing: border-box;
+        .rt-table {
+            overflow-y: auto;
+            overflow-x: auto;
+            height: 100%;
+
+            display: -webkit-inline-box;
+            direction: ltr;
+            // direction:rtl;
+            // display:block;
+        }
+        .rt-tbody {
+            //direction: ltr;
+            direction: rtl;
+        }
+        .rt-tr-group {
+            direction: ltr;
+            max-height: 44px;
+        }
+        .rt-td {
+            border-width: 1;
+            border-right-color: #aaa;
+            .imageBox-cont {
+                position:relative;
+                max-height:100%;
+            }
+            .imageBox-cont img {
+                object-fit: contain;
+                max-width: 100%;
+                height: 100%
+            }
+        }
+        .rt-tr-group {
+            border-width: 1;
+            border-bottom-color: #aaa
+        }
+    }
+    .ReactTable .rt-thead.-header {
+            background:grey;
+        }
+    .ReactTable .rt-th, .ReactTable .rt-td {
+        max-height: 44;
+        padding: 3px 7px;
+    }
+    .ReactTable .rt-tbody .rt-tr-group:last-child {
+        border-bottom: grey;
+        border-bottom-style: solid;
+        border-bottom-width: 1;
+    }
+    .documentView-node:first-child {
+        background: grey;
+        .imageBox-cont img {
+            object-fit: contain;
+        }
+    }
+}
+
+.Resizer {
+    box-sizing: border-box;
+    background: #000;
+    opacity: 0.5;
+    z-index: 1;
+    background-clip: padding-box;
+    &.horizontal {
+        height: 11px;
+        margin: -5px 0;
+        border-top: 5px solid rgba(255, 255, 255, 0);
+        border-bottom: 5px solid rgba(255, 255, 255, 0);
+        cursor: row-resize;
+        width: 100%;
+        &:hover {
+            border-top: 5px solid rgba(0, 0, 0, 0.5);
+            border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+        }
+    }
+    &.vertical {
+        width: 11px;
+        margin: 0 -5px;
+        border-left: 5px solid rgba(255, 255, 255, 0);
+        border-right: 5px solid rgba(255, 255, 255, 0);
+        cursor: col-resize;
+        &:hover {
+            border-left: 5px solid rgba(0, 0, 0, 0.5);
+            border-right: 5px solid rgba(0, 0, 0, 0.5);
+        }
+    }
+    &:hover {
+        -webkit-transition: all 2s ease;
+        transition: all 2s ease;
+    }
+}
+
+.vertical {
+    section {
+        width: 100vh;
+        height: 100vh;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+    }
+    header {
+        padding: 1rem;
+        background: #eee;
+    }
+    footer {
+        padding: 1rem;
+        background: #eee;
+    }
+}
+
+.horizontal {
+    section {
+        width: 100vh;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+    }
+    header {
+        padding: 1rem;
+        background: #eee;
+    }
+    footer {
+        padding: 1rem;
+        background: #eee;
+    }
+}
+
+.parent {
+    width: 100%;
+    height: 100%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+
+.header {
+    background: #aaa;
+    height: 3rem;
+    line-height: 3rem;
+}
+
+.wrapper {
+    background: #ffa;
+    margin: 5rem;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
new file mode 100644
index 000000000..49f95c014
--- /dev/null
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -0,0 +1,244 @@
+import React = require("react")
+import { action, observable } from "mobx";
+import { observer } from "mobx-react";
+import Measure from "react-measure";
+import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
+import "react-table/react-table.css";
+import { Document } from "../../../fields/Document";
+import { Field } from "../../../fields/Field";
+import { KeyStore } from "../../../fields/KeyStore";
+import { CompileScript, ToField } from "../../util/Scripting";
+import { Transform } from "../../util/Transform";
+import { ContextMenu } from "../ContextMenu";
+import { EditableView } from "../EditableView";
+import { DocumentView } from "../nodes/DocumentView";
+import { FieldView, FieldViewProps } from "../nodes/FieldView";
+import "./CollectionSchemaView.scss";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+import { CollectionViewBase } from "./CollectionViewBase";
+import { setupDrag } from "../../util/DragManager";
+
+// bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
+
+
+@observer
+export class CollectionSchemaView extends CollectionViewBase {
+    private _mainCont = React.createRef<HTMLDivElement>();
+    private DIVIDER_WIDTH = 5;
+
+    @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView
+    @observable _dividerX = 0;
+    @observable _panelWidth = 0;
+    @observable _panelHeight = 0;
+    @observable _selectedIndex = 0;
+    @observable _splitPercentage: number = 50;
+
+    renderCell = (rowProps: CellInfo) => {
+        let props: FieldViewProps = {
+            doc: rowProps.value[0],
+            fieldKey: rowProps.value[1],
+            isSelected: () => false,
+            select: () => { },
+            isTopMost: false,
+            bindings: {},
+            selectOnLoad: false,
+        }
+        let contents = (
+            <FieldView {...props} />
+        )
+        let reference = React.createRef<HTMLDivElement>();
+        let onItemDown = setupDrag(reference, () => props.doc);
+        return (
+            <div onPointerDown={onItemDown} key={props.doc.Id} ref={reference}>
+                <EditableView contents={contents}
+                    height={36} GetValue={() => {
+                        let field = props.doc.Get(props.fieldKey);
+                        if (field && field instanceof Field) {
+                            return field.ToScriptString();
+                        }
+                        return field || "";
+                    }}
+                    SetValue={(value: string) => {
+                        let script = CompileScript(value, undefined, true);
+                        if (!script.compiled) {
+                            return false;
+                        }
+                        let field = script();
+                        if (field instanceof Field) {
+                            props.doc.Set(props.fieldKey, field);
+                            return true;
+                        } else {
+                            let dataField = ToField(field);
+                            if (dataField) {
+                                props.doc.Set(props.fieldKey, dataField);
+                                return true;
+                            }
+                        }
+                        return false;
+                    }}>
+                </EditableView>
+            </div>
+        )
+    }
+
+    private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
+        const that = this;
+        if (!rowInfo) {
+            return {};
+        }
+        return {
+            onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
+                that._selectedIndex = rowInfo.index;
+                this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize
+
+                if (handleOriginal) {
+                    handleOriginal()
+                }
+            }),
+            style: {
+                background: rowInfo.index == this._selectedIndex ? "lightGray" : "white",
+                //color: rowInfo.index == this._selectedIndex ? "white" : "black"
+            }
+        };
+    }
+
+    _startSplitPercent = 0;
+    @action
+    onDividerMove = (e: PointerEvent): void => {
+        let nativeWidth = this._mainCont.current!.getBoundingClientRect();
+        this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100);
+    }
+    @action
+    onDividerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onDividerMove);
+        document.removeEventListener('pointerup', this.onDividerUp);
+        if (this._startSplitPercent == this._splitPercentage) {
+            this._splitPercentage = this._splitPercentage == 1 ? 66 : 100;
+        }
+    }
+    onDividerDown = (e: React.PointerEvent) => {
+        this._startSplitPercent = this._splitPercentage;
+        e.stopPropagation();
+        e.preventDefault();
+        document.addEventListener("pointermove", this.onDividerMove);
+        document.addEventListener('pointerup', this.onDividerUp);
+    }
+    @action
+    onExpanderMove = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    @action
+    onExpanderUp = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        document.removeEventListener("pointermove", this.onExpanderMove);
+        document.removeEventListener('pointerup', this.onExpanderUp);
+        if (this._startSplitPercent == this._splitPercentage) {
+            this._splitPercentage = this._splitPercentage == 100 ? 66 : 100;
+        }
+    }
+    onExpanderDown = (e: React.PointerEvent) => {
+        this._startSplitPercent = this._splitPercentage;
+        e.stopPropagation();
+        e.preventDefault();
+        document.addEventListener("pointermove", this.onExpanderMove);
+        document.addEventListener('pointerup', this.onExpanderUp);
+    }
+
+    onPointerDown = (e: React.PointerEvent) => {
+        // if (e.button === 2 && this.active) {
+        //     e.stopPropagation();
+        //     e.preventDefault();
+        // } else 
+        {
+            if (e.buttons === 1) {
+                if (this.props.isSelected()) {
+                    e.stopPropagation();
+                }
+            }
+        }
+    }
+
+    @action
+    setScaling = (r: any) => {
+        const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
+        const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
+        this._panelWidth = r.entry.width;
+        this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight;
+        this._contentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width);
+    }
+
+    getContentScaling = (): number => this._contentScaling;
+    getPanelWidth = (): number => this._panelWidth;
+    getPanelHeight = (): number => this._panelHeight;
+    getTransform = (): Transform => {
+        return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling);
+    }
+
+    focusDocument = (doc: Document) => { }
+
+    render() {
+        const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author])
+        const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
+        const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
+        let content = this._selectedIndex == -1 || !selected ? (null) : (
+            <Measure onResize={this.setScaling}>
+                {({ measureRef }) =>
+                    <div className="collectionSchemaView-content" ref={measureRef}>
+                        <DocumentView Document={selected}
+                            AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument}
+                            isTopMost={false}
+                            SelectOnLoad={false}
+                            ScreenToLocalTransform={this.getTransform}
+                            ContentScaling={this.getContentScaling}
+                            PanelWidth={this.getPanelWidth}
+                            PanelHeight={this.getPanelHeight}
+                            ContainingCollectionView={this.props.CollectionView}
+                            focus={this.focusDocument}
+                        />
+                    </div>
+                }
+            </Measure>
+        )
+        let previewHandle = !this.props.active() ? (null) : (
+            <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
+        return (
+            <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
+                <div className="collectionSchemaView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}>
+                    <Measure onResize={action((r: any) => {
+                        this._dividerX = r.entry.width;
+                        this._panelHeight = r.entry.height;
+                    })}>
+                        {({ measureRef }) =>
+                            <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ width: `${this._splitPercentage}%` }}>
+                                <ReactTable
+                                    data={children}
+                                    pageSize={children.length}
+                                    page={0}
+                                    showPagination={false}
+                                    columns={columns.map(col => ({
+                                        Header: col.Name,
+                                        accessor: (doc: Document) => [doc, col],
+                                        id: col.Id
+                                    }))}
+                                    column={{
+                                        ...ReactTableDefaults.column,
+                                        Cell: this.renderCell,
+
+                                    }}
+                                    getTrProps={this.getTrProps}
+                                />
+                            </div>
+                        }
+                    </Measure>
+                    <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
+                    <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)` }}>
+                        {content}
+                    </div>
+                    {previewHandle}
+                </div>
+            </div >
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
new file mode 100644
index 000000000..f8d580a7b
--- /dev/null
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -0,0 +1,37 @@
+#body {
+    padding: 20px;
+    background: #bbbbbb;
+}
+
+ul {
+    list-style: none;
+}
+
+li {
+    margin: 5px 0;
+}
+
+.no-indent {
+    padding-left: 0;
+}
+
+.bullet {
+    width: 1.5em;
+    display: inline-block;
+}
+
+.collectionTreeView-dropTarget {
+    border-style: solid;
+    box-sizing: border-box;
+    height: 100%;
+}
+
+.docContainer {
+    display: inline-table;
+}
+
+.delete-button {
+    color: #999999;
+    float: right;
+    margin-left: 1em;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
new file mode 100644
index 000000000..8b06d9ac4
--- /dev/null
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -0,0 +1,175 @@
+import { observer } from "mobx-react";
+import { CollectionViewBase } from "./CollectionViewBase";
+import { Document } from "../../../fields/Document";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import React = require("react")
+import { TextField } from "../../../fields/TextField";
+import { observable, action } from "mobx";
+import "./CollectionTreeView.scss";
+import { EditableView } from "../EditableView";
+import { setupDrag } from "../../util/DragManager";
+import { FieldWaiting } from "../../../fields/Field";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+
+export interface TreeViewProps {
+    document: Document;
+    deleteDoc: (doc: Document) => void;
+}
+
+export enum BulletType {
+    Collapsed,
+    Collapsible,
+    List
+}
+
+@observer
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+class TreeView extends React.Component<TreeViewProps> {
+
+    @observable
+    collapsed: boolean = false;
+
+    delete = () => {
+        this.props.deleteDoc(this.props.document);
+    }
+
+
+    @action
+    remove = (document: Document) => {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (children && children !== FieldWaiting) {
+            children.Data.splice(children.Data.indexOf(document), 1);
+        }
+    }
+
+    renderBullet(type: BulletType) {
+        let onClicked = action(() => this.collapsed = !this.collapsed);
+
+        switch (type) {
+            case BulletType.Collapsed:
+                return <div className="bullet" onClick={onClicked}>&#9654;</div>
+            case BulletType.Collapsible:
+                return <div className="bullet" onClick={onClicked}>&#9660;</div>
+            case BulletType.List:
+                return <div className="bullet">&mdash;</div>
+        }
+    }
+
+    /**
+     * Renders the EditableView title element for placement into the tree.
+     */
+    renderTitle() {
+        let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
+
+        // if the title hasn't loaded, immediately return the div
+        if (!title || title === "<Waiting>") {
+            return <div key={this.props.document.Id}></div>;
+        }
+
+        return <div className="docContainer"> <EditableView contents={title.Data}
+            height={36} GetValue={() => {
+                let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
+                if (title && title !== "<Waiting>")
+                    return title.Data;
+                return "";
+            }} SetValue={(value: string) => {
+                this.props.document.SetData(KeyStore.Title, value, TextField);
+                return true;
+            }} />
+            <div className="delete-button" onClick={this.delete}>x</div>
+        </div >
+    }
+
+    render() {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+
+        let reference = React.createRef<HTMLDivElement>();
+        let onItemDown = setupDrag(reference, () => this.props.document);
+        let titleElement = this.renderTitle();
+
+        // check if this document is a collection
+        if (children && children !== FieldWaiting) {
+            let subView;
+
+            // if uncollapsed, then add the children elements
+            if (!this.collapsed) {
+                // render all children elements
+                let childrenElement = (children.Data.map(value =>
+                    <TreeView document={value} deleteDoc={this.remove} />)
+                )
+                subView =
+                    <li key={this.props.document.Id} >
+                        {this.renderBullet(BulletType.Collapsible)}
+                        {titleElement}
+                        <ul key={this.props.document.Id}>
+                            {childrenElement}
+                        </ul>
+                    </li>
+            } else {
+                subView = <li key={this.props.document.Id}>
+                    {this.renderBullet(BulletType.Collapsed)}
+                    {titleElement}
+                </li>
+            }
+
+            return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
+                {subView}
+            </div>
+        }
+
+        // otherwise this is a normal leaf node
+        else {
+            return <li key={this.props.document.Id}>
+                {this.renderBullet(BulletType.List)}
+                {titleElement}
+            </li>;
+        }
+    }
+}
+
+
+@observer
+export class CollectionTreeView extends CollectionViewBase {
+
+    @action
+    remove = (document: Document) => {
+        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (children && children !== FieldWaiting) {
+            children.Data.splice(children.Data.indexOf(document), 1);
+        }
+    }
+
+    render() {
+        let titleStr = "";
+        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+        if (title && title !== FieldWaiting) {
+            titleStr = title.Data;
+        }
+
+        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let childrenElement = !children || children === FieldWaiting ? (null) :
+            (children.Data.map(value =>
+                <TreeView document={value} key={value.Id} deleteDoc={this.remove} />)
+            )
+
+        return (
+            <div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>
+                <h3>
+                    <EditableView contents={titleStr}
+                        height={72} GetValue={() => {
+                            return this.props.Document.Title;
+                        }} SetValue={(value: string) => {
+                            this.props.Document.SetData(KeyStore.Title, value, TextField);
+                            return true;
+                        }} />
+                </h3>
+                <ul className="no-indent">
+                    {childrenElement}
+                </ul>
+            </div >
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
new file mode 100644
index 000000000..31824763d
--- /dev/null
+++ b/src/client/views/collections/CollectionView.tsx
@@ -0,0 +1,133 @@
+import { action } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { SelectionManager } from "../../util/SelectionManager";
+import { ContextMenu } from "../ContextMenu";
+import React = require("react");
+import { KeyStore } from "../../../fields/KeyStore";
+import { NumberField } from "../../../fields/NumberField";
+import { CollectionFreeFormView } from "./CollectionFreeFormView";
+import { CollectionDockingView } from "./CollectionDockingView";
+import { CollectionSchemaView } from "./CollectionSchemaView";
+import { CollectionViewProps } from "./CollectionViewBase";
+import { CollectionTreeView } from "./CollectionTreeView";
+import { Field } from "../../../fields/Field";
+
+export enum CollectionViewType {
+    Invalid,
+    Freeform,
+    Schema,
+    Docking,
+    Tree
+}
+
+export const COLLECTION_BORDER_WIDTH = 2;
+
+@observer
+export class CollectionView extends React.Component<CollectionViewProps> {
+
+    public static LayoutString(fieldKey: string = "DataKey") {
+        return `<CollectionView Document={Document}
+                    ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
+                    isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
+    }
+    public active = () => {
+        var isSelected = this.props.isSelected();
+        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
+        var topMost = this.props.isTopMost;
+        return isSelected || childSelected || topMost;
+    }
+    @action
+    addDocument = (doc: Document): void => {
+        if (this.props.Document.Get(this.props.fieldKey) instanceof Field) {
+            //TODO This won't create the field if it doesn't already exist
+            const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+            value.push(doc);
+        } else {
+            this.props.Document.SetData(this.props.fieldKey, [doc], ListField);
+        }
+    }
+
+
+    @action
+    removeDocument = (doc: Document): boolean => {
+        //TODO This won't create the field if it doesn't already exist
+        const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+        let index = -1;
+        for (let i = 0; i < value.length; i++) {
+            if (value[i].Id == doc.Id) {
+                index = i;
+                break;
+            }
+        }
+
+        if (index !== -1) {
+            value.splice(index, 1)
+
+            SelectionManager.DeselectAll()
+            ContextMenu.Instance.clearItems()
+            return true;
+        }
+        return false
+    }
+
+    get collectionViewType(): CollectionViewType {
+        let Document = this.props.Document;
+        let viewField = Document.GetT(KeyStore.ViewType, NumberField);
+        if (viewField === "<Waiting>") {
+            return CollectionViewType.Invalid;
+        } else if (viewField) {
+            return viewField.Data;
+        } else {
+            return CollectionViewType.Freeform;
+        }
+    }
+
+    set collectionViewType(type: CollectionViewType) {
+        let Document = this.props.Document;
+        Document.SetData(KeyStore.ViewType, type, NumberField);
+    }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        if (!e.isPropagationStopped) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+            ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
+            ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
+            ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
+            ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+        }
+    }
+
+    render() {
+        let viewType = this.collectionViewType;
+        let subView: JSX.Element;
+        switch (viewType) {
+            case CollectionViewType.Freeform:
+                subView = (<CollectionFreeFormView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
+                break;
+            case CollectionViewType.Schema:
+                subView = (<CollectionSchemaView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
+                break;
+            case CollectionViewType.Docking:
+                subView = (<CollectionDockingView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
+                break;
+            case CollectionViewType.Tree:
+                subView = (<CollectionTreeView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
+                break;
+            default:
+                subView = <div></div>
+                break;
+        }
+        return (<div onContextMenu={this.specificContextMenu}>
+            {subView}
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
new file mode 100644
index 000000000..0a3b965f2
--- /dev/null
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -0,0 +1,121 @@
+import { action } from "mobx";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import React = require("react");
+import { KeyStore } from "../../../fields/KeyStore";
+import { FieldWaiting } from "../../../fields/Field";
+import { undoBatch } from "../../util/UndoManager";
+import { DragManager } from "../../util/DragManager";
+import { DocumentView } from "../nodes/DocumentView";
+import { Documents, DocumentOptions } from "../../documents/Documents";
+import { Key } from "../../../fields/Key";
+import { Transform } from "../../util/Transform";
+import { CollectionView } from "./CollectionView";
+
+export interface CollectionViewProps {
+    fieldKey: Key;
+    Document: Document;
+    ScreenToLocalTransform: () => Transform;
+    isSelected: () => boolean;
+    isTopMost: boolean;
+    select: (ctrlPressed: boolean) => void;
+    bindings: any;
+    panelWidth: () => number;
+    panelHeight: () => number;
+    focus: (doc: Document) => void;
+}
+export interface SubCollectionViewProps extends CollectionViewProps {
+    active: () => boolean;
+    addDocument: (doc: Document) => void;
+    removeDocument: (doc: Document) => boolean;
+    CollectionView: CollectionView;
+}
+
+export class CollectionViewBase extends React.Component<SubCollectionViewProps> {
+    private dropDisposer?: DragManager.DragDropDisposer;
+    protected createDropTarget = (ele: HTMLDivElement) => {
+        if (this.dropDisposer) {
+            this.dropDisposer();
+        }
+        if (ele) {
+            this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } });
+        }
+    }
+
+    @undoBatch
+    @action
+    protected drop(e: Event, de: DragManager.DropEvent) {
+        const docView: DocumentView = de.data["documentView"];
+        const doc: Document = de.data["document"];
+        if (docView && docView.props.ContainingCollectionView && docView.props.ContainingCollectionView !== this.props.CollectionView) {
+            if (docView.props.RemoveDocument) {
+                docView.props.RemoveDocument(docView.props.Document);
+            }
+            this.props.addDocument(docView.props.Document);
+        } else if (doc) {
+            this.props.removeDocument(doc);
+            this.props.addDocument(doc);
+        }
+        e.stopPropagation();
+    }
+
+    @action
+    protected onDrop(e: React.DragEvent, options: DocumentOptions): void {
+        e.stopPropagation()
+        e.preventDefault()
+        let that = this;
+
+        let html = e.dataTransfer.getData("text/html");
+        let text = e.dataTransfer.getData("text/plain");
+        if (html && html.indexOf("<img") != 0) {
+            let htmlDoc = Documents.HtmlDocument(html, { ...options, width: 300, height: 300 });
+            htmlDoc.SetText(KeyStore.DocumentText, text);
+            this.props.addDocument(htmlDoc);
+            return;
+        }
+
+        for (let i = 0; i < e.dataTransfer.items.length; i++) {
+            let item = e.dataTransfer.items[i];
+            if (item.kind === "string" && item.type.indexOf("uri") != -1) {
+                e.dataTransfer.items[i].getAsString(function (s) {
+                    action(() => {
+                        var img = Documents.ImageDocument(s, { ...options, nativeWidth: 300, width: 300, })
+
+                        let docs = that.props.Document.GetT(KeyStore.Data, ListField);
+                        if (docs != FieldWaiting) {
+                            if (!docs) {
+                                docs = new ListField<Document>();
+                                that.props.Document.Set(KeyStore.Data, docs)
+                            }
+                            docs.Data.push(img);
+                        }
+                    })()
+
+                })
+            }
+            if (item.kind == "file" && item.type.indexOf("image")) {
+                let fReader = new FileReader()
+                let file = item.getAsFile();
+
+                fReader.addEventListener("load", action("drop", () => {
+                    if (fReader.result) {
+                        let url = "" + fReader.result;
+                        let doc = Documents.ImageDocument(url, options)
+                        let docs = that.props.Document.GetT(KeyStore.Data, ListField);
+                        if (docs != FieldWaiting) {
+                            if (!docs) {
+                                docs = new ListField<Document>();
+                                that.props.Document.Set(KeyStore.Data, docs)
+                            }
+                            docs.Data.push(doc);
+                        }
+                    }
+                }), false)
+
+                if (file) {
+                    fReader.readAsDataURL(file)
+                }
+            }
+        }
+    }
+}
diff --git a/src/views/nodes/Annotation.tsx b/src/client/views/nodes/Annotation.tsx
index a2c7be1a8..a2c7be1a8 100644
--- a/src/views/nodes/Annotation.tsx
+++ b/src/client/views/nodes/Annotation.tsx
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
new file mode 100644
index 000000000..50dc5a619
--- /dev/null
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -0,0 +1,86 @@
+import { computed, trace } from "mobx";
+import { observer } from "mobx-react";
+import { KeyStore } from "../../../fields/KeyStore";
+import { NumberField } from "../../../fields/NumberField";
+import { Transform } from "../../util/Transform";
+import { DocumentView, DocumentViewProps } from "./DocumentView";
+import "./DocumentView.scss";
+import React = require("react");
+
+
+@observer
+export class CollectionFreeFormDocumentView extends React.Component<DocumentViewProps> {
+    private _mainCont = React.createRef<HTMLDivElement>();
+
+    constructor(props: DocumentViewProps) {
+        super(props);
+    }
+    get screenRect(): ClientRect | DOMRect {
+        if (this._mainCont.current) {
+            return this._mainCont.current.getBoundingClientRect();
+        }
+        return new DOMRect();
+    }
+
+    @computed
+    get transform(): string {
+        return `scale(${this.props.ContentScaling()}, ${this.props.ContentScaling()}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px)`;
+    }
+
+    @computed get zIndex(): number { return this.props.Document.GetNumber(KeyStore.ZIndex, 0); }
+    @computed get width(): number { return this.props.Document.Width(); }
+    @computed get height(): number { return this.props.Document.Height(); }
+    @computed get nativeWidth(): number { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+    @computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
+
+    set width(w: number) {
+        this.props.Document.SetData(KeyStore.Width, w, NumberField)
+        if (this.nativeWidth && this.nativeHeight) {
+            this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w)
+        }
+    }
+
+    set height(h: number) {
+        this.props.Document.SetData(KeyStore.Height, h, NumberField);
+        if (this.nativeWidth && this.nativeHeight) {
+            this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h)
+        }
+    }
+
+    set zIndex(h: number) {
+        this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
+    }
+
+    contentScaling = () => {
+        return this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
+    }
+
+    getTransform = (): Transform => {
+        return this.props.ScreenToLocalTransform().
+            translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.contentScaling());
+    }
+
+    @computed
+    get docView() {
+        return <DocumentView {...this.props}
+            ContentScaling={this.contentScaling}
+            ScreenToLocalTransform={this.getTransform}
+        />
+    }
+
+    render() {
+        return (
+            <div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{
+                transformOrigin: "left top",
+                transform: this.transform,
+                width: this.width,
+                height: this.height,
+                position: "absolute",
+                zIndex: this.zIndex,
+                backgroundColor: "transparent"
+            }} >
+                {this.docView}
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/views/nodes/NodeView.scss b/src/client/views/nodes/DocumentView.scss
index dac1c0a8e..8e2ebd690 100644
--- a/src/views/nodes/NodeView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,4 +1,4 @@
-.node {
+.documentView-node {
     position: absolute;
     background: #cdcdcd;
     overflow: hidden;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
new file mode 100644
index 000000000..e01e1d4cd
--- /dev/null
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -0,0 +1,250 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { Field, FieldWaiting, Opt } from "../../../fields/Field";
+import { Key } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import { DragManager } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { Transform } from "../../util/Transform";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionView, CollectionViewType } from "../collections/CollectionView";
+import { ContextMenu } from "../ContextMenu";
+import { FormattedTextBox } from "../nodes/FormattedTextBox";
+import { ImageBox } from "../nodes/ImageBox";
+import { Documents } from "../../documents/Documents"
+import { KeyValueBox } from "./KeyValueBox"
+import { WebBox } from "../nodes/WebBox";
+import "./DocumentView.scss";
+import React = require("react");
+const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
+
+
+export interface DocumentViewProps {
+    ContainingCollectionView: Opt<CollectionView>;
+    Document: Document;
+    AddDocument?: (doc: Document) => void;
+    RemoveDocument?: (doc: Document) => boolean;
+    ScreenToLocalTransform: () => Transform;
+    isTopMost: boolean;
+    ContentScaling: () => number;
+    PanelWidth: () => number;
+    PanelHeight: () => number;
+    focus: (doc: Document) => void;
+    SelectOnLoad: boolean;
+}
+export interface JsxArgs extends DocumentViewProps {
+    Keys: { [name: string]: Key }
+    Fields: { [name: string]: Field }
+}
+
+/*
+This function is pretty much a hack that lets us fill out the fields in JsxArgs with something that
+jsx-to-string can recover the jsx from
+Example usage of this function:
+    public static LayoutString() {
+        let args = FakeJsxArgs(["Data"]);
+        return jsxToString(
+            <CollectionFreeFormView
+                doc={args.Document}
+                fieldKey={args.Keys.Data}
+                DocumentViewForField={args.DocumentView} />,
+            { useFunctionCode: true, functionNameOnly: true }
+        )
+    }
+*/
+export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
+    let Keys: { [name: string]: any } = {}
+    let Fields: { [name: string]: any } = {}
+    for (const key of keys) {
+        let fn = () => { }
+        Object.defineProperty(fn, "name", { value: key + "Key" })
+        Keys[key] = fn;
+    }
+    for (const field of fields) {
+        let fn = () => { }
+        Object.defineProperty(fn, "name", { value: field })
+        Fields[field] = fn;
+    }
+    let args: JsxArgs = {
+        Document: function Document() { },
+        DocumentView: function DocumentView() { },
+        Keys,
+        Fields
+    } as any;
+    return args;
+}
+
+@observer
+export class DocumentView extends React.Component<DocumentViewProps> {
+    private _mainCont = React.createRef<HTMLDivElement>();
+    private _documentBindings: any = null;
+    private _downX: number = 0;
+    private _downY: number = 0;
+    @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); }
+    @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; }
+    @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
+    @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
+    @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
+    screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
+    onPointerDown = (e: React.PointerEvent): void => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
+        if (e.shiftKey && e.buttons === 1) {
+            CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
+            e.stopPropagation();
+        } else {
+            if (this.active && !e.isDefaultPrevented()) {
+                e.stopPropagation();
+                if (e.buttons === 2) {
+                    e.preventDefault();
+                }
+                document.removeEventListener("pointermove", this.onPointerMove)
+                document.addEventListener("pointermove", this.onPointerMove);
+                document.removeEventListener("pointerup", this.onPointerUp)
+                document.addEventListener("pointerup", this.onPointerUp);
+            }
+        }
+    }
+    onPointerMove = (e: PointerEvent): void => {
+        if (e.cancelBubble) {
+            return;
+        }
+        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+            document.removeEventListener("pointermove", this.onPointerMove)
+            document.removeEventListener("pointerup", this.onPointerUp)
+            if (this._mainCont.current != null && !this.topMost) {
+                const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+                let dragData: { [id: string]: any } = {};
+                dragData["documentView"] = this;
+                dragData["xOffset"] = e.x - left;
+                dragData["yOffset"] = e.y - top;
+                DragManager.StartDrag(this._mainCont.current, dragData, {
+                    handlers: {
+                        dragComplete: action(() => { }),
+                    },
+                    hideSource: true
+                })
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onPointerMove)
+        document.removeEventListener("pointerup", this.onPointerUp)
+        e.stopPropagation();
+        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    }
+
+    deleteClicked = (): void => {
+        if (this.props.RemoveDocument) {
+            this.props.RemoveDocument(this.props.Document);
+        }
+    }
+
+    fieldsClicked = (e: React.MouseEvent): void => {
+        if (this.props.AddDocument) {
+            this.props.AddDocument(Documents.KVPDocument(this.props.Document));
+        }
+    }
+    fullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
+
+    closeFullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.Instance.CloseFullScreen();
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
+
+    @action
+    onContextMenu = (e: React.MouseEvent): void => {
+        e.stopPropagation();
+        let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
+        if (moved || e.isDefaultPrevented()) {
+            e.preventDefault()
+            return;
+        }
+        e.preventDefault()
+
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
+        ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) })
+        ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
+        //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        if (!this.topMost) {
+            // DocumentViews should stop propagation of this event
+            e.stopPropagation();
+        }
+
+        ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        SelectionManager.SelectDoc(this, e.ctrlKey);
+    }
+    @computed get mainContent() {
+        return <JsxParser
+            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+            bindings={this._documentBindings}
+            jsx={this.layout}
+            showWarnings={true}
+            onError={(test: any) => { console.log(test) }}
+        />
+    }
+
+    isSelected = () => {
+        return SelectionManager.IsSelected(this);
+    }
+
+    select = (ctrlPressed: boolean) => {
+        SelectionManager.SelectDoc(this, ctrlPressed)
+    }
+
+    render() {
+        if (!this.props.Document) return <div></div>
+        let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
+        if (!lkeys || lkeys === "<Waiting>") {
+            return <p>Error loading layout keys</p>;
+        }
+        this._documentBindings = {
+            ...this.props,
+            isSelected: this.isSelected,
+            select: this.select,
+            focus: this.props.focus
+        };
+        for (const key of this.layoutKeys) {
+            this._documentBindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
+        }
+        for (const key of this.layoutFields) {
+            let field = this.props.Document.Get(key);
+            this._documentBindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
+        }
+        this._documentBindings.bindings = this._documentBindings;
+        var scaling = this.props.ContentScaling();
+        var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+        var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+        return (
+            <div className="documentView-node" ref={this._mainCont}
+                style={{
+                    width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
+                    height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
+                    transformOrigin: "left top",
+                    transform: `scale(${scaling} , ${scaling})`
+                }}
+                onContextMenu={this.onContextMenu}
+                onPointerDown={this.onPointerDown} >
+                {this.mainContent}
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/views/nodes/FieldTextBox.scss b/src/client/views/nodes/FieldTextBox.scss
index b6ce2fabc..b6ce2fabc 100644
--- a/src/views/nodes/FieldTextBox.scss
+++ b/src/client/views/nodes/FieldTextBox.scss
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
new file mode 100644
index 000000000..9e63006d1
--- /dev/null
+++ b/src/client/views/nodes/FieldView.tsx
@@ -0,0 +1,73 @@
+import React = require("react")
+import { observer } from "mobx-react";
+import { computed } from "mobx";
+import { Field, FieldWaiting, FieldValue } from "../../../fields/Field";
+import { Document } from "../../../fields/Document";
+import { TextField } from "../../../fields/TextField";
+import { NumberField } from "../../../fields/NumberField";
+import { RichTextField } from "../../../fields/RichTextField";
+import { ImageField } from "../../../fields/ImageField";
+import { WebField } from "../../../fields/WebField";
+import { Key } from "../../../fields/Key";
+import { FormattedTextBox } from "./FormattedTextBox";
+import { ImageBox } from "./ImageBox";
+import { WebBox } from "./WebBox";
+
+//
+// these properties get assigned through the render() method of the DocumentView when it creates this node.
+// However, that only happens because the properties are "defined" in the markup for the field view.
+// See the LayoutString method on each field view :   ImageBox, FormattedTextBox, etc. 
+//
+export interface FieldViewProps {
+    fieldKey: Key;
+    doc: Document;
+    isSelected: () => boolean;
+    select: () => void;
+    isTopMost: boolean;
+    selectOnLoad: boolean;
+    bindings: any;
+}
+
+@observer
+export class FieldView extends React.Component<FieldViewProps> {
+    public static LayoutString(fieldType: { name: string }, fieldStr: string = "DataKey") {
+        return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={${fieldStr}} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost} />`;
+    }
+
+    @computed
+    get field(): FieldValue<Field> {
+        const { doc, fieldKey } = this.props;
+        return doc.Get(fieldKey);
+    }
+    render() {
+        const field = this.field;
+        if (!field) {
+            return <p>{'<null>'}</p>
+        }
+        if (field instanceof TextField) {
+            return <p>{field.Data}</p>
+        }
+        else if (field instanceof RichTextField) {
+            return <FormattedTextBox {...this.props} />
+        }
+        else if (field instanceof ImageField) {
+            return <ImageBox {...this.props} />
+        }
+        else if (field instanceof WebField) {
+            return <WebBox {...this.props} />
+        }
+        // bcz: this belongs here, but it doesn't render well so taking it out for now
+        // else if (field instanceof HtmlField) {
+        //     return <WebBox {...this.props} />
+        // }
+        else if (field instanceof NumberField) {
+            return <p>{field.Data}</p>
+        }
+        else if (field != FieldWaiting) {
+            return <p>{JSON.stringify(field.GetValue())}</p>
+        }
+        else
+            return <p> {"Waiting for server..."} </p>
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
new file mode 100644
index 000000000..21bd43b6e
--- /dev/null
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -0,0 +1,20 @@
+.ProseMirror {
+    width: 100%;
+    height: auto;
+    min-height: 100%
+}
+
+.ProseMirror:focus {
+    outline: none !important
+}
+
+.formattedTextBox-cont {
+    background: white;
+    padding: 1;
+    border: black;
+    border-width: 10;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    color: initial;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 3e3e22e46..04eb2052d 100644
--- a/src/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -1,18 +1,18 @@
 import { action, IReactionDisposer, reaction } from "mobx";
-import { observer } from "mobx-react"
 import { baseKeymap } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
 import { schema } from "prosemirror-schema-basic";
-import { EditorState, Transaction } from "prosemirror-state";
+import { EditorState, Transaction, } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Opt, FieldWaiting } from "../../fields/Field";
-import { SelectionManager } from "../../util/SelectionManager";
+import { Opt, FieldWaiting } from "../../../fields/Field";
 import "./FormattedTextBox.scss";
 import React = require("react")
-import { RichTextField } from "../../fields/RichTextField";
+import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
-import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
+import { ContextMenu } from "../../views/ContextMenu";
+
+
 
 
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
@@ -31,10 +31,9 @@ import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView
 //  specified Key and assigns it to an HTML input node.  When changes are made tot his node, 
 //  this will edit the document and assign the new value to that field.
 //]
-@observer
 export class FormattedTextBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
+    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(FormattedTextBox, fieldStr) }
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
@@ -43,33 +42,30 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         super(props);
 
         this._ref = React.createRef();
-
         this.onChange = this.onChange.bind(this);
     }
 
     dispatchTransaction = (tx: Transaction) => {
-        if (this._editorView && this._editorView != FieldWaiting) {
+        if (this._editorView) {
             const state = this._editorView.state.apply(tx);
             this._editorView.updateState(state);
-            const { doc, fieldKey } = this.props;
-            doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
+            this.props.doc.SetData(this.props.fieldKey, JSON.stringify(state.toJSON()), RichTextField);
         }
     }
 
     componentDidMount() {
         let state: EditorState;
-        const { doc, fieldKey } = this.props;
         const config = {
             schema,
             plugins: [
                 history(),
                 keymap({ "Mod-z": undo, "Mod-y": redo }),
-                keymap(baseKeymap)
+                keymap(baseKeymap),
             ]
         };
 
-        let field = doc.GetT(fieldKey, RichTextField);
-        if (field && field != FieldWaiting) {  // bcz: don't think this works
+        let field = this.props.doc.GetT(this.props.fieldKey, RichTextField);
+        if (field && field != FieldWaiting) {
             state = EditorState.fromJSON(config, JSON.parse(field.Data));
         } else {
             state = EditorState.create(config);
@@ -85,17 +81,21 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
             const field = this.props.doc.GetT(this.props.fieldKey, RichTextField);
             return field && field != FieldWaiting ? field.Data : undefined;
         }, (field) => {
-            if (field && this._editorView && this._editorView != FieldWaiting) {
+            if (field && this._editorView) {
                 this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
             }
         })
+        if (this.props.selectOnLoad) {
+            this.props.select();
+            this._editorView!.focus();
+        }
     }
 
     componentWillUnmount() {
-        if (this._editorView && this._editorView != FieldWaiting) {
+        if (this._editorView) {
             this._editorView.destroy();
         }
-        if (this._reactionDisposer && this._reactionDisposer != FieldWaiting) {
+        if (this._reactionDisposer) {
             this._reactionDisposer();
         }
     }
@@ -106,22 +106,44 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
 
     @action
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        const { fieldKey, doc } = this.props;
-        doc.SetData(fieldKey, e.target.value, RichTextField);
+        this.props.doc.SetData(this.props.fieldKey, e.target.value, RichTextField);
     }
     onPointerDown = (e: React.PointerEvent): void => {
-        let me = this;
-        if (e.buttons === 1 && me.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.DocumentViewForField)) {
+        if (e.buttons === 1 && this.props.isSelected()) {
             e.stopPropagation();
         }
     }
+
+    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
+    textCapability = (e: React.MouseEvent): void => {
+    }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability });
+        // ContextMenu.Instance.addItem({
+        //     description: "Submenu",
+        //     items: [
+        //         {
+        //             description: "item 1", event:
+        //     },
+        //         {
+        //             description: "item 2", event:
+        //     }
+        //     ]
+        // })
+        // e.stopPropagation()
+
+    }
+
+    onPointerWheel = (e: React.WheelEvent): void => {
+        e.stopPropagation();
+    }
+
     render() {
         return (<div className="formattedTextBox-cont"
-            style={{
-                color: "initial",
-                whiteSpace: "initial"
-            }}
             onPointerDown={this.onPointerDown}
+            onContextMenu={this.specificContextMenu}
+            onWheel={this.onPointerWheel}
             ref={this._ref} />)
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
new file mode 100644
index 000000000..ea459b911
--- /dev/null
+++ b/src/client/views/nodes/ImageBox.scss
@@ -0,0 +1,22 @@
+
+.imageBox-cont {
+    padding: 0vw;
+    position: relative;
+    text-align: center;
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%
+}
+
+.imageBox-cont img {
+    object-fit: contain;
+    height: 100%;
+}
+
+.imageBox-button {
+    padding : 0vw;
+    border: none;
+    width : 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
new file mode 100644
index 000000000..8c44395f4
--- /dev/null
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -0,0 +1,111 @@
+
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import "./ImageBox.scss";
+import React = require("react")
+import { ImageField } from '../../../fields/ImageField';
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { ContextMenu } from "../../views/ContextMenu";
+import { observable, action } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+
+@observer
+export class ImageBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(ImageBox) }
+    private _ref: React.RefObject<HTMLDivElement>;
+    private _imgRef: React.RefObject<HTMLImageElement>;
+    private _downX: number = 0;
+    private _downY: number = 0;
+    private _lastTap: number = 0;
+    @observable private _photoIndex: number = 0;
+    @observable private _isOpen: boolean = false;
+
+    constructor(props: FieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+        this._imgRef = React.createRef();
+        this.state = {
+            photoIndex: 0,
+            isOpen: false,
+        };
+    }
+
+    @action
+    onLoad = (target: any) => {
+        var h = this._imgRef.current!.naturalHeight;
+        var w = this._imgRef.current!.naturalWidth;
+        this.props.doc.SetNumber(KeyStore.NativeHeight, this.props.doc.GetNumber(KeyStore.NativeWidth, 0) * h / w)
+    }
+
+    componentDidMount() {
+    }
+
+    componentWillUnmount() {
+    }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (Date.now() - this._lastTap < 300) {
+            if (e.buttons === 1 && this.props.isSelected()) {
+                e.stopPropagation();
+                this._downX = e.clientX;
+                this._downY = e.clientY;
+                document.removeEventListener("pointerup", this.onPointerUp);
+                document.addEventListener("pointerup", this.onPointerUp);
+            }
+        } else {
+            this._lastTap = Date.now();
+        }
+    }
+    @action
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointerup", this.onPointerUp);
+        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
+            this._isOpen = true;
+        }
+        e.stopPropagation();
+    }
+
+    lightbox = (path: string) => {
+        const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
+        if (this._isOpen && this.props.isSelected()) {
+            return (<Lightbox
+                mainSrc={images[this._photoIndex]}
+                nextSrc={images[(this._photoIndex + 1) % images.length]}
+                prevSrc={images[(this._photoIndex + images.length - 1) % images.length]}
+                onCloseRequest={action(() =>
+                    this._isOpen = false
+                )}
+                onMovePrevRequest={action(() =>
+                    this._photoIndex = (this._photoIndex + images.length - 1) % images.length
+                )}
+                onMoveNextRequest={action(() =>
+                    this._photoIndex = (this._photoIndex + 1) % images.length
+                )}
+            />)
+        }
+    }
+
+    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
+    imageCapability = (e: React.MouseEvent): void => {
+    }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        ContextMenu.Instance.addItem({ description: "Image Capability", event: this.imageCapability });
+    }
+
+    render() {
+        let field = this.props.doc.Get(this.props.fieldKey);
+        let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+            field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
+        let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
+        return (
+            <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} onContextMenu={this.specificContextMenu}>
+                <img src={path} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} />
+                {this.lightbox(path)}
+            </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
new file mode 100644
index 000000000..1295266e5
--- /dev/null
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -0,0 +1,31 @@
+.keyValueBox-cont {
+    overflow-y:scroll;
+    height: 100%;
+    border: black;
+    border-width: 1px;
+    border-style: solid;
+    box-sizing: border-box;
+    display: inline-block;
+    .imageBox-cont img {
+        max-height:45px;
+        height: auto;
+    }
+}
+.keyValueBox-table {
+    position: relative;
+}
+.keyValueBox-header {
+    background:gray;
+}
+.keyValueBox-evenRow {
+    background: white;
+    .formattedTextBox-cont {
+        background: white;
+    }
+}
+.keyValueBox-oddRow {
+    background: lightGray;
+    .formattedTextBox-cont {
+        background: lightgray;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
new file mode 100644
index 000000000..e8ebd50be
--- /dev/null
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -0,0 +1,85 @@
+
+import { IReactionDisposer } from 'mobx';
+import { observer } from "mobx-react";
+import { EditorView } from 'prosemirror-view';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import { Document } from '../../../fields/Document';
+import { Opt, FieldWaiting } from '../../../fields/Field';
+import { KeyStore } from '../../../fields/KeyStore';
+import { FieldView, FieldViewProps } from './FieldView';
+import { KeyValuePair } from "./KeyValuePair";
+import "./KeyValueBox.scss";
+import React = require("react")
+
+@observer
+export class KeyValueBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
+    private _ref: React.RefObject<HTMLDivElement>;
+    private _editorView: Opt<EditorView>;
+    private _reactionDisposer: Opt<IReactionDisposer>;
+
+
+    constructor(props: FieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+    }
+
+
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (e.buttons === 1 && this.props.isSelected()) {
+            e.stopPropagation();
+        }
+    }
+    onPointerWheel = (e: React.WheelEvent): void => {
+        e.stopPropagation();
+    }
+
+    createTable = () => {
+        let doc = this.props.doc.GetT(KeyStore.Data, Document);
+        if (!doc || doc == FieldWaiting) {
+            return <tr><td>Loading...</td></tr>
+        }
+        let realDoc = doc;
+
+        let ids: { [key: string]: string } = {};
+        let protos = doc.GetAllPrototypes();
+        for (const proto of protos) {
+            proto._proxies.forEach((val, key) => {
+                if (!(key in ids)) {
+                    ids[key] = key;
+                }
+            })
+        }
+
+        let rows: JSX.Element[] = [];
+        let i = 0;
+        for (let key in ids) {
+            rows.push(<KeyValuePair doc={realDoc} rowStyle={"keyValueBox-" + (i++ % 2 ? "oddRow" : "evenRow")} fieldId={key} key={key} />)
+        }
+        return rows;
+    }
+
+
+    render() {
+
+        return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
+            <table className="keyValueBox-table">
+                <tbody>
+                    <tr className="keyValueBox-header">
+                        <th>Key</th>
+                        <th>Fields</th>
+                    </tr>
+                    {this.createTable()}
+                </tbody>
+            </table>
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
new file mode 100644
index 000000000..a97e98313
--- /dev/null
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -0,0 +1,58 @@
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import "./KeyValueBox.scss";
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { Opt, Field } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { observable, action } from 'mobx';
+import { Document } from '../../../fields/Document';
+import { Key } from '../../../fields/Key';
+import { Server } from "../../Server"
+
+// Represents one row in a key value plane
+
+export interface KeyValuePairProps {
+    rowStyle: string;
+    fieldId: string;
+    doc: Document;
+}
+@observer
+export class KeyValuePair extends React.Component<KeyValuePairProps> {
+
+    @observable
+    private key: Opt<Key>
+
+    constructor(props: KeyValuePairProps) {
+        super(props);
+        Server.GetField(this.props.fieldId,
+            action((field: Opt<Field>) => {
+                if (field) {
+                    this.key = field as Key;
+                }
+            }));
+
+    }
+
+
+    render() {
+        if (!this.key) {
+            return <tr><td>error</td><td></td></tr>
+
+        }
+        let props: FieldViewProps = {
+            doc: this.props.doc,
+            fieldKey: this.key,
+            isSelected: () => false,
+            select: () => { },
+            isTopMost: false,
+            bindings: {},
+            selectOnLoad: false,
+        }
+        return (
+            <tr className={this.props.rowStyle}>
+                <td>{this.key.Name}</td>
+                <td><FieldView {...props} /></td>
+            </tr>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx
index 8f30a3bec..755994d6d 100644
--- a/src/views/nodes/PDFNode.tsx
+++ b/src/client/views/nodes/PDFNode.tsx
@@ -1,17 +1,17 @@
-import 'react-image-lightbox/style.css'; 
+import 'react-image-lightbox/style.css';
 import "./ImageBox.scss";
 import React = require("react")
-import { FieldViewProps, FieldView } from './FieldView';
 import { observer } from "mobx-react"
 import { observable, action } from 'mobx';
 import 'react-pdf/dist/Page/AnnotationLayer.css'
 //@ts-ignore
-import { Document, Page, PDFPageProxy, PageAnnotation} from "react-pdf";
-import { Utils } from '../../Utils';
+import { Document, Page, PDFPageProxy, PageAnnotation } from "react-pdf";
+import { Utils } from '../../../Utils';
 import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
 import { Annotation } from './Annotation';
 import { ObjectPositionProperty } from 'csstype';
 import { keydownHandler } from 'prosemirror-keymap';
+import { FieldViewProps, FieldView } from './FieldView';
 
 /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
  * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
@@ -46,49 +46,49 @@ import { keydownHandler } from 'prosemirror-keymap';
  */
 @observer
 export class PDFNode extends React.Component<FieldViewProps> {
-    public static LayoutString() { return FieldView.LayoutString("PDFNode"); }
+    public static LayoutString() { return FieldView.LayoutString(PDFNode); }
 
     private _mainDiv = React.createRef<HTMLDivElement>()
     private _pdf = React.createRef<HTMLCanvasElement>();
-    
+
     //very useful for keeping track of X and y position throughout the PDF Canvas
-    private initX:number = 0; 
-    private initY:number = 0; 
+    private initX: number = 0;
+    private initY: number = 0;
 
     //checks if tool is on
-    private _toolOn:boolean = false; //checks if tool is on
-    private _pdfContext:any = null; //gets pdf context
-    private bool:Boolean = false; //general boolean debounce
-    private currSpan:any;//keeps track of current span (for highlighting)
-   
+    private _toolOn: boolean = false; //checks if tool is on
+    private _pdfContext: any = null; //gets pdf context
+    private bool: Boolean = false; //general boolean debounce
+    private currSpan: any;//keeps track of current span (for highlighting)
+
     private _currTool: any; //keeps track of current tool button reference
-    private _drawToolOn:boolean = false; //boolean that keeps track of the drawing tool 
+    private _drawToolOn: boolean = false; //boolean that keeps track of the drawing tool 
     private _drawTool = React.createRef<HTMLButtonElement>()//drawing tool button reference
-    
+
     private _colorTool = React.createRef<HTMLButtonElement>(); //color button reference
-    private _currColor:string = "black"; //current color that user selected (for ink/pen)
-     
+    private _currColor: string = "black"; //current color that user selected (for ink/pen)
+
     private _highlightTool = React.createRef<HTMLButtonElement>(); //highlighter button reference
-    private _highlightToolOn:boolean = false; 
+    private _highlightToolOn: boolean = false;
+
+    @observable perPage: Object[] = []; //stores pageInfo
+    @observable pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
 
-    @observable perPage:Object[] = []; //stores pageInfo
-    @observable pageInfo:any = {area:[], divs:[], anno: []}; //divs is array of objects linked to anno
-    
-    @observable private page:number = 1; //default is the first page. 
-    @observable private numPage:number = 1; //default number of pages
-    private _pdfCanvas:any;
+    @observable private page: number = 1; //default is the first page. 
+    @observable private numPage: number = 1; //default number of pages
+    private _pdfCanvas: any;
 
     /**
      * for pagination backwards
      */
     @action
     onPageBack = () => {
-        if (this.page > 1){
-            this.page -= 1; 
-            this.currAnno = []; 
+        if (this.page > 1) {
+            this.page -= 1;
+            this.currAnno = [];
             this.perPage[this.page] = this.pageInfo
-            this.pageInfo = {area:[], divs:[], anno: []}; //resets the object to default
-            if (this.perPage[this.page - 1]){
+            this.pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
+            if (this.perPage[this.page - 1]) {
                 this.pageInfo = this.perPage[this.page - 1];
             }
         }
@@ -96,61 +96,61 @@ export class PDFNode extends React.Component<FieldViewProps> {
 
     /**
      * for pagination forwards
-     */  
+     */
     @action
     onPageForward = () => {
-        if (this.page < this.numPage){
-            this.page += 1; 
-            this.currAnno = []; 
-            this.perPage[this.page - 2] = this.pageInfo; 
-            this.pageInfo = {area:[], divs:[], anno: []}; //resets the object to default
-            if (this.perPage[this.page - 1]){
-                this.pageInfo = this.perPage[this.page - 1]; 
+        if (this.page < this.numPage) {
+            this.page += 1;
+            this.currAnno = [];
+            this.perPage[this.page - 2] = this.pageInfo;
+            this.pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
+            if (this.perPage[this.page - 1]) {
+                this.pageInfo = this.perPage[this.page - 1];
             }
         }
     }
-   
+
     /**
      * selection tool used for area highlighting (stickies). Kinda temporary
      */
     selectionTool = () => {
-        this._toolOn = true; 
+        this._toolOn = true;
     }
     /**
      * when user draws on the canvas. When mouse pointer is down 
      */
-    drawDown = (e:PointerEvent) => {
-            this.initX = e.offsetX; 
-            this.initY = e.offsetY; 
-            this._pdfContext.beginPath();
-            this._pdfContext.lineTo(this.initX, this.initY); 
-            this._pdfContext.strokeStyle = this._currColor; 
-            this._pdfCanvas.addEventListener("pointermove", this.drawMove); 
-            this._pdfCanvas.addEventListener("pointerup", this.drawUp); 
-        
+    drawDown = (e: PointerEvent) => {
+        this.initX = e.offsetX;
+        this.initY = e.offsetY;
+        this._pdfContext.beginPath();
+        this._pdfContext.lineTo(this.initX, this.initY);
+        this._pdfContext.strokeStyle = this._currColor;
+        this._pdfCanvas.addEventListener("pointermove", this.drawMove);
+        this._pdfCanvas.addEventListener("pointerup", this.drawUp);
+
     }
     //when user drags 
-    drawMove = (e: PointerEvent):void =>{
+    drawMove = (e: PointerEvent): void => {
         //x and y mouse movement
-        let x = this.initX += e.movementX, 
-            y = this.initY += e.movementY; 
+        let x = this.initX += e.movementX,
+            y = this.initY += e.movementY;
         //connects the point 
-        this._pdfContext.lineTo(x, y); 
-        this._pdfContext.stroke(); 
+        this._pdfContext.lineTo(x, y);
+        this._pdfContext.stroke();
     }
 
-    drawUp = (e:PointerEvent) => {
-        this._pdfContext.closePath();  
+    drawUp = (e: PointerEvent) => {
+        this._pdfContext.closePath();
         this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
         this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
-        this._pdfCanvas.addEventListener("pointerdown", this.drawDown); 
+        this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
     }
 
-    
+
     /**
      * highlighting helper function
      */
-    makeEditableAndHighlight = (colour:string) => {
+    makeEditableAndHighlight = (colour: string) => {
         var range, sel = window.getSelection();
         if (sel.rangeCount && sel.getRangeAt) {
             range = sel.getRangeAt(0);
@@ -159,23 +159,23 @@ export class PDFNode extends React.Component<FieldViewProps> {
         if (!document.execCommand("HiliteColor", false, colour)) {
             document.execCommand("HiliteColor", false, colour);
         }
-        
-        if (range) { 
+
+        if (range) {
             sel.removeAllRanges();
             sel.addRange(range);
 
-            let obj:Object = {parentDivs:[], spans:[]}; 
+            let obj: Object = { parentDivs: [], spans: [] };
             //@ts-ignore
-            if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent'){ //multiline highlighting case
+            if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent') { //multiline highlighting case
                 obj = this.highlightNodes(range.commonAncestorContainer.childNodes)
-            } else{ //single line highlighting case
-               let parentDiv = range.commonAncestorContainer.parentElement
-               if (parentDiv){
-                   if (parentDiv.className == 'react-pdf__Page__textContent'){ //when highlight is overwritten
+            } else { //single line highlighting case
+                let parentDiv = range.commonAncestorContainer.parentElement
+                if (parentDiv) {
+                    if (parentDiv.className == 'react-pdf__Page__textContent') { //when highlight is overwritten
                         obj = this.highlightNodes(parentDiv.childNodes)
                     } else {
-                        parentDiv.childNodes.forEach((child)=>{
-                            if (child.nodeName == 'SPAN'){
+                        parentDiv.childNodes.forEach((child) => {
+                            if (child.nodeName == 'SPAN') {
                                 //@ts-ignore
                                 obj.parentDivs.push(parentDiv)
                                 //@ts-ignore
@@ -186,19 +186,19 @@ export class PDFNode extends React.Component<FieldViewProps> {
                             }
                         })
                     }
-               }
+                }
             }
-            this.pageInfo.divs.push(obj);   
-         
+            this.pageInfo.divs.push(obj);
+
         }
         document.designMode = "off";
     }
 
-    highlightNodes = (nodes:NodeListOf<ChildNode>) => {
-        let temp = {parentDivs: [], spans: []}
+    highlightNodes = (nodes: NodeListOf<ChildNode>) => {
+        let temp = { parentDivs: [], spans: [] }
         nodes.forEach((div) => {
-            div.childNodes.forEach((child)=>{
-                if (child.nodeName == 'SPAN'){
+            div.childNodes.forEach((child) => {
+                if (child.nodeName == 'SPAN') {
                     //@ts-ignore
                     temp.parentDivs.push(div)
                     //@ts-ignore
@@ -208,55 +208,55 @@ export class PDFNode extends React.Component<FieldViewProps> {
                     child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
                 }
             })
-            
+
         })
-        return temp; 
+        return temp;
     }
-    
+
     /**
      * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES
      */
-    @observable private currAnno:any = []
+    @observable private currAnno: any = []
     @action
-    onEnter = (e:any) => {
-        let span:HTMLSpanElement = e.toElement;
-        let index:any; 
-        this.pageInfo.divs.forEach((obj:any) =>{
-            obj.spans.forEach((element:any) =>{
+    onEnter = (e: any) => {
+        let span: HTMLSpanElement = e.toElement;
+        let index: any;
+        this.pageInfo.divs.forEach((obj: any) => {
+            obj.spans.forEach((element: any) => {
                 if (element == span) {
-                    if (!index){
-                        index = this.pageInfo.divs.indexOf(obj); 
+                    if (!index) {
+                        index = this.pageInfo.divs.indexOf(obj);
                     }
-                } 
+                }
             })
         })
-      
-        if (this.pageInfo.anno.length >= index + 1){
-            if (this.currAnno.length == 0){
-                this.currAnno.push(this.pageInfo.anno[index]); 
-            } 
-        }else{
-           if (this.currAnno.length == 0){ //if there are no current annotation
-                let div = span.offsetParent;  
+
+        if (this.pageInfo.anno.length >= index + 1) {
+            if (this.currAnno.length == 0) {
+                this.currAnno.push(this.pageInfo.anno[index]);
+            }
+        } else {
+            if (this.currAnno.length == 0) { //if there are no current annotation
+                let div = span.offsetParent;
                 //@ts-ignore
-                let divX = div.style.left  
+                let divX = div.style.left
                 //@ts-ignore
                 let divY = div.style.top
                 //slicing "px" from the end
                 divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span)
                 divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span)
-                let annotation = <Annotation key ={Utils.GenerateGuid()} Span = {span} X = {divX} Y = {divY - 300} Highlights = {this.pageInfo.divs} Annotations = {this.pageInfo.anno} CurrAnno = {this.currAnno}/>
-                this.pageInfo.anno.push(annotation); 
-                this.currAnno.push(annotation); 
-           }
+                let annotation = <Annotation key={Utils.GenerateGuid()} Span={span} X={divX} Y={divY - 300} Highlights={this.pageInfo.divs} Annotations={this.pageInfo.anno} CurrAnno={this.currAnno} />
+                this.pageInfo.anno.push(annotation);
+                this.currAnno.push(annotation);
+            }
         }
-        
+
     }
 
     /**
      * highlight function for highlighting actual text. This works fine. 
      */
-    highlight = (color:string) => {
+    highlight = (color: string) => {
         if (window.getSelection()) {
             try {
                 if (!document.execCommand("hiliteColor", false, color)) {
@@ -265,18 +265,18 @@ export class PDFNode extends React.Component<FieldViewProps> {
             } catch (ex) {
                 this.makeEditableAndHighlight(color)
             }
-        } 
+        }
     }
 
     /**
      * controls the area highlighting (stickies) Kinda temporary
      */
-    onPointerDown = (e: React.PointerEvent) => {    
-        if (this._toolOn){
-            let mouse = e.nativeEvent; 
-            this.initX = mouse.offsetX; 
-            this.initY = mouse.offsetY; 
-            
+    onPointerDown = (e: React.PointerEvent) => {
+        if (this._toolOn) {
+            let mouse = e.nativeEvent;
+            this.initX = mouse.offsetX;
+            this.initY = mouse.offsetY;
+
         }
     }
 
@@ -284,169 +284,170 @@ export class PDFNode extends React.Component<FieldViewProps> {
      * controls area highlighting and partially highlighting. Kinda temporary
      */
     @action
-    onPointerUp = (e:React.PointerEvent) => {
-     
-      if (this._highlightToolOn){
-           this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. 
-           this._highlightToolOn = false; 
-       }
-        if (this._toolOn){
-            let mouse = e.nativeEvent; 
-            let finalX = mouse.offsetX; 
+    onPointerUp = (e: React.PointerEvent) => {
+
+        if (this._highlightToolOn) {
+            this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. 
+            this._highlightToolOn = false;
+        }
+        if (this._toolOn) {
+            let mouse = e.nativeEvent;
+            let finalX = mouse.offsetX;
             let finalY = mouse.offsetY;
             let width = Math.abs(finalX - this.initX); //width
             let height = Math.abs(finalY - this.initY); //height
-        
+
             //these two if statements are bidirectional dragging. You can drag from any point to another point and generate sticky
-            if (finalX < this.initX){
-                this.initX = finalX; 
+            if (finalX < this.initX) {
+                this.initX = finalX;
             }
-            if (finalY < this.initY){
-                this.initY = finalY; 
+            if (finalY < this.initY) {
+                this.initY = finalY;
             }
 
-            if (this._mainDiv.current){
-                let sticky = <Sticky key ={Utils.GenerateGuid()} Height = {height} Width = {width} X = {this.initX} Y = {this.initY}/>
-                this.pageInfo.area.push(sticky);  
-            } 
-            this._toolOn = false; 
+            if (this._mainDiv.current) {
+                let sticky = <Sticky key={Utils.GenerateGuid()} Height={height} Width={width} X={this.initX} Y={this.initY} />
+                this.pageInfo.area.push(sticky);
+            }
+            this._toolOn = false;
         }
-        
+
     }
-   
+
     /**
      * starts drawing the line when user presses down. 
      */
     onDraw = () => {
-        if (this._currTool != null){
+        if (this._currTool != null) {
             this._currTool.style.backgroundColor = "grey";
         }
-        
-        if (this._drawTool.current){
-            this._currTool = this._drawTool.current; 
-            if (this._drawToolOn){
-                this._drawToolOn = false; 
+
+        if (this._drawTool.current) {
+            this._currTool = this._drawTool.current;
+            if (this._drawToolOn) {
+                this._drawToolOn = false;
                 this._pdfCanvas.removeEventListener("pointerdown", this.drawDown);
                 this._pdfCanvas.removeEventListener("pointerup", this.drawUp);
                 this._pdfCanvas.removeEventListener("pointermove", this.drawMove);
                 this._drawTool.current.style.backgroundColor = "grey";
             } else {
-                this._drawToolOn = true; 
+                this._drawToolOn = true;
                 this._pdfCanvas.addEventListener("pointerdown", this.drawDown);
                 this._drawTool.current.style.backgroundColor = "cyan";
             }
         }
     }
 
-   
+
     /**
      * for changing color (for ink/pen)
      */
-    onColorChange = (e:React.PointerEvent) => {
-        if (e.currentTarget.innerHTML == "Red"){
-            this._currColor = "red"; 
-        } else if (e.currentTarget.innerHTML == "Blue"){
-            this._currColor = "blue"; 
-        } else if (e.currentTarget.innerHTML == "Green"){
-            this._currColor = "green"; 
-        } else if (e.currentTarget.innerHTML == "Black"){
-            this._currColor = "black"; 
+    onColorChange = (e: React.PointerEvent) => {
+        if (e.currentTarget.innerHTML == "Red") {
+            this._currColor = "red";
+        } else if (e.currentTarget.innerHTML == "Blue") {
+            this._currColor = "blue";
+        } else if (e.currentTarget.innerHTML == "Green") {
+            this._currColor = "green";
+        } else if (e.currentTarget.innerHTML == "Black") {
+            this._currColor = "black";
         }
-      
+
     }
 
-   
+
     /**
      * For highlighting (text drag highlighting)
      */
     onHighlight = () => {
-        this._drawToolOn = false; 
-        if (this._currTool != null){
+        this._drawToolOn = false;
+        if (this._currTool != null) {
             this._currTool.style.backgroundColor = "grey";
         }
-        if (this._highlightTool.current){
+        if (this._highlightTool.current) {
             this._currTool = this._drawTool.current;
-            if (this._highlightToolOn){
-                this._highlightToolOn = false; 
+            if (this._highlightToolOn) {
+                this._highlightToolOn = false;
                 this._highlightTool.current.style.backgroundColor = "grey";
             } else {
-                this._highlightToolOn = true; 
+                this._highlightToolOn = true;
                 this._highlightTool.current.style.backgroundColor = "orange";
             }
         }
     }
 
-  
+
     /**
      * renders whole lot of shets, including pdf, stickies, and annotations. 
      */
 
-    reHighlight = () =>{
-        let div = document.getElementsByClassName("react-pdf__Page__textContent"); 
-        if (div){
-           
+    reHighlight = () => {
+        let div = document.getElementsByClassName("react-pdf__Page__textContent");
+        if (div) {
+
         }
-        
+
     }
-   
-    
+
+
     render() {
         return (
-            <div ref = {this._mainDiv}
-            onPointerDown ={this.onPointerDown}
-            onPointerUp = {this.onPointerUp}
+            <div ref={this._mainDiv}
+                onPointerDown={this.onPointerDown}
+                onPointerUp={this.onPointerUp}
             >
-                
-                {this.pageInfo.area.filter( () => {
-                    return this.pageInfo.area}).map((element: any) => {
-                        return element
-                    })
-                }  
-                {this.currAnno.map((element:any) => {
+
+                {this.pageInfo.area.filter(() => {
+                    return this.pageInfo.area
+                }).map((element: any) => {
+                    return element
+                })
+                }
+                {this.currAnno.map((element: any) => {
                     return element
-                })}             
-               
-                <button onClick = {this.onPageBack}>{"<"}</button>
-                <button onClick = {this.onPageForward}>{">"}</button>
-                <button onClick ={this.selectionTool}>{"Area"}</button>
-                <button style ={{color: "white", backgroundColor: "grey"}} onClick = {this.onHighlight} ref = {this._highlightTool}>Highlight</button>
-                <button style ={{color: "white", backgroundColor: "grey"}} ref = {this._drawTool} onClick = {this.onDraw}>{"Draw"}</button>
-                <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Red"}</button>
-                <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Blue"}</button>
-                <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Green"}</button>
-                <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Black"}</button>
-            
-                <Document  file={Utils.pdf_example}>
+                })}
+
+                <button onClick={this.onPageBack}>{"<"}</button>
+                <button onClick={this.onPageForward}>{">"}</button>
+                <button onClick={this.selectionTool}>{"Area"}</button>
+                <button style={{ color: "white", backgroundColor: "grey" }} onClick={this.onHighlight} ref={this._highlightTool}>Highlight</button>
+                <button style={{ color: "white", backgroundColor: "grey" }} ref={this._drawTool} onClick={this.onDraw}>{"Draw"}</button>
+                <button ref={this._colorTool} onPointerDown={this.onColorChange}>{"Red"}</button>
+                <button ref={this._colorTool} onPointerDown={this.onColorChange}>{"Blue"}</button>
+                <button ref={this._colorTool} onPointerDown={this.onColorChange}>{"Green"}</button>
+                <button ref={this._colorTool} onPointerDown={this.onColorChange}>{"Black"}</button>
+
+                <Document file={"https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"}>
                     <Page
                         pageNumber={this.page}
                         onLoadSuccess={
-                            (page:any) => {
-                                if (this._mainDiv.current){
+                            (page: any) => {
+                                if (this._mainDiv.current) {
                                     this._mainDiv.current.childNodes.forEach((element) => {
-                                        if (element.nodeName == "DIV"){
+                                        if (element.nodeName == "DIV") {
                                             element.childNodes[0].childNodes.forEach((e) => {
-                                              
-                                               if (e.nodeName == "CANVAS"){
-                                                   this._pdfCanvas = e;  
-                                                   //@ts-ignore
-                                                   this._pdfContext = e.getContext("2d")
-                                                   
-                                               } 
-                                               
+
+                                                if (e.nodeName == "CANVAS") {
+                                                    this._pdfCanvas = e;
+                                                    //@ts-ignore
+                                                    this._pdfContext = e.getContext("2d")
+
+                                                }
+
                                             })
                                         }
                                     })
                                 }
                                 this.numPage = page.transport.numPages
-                                if (this.perPage.length == 0){ //Makes sure it only runs once
+                                if (this.perPage.length == 0) { //Makes sure it only runs once
                                     this.perPage = [...Array(this.numPage)]
                                 }
                             }
                         }
-                    />  
+                    />
                 </Document>
             </div>
         );
     }
-    
+
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/Sticky.tsx b/src/client/views/nodes/Sticky.tsx
new file mode 100644
index 000000000..d57dd5c0b
--- /dev/null
+++ b/src/client/views/nodes/Sticky.tsx
@@ -0,0 +1,83 @@
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import React = require("react")
+import { observer } from "mobx-react"
+import 'react-pdf/dist/Page/AnnotationLayer.css'
+
+interface IProps {
+    Height: number;
+    Width: number;
+    X: number;
+    Y: number;
+}
+
+/**
+ * Sticky, also known as area highlighting, is used to highlight large selection of the PDF file. 
+ * Improvements that could be made: maybe store line array and store that somewhere for future rerendering. 
+ * 
+ * Written By: Andrew Kim 
+ */
+@observer
+export class Sticky extends React.Component<IProps> {
+
+    private initX: number = 0;
+    private initY: number = 0;
+
+    private _ref = React.createRef<HTMLCanvasElement>();
+    private ctx: any; //context that keeps track of sticky canvas
+
+    /**
+     * drawing. Registers the first point that user clicks when mouse button is pressed down on canvas
+     */
+    drawDown = (e: React.PointerEvent) => {
+        if (this._ref.current) {
+            this.ctx = this._ref.current.getContext("2d");
+            let mouse = e.nativeEvent;
+            this.initX = mouse.offsetX;
+            this.initY = mouse.offsetY;
+            this.ctx.beginPath();
+            this.ctx.lineTo(this.initX, this.initY);
+            this.ctx.strokeStyle = "black";
+            document.addEventListener("pointermove", this.drawMove);
+            document.addEventListener("pointerup", this.drawUp);
+        }
+    }
+
+    //when user drags 
+    drawMove = (e: PointerEvent): void => {
+        //x and y mouse movement
+        let x = this.initX += e.movementX,
+            y = this.initY += e.movementY;
+        //connects the point 
+        this.ctx.lineTo(x, y);
+        this.ctx.stroke();
+
+    }
+
+    /**
+     * when user lifts the mouse, the drawing ends
+     */
+    drawUp = (e: PointerEvent) => {
+        this.ctx.closePath();
+        console.log(this.ctx);
+        document.removeEventListener("pointermove", this.drawMove);
+    }
+
+    render() {
+        return (
+            <div onPointerDown={this.drawDown}>
+                <canvas ref={this._ref} height={this.props.Height} width={this.props.Width}
+                    style={{
+                        position: "absolute",
+                        top: "20px",
+                        left: "0px",
+                        zIndex: 1,
+                        background: "yellow",
+                        transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
+                        opacity: 0.4
+                    }}
+                />
+
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/views/nodes/ImageBox.scss b/src/client/views/nodes/WebBox.scss
index 136fda1d0..e72b3c4da 100644
--- a/src/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -1,9 +1,12 @@
 
-.imageBox-cont {
+.webBox-cont {
     padding: 0vw;
+    position: absolute;
+    width: 100%;
+    height: 100%;
 }
 
-.imageBox-button {
+.webBox-button {
     padding : 0vw;
     border: none;
     width : 100%;
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
new file mode 100644
index 000000000..2ca8d49ce
--- /dev/null
+++ b/src/client/views/nodes/WebBox.tsx
@@ -0,0 +1,38 @@
+import "./WebBox.scss";
+import React = require("react")
+import { WebField } from '../../../fields/WebField';
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { computed } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+
+@observer
+export class WebBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(WebBox); }
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+    @computed get html(): string { return this.props.doc.GetHtml(KeyStore.Data, ""); }
+
+    render() {
+        let field = this.props.doc.Get(this.props.fieldKey);
+        let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+            field instanceof WebField ? field.Data.href : "https://crossorigin.me/" + "https://cs.brown.edu";
+
+        let content = this.html ?
+            <span dangerouslySetInnerHTML={{ __html: this.html }}></span> :
+            <div style={{ width: "100%", height: "100%", position: "absolute" }}>
+                <iframe src={path} style={{ position: "absolute", width: "100%", height: "100%" }}></iframe>
+                {this.props.isSelected() ? (null) : <div style={{ width: "100%", height: "100%", position: "absolute" }} />}
+            </div>;
+
+        return (
+            <div className="webBox-cont"  >
+                {content}
+            </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx
new file mode 100644
index 000000000..7bc70615f
--- /dev/null
+++ b/src/debug/Test.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+class TestInternal extends React.Component {
+    onContextMenu = (e: React.MouseEvent) => {
+        console.log("Internal");
+        e.stopPropagation();
+    }
+
+    onPointerDown = (e: React.MouseEvent) => {
+        console.log("pointer down")
+        e.preventDefault();
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown}
+            onPointerUp={this.onPointerDown}>Hello world</div>
+    }
+}
+
+class TestChild extends React.Component {
+    onContextMenu = () => {
+        console.log("Child");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestInternal /></div>
+    }
+}
+
+class TestParent extends React.Component {
+    onContextMenu = () => {
+        console.log("Parent");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestChild /></div>
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <TestParent />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file
diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
new file mode 100644
index 000000000..780e9f8f2
--- /dev/null
+++ b/src/debug/Viewer.tsx
@@ -0,0 +1,192 @@
+import { action, configure, observable, ObservableMap, Lambda } from 'mobx';
+import "normalize.css";
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { observer } from 'mobx-react';
+import { Document } from '../fields/Document';
+import { BasicField } from '../fields/BasicField';
+import { ListField } from '../fields/ListField';
+import { Key } from '../fields/Key';
+import { Opt, Field } from '../fields/Field';
+import { Server } from '../client/Server';
+
+configure({
+    enforceActions: "observed"
+});
+
+@observer
+class FieldViewer extends React.Component<{ field: BasicField<any> }> {
+    render() {
+        return <span>{JSON.stringify(this.props.field.Data)} ({this.props.field.Id})</span>;
+    }
+}
+
+@observer
+class KeyViewer extends React.Component<{ field: Key }> {
+    render() {
+        return this.props.field.Name;
+    }
+}
+
+@observer
+class ListViewer extends React.Component<{ field: ListField<Field> }>{
+    @observable
+    expanded = false;
+
+    render() {
+        let content;
+        if (this.expanded) {
+            content = (
+                <div>
+                    {this.props.field.Data.map(field => <DebugViewer fieldId={field.Id} key={field.Id} />)}
+                </div>
+            )
+        } else {
+            content = <>[...] ({this.props.field.Id})</>
+        }
+        return (
+            <div>
+                <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
+                {content}
+            </div >
+        )
+    }
+}
+
+@observer
+class DocumentViewer extends React.Component<{ field: Document }> {
+    private keyMap: ObservableMap<string, Key> = new ObservableMap
+
+    private disposer?: Lambda;
+
+    componentDidMount() {
+        let f = () => {
+            Array.from(this.props.field._proxies.keys()).forEach(id => {
+                if (!this.keyMap.has(id)) {
+                    Server.GetField(id, (field) => {
+                        if (field && field instanceof Key) {
+                            this.keyMap.set(id, field);
+                        }
+                    })
+                }
+            });
+        }
+        this.disposer = this.props.field._proxies.observe(f)
+        f()
+    }
+
+    componentWillUnmount() {
+        if (this.disposer) {
+            this.disposer();
+        }
+    }
+
+    render() {
+        let fields = Array.from(this.props.field._proxies.entries()).map(kv => {
+            let key = this.keyMap.get(kv[0]);
+            return (
+                <div key={kv[0]}>
+                    <b>({key ? key.Name : kv[0]}): </b>
+                    <DebugViewer fieldId={kv[1]!}></DebugViewer>
+                </div>
+            )
+        })
+        return (
+            <div>
+                Document ({this.props.field.Id})
+                <div style={{ paddingLeft: "25px" }}>
+                    {fields}
+                </div>
+            </div>
+        )
+    }
+}
+
+@observer
+class DebugViewer extends React.Component<{ fieldId: string }> {
+    @observable
+    private field?: Field;
+
+    @observable
+    private error?: string;
+
+    constructor(props: { fieldId: string }) {
+        super(props)
+        this.update()
+    }
+
+    update() {
+        Server.GetField(this.props.fieldId, action((field: Opt<Field>) => {
+            this.field = field;
+            if (!field) {
+                this.error = `Field with id ${this.props.fieldId} not found`
+            }
+        }));
+
+    }
+
+    render() {
+        let content;
+        if (this.field) {
+            // content = this.field.ToJson();
+            if (this.field instanceof ListField) {
+                content = (<ListViewer field={this.field} />)
+            } else if (this.field instanceof Document) {
+                content = (<DocumentViewer field={this.field} />)
+            } else if (this.field instanceof BasicField) {
+                content = (<FieldViewer field={this.field} />)
+            } else if (this.field instanceof Key) {
+                content = (<KeyViewer field={this.field} />)
+            }
+        } else if (this.error) {
+            content = <span>Field <b>{this.props.fieldId}</b> not found <button onClick={() => this.update()}>Refresh</button></span>
+        } else {
+            content = <>Field loading</>
+        }
+        return content;
+    }
+}
+
+@observer
+class Viewer extends React.Component {
+    @observable
+    private idToAdd: string = '';
+
+    @observable
+    private ids: string[] = [];
+
+    @action
+    inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.idToAdd = e.target.value;
+    }
+
+    @action
+    onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter") {
+            this.ids.push(this.idToAdd)
+            this.idToAdd = ""
+        }
+    }
+
+    render() {
+        return (
+            <>
+                <input value={this.idToAdd}
+                    onChange={this.inputOnChange}
+                    onKeyDown={this.onKeyPress} />
+                <div>
+                    {this.ids.map(id => {
+                        return <DebugViewer fieldId={id} key={id}></DebugViewer>
+                    })}
+                </div>
+            </>
+        )
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <Viewer />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
deleted file mode 100644
index 657856801..000000000
--- a/src/documents/Documents.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import { Document } from "../fields/Document";
-import { Server } from "../Server";
-import { KeyStore } from "../fields/Key";
-import { TextField } from "../fields/TextField";
-import { NumberField } from "../fields/NumberField";
-import { ListField } from "../fields/ListField";
-import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
-import { CollectionDockingView } from "../views/collections/CollectionDockingView";
-import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
-import { ImageField } from "../fields/ImageField";
-import { ImageBox } from "../views/nodes/ImageBox";
-import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
-import { FIELD_ID } from "../fields/Field";
-import {PDFField} from "../fields/PDFField"; 
-import {PDFNode}from "../views/nodes/PDFNode"; 
-
-interface DocumentOptions {
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
-    title?: string;
-}
-
-export namespace Documents {
-    function setupOptions(doc: Document, options: DocumentOptions): void {
-        if (options.x) {
-            doc.SetData(KeyStore.X, options.x, NumberField);
-        }
-        if (options.y) {
-            doc.SetData(KeyStore.Y, options.y, NumberField);
-        }
-        if (options.width) {
-            doc.SetData(KeyStore.Width, options.width, NumberField);
-        }
-        if (options.height) {
-            doc.SetData(KeyStore.Height, options.height, NumberField);
-        }
-        if (options.title) {
-            doc.SetData(KeyStore.Title, options.title, TextField);
-        }
-        doc.SetData(KeyStore.Scale, 1, NumberField);
-        doc.SetData(KeyStore.PanX, 0, NumberField);
-        doc.SetData(KeyStore.PanY, 0, NumberField);
-    }
-
-    let textProto: Document;
-    function GetTextPrototype(): Document {
-        if (!textProto) {
-            textProto = new Document();
-            textProto.Set(KeyStore.X, new NumberField(0));
-            textProto.Set(KeyStore.Y, new NumberField(0));
-            textProto.Set(KeyStore.Width, new NumberField(300));
-            textProto.Set(KeyStore.Height, new NumberField(150));
-            textProto.Set(KeyStore.Layout, new TextField(FormattedTextBox.LayoutString()));
-            textProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return textProto;
-    }
-
-    export function TextDocument(options: DocumentOptions = {}): Document {
-        let doc = GetTextPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        // doc.SetField(KeyStore.Data, new RichTextField());
-        return doc;
-    }
-
-    let schemaProto: Document;
-    function GetSchemaPrototype(): Document {
-        if (!schemaProto) {
-            schemaProto = new Document();
-            schemaProto.Set(KeyStore.X, new NumberField(0));
-            schemaProto.Set(KeyStore.Y, new NumberField(0));
-            schemaProto.Set(KeyStore.Width, new NumberField(300));
-            schemaProto.Set(KeyStore.Height, new NumberField(150));
-            schemaProto.Set(KeyStore.Layout, new TextField(CollectionSchemaView.LayoutString()));
-            schemaProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return schemaProto;
-    }
-
-    export function SchemaDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
-        let doc = GetSchemaPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new ListField(documents));
-        return doc;
-    }
-
-
-    let dockProto: Document;
-    function GetDockPrototype(): Document {
-        if (!dockProto) {
-            dockProto = new Document();
-            dockProto.Set(KeyStore.X, new NumberField(0));
-            dockProto.Set(KeyStore.Y, new NumberField(0));
-            dockProto.Set(KeyStore.Width, new NumberField(300));
-            dockProto.Set(KeyStore.Height, new NumberField(150));
-            dockProto.Set(KeyStore.Layout, new TextField(CollectionDockingView.LayoutString()));
-            dockProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return dockProto;
-    }
-
-    export function DockDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
-        let doc = GetDockPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new ListField(documents));
-        return doc;
-    }
-
-
-    let imageProtoId: FIELD_ID;
-    function GetImagePrototype(): Document {
-        if (imageProtoId === undefined) {
-            let imageProto = new Document();
-            imageProtoId = imageProto.Id;
-            imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO"));
-            imageProto.Set(KeyStore.X, new NumberField(0));
-            imageProto.Set(KeyStore.Y, new NumberField(0));
-            imageProto.Set(KeyStore.Width, new NumberField(300));
-            imageProto.Set(KeyStore.Height, new NumberField(300));
-            imageProto.Set(KeyStore.Layout, new TextField(ImageBox.LayoutString()));
-            // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
-            imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-            Server.AddDocument(imageProto);
-            return imageProto;
-        }
-        return Server.GetDocument(imageProtoId, true)!;
-    }
-
-    //for PDF
-    let PDFProtoId: FIELD_ID;
-    function GetPDFPrototype(): Document {
-        if (PDFProtoId === undefined) {
-            let PDFProto = new Document();
-            PDFProtoId = PDFProto.Id;
-            PDFProto.Set(KeyStore.Title, new TextField("PDF PROTO"));
-            PDFProto.Set(KeyStore.X, new NumberField(0));
-            PDFProto.Set(KeyStore.Y, new NumberField(0));
-            PDFProto.Set(KeyStore.Width, new NumberField(300));
-            PDFProto.Set(KeyStore.Height, new NumberField(300));
-            PDFProto.Set(KeyStore.Layout, new TextField(PDFNode.LayoutString()));
-            PDFProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-            Server.AddDocument(PDFProto);
-            return PDFProto;
-        }
-        return Server.GetDocument(PDFProtoId, true)!;
-    }
-
-    export function PDFDocument(url: string, options: DocumentOptions = {}): Document{
-        let doc = GetPDFPrototype().MakeDelegate(); 
-        setupOptions(doc, options); 
-        doc.Set(KeyStore.Data, new PDFField(new URL(url))); 
-        Server.AddDocument(doc); 
-        return Server.GetDocument(doc.Id, true); 
-    }
-
-    export function ImageDocument(url: string, options: DocumentOptions = {}): Document {
-        let doc = GetImagePrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new ImageField(new URL(url)));
-        Server.AddDocument(doc);
-        return Server.GetDocument(doc.Id, true)!;
-    }
-
-    let collectionProto: Document;
-    function GetCollectionPrototype(): Document {
-        if (!collectionProto) {
-            collectionProto = new Document();
-            collectionProto.Set(KeyStore.X, new NumberField(0));
-            collectionProto.Set(KeyStore.Y, new NumberField(0));
-            collectionProto.Set(KeyStore.Scale, new NumberField(1));
-            collectionProto.Set(KeyStore.PanX, new NumberField(0));
-            collectionProto.Set(KeyStore.PanY, new NumberField(0));
-            collectionProto.Set(KeyStore.Width, new NumberField(300));
-            collectionProto.Set(KeyStore.Height, new NumberField(300));
-            collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString()));
-            collectionProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return collectionProto;
-    }
-
-    export function CollectionDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
-        let doc = GetCollectionPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new ListField(documents));
-        return doc;
-    }
-}
\ No newline at end of file
diff --git a/src/fields/BasicField.ts b/src/fields/BasicField.ts
index fb5cc773e..a92c4a236 100644
--- a/src/fields/BasicField.ts
+++ b/src/fields/BasicField.ts
@@ -1,15 +1,26 @@
-import { Field } from "./Field"
+import { Field, FieldId } from "./Field"
 import { observable, computed, action } from "mobx";
+import { Server } from "../client/Server";
+import { UndoManager } from "../client/util/UndoManager";
 
 export abstract class BasicField<T> extends Field {
-    constructor(data: T) {
-        super();
+    constructor(data: T, save: boolean, id?: FieldId) {
+        super(id);
 
         this.data = data;
+        if (save) {
+            Server.UpdateField(this)
+        }
+    }
+
+    UpdateFromServer(data: any) {
+        if (this.data !== data) {
+            this.data = data;
+        }
     }
 
     @observable
-    private data: T;
+    protected data: T;
 
     @computed
     get Data(): T {
@@ -20,6 +31,16 @@ export abstract class BasicField<T> extends Field {
         if (this.data === value) {
             return;
         }
+        let oldValue = this.data;
+        this.setData(value);
+        UndoManager.AddEvent({
+            undo: () => this.Data = oldValue,
+            redo: () => this.Data = value
+        })
+        Server.UpdateField(this);
+    }
+
+    protected setData(value: T) {
         this.data = value;
     }
 
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 3d74c047c..2e873439c 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -1,52 +1,166 @@
-import { Field, Cast, Opt, FieldWaiting, FIELD_ID, DOC_ID } from "./Field"
-import { Key, KeyStore } from "./Key"
+import { Key } from "./Key"
+import { KeyStore } from "./KeyStore";
+import { Field, Cast, FieldWaiting, FieldValue, FieldId } from "./Field"
 import { NumberField } from "./NumberField";
-import { ObservableMap, computed, action, observable } from "mobx";
+import { ObservableMap, computed, action } from "mobx";
 import { TextField } from "./TextField";
 import { ListField } from "./ListField";
-import { findDOMNode } from "react-dom";
-import { Server } from "../Server";
+import { Server } from "../client/Server";
+import { Types } from "../server/Message";
+import { UndoManager } from "../client/util/UndoManager";
+import { HtmlField } from "./HtmlField";
 
 export class Document extends Field {
-    public fields: ObservableMap<Key, Opt<Field>> = new ObservableMap();
-    public _proxies: ObservableMap<Key, FIELD_ID> = new ObservableMap();
+    public fields: ObservableMap<string, { key: Key, field: Field }> = new ObservableMap();
+    public _proxies: ObservableMap<string, FieldId> = new ObservableMap();
+
+    constructor(id?: string, save: boolean = true) {
+        super(id)
+
+        if (save) {
+            Server.UpdateField(this)
+        }
+    }
+
+    UpdateFromServer(data: [string, string][]) {
+        for (const key in data) {
+            const element = data[key];
+            this._proxies.set(element[0], element[1]);
+        }
+    }
+
+    public Width = () => { return this.GetNumber(KeyStore.Width, 0) }
+    public Height = () => { return this.GetNumber(KeyStore.Height, this.GetNumber(KeyStore.NativeWidth, 0) ? this.GetNumber(KeyStore.NativeHeight, 0) / this.GetNumber(KeyStore.NativeWidth, 0) * this.GetNumber(KeyStore.Width, 0) : 0) }
+    public Scale = () => { return this.GetNumber(KeyStore.Scale, 1) }
 
     @computed
     public get Title() {
         return this.GetText(KeyStore.Title, "<untitled>");
     }
 
-    Get(key: Key, ignoreProto: boolean = false): Opt<Field> {
-        let field: Opt<Field>;
+    /**
+     * Get the field in the document associated with the given key. If the
+     * associated field has not yet been filled in from the server, a request
+     * to the server will automatically be sent, the value will be filled in 
+     * when the request is completed, and {@link Field.ts#FieldWaiting} will be returned.
+     * @param key - The key of the value to get
+     * @param ignoreProto - If true, ignore any prototype this document
+     * might have and only search for the value on this immediate document.
+     * If false (default), search up the prototype chain, starting at this document,
+     * for a document that has a field associated with the given key, and return the first
+     * one found.
+     * 
+     * @returns If the document does not have a field associated with the given key, returns `undefined`.
+     * If the document does have an associated field, but the field has not been fetched from the server, returns {@link Field.ts#FieldWaiting}.
+     * If the document does have an associated field, and the field has not been fetched from the server, returns the associated field.
+     */
+    Get(key: Key, ignoreProto: boolean = false): FieldValue<Field> {
+        let field: FieldValue<Field>;
         if (ignoreProto) {
-            if (this.fields.has(key)) {
-                field = this.fields.get(key);
-            } else if (this._proxies.has(key)) {
-                field = Server.GetDocumentField(this, key);
+            if (this.fields.has(key.Id)) {
+                field = this.fields.get(key.Id)!.field;
+            } else if (this._proxies.has(key.Id)) {
+                Server.GetDocumentField(this, key);
+                /*
+                The field might have been instantly filled from the cache
+                Maybe we want to just switch back to returning the value
+                from Server.GetDocumentField if it's in the cache
+                */
+                if (this.fields.has(key.Id)) {
+                    field = this.fields.get(key.Id)!.field;
+                } else {
+                    field = FieldWaiting;
+                }
             }
         } else {
-            let doc: Opt<Document> = this;
+            let doc: FieldValue<Document> = this;
             while (doc && doc != FieldWaiting && field != FieldWaiting) {
-                if (!doc.fields.has(key)) {
-                    if (doc._proxies.has(key)) {
-                        field = Server.GetDocumentField(doc, key);
+                let curField = doc.fields.get(key.Id);
+                let curProxy = doc._proxies.get(key.Id);
+                if (!curField || (curProxy && curField.field.Id !== curProxy)) {
+                    if (curProxy) {
+                        Server.GetDocumentField(doc, key);
+                        /*
+                        The field might have been instantly filled from the cache
+                        Maybe we want to just switch back to returning the value
+                        from Server.GetDocumentField if it's in the cache
+                        */
+                        if (this.fields.has(key.Id)) {
+                            field = this.fields.get(key.Id)!.field;
+                        } else {
+                            field = FieldWaiting;
+                        }
                         break;
                     }
-                    if ((doc.fields.has(KeyStore.Prototype) || doc._proxies.has(KeyStore.Prototype))) {
+                    if ((doc.fields.has(KeyStore.Prototype.Id) || doc._proxies.has(KeyStore.Prototype.Id))) {
                         doc = doc.GetPrototype();
-                    } else
+                    } else {
                         break;
+                    }
                 } else {
-                    field = doc.fields.get(key);
+                    field = curField.field;
                     break;
                 }
             }
+            if (doc == FieldWaiting)
+                field = FieldWaiting;
         }
 
         return field;
     }
 
-    GetT<T extends Field = Field>(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): Opt<T> {
+    /**
+     * Tries to get the field associated with the given key, and if there is an
+     * associated field, calls the given callback with that field.
+     * @param key - The key of the value to get
+     * @param callback - A function that will be called with the associated field, if it exists,
+     * once it is fetched from the server (this may be immediately if the field has already been fetched).
+     * Note: The callback will not be called if there is no associated field.
+     * @returns `true` if the field exists on the document and `callback` will be called, and `false` otherwise
+     */
+    GetAsync(key: Key, callback: (field: Field) => void): boolean {
+        //TODO: This should probably check if this.fields contains the key before calling Server.GetDocumentField
+        //This currently doesn't deal with prototypes
+        if (this._proxies.has(key.Id)) {
+            Server.GetDocumentField(this, key, callback);
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Same as {@link Document#GetAsync}, except a field of the given type
+     * will be created if there is no field associated with the given key,
+     * or the field associated with the given key is not of the given type.
+     * @param ctor - Constructor of the field type to get. E.g., TextField, ImageField, etc.
+     */
+    GetOrCreateAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: T) => void): void {
+        //This currently doesn't deal with prototypes
+        if (this._proxies.has(key.Id)) {
+            Server.GetDocumentField(this, key, (field) => {
+                if (field && field instanceof ctor) {
+                    callback(field);
+                } else {
+                    let newField = new ctor();
+                    this.Set(key, newField);
+                    callback(newField);
+                }
+            });
+        } else {
+            let newField = new ctor();
+            this.Set(key, newField);
+            callback(newField);
+        }
+    }
+
+    /**
+     * Same as {@link Document#Get}, except that it will additionally
+     * check if the field is of the given type.
+     * @param ctor - Constructor of the field type to get. E.g., `TextField`, `ImageField`, etc.
+     * @returns Same as {@link Document#Get}, except will return `undefined`
+     * if there is an associated field but it is of the wrong type.
+     */
+    GetT<T extends Field = Field>(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): FieldValue<T> {
         var getfield = this.Get(key, ignoreProto);
         if (getfield != FieldWaiting) {
             return Cast(getfield, ctor);
@@ -70,6 +184,10 @@ export class Document extends Field {
         return vval;
     }
 
+    GetHtml(key: Key, defaultVal: string): string {
+        return this.GetData(key, HtmlField, defaultVal);
+    }
+
     GetNumber(key: Key, defaultVal: number): number {
         return this.GetData(key, NumberField, defaultVal);
     }
@@ -84,29 +202,37 @@ export class Document extends Field {
 
     @action
     Set(key: Key, field: Field | undefined): void {
+        let old = this.fields.get(key.Id);
+        let oldField = old ? old.field : undefined;
         if (field) {
-            this.fields.set(key, field);
-            Server.AddDocumentField(this, key, field);
+            this.fields.set(key.Id, { key, field });
+            this._proxies.set(key.Id, field.Id)
+            // Server.AddDocumentField(this, key, field);
         } else {
-            this.fields.delete(key);
-            Server.DeleteDocumentField(this, key);
+            this.fields.delete(key.Id);
+            this._proxies.delete(key.Id)
+            // Server.DeleteDocumentField(this, key);
         }
+        if (oldField || field) {
+            UndoManager.AddEvent({
+                undo: () => this.Set(key, oldField),
+                redo: () => this.Set(key, field)
+            })
+        }
+        Server.UpdateField(this);
     }
 
     @action
     SetData<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(): U }, replaceWrongType = true) {
 
         let field = this.Get(key, true);
-        //if (field != WAITING) {  // do we want to wait for the field to come back from the server to set it, or do we overwrite?
         if (field instanceof ctor) {
             field.Data = value;
-            Server.SetFieldValue(field, value);
         } else if (!field || replaceWrongType) {
             let newField = new ctor();
             newField.Data = value;
             this.Set(key, newField);
         }
-        //}
     }
 
     @action
@@ -119,13 +245,13 @@ export class Document extends Field {
         this.SetData(key, value, NumberField, replaceWrongType);
     }
 
-    GetPrototype(): Opt<Document> {
+    GetPrototype(): FieldValue<Document> {
         return this.GetT(KeyStore.Prototype, Document, true);
     }
 
     GetAllPrototypes(): Document[] {
         let protos: Document[] = [];
-        let doc: Opt<Document> = this;
+        let doc: FieldValue<Document> = this;
         while (doc && doc != FieldWaiting) {
             protos.push(doc);
             doc = doc.GetPrototype();
@@ -133,23 +259,42 @@ export class Document extends Field {
         return protos;
     }
 
-    MakeDelegate(): Document {
-        let delegate = new Document();
+    MakeDelegate(id?: string): Document {
+        let delegate = new Document(id);
 
         delegate.Set(KeyStore.Prototype, this);
 
         return delegate;
     }
 
+    ToScriptString(): string {
+        return "";
+    }
+
     TrySetValue(value: any): boolean {
         throw new Error("Method not implemented.");
     }
     GetValue() {
-        throw new Error("Method not implemented.");
+        var title = (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) + "(" + this.Id + ")";
+        return title;
+        //throw new Error("Method not implemented.");
     }
     Copy(): Field {
         throw new Error("Method not implemented.");
     }
 
+    ToJson(): { type: Types, data: [string, string][], _id: string } {
+        let fields: [string, string][] = []
+        this._proxies.forEach((field, key) => {
+            if (field) {
+                fields.push([key, field as string])
+            }
+        });
 
+        return {
+            type: Types.Document,
+            data: fields,
+            _id: this.Id
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/fields/DocumentReference.ts b/src/fields/DocumentReference.ts
index 10dac9f92..9d3c209b4 100644
--- a/src/fields/DocumentReference.ts
+++ b/src/fields/DocumentReference.ts
@@ -1,6 +1,8 @@
-import { Field, Opt } from "./Field";
+import { Field, Opt, FieldValue, FieldId } from "./Field";
 import { Document } from "./Document";
 import { Key } from "./Key";
+import { Types } from "../server/Message";
+import { ObjectID } from "bson";
 
 export class DocumentReference extends Field {
     get Key(): Key {
@@ -15,12 +17,16 @@ export class DocumentReference extends Field {
         super();
     }
 
-    Dereference(): Opt<Field> {
+    UpdateFromServer() {
+
+    }
+
+    Dereference(): FieldValue<Field> {
         return this.document.Get(this.key);
     }
 
-    DereferenceToRoot(): Opt<Field> {
-        let field: Opt<Field> = this;
+    DereferenceToRoot(): FieldValue<Field> {
+        let field: FieldValue<Field> = this;
         while (field instanceof DocumentReference) {
             field = field.Dereference();
         }
@@ -37,5 +43,15 @@ export class DocumentReference extends Field {
         throw new Error("Method not implemented.");
     }
 
+    ToScriptString(): string {
+        return "";
+    }
 
+    ToJson(): { type: Types, data: FieldId, _id: string } {
+        return {
+            type: Types.DocumentReference,
+            data: this.document.Id,
+            _id: this.Id
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index 9880116c0..d48509a47 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -1,7 +1,9 @@
 
 import { Utils } from "../Utils";
+import { Types } from "../server/Message";
+import { computed } from "mobx";
 
-export function Cast<T extends Field>(field: Opt<Field>, ctor: { new(): T }): Opt<T> {
+export function Cast<T extends Field>(field: FieldValue<Field>, ctor: { new(): T }): Opt<T> {
     if (field) {
         if (ctor && field instanceof ctor) {
             return field;
@@ -10,36 +12,42 @@ export function Cast<T extends Field>(field: Opt<Field>, ctor: { new(): T }): Op
     return undefined;
 }
 
-export let FieldWaiting: FIELD_WAITING = "<Waiting>";
+export const FieldWaiting: FIELD_WAITING = "<Waiting>";
 export type FIELD_WAITING = "<Waiting>";
-export type FIELD_ID = string | undefined;
-export type DOC_ID = FIELD_ID;
-export type Opt<T> = T | undefined | FIELD_WAITING;
+export type FieldId = string;
+export type Opt<T> = T | undefined;
+export type FieldValue<T> = Opt<T> | FIELD_WAITING;
 
 export abstract class Field {
     //FieldUpdated: TypedEvent<Opt<FieldUpdatedArgs>> = new TypedEvent<Opt<FieldUpdatedArgs>>();
 
-    private id: FIELD_ID;
-    get Id(): FIELD_ID {
+    init(callback: (res: Field) => any) {
+        callback(this);
+    }
+
+    private id: FieldId;
+
+    @computed
+    get Id(): FieldId {
         return this.id;
     }
 
-    constructor(id: FIELD_ID = undefined) {
+    constructor(id: Opt<FieldId> = undefined) {
         this.id = id || Utils.GenerateGuid();
     }
 
-    Dereference(): Opt<Field> {
+    Dereference(): FieldValue<Field> {
         return this;
     }
-    DereferenceToRoot(): Opt<Field> {
+    DereferenceToRoot(): FieldValue<Field> {
         return this;
     }
 
-    DereferenceT<T extends Field = Field>(ctor: { new(): T }): Opt<T> {
+    DereferenceT<T extends Field = Field>(ctor: { new(): T }): FieldValue<T> {
         return Cast(this.Dereference(), ctor);
     }
 
-    DereferenceToRootT<T extends Field = Field>(ctor: { new(): T }): Opt<T> {
+    DereferenceToRootT<T extends Field = Field>(ctor: { new(): T }): FieldValue<T> {
         return Cast(this.DereferenceToRoot(), ctor);
     }
 
@@ -47,10 +55,15 @@ export abstract class Field {
         return this.id === other.id;
     }
 
+    abstract UpdateFromServer(serverData: any): void;
+
+    abstract ToScriptString(): string;
+
     abstract TrySetValue(value: any): boolean;
 
     abstract GetValue(): any;
 
     abstract Copy(): Field;
 
+    abstract ToJson(): { _id: string, type: Types, data: any }
 }
\ No newline at end of file
diff --git a/src/fields/HtmlField.ts b/src/fields/HtmlField.ts
new file mode 100644
index 000000000..a07326095
--- /dev/null
+++ b/src/fields/HtmlField.ts
@@ -0,0 +1,25 @@
+import { BasicField } from "./BasicField";
+import { Types } from "../server/Message";
+import { FieldId } from "./Field";
+
+export class HtmlField extends BasicField<string> {
+    constructor(data: string = "<html></html>", id?: FieldId, save: boolean = true) {
+        super(data, save, id);
+    }
+
+    ToScriptString(): string {
+        return `new HtmlField("${this.Data}")`;
+    }
+
+    Copy() {
+        return new HtmlField(this.Data);
+    }
+
+    ToJson(): { _id: string; type: Types; data: any; } {
+        return {
+            type: Types.Html,
+            data: this.Data,
+            _id: this.Id,
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/fields/ImageField.ts b/src/fields/ImageField.ts
index e6b29fd3f..be8d73e68 100644
--- a/src/fields/ImageField.ts
+++ b/src/fields/ImageField.ts
@@ -1,17 +1,29 @@
 import { BasicField } from "./BasicField";
-import { Field } from "./Field";
-import {observable} from "mobx"
+import { Field, FieldId } from "./Field";
+import { Types } from "../server/Message";
 
 export class ImageField extends BasicField<URL> {
-    constructor(data: URL | undefined = undefined) {
-        super(data == undefined ? new URL("http://cs.brown.edu/~bcz/face.gif") : data);
+    constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data, save, id);
     }
 
     toString(): string {
         return this.Data.href;
     }
 
+    ToScriptString(): string {
+        return `new ImageField("${this.Data}")`;
+    }
+
     Copy(): Field {
         return new ImageField(this.Data);
     }
+
+    ToJson(): { type: Types, data: URL, _id: string } {
+        return {
+            type: Types.Image,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/fields/KVPField b/src/fields/KVPField
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/fields/KVPField
diff --git a/src/fields/KVPField.ts b/src/fields/KVPField.ts
new file mode 100644
index 000000000..a7ecc0768
--- /dev/null
+++ b/src/fields/KVPField.ts
@@ -0,0 +1,30 @@
+import { BasicField } from "./BasicField"
+import { FieldId } from "./Field";
+import { Types } from "../server/Message";
+import { Document } from "./Document"
+
+export class KVPField extends BasicField<Document> {
+    constructor(data: Document | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new Document() : data, save, id);
+    }
+
+    toString(): string {
+        return this.Data.Title;
+    }
+
+    ToScriptString(): string {
+        return `new KVPField("${this.Data}")`;
+    }
+
+    Copy() {
+        return new KVPField(this.Data);
+    }
+
+    ToJson(): { type: Types, data: Document, _id: string } {
+        return {
+            type: Types.Text,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 5cd43f55e..00d78d516 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -1,6 +1,8 @@
-import { Field } from "./Field"
+import { Field, FieldId } from "./Field"
 import { Utils } from "../Utils";
 import { observable } from "mobx";
+import { Types } from "../server/Message";
+import { Server } from "../client/Server";
 
 export class Key extends Field {
     private name: string;
@@ -9,10 +11,17 @@ export class Key extends Field {
         return this.name;
     }
 
-    constructor(name: string) {
-        super(Utils.GenerateDeterministicGuid(name));
+    constructor(name: string, id?: string, save: boolean = true) {
+        super(id || Utils.GenerateDeterministicGuid(name));
 
         this.name = name;
+        if (save) {
+            Server.UpdateField(this)
+        }
+    }
+
+    UpdateFromServer(data: string) {
+        this.name = data;
     }
 
     TrySetValue(value: any): boolean {
@@ -27,24 +36,15 @@ export class Key extends Field {
         return this;
     }
 
+    ToScriptString(): string {
+        return name;
+    }
 
-}
-
-export namespace KeyStore {
-    export const Prototype = new Key("Prototype");
-    export const X = new Key("X");
-    export const Y = new Key("Y");
-    export const Title = new Key("Title");
-    export const Author = new Key("Author");
-    export const PanX = new Key("PanX");
-    export const PanY = new Key("PanY");
-    export const Scale = new Key("Scale");
-    export const Width = new Key("Width");
-    export const Height = new Key("Height");
-    export const ZIndex = new Key("ZIndex");
-    export const Data = new Key("Data");
-    export const Layout = new Key("Layout");
-    export const LayoutKeys = new Key("LayoutKeys");
-    export const LayoutFields = new Key("LayoutFields");
-    export const ColumnsKey = new Key("SchemaColumns");
+    ToJson(): { type: Types, data: string, _id: string } {
+        return {
+            type: Types.Key,
+            data: this.name,
+            _id: this.Id
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
new file mode 100644
index 000000000..a3b39735d
--- /dev/null
+++ b/src/fields/KeyStore.ts
@@ -0,0 +1,29 @@
+import { Key } from "./Key";
+
+export namespace KeyStore {
+    export const Prototype = new Key("Prototype");
+    export const X = new Key("X");
+    export const Y = new Key("Y");
+    export const Title = new Key("Title");
+    export const Author = new Key("Author");
+    export const PanX = new Key("PanX");
+    export const PanY = new Key("PanY");
+    export const Scale = new Key("Scale");
+    export const NativeWidth = new Key("NativeWidth");
+    export const NativeHeight = new Key("NativeHeight");
+    export const Width = new Key("Width");
+    export const Height = new Key("Height");
+    export const ZIndex = new Key("ZIndex");
+    export const Data = new Key("Data");
+    export const Annotations = new Key("Annotations");
+    export const ViewType = new Key("ViewType");
+    export const Layout = new Key("Layout");
+    export const BackgroundLayout = new Key("BackgroundLayout");
+    export const OverlayLayout = new Key("OverlayLayout");
+    export const LayoutKeys = new Key("LayoutKeys");
+    export const LayoutFields = new Key("LayoutFields");
+    export const ColumnsKey = new Key("SchemaColumns");
+    export const Caption = new Key("Caption");
+    export const ActiveFrame = new Key("ActiveFrame");
+    export const DocumentText = new Key("DocumentText");
+}
diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts
index 8607ebe43..700600804 100644
--- a/src/fields/ListField.ts
+++ b/src/fields/ListField.ts
@@ -1,12 +1,103 @@
-import { Field } from "./Field";
+import { action, IArrayChange, IArraySplice, IObservableArray, observe, observable, Lambda } from "mobx";
+import { Server } from "../client/Server";
+import { UndoManager } from "../client/util/UndoManager";
+import { Types } from "../server/Message";
 import { BasicField } from "./BasicField";
+import { Field, FieldId } from "./Field";
 
 export class ListField<T extends Field> extends BasicField<T[]> {
-    constructor(data: T[] = []) {
-        super(data.slice());
+    private _proxies: string[] = []
+    constructor(data: T[] = [], id?: FieldId, save: boolean = true) {
+        super(data, save, id);
+        this.updateProxies();
+        if (save) {
+            Server.UpdateField(this);
+        }
+        this.observeList();
+    }
+
+    private observeDisposer: Lambda | undefined;
+    private observeList(): void {
+        this.observeDisposer = observe(this.Data as IObservableArray<T>, (change: IArrayChange<T> | IArraySplice<T>) => {
+            this.updateProxies()
+            if (change.type == "splice") {
+                UndoManager.AddEvent({
+                    undo: () => this.Data.splice(change.index, change.addedCount, ...change.removed),
+                    redo: () => this.Data.splice(change.index, change.removedCount, ...change.added)
+                })
+            } else {
+                UndoManager.AddEvent({
+                    undo: () => this.Data[change.index] = change.oldValue,
+                    redo: () => this.Data[change.index] = change.newValue
+                })
+            }
+            Server.UpdateField(this);
+        });
+    }
+
+    protected setData(value: T[]) {
+        if (this.observeDisposer) {
+            this.observeDisposer()
+        }
+        this.data = observable(value);
+        this.observeList();
+    }
+
+    private updateProxies() {
+        this._proxies = this.Data.map(field => field.Id);
+    }
+
+    UpdateFromServer(fields: string[]) {
+        this._proxies = fields;
+    }
+    private arraysEqual(a: any[], b: any[]) {
+        if (a === b) return true;
+        if (a == null || b == null) return false;
+        if (a.length != b.length) return false;
+
+        // If you don't care about the order of the elements inside
+        // the array, you should sort both arrays here.
+        // Please note that calling sort on an array will modify that array.
+        // you might want to clone your array first.
+
+        for (var i = 0; i < a.length; ++i) {
+            if (a[i] !== b[i]) return false;
+        }
+        return true;
+    }
+
+    init(callback: (field: Field) => any) {
+        Server.GetFields(this._proxies, action((fields: { [index: string]: Field }) => {
+            if (!this.arraysEqual(this._proxies, this.Data.map(field => field.Id))) {
+                this.data = this._proxies.map(id => fields[id] as T)
+                observe(this.Data, () => {
+                    this.updateProxies()
+                    Server.UpdateField(this);
+                })
+            }
+            callback(this);
+        }))
+    }
+
+    ToScriptString(): string {
+        return "new ListField([" + this.Data.map(field => field.ToScriptString()).join(", ") + "])";
     }
 
     Copy(): Field {
         return new ListField<T>(this.Data);
     }
+
+    ToJson(): { type: Types, data: string[], _id: string } {
+        return {
+            type: Types.List,
+            data: this._proxies,
+            _id: this.Id
+        }
+    }
+
+    static FromJson(id: string, ids: string[]): ListField<Field> {
+        let list = new ListField([], id, false);
+        list._proxies = ids;
+        return list
+    }
 }
\ No newline at end of file
diff --git a/src/fields/NumberField.ts b/src/fields/NumberField.ts
index c3444f644..47dfc74cb 100644
--- a/src/fields/NumberField.ts
+++ b/src/fields/NumberField.ts
@@ -1,11 +1,25 @@
 import { BasicField } from "./BasicField"
+import { Types } from "../server/Message";
+import { FieldId } from "./Field";
 
 export class NumberField extends BasicField<number> {
-    constructor(data: number = 0) {
-        super(data);
+    constructor(data: number = 0, id?: FieldId, save: boolean = true) {
+        super(data, save, id);
+    }
+
+    ToScriptString(): string {
+        return "new NumberField(this.Data)";
     }
 
     Copy() {
         return new NumberField(this.Data);
     }
+
+    ToJson(): { _id: string, type: Types, data: number } {
+        return {
+            _id: this.Id,
+            type: Types.Number,
+            data: this.Data
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/fields/PDFField.ts b/src/fields/PDFField.ts
index 2d8b0f635..0db47a884 100644
--- a/src/fields/PDFField.ts
+++ b/src/fields/PDFField.ts
@@ -1,10 +1,13 @@
 import { BasicField } from "./BasicField";
 import { Field } from "./Field";
-import {observable} from "mobx"
+import { observable } from "mobx"
+import { Types } from "../server/Message";
+
+
 
 export class PDFField extends BasicField<URL> {
-    constructor(data: URL | undefined = undefined) {
-        super(data == undefined ? new URL("http://cs.brown.edu/~bcz/face.gif") : data);
+    constructor(data: URL | undefined = undefined, save: boolean = true) {
+        super(data || new URL("http://cs.brown.edu/~bcz/face.gif"), save);
     }
 
     toString(): string {
@@ -14,8 +17,20 @@ export class PDFField extends BasicField<URL> {
     Copy(): Field {
         return new PDFField(this.Data);
     }
-    
+
+    ToScriptString(): string {
+        return `new PDFField("${this.Data}")`;
+    }
+
+    ToJson(): { type: Types, data: URL, _id: string } {
+        return {
+            type: Types.PDF,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+
     @observable
-    Page:Number = 1; 
+    Page: Number = 1;
 
 }
\ No newline at end of file
diff --git a/src/fields/RichTextField.ts b/src/fields/RichTextField.ts
index 24c7472d8..5efb43314 100644
--- a/src/fields/RichTextField.ts
+++ b/src/fields/RichTextField.ts
@@ -1,12 +1,26 @@
 import { BasicField } from "./BasicField";
+import { Types } from "../server/Message";
+import { FieldId } from "./Field";
 
 export class RichTextField extends BasicField<string> {
-    constructor(data: string = "") {
-        super(data);
+    constructor(data: string = "", id?: FieldId, save: boolean = true) {
+        super(data, save, id);
+    }
+
+    ToScriptString(): string {
+        return `new RichTextField(${this.Data})`;
     }
 
     Copy() {
         return new RichTextField(this.Data);
     }
 
+    ToJson(): { type: Types, data: string, _id: string } {
+        return {
+            type: Types.RichText,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+
 }
\ No newline at end of file
diff --git a/src/fields/TextField.ts b/src/fields/TextField.ts
index 95825d2ae..71d8ea310 100644
--- a/src/fields/TextField.ts
+++ b/src/fields/TextField.ts
@@ -1,11 +1,25 @@
 import { BasicField } from "./BasicField"
+import { FieldId } from "./Field";
+import { Types } from "../server/Message";
 
 export class TextField extends BasicField<string> {
-    constructor(data: string = "") {
-        super(data);
+    constructor(data: string = "", id?: FieldId, save: boolean = true) {
+        super(data, save, id);
+    }
+
+    ToScriptString(): string {
+        return `new TextField("${this.Data}")`;
     }
 
     Copy() {
         return new TextField(this.Data);
     }
-}
+
+    ToJson(): { type: Types, data: string, _id: string } {
+        return {
+            type: Types.Text,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/fields/WebField.ts b/src/fields/WebField.ts
new file mode 100644
index 000000000..8f945d686
--- /dev/null
+++ b/src/fields/WebField.ts
@@ -0,0 +1,30 @@
+import { BasicField } from "./BasicField";
+import { Field, FieldId } from "./Field";
+import { Types } from "../server/Message";
+
+export class WebField extends BasicField<URL> {
+    constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new URL("https://crossorigin.me/" + "https://cs.brown.edu/") : data, save, id);
+    }
+
+    toString(): string {
+        return this.Data.href;
+    }
+
+    ToScriptString(): string {
+        return `new WebField("${this.Data}")`;
+    }
+
+    Copy(): Field {
+        return new WebField(this.Data);
+    }
+
+    ToJson(): { type: Types, data: URL, _id: string } {
+        return {
+            type: Types.Web,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/server/Client.ts b/src/server/Client.ts
new file mode 100644
index 000000000..6b8841658
--- /dev/null
+++ b/src/server/Client.ts
@@ -0,0 +1,15 @@
+import { computed } from "mobx";
+
+export class Client {
+    constructor(guid: string) {
+        this.guid = guid
+    }
+
+    private guid: string;
+
+    @computed
+    public get GUID(): string {
+        return this.guid
+    }
+
+}
\ No newline at end of file
diff --git a/src/server/Message.ts b/src/server/Message.ts
new file mode 100644
index 000000000..340e9b34a
--- /dev/null
+++ b/src/server/Message.ts
@@ -0,0 +1,125 @@
+import { Utils } from "../Utils";
+
+export class Message<T> {
+    private name: string;
+    private guid: string;
+
+    get Name(): string {
+        return this.name;
+    }
+
+    get Message(): string {
+        return this.guid
+    }
+
+    constructor(name: string) {
+        this.name = name;
+        this.guid = Utils.GenerateDeterministicGuid(name)
+    }
+
+    GetValue() {
+        return this.Name;
+    }
+}
+
+class TestMessageArgs {
+    hello: string = "";
+}
+
+export class SetFieldArgs {
+    field: string;
+    value: any;
+
+    constructor(f: string, v: any) {
+        this.field = f
+        this.value = v
+    }
+}
+
+export class GetFieldArgs {
+    field: string;
+
+    constructor(f: string) {
+        this.field = f
+    }
+}
+
+export enum Types {
+    Number, List, Key, Image, Web, Document, Text, RichText, DocumentReference, Html, PDF
+}
+
+export class DocumentTransfer implements Transferable {
+    readonly type = Types.Document
+    _id: string
+
+    constructor(readonly obj: { type: Types, data: [string, string][], _id: string }) {
+        this._id = obj._id
+    }
+}
+
+export class ImageTransfer implements Transferable {
+    readonly type = Types.Image
+
+    constructor(readonly _id: string) { }
+}
+
+export class KeyTransfer implements Transferable {
+    name: string
+    readonly _id: string
+    readonly type = Types.Key
+
+    constructor(i: string, n: string) {
+        this.name = n
+        this._id = i
+    }
+}
+
+export class ListTransfer implements Transferable {
+    type = Types.List;
+
+    constructor(readonly _id: string) { }
+}
+
+export class NumberTransfer implements Transferable {
+    readonly type = Types.Number
+
+    constructor(readonly value: number, readonly _id: string) { }
+}
+
+export class TextTransfer implements Transferable {
+    value: string
+    readonly _id: string
+    readonly type = Types.Text
+
+    constructor(t: string, i: string) {
+        this.value = t
+        this._id = i
+    }
+}
+
+export class RichTextTransfer implements Transferable {
+    value: string
+    readonly _id: string
+    readonly type = Types.Text
+
+    constructor(t: string, i: string) {
+        this.value = t
+        this._id = i
+    }
+}
+
+export interface Transferable {
+    readonly _id: string
+    readonly type: Types
+}
+
+export namespace MessageStore {
+    export const Foo = new Message<string>("Foo");
+    export const Bar = new Message<string>("Bar");
+    export const AddDocument = new Message<DocumentTransfer>("Add Document");
+    export const SetField = new Message<{ _id: string, data: any, type: Types }>("Set Field")
+    export const GetField = new Message<string>("Get Field")
+    export const GetFields = new Message<string[]>("Get Fields")
+    export const GetDocument = new Message<string>("Get Document");
+    export const DeleteAll = new Message<any>("Delete All");
+}
\ No newline at end of file
diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts
new file mode 100644
index 000000000..a53fb5d2b
--- /dev/null
+++ b/src/server/ServerUtil.ts
@@ -0,0 +1,55 @@
+import { Field } from './../fields/Field';
+import { TextField } from './../fields/TextField';
+import { NumberField } from './../fields/NumberField';
+import { RichTextField } from './../fields/RichTextField';
+import { Key } from './../fields/Key';
+import { ImageField } from './../fields/ImageField';
+import { ListField } from './../fields/ListField';
+import { Document } from './../fields/Document';
+import { Server } from './../client/Server';
+import { Types } from './Message';
+import { Utils } from '../Utils';
+import { HtmlField } from '../fields/HtmlField';
+import { WebField } from '../fields/WebField';
+
+export class ServerUtils {
+    public static FromJson(json: any): Field {
+        let obj = json
+        let data: any = obj.data
+        let id: string = obj._id
+        let type: Types = obj.type
+
+        if (!(data !== undefined && id && type !== undefined)) {
+            console.log("how did you manage to get an object that doesn't have a data or an id?")
+            return new TextField("Something to fill the space", Utils.GenerateGuid());
+        }
+
+        switch (type) {
+            case Types.Number:
+                return new NumberField(data, id, false)
+            case Types.Text:
+                return new TextField(data, id, false)
+            case Types.Html:
+                return new HtmlField(data, id, false)
+            case Types.Web:
+                return new WebField(new URL(data), id, false)
+            case Types.RichText:
+                return new RichTextField(data, id, false)
+            case Types.Key:
+                return new Key(data, id, false)
+            case Types.Image:
+                return new ImageField(new URL(data), id, false)
+            case Types.List:
+                return ListField.FromJson(id, data)
+            case Types.Document:
+                let doc: Document = new Document(id, false)
+                let fields: [string, string][] = data as [string, string][]
+                fields.forEach(element => {
+                    doc._proxies.set(element[0], element[1]);
+                });
+                return doc
+            default:
+                throw Error("Error, unrecognized field type received from server. If you just created a new field type, be sure to add it here");
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/server/authentication/config/passport.ts b/src/server/authentication/config/passport.ts
new file mode 100644
index 000000000..05f6c3133
--- /dev/null
+++ b/src/server/authentication/config/passport.ts
@@ -0,0 +1,49 @@
+import * as passport from 'passport'
+import * as passportLocal from 'passport-local';
+import * as mongodb from 'mongodb';
+import * as _ from "lodash";
+import { default as User } from '../models/User';
+import { Request, Response, NextFunction } from "express";
+
+const LocalStrategy = passportLocal.Strategy;
+
+passport.serializeUser<any, any>((user, done) => {
+    done(undefined, user.id);
+});
+
+passport.deserializeUser<any, any>((id, done) => {
+    User.findById(id, (err, user) => {
+        done(err, user);
+    });
+});
+
+// AUTHENTICATE JUST WITH EMAIL AND PASSWORD
+passport.use(new LocalStrategy({ usernameField: 'email' }, (email, password, done) => {
+    User.findOne({ email: email.toLowerCase() }, (error: any, user: any) => {
+        if (error) return done(error);
+        if (!user) return done(undefined, false, { message: "Invalid email or password" }) // invalid email
+        user.comparePassword(password, (error: Error, isMatch: boolean) => {
+            if (error) return done(error);
+            if (!isMatch) return done(undefined, false, { message: "Invalid email or password" }); // invalid password
+            // valid authentication HERE
+            return done(undefined, user);
+        });
+    });
+}));
+
+export let isAuthenticated = (req: Request, res: Response, next: NextFunction) => {
+    if (req.isAuthenticated()) {
+        return next();
+    }
+    return res.redirect("/login");
+}
+
+export let isAuthorized = (req: Request, res: Response, next: NextFunction) => {
+    const provider = req.path.split("/").slice(-1)[0];
+
+    if (_.find(req.user.tokens, { kind: provider })) {
+        next();
+    } else {
+        res.redirect(`/auth/${provider}`);
+    }
+};
\ No newline at end of file
diff --git a/src/server/authentication/controllers/user.ts b/src/server/authentication/controllers/user.ts
new file mode 100644
index 000000000..f74ff9039
--- /dev/null
+++ b/src/server/authentication/controllers/user.ts
@@ -0,0 +1,107 @@
+import { default as User, UserModel, AuthToken } from "../models/User";
+import { Request, Response, NextFunction } from "express";
+import * as passport from "passport";
+import { IVerifyOptions } from "passport-local";
+import "../config/passport";
+import * as request from "express-validator";
+const flash = require("express-flash");
+import * as session from "express-session";
+import * as pug from 'pug';
+
+/**
+ * GET /signup
+ * Signup page.
+ */
+export let getSignup = (req: Request, res: Response) => {
+    if (req.user) {
+        return res.redirect("/");
+    }
+    res.render("signup.pug", {
+        title: "Sign Up"
+    });
+};
+
+/**
+ * POST /signup
+ * Create a new local account.
+ */
+export let postSignup = (req: Request, res: Response, next: NextFunction) => {
+    req.assert("email", "Email is not valid").isEmail();
+    req.assert("password", "Password must be at least 4 characters long").len({ min: 4 });
+    req.assert("confirmPassword", "Passwords do not match").equals(req.body.password);
+    req.sanitize("email").normalizeEmail({ gmail_remove_dots: false });
+
+    const errors = req.validationErrors();
+
+    if (errors) {
+        req.flash("errors", "Unable to facilitate sign up. Please try again.");
+        return res.redirect("/signup");
+    }
+
+    const user = new User({
+        email: req.body.email,
+        password: req.body.password
+    });
+
+    User.findOne({ email: req.body.email }, (err, existingUser) => {
+        if (err) { return next(err); }
+        if (existingUser) {
+            req.flash("errors", "Account with that email address already exists.");
+            return res.redirect("/signup");
+        }
+        user.save((err) => {
+            if (err) { return next(err); }
+            req.logIn(user, (err) => {
+                if (err) {
+                    return next(err);
+                }
+                res.redirect("/");
+            });
+        });
+    });
+};
+
+
+/**
+ * GET /login
+ * Login page.
+ */
+export let getLogin = (req: Request, res: Response) => {
+    if (req.user) {
+        return res.redirect("/");
+    }
+    res.send("<p>dear lord please render</p>");
+    // res.render("account/login", {
+    //     title: "Login"
+    // });
+};
+
+/**
+ * POST /login
+ * Sign in using email and password.
+ */
+export let postLogin = (req: Request, res: Response, next: NextFunction) => {
+    req.assert("email", "Email is not valid").isEmail();
+    req.assert("password", "Password cannot be blank").notEmpty();
+    req.sanitize("email").normalizeEmail({ gmail_remove_dots: false });
+
+    const errors = req.validationErrors();
+
+    if (errors) {
+        req.flash("errors", "Unable to login at this time. Please try again.");
+        return res.redirect("/login");
+    }
+
+    passport.authenticate("local", (err: Error, user: UserModel, info: IVerifyOptions) => {
+        if (err) { return next(err); }
+        if (!user) {
+            req.flash("errors", info.message);
+            return res.redirect("/login");
+        }
+        req.logIn(user, (err) => {
+            if (err) { return next(err); }
+            req.flash("success", "Success! You are logged in.");
+            res.redirect("/");
+        });
+    })(req, res, next);
+};
\ No newline at end of file
diff --git a/src/server/authentication/models/User.ts b/src/server/authentication/models/User.ts
new file mode 100644
index 000000000..9752c4260
--- /dev/null
+++ b/src/server/authentication/models/User.ts
@@ -0,0 +1,89 @@
+//@ts-ignore
+import * as bcrypt from "bcrypt-nodejs";
+import * as crypto from "crypto";
+//@ts-ignore
+import * as mongoose from "mongoose";
+var url = 'mongodb://localhost:27017/Dash'
+
+mongoose.connect(url, { useNewUrlParser: true });
+
+mongoose.connection.on('connected', function () {
+    console.log('Stablished connection on ' + url);
+});
+mongoose.connection.on('error', function (error) {
+    console.log('Something wrong happened: ' + error);
+});
+mongoose.connection.on('disconnected', function () {
+    console.log('connection closed');
+});
+export type UserModel = mongoose.Document & {
+    email: string,
+    password: string,
+    passwordResetToken: string,
+    passwordResetExpires: Date,
+    tokens: AuthToken[],
+
+    profile: {
+        name: string,
+        gender: string,
+        location: string,
+        website: string,
+        picture: string
+    },
+
+    comparePassword: comparePasswordFunction,
+};
+
+type comparePasswordFunction = (candidatePassword: string, cb: (err: any, isMatch: any) => {}) => void;
+
+export type AuthToken = {
+    accessToken: string,
+    kind: string
+};
+
+const userSchema = new mongoose.Schema({
+    email: { type: String, unique: true },
+    password: String,
+    passwordResetToken: String,
+    passwordResetExpires: Date,
+
+    facebook: String,
+    twitter: String,
+    google: String,
+    tokens: Array,
+
+    profile: {
+        name: String,
+        gender: String,
+        location: String,
+        website: String,
+        picture: String
+    }
+}, { timestamps: true });
+
+/**
+ * Password hash middleware.
+ */
+userSchema.pre("save", function save(next) {
+    const user = this as UserModel;
+    if (!user.isModified("password")) { return next(); }
+    bcrypt.genSalt(10, (err, salt) => {
+        if (err) { return next(err); }
+        bcrypt.hash(user.password, salt, () => void {}, (err: mongoose.Error, hash) => {
+            if (err) { return next(err); }
+            user.password = hash;
+            next();
+        });
+    });
+});
+
+const comparePassword: comparePasswordFunction = function (this: UserModel, candidatePassword, cb) {
+    bcrypt.compare(candidatePassword, this.password, (err: mongoose.Error, isMatch: boolean) => {
+        cb(err, isMatch);
+    });
+};
+
+userSchema.methods.comparePassword = comparePassword;
+
+const User = mongoose.model("User", userSchema);
+export default User;
\ No newline at end of file
diff --git a/src/server/database.ts b/src/server/database.ts
new file mode 100644
index 000000000..07c5819ab
--- /dev/null
+++ b/src/server/database.ts
@@ -0,0 +1,81 @@
+import { action, configure } from 'mobx';
+import * as mongodb from 'mongodb';
+import { ObjectID } from 'mongodb';
+import { Transferable } from './Message';
+import { Utils } from '../Utils';
+
+export class Database {
+    public static Instance = new Database()
+    private MongoClient = mongodb.MongoClient;
+    private url = 'mongodb://localhost:27017/Dash';
+    private db?: mongodb.Db;
+
+    constructor() {
+        this.MongoClient.connect(this.url, (err, client) => {
+            this.db = client.db()
+        })
+    }
+
+    public update(id: string, value: any) {
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            collection.update({ _id: id }, { $set: value }, {
+                upsert: true
+            });
+        }
+    }
+
+    public delete(id: string) {
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            collection.remove({ _id: id });
+        }
+    }
+
+    public deleteAll() {
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            collection.deleteMany({});
+        }
+    }
+
+    public insert(kvpairs: any) {
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            collection.insertOne(kvpairs, (err: any, res: any) => {
+                if (err) {
+                    // console.log(err)
+                    return
+                }
+            });
+        }
+    }
+
+    public getDocument(id: string, fn: (res: any) => void) {
+        var result: JSON;
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            collection.findOne({ _id: id }, (err: any, res: any) => {
+                result = res
+                if (!result) {
+                    fn(undefined)
+                }
+                fn(result)
+            })
+        };
+    }
+
+    public getDocuments(ids: string[], fn: (res: any) => void) {
+        if (this.db) {
+            let collection = this.db.collection('documents');
+            let cursor = collection.find({ _id: { "$in": ids } })
+            cursor.toArray((err, docs) => {
+                fn(docs);
+            })
+        };
+    }
+
+    public print() {
+        console.log("db says hi!")
+    }
+}
diff --git a/src/server/index.ts b/src/server/index.ts
new file mode 100644
index 000000000..56881e254
--- /dev/null
+++ b/src/server/index.ts
@@ -0,0 +1,155 @@
+import * as express from 'express'
+const app = express()
+import * as webpack from 'webpack'
+import * as wdm from 'webpack-dev-middleware';
+import * as whm from 'webpack-hot-middleware';
+import * as path from 'path'
+import * as passport from 'passport';
+import { MessageStore, Message, SetFieldArgs, GetFieldArgs, Transferable } from "./Message";
+import { Client } from './Client';
+import { Socket } from 'socket.io';
+import { Utils } from '../Utils';
+import { ObservableMap } from 'mobx';
+import { FieldId, Field } from '../fields/Field';
+import { Database } from './database';
+import { ServerUtils } from './ServerUtil';
+import { ObjectID } from 'mongodb';
+import { Document } from '../fields/Document';
+import * as io from 'socket.io'
+import * as passportConfig from './authentication/config/passport';
+import { getLogin, postLogin, getSignup, postSignup } from './authentication/controllers/user';
+const config = require('../../webpack.config');
+const compiler = webpack(config);
+const port = 1050; // default port to listen
+const serverPort = 1234;
+import * as expressValidator from 'express-validator';
+import expressFlash = require('express-flash');
+import * as bodyParser from 'body-parser';
+import * as session from 'express-session';
+import c = require("crypto");
+const MongoStore = require('connect-mongo')(session);
+const mongoose = require('mongoose');
+const bluebird = require('bluebird');
+import { performance } from 'perf_hooks'
+import * as fs from 'fs';
+import * as request from 'request'
+
+const download = (url: string, dest: fs.PathLike) => {
+    request.get(url).pipe(fs.createWriteStream(dest));
+}
+
+const mongoUrl = 'mongodb://localhost:27017/Dash';
+// mongoose.Promise = bluebird;
+mongoose.connect(mongoUrl)//.then(
+// () => { /** ready to use. The `mongoose.connect()` promise resolves to undefined. */ },
+// ).catch((err: any) => {
+// console.log("MongoDB connection error. Please make sure MongoDB is running. " + err);
+// process.exit();
+// });
+mongoose.connection.on('connected', function () {
+    console.log("connected");
+})
+
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(expressValidator());
+app.use(expressFlash());
+app.use(require('express-session')({
+    secret: `${c.randomBytes(64)}`,
+    resave: true,
+    saveUninitialized: true,
+    store: new MongoStore({
+        url: 'mongodb://localhost:27017/Dash'
+    })
+}));
+app.use(passport.initialize());
+app.use(passport.session());
+app.use((req, res, next) => {
+    res.locals.user = req.user;
+    next();
+});
+
+app.get("/signup", getSignup);
+app.post("/signup", postSignup);
+app.get("/login", getLogin);
+app.post("/login", postLogin);
+
+let FieldStore: ObservableMap<FieldId, Field> = new ObservableMap();
+
+// define a route handler for the default home page
+app.get("/", (req, res) => {
+    res.sendFile(path.join(__dirname, '../../deploy/index.html'));
+});
+
+app.get("/hello", (req, res) => {
+    res.send("<p>Hello</p>");
+})
+
+app.get("/delete", (req, res) => {
+    deleteAll();
+    res.redirect("/");
+});
+
+app.use(wdm(compiler, {
+    publicPath: config.output.publicPath
+}))
+
+app.use(whm(compiler))
+
+// start the Express server
+app.listen(port, () => {
+    console.log(`server started at http://localhost:${port}`);
+})
+
+const server = io();
+interface Map {
+    [key: string]: Client;
+}
+let clients: Map = {}
+
+server.on("connection", function (socket: Socket) {
+    console.log("a user has connected")
+
+    Utils.Emit(socket, MessageStore.Foo, "handshooken")
+
+    Utils.AddServerHandler(socket, MessageStore.Bar, barReceived)
+    Utils.AddServerHandler(socket, MessageStore.SetField, (args) => setField(socket, args))
+    Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField)
+    Utils.AddServerHandlerCallback(socket, MessageStore.GetFields, getFields)
+    Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteAll)
+})
+
+function deleteAll() {
+    Database.Instance.deleteAll();
+}
+
+function barReceived(guid: String) {
+    clients[guid.toString()] = new Client(guid.toString());
+}
+
+function addDocument(document: Document) {
+
+}
+
+function getField([id, callback]: [string, (result: any) => void]) {
+    Database.Instance.getDocument(id, (result: any) => {
+        if (result) {
+            callback(result)
+        }
+        else {
+            callback(undefined)
+        }
+    })
+}
+
+function getFields([ids, callback]: [string[], (result: any) => void]) {
+    Database.Instance.getDocuments(ids, callback);
+}
+
+function setField(socket: Socket, newValue: Transferable) {
+    Database.Instance.update(newValue._id, newValue)
+    socket.broadcast.emit(MessageStore.SetField.Message, newValue)
+}
+
+server.listen(serverPort);
+console.log(`listening on port ${serverPort}`);
\ No newline at end of file
diff --git a/src/stores/NodeCollectionStore.ts b/src/stores/NodeCollectionStore.ts
deleted file mode 100644
index 7fac83d51..000000000
--- a/src/stores/NodeCollectionStore.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { computed, observable, action } from "mobx";
-import { NodeStore } from "./NodeStore";
-import { Document } from "../fields/Document";
-
-export class NodeCollectionStore extends NodeStore {
-
-    @observable
-    public Scale: number = 1;
-
-    @observable
-    public Nodes: NodeStore[] = new Array<NodeStore>();
-
-    @observable
-    public Docs: Document[] = [];
-
-    @computed
-    public get Transform(): string {
-        const halfWidth = window.innerWidth / 2, halfHeight = window.innerHeight / 2;
-        return `translate(${this.X + halfWidth}px, ${this.Y + halfHeight}px) scale(${this.Scale}) translate(${-halfWidth}px, ${-halfHeight}px)`;
-    }
-
-    @action
-    public AddNodes(stores: NodeStore[]): void {
-        stores.forEach(store => this.Nodes.push(store));
-    }
-}
\ No newline at end of file
diff --git a/src/stores/NodeStore.ts b/src/stores/NodeStore.ts
deleted file mode 100644
index 6a734cf44..000000000
--- a/src/stores/NodeStore.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { computed, observable } from "mobx";
-import { Utils } from "../Utils";
-
-export class NodeStore {
-
-    public Id: string = Utils.GenerateGuid();
-
-    @observable
-    public X: number = 0;
-
-    @observable
-    public Y: number = 0;
-
-    @observable
-    public Width: number = 0;
-
-    @observable
-    public Height: number = 0;
-
-    @computed
-    public get Transform(): string {
-        return "translate(" + this.X + "px, " + this.Y + "px)";
-    }
-}
\ No newline at end of file
diff --git a/src/stores/RootStore.ts b/src/stores/RootStore.ts
deleted file mode 100644
index 847fb6807..000000000
--- a/src/stores/RootStore.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { action, observable } from "mobx";
-
-// This globally accessible store might come in handy, although you may decide that you don't need it.
-export class RootStore {
-
-    private constructor() {
-        // initialization code
-    }
-
-    private static _instance: RootStore;
-
-    public static get Instance(): RootStore {
-        return this._instance || (this._instance = new this());
-    }
-}
\ No newline at end of file
diff --git a/src/stores/StaticTextNodeStore.ts b/src/stores/StaticTextNodeStore.ts
deleted file mode 100644
index 7c342a7a2..000000000
--- a/src/stores/StaticTextNodeStore.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { observable } from "mobx";
-import { NodeStore } from "./NodeStore";
-
-export class StaticTextNodeStore extends NodeStore {
-
-    constructor(initializer: Partial<StaticTextNodeStore>) {
-        super();
-        Object.assign(this, initializer);
-    }
-
-    @observable
-    public Title: string = "";
-
-    @observable
-    public Text: string = "";
-}
\ No newline at end of file
diff --git a/src/stores/VideoNodeStore.ts b/src/stores/VideoNodeStore.ts
deleted file mode 100644
index e5187ab07..000000000
--- a/src/stores/VideoNodeStore.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { observable } from "mobx";
-import { NodeStore } from "./NodeStore";
-
-export class VideoNodeStore extends NodeStore {
-
-    constructor(initializer: Partial<VideoNodeStore>) {
-        super();
-        Object.assign(this, initializer);
-    }
-
-    @observable
-    public Title: string = "";
-
-    @observable
-    public Url: string = "";
-
-}
\ No newline at end of file
diff --git a/src/util/Scripting.ts b/src/util/Scripting.ts
deleted file mode 100644
index 804c67bc5..000000000
--- a/src/util/Scripting.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// import * as ts from "typescript"
-let ts = (window as any).ts;
-import { Opt, Field, FieldWaiting } from "../fields/Field";
-import { Document as DocumentImport } from "../fields/Document";
-import { NumberField as NumberFieldImport } from "../fields/NumberField";
-import { TextField as TextFieldImport } from "../fields/TextField";
-import { RichTextField as RichTextFieldImport } from "../fields/RichTextField";
-import { KeyStore as KeyStoreImport } from "../fields/Key";
-
-export interface ExecutableScript {
-    (): any;
-
-    compiled: boolean;
-}
-
-function ExecScript(script: string, diagnostics: Opt<any[]>): ExecutableScript {
-    const compiled = !(diagnostics && diagnostics != FieldWaiting && diagnostics.some(diag => diag.category == ts.DiagnosticCategory.Error));
-
-    let func: () => Opt<Field>;
-    if (compiled) {
-        func = function (): Opt<Field> {
-            let KeyStore = KeyStoreImport;
-            let Document = DocumentImport;
-            let NumberField = NumberFieldImport;
-            let TextField = TextFieldImport;
-            let RichTextField = RichTextFieldImport;
-            let window = undefined;
-            let document = undefined;
-            let retVal = eval(script);
-
-            return retVal;
-        };
-    } else {
-        func = () => undefined;
-    }
-
-    return Object.assign(func,
-        {
-            compiled
-        });
-}
-
-export function CompileScript(script: string): ExecutableScript {
-    let result = (window as any).ts.transpileModule(script, {})
-
-    return ExecScript(result.outputText, result.diagnostics);
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
deleted file mode 100644
index e489e319a..000000000
--- a/src/views/collections/CollectionDockingView.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-import { observer } from "mobx-react";
-import { KeyStore } from "../../fields/Key";
-import React = require("react");
-import FlexLayout from "flexlayout-react";
-import { action, observable, computed } from "mobx";
-import { Document } from "../../fields/Document";
-import { DocumentView } from "../nodes/DocumentView";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { SSL_OP_SINGLE_DH_USE } from "constants";
-import "./CollectionDockingView.scss"
-import 'golden-layout/src/css/goldenlayout-base.css';
-import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import * as GoldenLayout from "golden-layout";
-import * as ReactDOM from 'react-dom';
-import { DragManager } from "../../util/DragManager";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
-import { FieldWaiting } from "../../fields/Field";
-
-@observer
-export class CollectionDockingView extends CollectionViewBase {
-
-    private static UseGoldenLayout = true;
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); }
-    private _containerRef = React.createRef<HTMLDivElement>();
-    @computed
-    private get modelForFlexLayout() {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetData(fieldKey, ListField, []);
-        var docs = value.map(doc => {
-            return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] };
-        });
-        return FlexLayout.Model.fromJson({
-            global: {}, borders: [],
-            layout: {
-                "type": "row",
-                "weight": 100,
-                "children": docs
-            }
-        });
-    }
-    @computed
-    private get modelForGoldenLayout(): any {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetData(fieldKey, ListField, []);
-        var docs = value.map(doc => {
-            return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
-        });
-        return new GoldenLayout({
-            settings: {
-                selectionEnabled: true
-            }, content: [{ type: 'row', content: docs }]
-        });
-    }
-    constructor(props: CollectionViewProps) {
-        super(props);
-    }
-
-    componentDidMount: () => void = () => {
-        if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) {
-            this.goldenLayoutFactory();
-            window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
-        }
-    }
-    componentWillUnmount: () => void = () => {
-        window.removeEventListener('resize', this.onResize);
-    }
-    private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
-
-
-    @action
-    onResize = (event: any) => {
-        if (this.props.ContainingDocumentView == FieldWaiting)
-            return;
-        var cur = this.props.ContainingDocumentView!.MainContent.current;
-
-        // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed
-        CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
-    }
-
-    @action
-    onPointerDown = (e: React.PointerEvent): void => {
-        if (e.button === 2 && this.active) {
-            e.stopPropagation();
-            e.preventDefault();
-        } else {
-            if (e.buttons === 1 && this.active) {
-                e.stopPropagation();
-            }
-        }
-    }
-
-    flexLayoutFactory = (node: any): any => {
-        var component = node.getComponent();
-        if (component === "button") {
-            return <button>{node.getName()}</button>;
-        }
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetData(fieldKey, ListField, []);
-        for (var i: number = 0; i < value.length; i++) {
-            if (value[i].Id === component) {
-                return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
-            }
-        }
-        if (component === "text") {
-            return (<div className="panel">Panel {node.getName()}</div>);
-        }
-    }
-
-    public static myLayout: any = null;
-
-    private static _dragDiv: any = null;
-    private static _dragParent: HTMLElement | null = null;
-    private static _dragElement: HTMLDivElement;
-    private static _dragFakeElement: HTMLDivElement;
-    public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
-        var newItemConfig = {
-            type: 'component',
-            componentName: 'documentViewComponent',
-            componentState: { doc: dragDoc }
-        };
-        this._dragElement = dragElement;
-        this._dragParent = dragElement.parentElement;
-        // bcz: we want to copy this document into the header, not move it there.
-        //   However, GoldenLayout is setup to move things, so we have to do some kludgy stuff:
-
-        //   - create a temporary invisible div and register that as a DragSource with GoldenLayout
-        this._dragDiv = document.createElement("div");
-        this._dragDiv.style.opacity = 0;
-        DragManager.Root().appendChild(this._dragDiv);
-        CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
-
-        //   - add our document to that div so that GoldenLayout will get the move events its listening for
-        this._dragDiv.appendChild(this._dragElement);
-
-        //   - add a duplicate of our document to the original document's container 
-        //     (GoldenLayout will be removing our original one)
-        this._dragFakeElement = dragElement.cloneNode(true) as HTMLDivElement;
-        this._dragParent!.appendChild(this._dragFakeElement);
-
-        // all of this must be undone when the document has been dropped (see tabCreated)
-    }
-
-    _makeFullScreen: boolean = false;
-    _maximizedStack: any = null;
-    public static OpenFullScreen(document: Document) {
-        var newItemConfig = {
-            type: 'component',
-            componentName: 'documentViewComponent',
-            componentState: { doc: document }
-        };
-        CollectionDockingView.myLayout._makeFullScreen = true;
-        CollectionDockingView.myLayout.root.contentItems[0].addChild(newItemConfig);
-    }
-    public static CloseFullScreen() {
-        if (CollectionDockingView.myLayout._maximizedStack != null) {
-            CollectionDockingView.myLayout._maximizedStack.header.controlsContainer.find('.lm_close').click();
-            CollectionDockingView.myLayout._maximizedStack = null;
-        }
-    }
-
-    //
-    //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
-    //
-    public static AddRightSplit(document: Document) {
-        var newItemConfig = {
-            type: 'component',
-            componentName: 'documentViewComponent',
-            componentState: { doc: document }
-        }
-        let newItemStackConfig = {
-            type: 'stack',
-            content: [newItemConfig]
-        };
-        var newContentItem = new CollectionDockingView.myLayout._typeToItem[newItemStackConfig.type](CollectionDockingView.myLayout, newItemStackConfig, parent);
-
-        if (CollectionDockingView.myLayout.root.contentItems[0].isRow) {
-            var rowlayout = CollectionDockingView.myLayout.root.contentItems[0];
-            var lastRowItem = rowlayout.contentItems[rowlayout.contentItems.length - 1];
-
-            lastRowItem.config["width"] *= 0.5;
-            newContentItem.config["width"] = lastRowItem.config["width"];
-            rowlayout.addChild(newContentItem, rowlayout.contentItems.length, true);
-            rowlayout.callDownwards('setSize');
-        }
-        else {
-            var collayout = CollectionDockingView.myLayout.root.contentItems[0];
-            var newRow = collayout.layoutManager.createContentItem({ type: "row" }, CollectionDockingView.myLayout);
-            collayout.parent.replaceChild(collayout, newRow);
-
-            newRow.addChild(newContentItem, undefined, true);
-            newRow.addChild(collayout, 0, true);
-
-            collayout.config["width"] = 50;
-            newContentItem.config["width"] = 50;
-            collayout.parent.callDownwards('setSize');
-        }
-    }
-    goldenLayoutFactory() {
-        CollectionDockingView.myLayout = this.modelForGoldenLayout;
-
-        var layout = CollectionDockingView.myLayout;
-        CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
-            if (CollectionDockingView._dragDiv) {
-                CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement);
-                CollectionDockingView._dragParent!.removeChild(CollectionDockingView._dragFakeElement);
-                CollectionDockingView._dragParent!.appendChild(CollectionDockingView._dragElement);
-                DragManager.Root().removeChild(CollectionDockingView._dragDiv);
-                CollectionDockingView._dragDiv = null;
-            }
-            tab.setTitle(tab.contentItem.config.componentState.doc.Title);
-            tab.closeElement.off('click') //unbind the current click handler
-                .click(function () {
-                    tab.contentItem.remove();
-                });
-        });
-
-        CollectionDockingView.myLayout.on('stackCreated', function (stack: any) {
-            if (CollectionDockingView.myLayout._makeFullScreen) {
-                CollectionDockingView.myLayout._maximizedStack = stack;
-                CollectionDockingView.myLayout._maxstack = stack.header.controlsContainer.find('.lm_maximise');
-            }
-            //stack.header.controlsContainer.find('.lm_popout').hide();
-            stack.header.controlsContainer.find('.lm_close') //get the close icon
-                .off('click') //unbind the current click handler
-                .click(function () {
-                    //if (confirm('really close this?')) {
-                    stack.remove();
-                    //}
-                });
-        });
-
-        var me = this;
-        CollectionDockingView.myLayout.registerComponent('documentViewComponent', function (container: any, state: any) {
-            // bcz: this is crufty
-            // calling html() causes a div tag to be added in the DOM with id 'containingDiv'. 
-            // Apparently, we need to wait to allow a live html div element to actually be instantiated.
-            // After a timeout, we lookup the live html div element and add our React DocumentView to it.
-            var containingDiv = "component_" + me.nextId();
-            container.getElement().html("<div id='" + containingDiv + "'></div>");
-            setTimeout(function () {
-                ReactDOM.render((
-                    <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
-                ),
-                    document.getElementById(containingDiv)
-                );
-                if (CollectionDockingView.myLayout._maxstack != null) {
-                    CollectionDockingView.myLayout._maxstack.click();
-                }
-            }, 0);
-        });
-        CollectionDockingView.myLayout.container = this._containerRef.current;
-        CollectionDockingView.myLayout.init();
-    }
-
-
-    render() {
-        if (this.props.ContainingDocumentView == FieldWaiting)
-            return;
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetData(fieldKey, ListField, []);
-        // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
-        var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1;
-        var w = Document.GetData(KeyStore.Width, NumberField, Number(0)) / s;
-        var h = Document.GetData(KeyStore.Height, NumberField, Number(0)) / s;
-
-        var chooseLayout = () => {
-            if (!CollectionDockingView.UseGoldenLayout)
-                return <FlexLayout.Layout model={this.modelForFlexLayout} factory={this.flexLayoutFactory} />;
-        }
-
-        return (
-            <div className="border" style={{
-                borderStyle: "solid",
-                borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
-            }}>
-                <div className="collectiondockingview-container" id="menuContainer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
-                    style={{
-                        width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH,
-                        height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH
-                    }} >
-                    {chooseLayout()}
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionFreeFormView.scss b/src/views/collections/CollectionFreeFormView.scss
deleted file mode 100644
index e9d134e7b..000000000
--- a/src/views/collections/CollectionFreeFormView.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.collectionfreeformview-container {
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    .collectionfreeformview {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-}
-
-.border {
-    border-style: solid;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
deleted file mode 100644
index 45d37ca4f..000000000
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import { observer } from "mobx-react";
-import { Key, KeyStore } from "../../fields/Key";
-import React = require("react");
-import { action, observable, computed } from "mobx";
-import { Document } from "../../fields/Document";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { SSL_OP_SINGLE_DH_USE } from "constants";
-import { Documents } from "../../documents/Documents";
-import { DragManager } from "../../util/DragManager";
-import "./CollectionFreeFormView.scss";
-import { Utils } from "../../Utils";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
-import { SelectionManager } from "../../util/SelectionManager";
-import { FieldWaiting } from "../../fields/Field";
-
-@observer
-export class CollectionFreeFormView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
-    private _containerRef = React.createRef<HTMLDivElement>();
-    private _canvasRef = React.createRef<HTMLDivElement>();
-    private _nodeContainerRef = React.createRef<HTMLDivElement>();
-    private _lastX: number = 0;
-    private _lastY: number = 0;
-
-    constructor(props: CollectionViewProps) {
-        super(props);
-    }
-
-    @action
-    drop = (e: Event, de: DragManager.DropEvent) => {
-        const doc = de.data["document"];
-        var me = this;
-        if (doc instanceof CollectionFreeFormDocumentView) {
-            if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this && doc.props.ContainingCollectionView != FieldWaiting) {
-                doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
-                this.addDocument(doc.props.Document);
-            }
-            const xOffset = de.data["xOffset"] as number || 0;
-            const yOffset = de.data["yOffset"] as number || 0;
-            const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
-            if (this.props.ContainingDocumentView != FieldWaiting) {
-                let sscale = this.props.ContainingDocumentView!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
-                const screenX = de.x - xOffset;
-                const screenY = de.y - yOffset;
-                const docX = (screenX - translateX) / sscale / scale;
-                const docY = (screenY - translateY) / sscale / scale;
-                doc.x = docX;
-                doc.y = docY;
-                this.bringToFront(doc);
-            }
-        }
-        e.stopPropagation();
-    }
-
-    componentDidMount() {
-        if (this._containerRef.current) {
-            DragManager.MakeDropTarget(this._containerRef.current, {
-                handlers: {
-                    drop: this.drop
-                }
-            });
-        }
-    }
-
-    @action
-    onPointerDown = (e: React.PointerEvent): void => {
-        if ((e.button === 2 && this.active) ||
-            !e.defaultPrevented) {
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-            document.addEventListener("pointerup", this.onPointerUp);
-            this._lastX = e.pageX;
-            this._lastY = e.pageY;
-        }
-    }
-
-    @action
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        e.stopPropagation();
-        SelectionManager.DeselectAll();
-    }
-
-    @action
-    onPointerMove = (e: PointerEvent): void => {
-        var me = this;
-        if (!e.cancelBubble && this.active && this.props.ContainingDocumentView != FieldWaiting) {
-            e.preventDefault();
-            e.stopPropagation();
-            let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
-            let x = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
-            let y = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
-            this.props.DocumentForCollection.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
-            this.props.DocumentForCollection.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
-        }
-        this._lastX = e.pageX;
-        this._lastY = e.pageY;
-    }
-
-    @action
-    onPointerWheel = (e: React.WheelEvent): void => {
-        e.stopPropagation();
-
-        if (this.props.ContainingDocumentView == FieldWaiting)
-            return;
-        let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
-
-        var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
-
-        var newContainerX = LocalX * deltaScale + Panxx + Xx;
-        var newContainerY = LocalY * deltaScale + Panyy + Yy;
-
-        let dx = ContainerX - newContainerX;
-        let dy = ContainerY - newContainerY;
-
-        this.props.DocumentForCollection.Set(KeyStore.Scale, new NumberField(deltaScale));
-        this.props.DocumentForCollection.SetData(KeyStore.PanX, Panxx + dx, NumberField);
-        this.props.DocumentForCollection.SetData(KeyStore.PanY, Panyy + dy, NumberField);
-    }
-
-    @action
-    onDrop = (e: React.DragEvent): void => {
-        e.stopPropagation()
-        e.preventDefault()
-        let fReader = new FileReader()
-        let file = e.dataTransfer.items[0].getAsFile();
-        let that = this;
-        const panx: number = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
-        const pany: number = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
-        let x = e.pageX - panx
-        let y = e.pageY - pany
-
-        fReader.addEventListener("load", action("drop", (event) => {
-            if (fReader.result) {
-                let url = "" + fReader.result;
-                let doc = Documents.ImageDocument(url, {
-                    x: x, y: y
-                })
-                let docs = that.props.DocumentForCollection.GetT(KeyStore.Data, ListField);
-                if (docs != FieldWaiting) {
-                    if (!docs) {
-                        docs = new ListField<Document>();
-                        that.props.DocumentForCollection.Set(KeyStore.Data, docs)
-                    }
-                    docs.Data.push(doc);
-                }
-            }
-        }), false)
-
-        if (file) {
-            fReader.readAsDataURL(file)
-        }
-    }
-
-    onDragOver = (e: React.DragEvent): void => {
-    }
-
-    @action
-    bringToFront(doc: CollectionFreeFormDocumentView) {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-
-        const value: Document[] = Document.GetList<Document>(fieldKey, []);
-        var topmost = value.reduce((topmost, d) => Math.max(d.GetNumber(KeyStore.ZIndex, 0), topmost), -1000);
-        value.map(d => {
-            var zind = d.GetNumber(KeyStore.ZIndex, 0);
-            if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) {
-                d.SetData(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField);
-            }
-        })
-
-        if (doc.props.Document.GetNumber(KeyStore.ZIndex, 0) != 0) {
-            doc.props.Document.SetData(KeyStore.ZIndex, 0, NumberField);
-        }
-    }
-
-    render() {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetList<Document>(fieldKey, []);
-        const panx: number = Document.GetNumber(KeyStore.PanX, 0);
-        const pany: number = Document.GetNumber(KeyStore.PanY, 0);
-        const currScale: number = Document.GetNumber(KeyStore.Scale, 1);
-
-        return (
-            <div className="border" style={{
-                borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
-            }}>
-                <div className="collectionfreeformview-container"
-                    onPointerDown={this.onPointerDown}
-                    onWheel={this.onPointerWheel}
-                    onContextMenu={(e) => e.preventDefault()}
-                    onDrop={this.onDrop}
-                    onDragOver={this.onDragOver}
-                    ref={this._containerRef}>
-                    <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
-
-                        <div className="node-container" ref={this._nodeContainerRef}>
-                            {value.map(doc => {
-                                return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
-                            })}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionSchemaView.scss b/src/views/collections/CollectionSchemaView.scss
deleted file mode 100644
index 707b44db6..000000000
--- a/src/views/collections/CollectionSchemaView.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-.Resizer {
-    box-sizing: border-box;
-    background: #000;
-    opacity: 0.5;
-    z-index: 1;
-    background-clip: padding-box;
-    &.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
-        &:hover {
-            border-top: 5px solid rgba(0, 0, 0, 0.5);
-            border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
-    &.vertical {
-        width: 11px;
-        margin: 0 -5px;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
-        &:hover {
-            border-left: 5px solid rgba(0, 0, 0, 0.5);
-            border-right: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
-    &:hover {
-        -webkit-transition: all 2s ease;
-        transition: all 2s ease;
-    }
-}
-
-.vertical {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.horizontal {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.parent {
-    width: 100%;
-    height: 100%;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-}
-
-.header {
-    background: #aaa;
-    height: 3rem;
-    line-height: 3rem;
-}
-
-.wrapper {
-    background: #ffa;
-    margin: 5rem;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx
deleted file mode 100644
index 8817cb496..000000000
--- a/src/views/collections/CollectionSchemaView.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React = require("react")
-import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table";
-import { observer } from "mobx-react";
-import { KeyStore as KS, Key } from "../../fields/Key";
-import { Document } from "../../fields/Document";
-import { FieldView, FieldViewProps } from "../nodes/FieldView";
-import "react-table/react-table.css"
-import { observable, action, computed } from "mobx";
-import SplitPane from "react-split-pane"
-import "./CollectionSchemaView.scss"
-import { ScrollBox } from "../../util/ScrollBox";
-import { CollectionViewBase } from "./CollectionViewBase";
-import { DocumentView } from "../nodes/DocumentView";
-
-@observer
-export class CollectionSchemaView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); }
-
-    @observable
-    selectedIndex = 0;
-
-    renderCell = (rowProps: CellInfo) => {
-        let props: FieldViewProps = {
-            doc: rowProps.value[0],
-            fieldKey: rowProps.value[1],
-            DocumentViewForField: undefined
-        }
-        return (
-            <FieldView {...props} />
-        )
-    }
-
-    private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
-        const that = this;
-        if (!rowInfo) {
-            return {};
-        }
-        return {
-            onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
-                that.selectedIndex = rowInfo.index;
-                const doc: Document = rowInfo.original;
-                console.log("Row clicked: ", doc.Title)
-
-                if (handleOriginal) {
-                    handleOriginal()
-                }
-            }),
-            style: {
-                background: rowInfo.index == this.selectedIndex ? "#00afec" : "white",
-                color: rowInfo.index == this.selectedIndex ? "white" : "black"
-            }
-        };
-    }
-
-    onPointerDown = (e: React.PointerEvent) => {
-        let target = e.target as HTMLElement;
-        if (target.tagName == "SPAN" && target.className.includes("Resizer")) {
-            e.stopPropagation();
-        }
-        if (e.button === 2 && this.active) {
-            e.stopPropagation();
-            e.preventDefault();
-        } else {
-            if (e.buttons === 1 && this.active) {
-                e.stopPropagation();
-            }
-        }
-    }
-
-    render() {
-        const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props;
-        const children = Document.GetList<Document>(fieldKey, []);
-        const columns = Document.GetList(KS.ColumnsKey,
-            [KS.Title, KS.Data, KS.Author])
-        let content;
-        if (this.selectedIndex != -1) {
-            content = (<DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />)
-        } else {
-            content = <div />
-        }
-        return (
-            <div onPointerDown={this.onPointerDown} >
-                <SplitPane split={"vertical"} defaultSize="60%">
-                    <ScrollBox>
-                        <ReactTable
-                            data={children}
-                            pageSize={children.length}
-                            page={0}
-                            showPagination={false}
-                            style={{
-                                display: "inline-block"
-                            }}
-                            columns={columns.map(col => {
-                                return (
-                                    {
-                                        Header: col.Name,
-                                        accessor: (doc: Document) => [doc, col],
-                                        id: col.Id
-                                    })
-                            })}
-                            column={{
-                                ...ReactTableDefaults.column,
-                                Cell: this.renderCell
-                            }}
-                            getTrProps={this.getTrProps}
-                        />
-                    </ScrollBox>
-                    {content}
-                </SplitPane>
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionViewBase.tsx b/src/views/collections/CollectionViewBase.tsx
deleted file mode 100644
index 4fce02ef6..000000000
--- a/src/views/collections/CollectionViewBase.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
-import { Document } from "../../fields/Document";
-import { Opt, FieldWaiting } from "../../fields/Field";
-import { Key, KeyStore } from "../../fields/Key";
-import { ListField } from "../../fields/ListField";
-import { SelectionManager } from "../../util/SelectionManager";
-import { ContextMenu } from "../ContextMenu";
-import React = require("react");
-import { DocumentView } from "../nodes/DocumentView";
-import { CollectionDockingView } from "./CollectionDockingView";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-
-
-export interface CollectionViewProps {
-    CollectionFieldKey: Key;
-    DocumentForCollection: Document;
-    ContainingDocumentView: Opt<DocumentView>;
-}
-
-export const COLLECTION_BORDER_WIDTH = 2;
-
-@observer
-export class CollectionViewBase extends React.Component<CollectionViewProps> {
-
-    public static LayoutString(collectionType: string) {
-        return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
-    }
-    @computed
-    public get active(): boolean {
-        var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
-        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
-        var topMost = this.props.ContainingDocumentView != undefined &&
-            this.props.ContainingDocumentView != FieldWaiting && this.props.ContainingDocumentView.props.ContainingCollectionView != FieldWaiting && (
-                this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
-                this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
-        return isSelected || childSelected || topMost;
-    }
-    @action
-    addDocument = (doc: Document): void => {
-        //TODO This won't create the field if it doesn't already exist
-        const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
-        value.push(doc);
-    }
-
-    @action
-    removeDocument = (doc: Document): void => {
-        //TODO This won't create the field if it doesn't already exist
-        const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
-        if (value.indexOf(doc) !== -1) {
-            value.splice(value.indexOf(doc), 1)
-
-            SelectionManager.DeselectAll()
-            ContextMenu.Instance.clearItems()
-        }
-    }
-
-}
\ No newline at end of file
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
deleted file mode 100644
index 25d67d96a..000000000
--- a/src/views/nodes/CollectionFreeFormDocumentView.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
-import { Key, KeyStore } from "../../fields/Key";
-import { NumberField } from "../../fields/NumberField";
-import { DragManager } from "../../util/DragManager";
-import { SelectionManager } from "../../util/SelectionManager";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
-import { ContextMenu } from "../ContextMenu";
-import "./NodeView.scss";
-import React = require("react");
-import { DocumentView, DocumentViewProps } from "./DocumentView";
-import { FieldWaiting } from "../../fields/Field";
-
-
-@observer
-export class CollectionFreeFormDocumentView extends DocumentView {
-    private _contextMenuCanOpen = false;
-    private _downX: number = 0;
-    private _downY: number = 0;
-
-    constructor(props: DocumentViewProps) {
-        super(props);
-    }
-    get screenRect(): ClientRect | DOMRect {
-        if (this._mainCont.current) {
-            return this._mainCont.current.getBoundingClientRect();
-        }
-        return new DOMRect();
-    }
-
-    @computed
-    get x(): number {
-        return this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
-    }
-
-    @computed
-    get y(): number {
-        return this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
-    }
-
-    set x(x: number) {
-        this.props.Document.SetData(KeyStore.X, x, NumberField)
-    }
-
-    set y(y: number) {
-        this.props.Document.SetData(KeyStore.Y, y, NumberField)
-    }
-
-    @computed
-    get transform(): string {
-        return `translate(${this.x}px, ${this.y}px)`;
-    }
-
-    @computed
-    get width(): number {
-        return this.props.Document.GetData(KeyStore.Width, NumberField, Number(0));
-    }
-
-    set width(w: number) {
-        this.props.Document.SetData(KeyStore.Width, w, NumberField)
-    }
-
-    @computed
-    get height(): number {
-        return this.props.Document.GetData(KeyStore.Height, NumberField, Number(0));
-    }
-
-    set height(h: number) {
-        this.props.Document.SetData(KeyStore.Height, h, NumberField)
-    }
-
-    @computed
-    get zIndex(): number {
-        return this.props.Document.GetData(KeyStore.ZIndex, NumberField, Number(0));
-    }
-
-    set zIndex(h: number) {
-        this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
-    }
-
-    @action
-    dragComplete = (e: DragManager.DragCompleteEvent) => {
-    }
-
-    @computed
-    get active(): boolean {
-        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
-            (this.props.ContainingCollectionView != FieldWaiting && this.props.ContainingCollectionView!.active);
-    }
-
-    @computed
-    get topMost(): boolean {
-        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
-    }
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-        var me = this;
-        if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
-            e.stopPropagation();
-            return;
-        }
-        this._contextMenuCanOpen = e.button == 2;
-        if (this.active && !e.isDefaultPrevented()) {
-            e.stopPropagation();
-            if (e.buttons === 2) {
-                e.preventDefault();
-            }
-            document.removeEventListener("pointermove", this.onPointerMove)
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp)
-            document.addEventListener("pointerup", this.onPointerUp);
-        }
-    }
-
-    onPointerMove = (e: PointerEvent): void => {
-        if (e.cancelBubble) {
-            this._contextMenuCanOpen = false;
-            return;
-        }
-        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            this._contextMenuCanOpen = false;
-            if (this._mainCont.current != null && !this.topMost) {
-                this._contextMenuCanOpen = false;
-                const rect = this.screenRect;
-                let dragData: { [id: string]: any } = {};
-                dragData["document"] = this;
-                dragData["xOffset"] = e.x - rect.left;
-                dragData["yOffset"] = e.y - rect.top;
-                DragManager.StartDrag(this._mainCont.current, dragData, {
-                    handlers: {
-                        dragComplete: this.dragComplete,
-                    },
-                    hideSource: true
-                })
-            }
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove)
-        document.removeEventListener("pointerup", this.onPointerUp)
-        e.stopPropagation();
-        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
-
-    openRight = (e: React.MouseEvent): void => {
-        CollectionDockingView.AddRightSplit(this.props.Document);
-    }
-
-    deleteClicked = (e: React.MouseEvent): void => {
-        if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
-            this.props.ContainingCollectionView.removeDocument(this.props.Document)
-        }
-    }
-    @action
-    fullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.OpenFullScreen(this.props.Document);
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
-    @action
-    closeFullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.CloseFullScreen();
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
-
-    @action
-    onContextMenu = (e: React.MouseEvent): void => {
-        if (!SelectionManager.IsSelected(this)) {
-            return;
-        }
-        e.preventDefault()
-
-        if (!this._contextMenuCanOpen) {
-            return;
-        }
-
-        if (this.topMost) {
-            ContextMenu.Instance.clearItems()
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-        }
-        else {
-            // DocumentViews should stop propogation of this event
-            e.stopPropagation();
-
-            ContextMenu.Instance.clearItems();
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
-            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
-
-    render() {
-        var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
-        return (
-            <div className="node" ref={this._mainCont} style={{
-                transform: freestyling ? this.transform : "",
-                width: freestyling ? this.width : "100%",
-                height: freestyling ? this.height : "100%",
-                position: freestyling ? "absolute" : "relative",
-                zIndex: freestyling ? this.zIndex : 0,
-            }}
-                onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown}>
-
-                <DocumentView {...this.props} DocumentView={this} />
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
deleted file mode 100644
index df97a0281..000000000
--- a/src/views/nodes/DocumentView.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
-import { Document } from "../../fields/Document";
-import { Opt, FieldWaiting } from "../../fields/Field";
-import { Key, KeyStore } from "../../fields/Key";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { TextField } from "../../fields/TextField";
-import { Utils } from "../../Utils";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
-import { CollectionSchemaView } from "../collections/CollectionSchemaView";
-import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
-import { FormattedTextBox } from "../nodes/FormattedTextBox";
-import { ImageBox } from "../nodes/ImageBox";
-import {PDFNode} from "../nodes/PDFNode"; 
-import "./NodeView.scss";
-import React = require("react");
-const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
-
-export interface DocumentViewProps {
-    Document: Document;
-    DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
-    ContainingCollectionView: Opt<CollectionViewBase>;
-}
-@observer
-export class DocumentView extends React.Component<DocumentViewProps> {
-
-    protected _mainCont = React.createRef<any>();
-    get MainContent() {
-        return this._mainCont;
-    }
-    @computed
-    get layout(): string {
-        return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
-    }
-
-    @computed
-    get layoutKeys(): Key[] {
-        return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
-    }
-
-    @computed
-    get layoutFields(): Key[] {
-        return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>());
-    }
-
-    // 
-    // returns the cumulative scaling between the document and the screen
-    //
-    @computed
-    public get ScalingToScreenSpace(): number {
-        if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != FieldWaiting &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != FieldWaiting) {
-            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
-            return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
-        }
-        return 1;
-    }
-
-    //
-    // Converts a coordinate in the screen space of the app into a local document coordinate.
-    //
-    public TransformToLocalPoint(screenX: number, screenY: number) {
-        // if this collection view is nested within another collection view, then 
-        // first transform the screen point into the parent collection's coordinate space.
-        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != FieldWaiting &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != FieldWaiting ?
-            this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
-            { LocalX: screenX, LocalY: screenY };
-        let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
-        let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
-
-        var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
-        var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
-        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
-        // They also ignore any transformation that may have been applied to their content document.
-        // NOTE: this currently assumes CollectionDockingViews aren't nested.
-        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
-            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
-            Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH;
-        }
-
-        let Ss = this.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
-        let Panxx = this.props.Document.GetData(KeyStore.PanX, NumberField, Number(0));
-        let Panyy = this.props.Document.GetData(KeyStore.PanY, NumberField, Number(0));
-        let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
-        let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
-
-        return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
-    }
-
-    //
-    // Converts a point in the coordinate space of a document to a screen space coordinate.
-    //
-    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
-
-        var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
-        var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
-        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
-        // They also ignore any transformation that may have been applied to their content document.
-        // NOTE: this currently assumes CollectionDockingViews aren't nested.
-        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
-            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
-            Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH;
-        }
-
-        let W = COLLECTION_BORDER_WIDTH;
-        let H = COLLECTION_BORDER_WIDTH;
-        let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
-        let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
-
-        // if this collection view is nested within another collection view, then 
-        // first transform the local point into the parent collection's coordinate space.
-        let containingDocView = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != FieldWaiting ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
-        if (containingDocView != undefined && containingDocView != FieldWaiting) {
-            let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
-            let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
-            let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
-            let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
-            parentX = ScreenX;
-            parentY = ScreenY;
-        }
-        return { ScreenX: parentX, ScreenY: parentY };
-    }
-
-
-    render() {
-        let bindings = { ...this.props } as any;
-        for (const key of this.layoutKeys) {
-            bindings[key.Name + "Key"] = key;  // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
-        }
-        for (const key of this.layoutFields) {
-            let field = this.props.Document.Get(key);
-            bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
-        }
-        if (bindings.DocumentView === undefined) {
-            bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
-        }
-        return (
-            <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
-                <JsxParser
-                    components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, PDFNode}}
-                    bindings={bindings}
-                    jsx={this.layout}
-                    showWarnings={true}
-                    onError={(test: any) => { console.log(test) }}
-                />
-            </div>
-        )
-    }
-}
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
deleted file mode 100644
index 05a7b91b9..000000000
--- a/src/views/nodes/FieldView.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React = require("react")
-import { Document } from "../../fields/Document";
-import { observer } from "mobx-react";
-import { computed } from "mobx";
-import { Field, Opt, FieldWaiting } from "../../fields/Field";
-import { TextField } from "../../fields/TextField";
-import { NumberField } from "../../fields/NumberField";
-import { RichTextField } from "../../fields/RichTextField";
-import { FormattedTextBox } from "./FormattedTextBox";
-import { ImageField } from "../../fields/ImageField";
-import { ImageBox } from "./ImageBox";
-import { Key } from "../../fields/Key";
-import { DocumentView } from "./DocumentView";
-
-//
-// these properties get assigned through the render() method of the DocumentView when it creates this node.
-// However, that only happens because the properties are "defined" in the markup for the field view.
-// See the LayoutString method on each field view :   ImageBox, FormattedTextBox, etc. 
-//
-export interface FieldViewProps {
-    fieldKey: Key;
-    doc: Document;
-    DocumentViewForField: Opt<DocumentView>
-}
-
-@observer
-export class FieldView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
-    @computed
-    get field(): Opt<Field> {
-        const { doc, fieldKey } = this.props;
-        return doc.Get(fieldKey);
-    }
-    render() {
-        const field = this.field;
-        if (!field) {
-            return <p>{'<null>'}</p>
-        }
-        if (field instanceof TextField) {
-            return <p>{field.Data}</p>
-        }
-        else if (field instanceof RichTextField) {
-            return <FormattedTextBox {...this.props} />
-        }
-        else if (field instanceof ImageField) {
-            return <ImageBox {...this.props} />
-        }
-        else if (field instanceof NumberField) {
-            return <p>{field.Data}</p>
-        } else if (field != FieldWaiting) {
-            return <p>{field.GetValue}</p>
-        } else
-            return <p> {"Waiting for server..."} </p>
-    }
-
-}
\ No newline at end of file
diff --git a/src/views/nodes/FormattedTextBox.scss b/src/views/nodes/FormattedTextBox.scss
deleted file mode 100644
index 492367fce..000000000
--- a/src/views/nodes/FormattedTextBox.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.ProseMirror {
-    margin-top: -1em;
-    width: 100%;
-    height: 100%;
-}
-
-.ProseMirror:focus {
-    outline: none !important
-}
-
-.formattedTextBox-cont {
-    background: white;
-    padding: 1vw;
-}
\ No newline at end of file
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
deleted file mode 100644
index 566e5716e..000000000
--- a/src/views/nodes/ImageBox.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import 'react-image-lightbox/style.css'; 
-import "./ImageBox.scss";
-import React = require("react")
-import { FieldViewProps, FieldView } from './FieldView';
-import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
-import 'react-pdf/dist/Page/AnnotationLayer.css'
-//@ts-ignore
-import { Document, Page, PDFPageProxy, PageAnnotation} from "react-pdf";
-import { Utils } from '../../Utils';
-import { Sticky } from './Sticky'; 
-import { Annotation } from './Annotation';
-
-/** PDF has been moved to PDFNode now. This is now a dummy ImageBox that should be replaced with current
- * ImageBox. 
- */
-@observer
-export class ImageBox extends React.Component<FieldViewProps> {
-    public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
-}
\ No newline at end of file
diff --git a/src/views/nodes/Sticky.tsx b/src/views/nodes/Sticky.tsx
deleted file mode 100644
index ca25c9bdd..000000000
--- a/src/views/nodes/Sticky.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import { SelectionManager } from "../../util/SelectionManager";
-import React = require("react")
-import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
-import 'react-pdf/dist/Page/AnnotationLayer.css'
-
-interface IProps{
-    Height:number; 
-    Width:number; 
-    X:number;
-    Y:number;
-}
-
-/**
- * Sticky, also known as area highlighting, is used to highlight large selection of the PDF file. 
- * Improvements that could be made: maybe store line array and store that somewhere for future rerendering. 
- * 
- * Written By: Andrew Kim 
- */
-@observer
-export class Sticky extends React.Component<IProps> {
-
-    private initX:number = 0; 
-    private initY:number = 0; 
-
-    private _ref = React.createRef<HTMLCanvasElement>(); 
-    private ctx:any; //context that keeps track of sticky canvas
-
-    /**
-     * drawing. Registers the first point that user clicks when mouse button is pressed down on canvas
-     */
-    drawDown = (e:React.PointerEvent) => {
-        if (this._ref.current){ 
-            this.ctx = this._ref.current.getContext("2d");
-            let mouse = e.nativeEvent; 
-            this.initX = mouse.offsetX; 
-            this.initY = mouse.offsetY;
-            this.ctx.beginPath();
-            this.ctx.lineTo(this.initX, this.initY); 
-            this.ctx.strokeStyle = "black"; 
-            document.addEventListener("pointermove", this.drawMove); 
-            document.addEventListener("pointerup", this.drawUp); 
-        }
-    }
-
-    //when user drags 
-    drawMove = (e: PointerEvent):void =>{
-        //x and y mouse movement
-        let x = this.initX += e.movementX, 
-            y = this.initY += e.movementY; 
-        //connects the point 
-        this.ctx.lineTo(x, y); 
-        this.ctx.stroke(); 
-        
-    }
-
-    /**
-     * when user lifts the mouse, the drawing ends
-     */
-    drawUp = (e:PointerEvent) => {
-        this.ctx.closePath();  
-        console.log(this.ctx); 
-        document.removeEventListener("pointermove", this.drawMove);
-    }
-
-    render() {
-        return (
-            <div onPointerDown = {this.drawDown}>
-                <canvas ref = {this._ref} height = {this.props.Height} width = {this.props.Width}
-                style = {{position:"absolute",
-                    top: "20px", 
-                    left: "0px",  
-                    zIndex: 1, 
-                    background: "yellow", 
-                    transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
-                    opacity: 0.4
-                }}
-                /> 
-
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/TextNodeView.tsx b/src/views/nodes/TextNodeView.tsx
deleted file mode 100644
index ab762df12..000000000
--- a/src/views/nodes/TextNodeView.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {observer} from "mobx-react";
-import {StaticTextNodeStore} from "../../stores/StaticTextNodeStore";
-import "./NodeView.scss";
-import {TopBar} from "./TopBar";
-import React = require("react");
-
-interface IProps {
-    store: StaticTextNodeStore;
-}
-
-@observer
-export class TextNodeView extends React.Component<IProps> {
-
-    render() {
-        let store = this.props.store;
-        return (
-            <div className="node text-node" style={{transform: store.Transform}}>
-                <TopBar store={store} />
-                <div className="scroll-box">
-                    <div className="content">
-                        <h3 className="title">{store.Title}</h3>
-                        <p className="paragraph">{store.Text}</p>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/TopBar.tsx b/src/views/nodes/TopBar.tsx
deleted file mode 100644
index bb126e8b5..000000000
--- a/src/views/nodes/TopBar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { observer } from "mobx-react";
-import { NodeStore } from "../../stores/NodeStore";
-import "./NodeView.scss";
-import React = require("react");
-
-interface IProps {
-    store: NodeStore;
-}
-
-@observer
-export class TopBar extends React.Component<IProps> {
-
-    private _isPointerDown = false;
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        this._isPointerDown = true;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointerup", this.onPointerUp);
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        this._isPointerDown = false;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-    }
-
-    onPointerMove = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (!this._isPointerDown) {
-            return;
-        }
-        this.props.store.X += e.movementX;
-        this.props.store.Y += e.movementY;
-    }
-
-    render() {
-        return <div className="top" onPointerDown={this.onPointerDown}></div>
-    }
-}
diff --git a/src/views/nodes/VideoNodeView.scss b/src/views/nodes/VideoNodeView.scss
deleted file mode 100644
index f412c3519..000000000
--- a/src/views/nodes/VideoNodeView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.node {
-    video {
-        width: 100%;
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/VideoNodeView.tsx b/src/views/nodes/VideoNodeView.tsx
deleted file mode 100644
index 0a7b3d174..000000000
--- a/src/views/nodes/VideoNodeView.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { observer } from "mobx-react";
-import { VideoNodeStore } from "../../stores/VideoNodeStore";
-import "./NodeView.scss";
-import { TopBar } from "./TopBar";
-import "./VideoNodeView.scss";
-import React = require("react");
-
-interface IProps {
-    store: VideoNodeStore;
-}
-
-@observer
-export class VideoNodeView extends React.Component<IProps> {
-
-    render() {
-        let store = this.props.store;
-        return (
-            <div className="node text-node" style={{ transform: store.Transform }}>
-                <TopBar store={store} />
-                <div className="scroll-box">
-                    <div className="content">
-                        <h3 className="title">{store.Title}</h3>
-                        <video src={store.Url} controls />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file