User Guide

What is Treehouse?

Treehouse is an outline editor, which you can think of as a nested bulleted list. Each bullet item is called a node. You can use the nodes to create nested layers of folders and notes.

Data Storage

Localstorage

By default, data is stored in your browser’s local storage. That means that the data is linked to your specific browser and device. If you clear your browser cache, the data will be wiped.

GitHub

If you choose to log in with GitHub, we’ll create a repository and store your data there.

To store your workspace, we will create a public repository called .treehouse.sh if it doesn’t already exist. If you want to make the repository private, you can do so in GitHub.

To switch back to the local storage backend, log out from the Options menu.

Multiple sessions

If you log in to Treehouse from multiple devices, the most recent device will have edit and save access. Other sessions will be prompted to refresh the page; if/when you do so, that session becomes the new active session.

Nodes

Your Workspace is your top level node, which all other nodes are nested under.

Learn how to manage and edit your nodes.

Add

You can add a new node in a few ways.

Hit ENTER on your keyboard and start typing.
Click into the blank area next to the plus symbol and start typing.

Indent

Indent a node using TAB ↹
Outdent a node using SHIFT + TAB ⇧ ↹

Move

Move a node up with SHIFT + COMMAND + UP ARROW ⇧ ⌘ ↑
Move a node down with SHIFT + COMMAND + DOWN ARROW ⇧ ⌘ ↓

Expand or collapse a node

If a node bullet has an outline around it, that’s an indication that it has nested content that is currently hidden. Click the node to expand it.

Click an expanded node once to collapse it.

Node menu

When you hover over a node, you’ll see a menu to the left of the node bullet. Click it to access node options, such as indent/outdent, open in a panel, etc.

Node formatting

Currently, all nodes are formatted as plain text. You can, however, add a checkbox to a node. With a node selected, open the command palette (⌘ K) and select "Add checkbox".

View

Double click a node to zoom in.

Side-by-side (Panel) view

To view two nodes side-by-side:

Open the node you want to be in the righthand panel. From its menu, choose “Open in New Panel”.

You can close or expand either panel to return to a single panel view.

Fields

A field is a node that can store structured information. Fields provide your data with structure, and allow for special search syntax (see Smart Nodes).

Create a field

To add a field to a node:

Indent underneath the node you want to contain the field, and type the field name
Use Command/Control + K to open the command palette, and choose "Create field"
Add your field value in the value section

Smart Nodes

Smart Nodes allow you to create an auto-updating search of all the nodes in your workspace. Simply type your search term, or use the format "fieldname:valuename" to filter specifically by field values. The Smart Node will update automatically as your node content changes. This is a simple but super powerful way to view your data in new configurations.

To create a Smart Node:

Create a new node where you want your Smart Node, and type your search value
Use Command/Control + K to open the command palette, and choose "Create Smart Node"

Tips for using Smart Nodes

You can filter on multiple fieldname values (using AND, not OR) like so: "fieldname:valuename fieldname:valuename" etc.
If your fieldname has spaces, put quotes around it (fieldname:"Value name")
Search terms are case-insensitive

Templates

Templates allow you to add a set of predefined fields and other child nodes to a node simply by adding a tag to that node.

Create and use a template

In this example, we'll create a template called "book" with child fields Author and Release Date.

Wherever you want to store your template, type "book" in the node.
Add child fields Author and Release Date, and leave the value fields empty. (To turn a regular node into a Field: Command Palette > Create field)
With your cursor in the parent "book" node, open the Command Palette (Command/Control+K) and choose Make Template.
Create a list of books wherever you'd like, if you haven't already. With your cursor on one if the individual books, type "#book" and hit ENTER to create the tag.
Check out one of your book nodes—it should have the child fields Author and Release Date that you set up in your template.

Views

You can view your data in many different ways using commands in the Command Palette.

Document

Converting your node(s) to document view centers them in the panel, styles the nodes like paragraphs, and supports basic Markdown formatting.

Note: document view is a one-way conversion. Document nodes can't be converted back to List (outline) view.

Create a Document

With your cursor on the parent node of the node(s) you want to convert to a document, open the Command Palette and select Make Document.

Markdown formatting

Text styles

*italic* or _italic_
**bold**
~~strikethrough~~

Lists

