derivation Documentation

Getting Started

derivation is a visual syntax tree editor for linguistics. You can build, style, and export publication-ready tree diagrams directly in your browser.

Quick start

• Click Add Root in the toolbar to create your first node
• Select a node, then click Add Child or press Tab to add children
• Double-click any node to edit its label
• Or open the bracket notation panel on the left and type your tree structure, then press Ctrl + Enter to parse

Bracket Notation

The bracket notation panel on the left side lets you type trees using labeled bracket syntax. Click the vertical tab on the left edge to open or close the panel.

Basic syntax

Nodes are wrapped in square brackets with the label first, followed by any children:

[S
  [NP
    [Det the]
    [N cat]]
  [VP
    [V sat]]]

Special syntax

• \triangle{text} — Creates a triangle node (dominance without internal structure). Example: [\triangle{the cat}]
• \\ — Inserts a new line within a node label

Panel features

• Syntax highlighting — brackets are color-coded by depth, matching pairs are highlighted when the cursor is adjacent, and unmatched brackets are marked in red
• Resizable — drag the right edge of the panel to adjust its width
• Help button — click ? in the panel header for a quick formatting reference

Panel shortcuts

Building Trees

• Add Root — Creates the root node (labeled "S"). Only available when the canvas is empty.
• Add Child — Adds a child to the selected node. The new node opens immediately in edit mode. Shortcut: Tab
• Add Triangle — Adds a terminal child with triangle notation, used to indicate dominance without showing internal structure. Shortcut: T
• Delete — Removes the selected node and its entire subtree. Shortcut: Delete or Backspace
• Reorder siblings — Right-click a node and choose Move Left or Move Right to reorder among siblings.
• Drag to reposition — Click and drag any node (including the root) to move it and its children freely from the automatic layout position. Hold Shift while dragging to constrain movement to horizontal or vertical only.
• Reset position — Right-click a repositioned node and choose Reset Position to snap it back to the automatic layout.

Editing Nodes

Double-click a node (or select it and press Enter) to open the inline editor.

Rich text formatting

While editing, a format bar appears with the following options:

• Bold — Cmd/Ctrl + B
• Italic — Cmd/Ctrl + I
• Underline — Cmd/Ctrl + U
• Subscript — format bar button (X₂)
• Superscript — format bar button (X²)
• Small caps — format bar button (Sc)
• Strikethrough — format bar button (S)
• Text color — pick from preset swatches or use the custom color picker

Multi-line labels

Press Shift + Enter to add a new line within a node label. Press Enter alone to confirm your edit.

Styling Nodes

Select a node to reveal the styling options in the toolbar.

Fill color

• Pick a preset color or use the custom color picker to set a background fill
• Click the strikethrough square button to remove the fill
• Fill colors are preserved in exports

Border color

• Node borders are invisible by default
• Pick a color to make the border visible
• Click the strikethrough square button to hide the border again
• Border colors are preserved in both PNG and SVG exports

Branches & Triangles

Branch styles

• Click on a branch line to select it
• Choose between Solid, Dashed, or Dotted line styles
• Pick a color from preset swatches or the custom color picker
• Each branch can have an independent style and color

Triangle fill

• When you click on a triangle branch, a Fill bar also appears
• This fills the interior of the triangle shape — independent from the node fill below
• Triangle fills are preserved in exports

Arrows

Arrows connect two nodes with a directed path, commonly used for movement or binding relationships.

Creating arrows

• Click Add Arrow or press A to enter arrow mode
• Step 1: Click the source node
• Step 2: Click the target node
• Press Esc to cancel

Arrow shapes

• Curve — smooth Bezier curve (default). Drag the midpoint handle to adjust curvature.
• Straight — direct line between endpoints.
• Elbow — right-angled path with two draggable handles for fine-tuning the route.

Arrow styles

• Solid, Dashed, or Dotted line patterns
• Color — pick from presets or use the custom picker

Arrowhead toggles

• Select an arrow to see two arrowhead toggle buttons in the toolbar
• Head at start — adds an arrowhead at the source end
• Head at end — controls the arrowhead at the target end (on by default)
• Removing both heads creates a plain line that looks like a branch — useful for multidominance structures where a node has two mother nodes

Anchor positioning

• Each arrow endpoint has a small circular handle at the node edge
• Drag the handle to re-attach it to a different node or edge (top, bottom, left, right)
• Cmd/Ctrl + drag to slide the anchor along the current edge without changing which edge it's on

Arrow Labels

• Double-click an arrow to add or edit a label
• Labels appear at the midpoint of the arrow path
• Labels support the same rich text options as node labels: bold, italic, subscript, superscript, strikethrough, and color
• Press Enter to confirm, Esc to cancel

Custom Colors

Every color palette in derivation includes a rainbow button that opens the custom color picker.

Using the picker

• Gradient area — click or drag to choose saturation (left-right) and brightness (top-bottom)
• Hue bar — click or drag to select the base hue
• Preview swatch — shows the currently selected color in real-time
• Hex input — type a hex code directly (e.g. #2563eb) and press Enter
• OK — apply the color

Favorite colors

• Click Save to add the current color to your favorites (up to 12)
• Favorites appear as small swatches below the hex input
• Click a favorite swatch to jump to that color
• Hover over a favorite and click the × to remove it
• Favorites persist across sessions (stored in your browser)

Canvas

• White canvas — click the grid icon in the toolbar to toggle between the dotted grid background and a clean white canvas
• Align bottom — click the align-bottom icon in the toolbar to align all leaf nodes to the same vertical level
• Zoom — use Ctrl + + / Ctrl + - or the zoom controls in the bottom-right corner. Double-click the zoom percentage to reset to 100%.

Exporting

Open the File menu and choose an export format.

PNG

• High-resolution (16x scale) with transparent background
• Auto-cropped to content with padding
• Ideal for presentations, papers, and social media

SVG

• Scalable vector format with white background
• Perfect for embedding in documents or further editing in vector tools
• Standalone file with all styles embedded

Save & Load

• Save — downloads your project as a .json file containing the full tree, arrows, and settings
• Load — open a previously saved .json or .merge file
• Auto-save — your work is automatically saved to your browser's local storage on every change. When you reopen derivation, your last tree is restored.

Keyboard Shortcuts

Press ? at any time to see shortcuts inside the app.

General

Tree navigation

Editing

While editing a label