Treema

• Overview
• Demo
• Usage
• Dev
• Run Tests
• Treema 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.

---

Implementation

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

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:

• Arrow keys: Navigates the selection, opening and closing collections.
• Enter and tab: Adds, edits and navigates between value inputs. Use shift to go upward.
  • Note: They have slightly different behaviors. Generally speaking, enter is more 'aggressive' with what it does. For example, while editing a field whose data is invalid, enter will let you move on anyway, and tab will not. Enter will open selected collections, tab will not.
• Escape: Discards changes on the input currently being edited.
• Delete: Removes a field when the input currently being edited is empty.
• Shift and Ctrl-Click: Selects multiple rows.

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:

• Preventing adding more elements to arrays and objects when the maximum number has been reached, or there are no more properties available to add.
• Using HTML input types and attributes to enforce rules such as length and value minimums and maximums.
• When there are errors, showing exactly what row or closed collection has issues.

Callbacks

You can register callbacks for when:

• Rows are hovered onto and off of
• Selection changes
• Data changes

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.