- unordered lists
* with any of
+ these characters

1. ordered
2. lists

Table

Useful for a set of nodes with common fields. Node fields will become columns.

Use Table View

With your cursor on the parent node of the nodes you want to convert to a document, open the Command Palette and select View As Table.

To revert back to List (outline) view, select the parent node and choose "View as List" from the Command Palette.

Tabs

The tab view tidies up a common group of nodes, allowing you to view one tab at a time.

Use Tabs View

With your cursor on the parent node of the nodes you want to convert to a document, open the Command Palette and select View As Tabs.

Calendar

The Calendar is a default node that is automatically generated for every workspace. Nodes inside the calendar are grouped by date, week, then year.

Today

The Today shortcut allows you to quickly view the node for Today in your Calendar.

Quick Add

Quick Add in the top navigation is a shortcut that opens a modal in which you can jot a quick note. It will be added to today’s date in your Calendar.

Command Palette

With a node selected, open the command palette (⌘ K) to view all the available actions for that node.

Keyboard Shortcuts

indent	↹
outdent	⇧ ↹
move node up	⇧ ⌘ ↑
move node down	⇧ ⌘ ↓
delete node	⇧ ⌘ ⌫
add or remove checkbox	⌘ ↵
mark checkbox as done	⌘ ↵
open command palette	⌘ K

CSS Theming

You can create your own custom theme for Treehouse using our built-in variables a.k.a. custom properties.

Create a theme

Add a top level folder called "ext" to your treehouse.sh repository
Create a CSS file inside the ext folder
Use the format below to populate the variables with hex code values. Tip: Create color variables inside the root block to reuse color styles between custom properties.

:root {
  --font: 'Font name';

  --color-primary: #hex;

  --color-background: #hex;
  --color-background-sidebar: #hex;

  --color-icon: #hex;
  --color-icon-secondary: #hex;

  --color-nav-label: #hex;

  --color-text: #hex;
  --color-text-placeholder: #hex;
  --color-text-secondary: #hex;

  --color-highlight: #hex;

  --color-node-handle: #hex;
  --color-node-handle-secondary: #hex;

  --color-outline: #hex;
  --color-outline-secondary: #hex;
}

Managing multiple CSS files

If you have multiple CSS files you want to swap between, append ".disabled" to the end of the unused CSS filename(s).

Variable Reference

Variable	Description
--font	Global font definition. Change the font itself but not sizes or styles with this.
--color-primary	Background color of primary button
--color-background	Background color of main panels, menus, and modals
--color-background-sidebar	Background color of sidebar navigation
--color-icon	High contrast color used for primary icons. For example: icons in the top navigation
--color-icon-secondary	Low-contrast color used for secondary icons
--color-nav-label	Used for top and sidebar navigation labels
--color-text	Default text color used for body text, navigation, and primary icons
--color-text-placeholder	Lower-contrast color used for placeholder text in inputs
--color-text-secondary	Lower-contrast color used for secondary text
--color-highlight	Lowest-contrast color to subtly highlight selected item in the menu, search, and command palette
--color-node-handle	Bullet color for nodes (a.k.a. the node handle)
--color-node-handle-secondary	Lower-contrast accent color on node handles. For instance, the outer filled circle on a node indicating collapsed children.
--color-outline	High contrast border color on pop-over containers like modals and menus.
--color-outline-secondary	Lower contrast border color where less extreme contrast is needed, such as the divider between panels and the navigation.

Fonts

To use a non-system font, you may import a font into your CSS file using either the @import method or the @font-face method.

Backend Extensions

Backends can change or extend how a Treehouse application behaves and are exposed to the frontend via adapters.

Workspace Storage

The Treehouse frontend uses its backend adapter to store the state of your workspace into a JSON document. The backend can decide where and how that JSON document is stored. For example, the Browser backend adapter will store the JSON into localStorage.

User Authentication

An optional capability of the frontend is to know whether a particular user is authenticated. You typically want user authentication for cloud or web-based deployments, but not necessarily for a local desktop app.

Search Indexing

Out of the box, Treehouse will index your workspace for full-text search using Minisearch, which will be good enough for many cases. However, a backend adapter can choose to hook into the index and searching so that you could have a more powerful search index such as ElasticSearch.

Documentation