Fork me on GitHub


Let's see this library in action.

Basics: A Contact Book

Try it! See how easy it is to add and remove contacts and properties (Hint: use keyboard keys like arrows, enter, tab, and escape). Check out the schema and data tabs to see what goes in to make this interface (and what comes out, the data tab updates based on your changes).

Data comes in all shapes and sizes, though, much more than just whether it's a string or a number. Treema is built to allow all sorts of ways to set up the interface just the way you like it.

Custom Nodes

Objects As Single Nodes

Say your data object has a 2d position in there.

Even with Treema's compact format, three lines for an object that will only ever have two properties just seems like overkill. So, define a Treema node that instead treats that object as a single entity, rather than a collection.

Much better. Use this technique to compress several related properties into single rows, like names, addresses and version numbers.

Embedding Plugins

ACE is a great library for creating text editors for all sorts of formats on the web. What if some of your nested data is better edited with ACE than a plain textarea or input field?

With custom nodes, you can weave in whatever elements or specialized plugins you like. Have an image URL property use the Ink File Picker. Pick date properties with the JQuery UI Datepicker.

References to Other Database Records/Documents

You have users who can list their favorite fast food restaurants. This would be a good thing to have separate tables (or collections) for, one for users and one for restaurants. But you don't want to have a third table for this minor one-to-many relationship. This should all fit just fine into the User entries, along with some basic, denormalized data so that when you fetch the User object, you have enough info to show what their favorite restaurants are, saving on database queries.

The database search Treema node encapsulates all this logic, leaving it to you to implement the GET search endpoint, and describe in a function how to format that data.

This is one of the coolest features in Treema. Making a simple, consistent pattern for working with denormalized references.


To see how these and more advanced nodes are implemented, check out /src/

Other Features

Keyboard Shortcuts

Treema aims to make manipulating these complex data structures as natural and quick as possible. To that end, Treema features plenty of keyboard shortcuts so you can stay as far away from your mouse as you like. Here's a brief overview:

The tests double as specifications for how shortcuts work, also.

Structural Restrictions

Schema-Defined, Interface Enforced

Whenever possible, the interface reflects the limits the schema imposes on the data, including:


You can register callbacks for when:

Say the user selects a contact on a contact list. Use the callbacks to know when to update another part of the page, showing details about that contact.

Want More?

It's open source! Join the project and make Treema even more awesome.