How to use Task Tree

Getting started

1. Open or start a file. Everything is in the ☰ menu (File, Edit, View, Help); Undo, Redo, Save, Export and ? stay in the top bar. New File starts a blank WBS. Open loads a .wbs.json file from your computer, a synced folder or a NAS share. Save writes back to the same file. Open files sit as tabs in the top bar: click to switch, drag to reorder, middle-click or × (shown when you point at a tab) to close — with unsaved changes you can Save, Do Not Save or Cancel; right-click to open one in a new browser tab. Files that do not fit are under ▾ more; + gives New File, Open and Recent.
2. Set the project. Select the red project element and enter its Project ID (1, 2, 3 …). Every code in the project follows: 1 → 2 turns 1.1.1 into 2.1.1.
3. Grow the tree. Select an element and press Tab for a lower level or Enter for the same level (or use + Lower Level / + Same Level). Type the description right away and press Enter to confirm.
4. Fill in each element. In the Elements tab: Description, Work Hours, Status and Assignees. Add assignees with a name and photo in the Assignees tab of the Assignee view; a grey avatar means unassigned hours.
5. Hours per person. Tick assignees. With Split equally on (the default) the work hours are shared equally. Type an assignee's hours to split it yourself: if the hours given out are less than the work hours, the rest goes to Unassigned (ticked automatically, grey avatar); if they are more, the work hours grow to match. Work hours cannot be set below what is already given out (you get an error).
6. Project and Assignee views. Switch at the left of the second bar. Project view: the WBS tree of a page. Assignee view: one column per assignee plus Unassigned, with the lowest-level work, hours and a status bar (a color per status). Removed work is faded and not counted in the hours. Hours by person at the top sums up what you see (click a person to go to their column; ▴ hides the bar). Click a column header to open the Assignees tab, click a card to edit it, drag it to another assignee to reassign it (Alt-drag adds one). Double-click an avatar on an element to see that person's card in the Assignee view; double-click a card to go back to the Project view.
7. Page View and Overview. Page View shows one page at a time (the page tabs; ▾ lists every page). Overview (☰ ▸ View ▸ Overview, or Shift+O) shows several pages together, with no page tabs: under Pages & Projects, tick the pages and projects you want. In the Project view each page gets its own frame; click an element to work on its page. New elements and projects are added in Page View. Leave with ✕, ☰ ▸ View ▸ Page View or Shift+O; you return to the page you were on (or the one you last worked on).
8. Filters. Page View and Overview each have their own filters, shared by both views; everything is shown by default. Page View: Status and Assignees count for every page, and each page remembers its own Projects. Overview: its own Pages & Projects, Status and Assignees. In the Project view, hidden projects disappear, while Status and Assignees fade what does not match (the tree stays readable); in the Assignee view they choose the cards and columns. A faded element can still be selected and looked at; to edit it, add to it, delete it or jump from its avatars, you are first asked to show it (only the needed ticks are added). Dragging it is always allowed.
9. Roll-up is automatic. Hours = sum of the lower levels, Assignees = everyone below, Status follows the lower levels. Removed elements are ignored. An element with lower levels is locked: its fields are rolled up. The first lower level you add takes over its parent's hours, assignees and status; the next ones start empty. Deleting, unlinking or moving a lower level updates the parent at once; with none left, the parent is empty again (0h, no one).
10. Move and restructure. Drag elements anywhere; the tree is tidied again on the next change or with Rearrange. Unlink takes a branch out of the tree (U1, U1.1 …). To move a branch, click it, Shift-click its new parent, then click Link Under.
11. Structure tab. + New Project at the top adds a project. Each project has its own layout (Vertical / Horizontal) and color theme: select any element of the project, then change them (new projects start as Classic, Vertical). Rearrange lines all projects up side by side, Renumber makes the codes continuous again.
12. Pages. One file can hold several pages, each with its own WBS; assignees are shared. Click + next to the page tabs to add one; double-click a tab to rename it; right-click for Duplicate, Move and Delete.
13. Unlinked elements & notes. With nothing selected, + Unlinked Element starts a new branch outside the tree (U1, U2 …) and + New Note adds a note; double-clicking empty space also adds a note. Notes are not part of the WBS: no code, no roll-up, and Rearrange leaves them where they are. Pick a color and the assignees involved. Notes belong to where they are made: each page and Overview has its own notes in each view. Notes always sit above everything else; Arrange (or Ctrl+] / Ctrl+[) changes their order among themselves.

Shortcuts

Codes & legend

Dotted decimal, one number per level: 1 Project · 1.1 Deliverable · 1.1.1 Sub-Deliverable · 1.1.1.1 Work Package · 1.1.1.1+1 Activity L1 · 1.1.1.1+1.1 Activity L2 … The “+” marks where the WBS ends and activities begin. Unlinked branches are grey and coded U1, U1.1 ….

Files & sharing

• Each project is one .wbs.json file. Assignee photos and notes are stored inside it.
• Put the file on a NAS share or a synced folder to share it. Before saving, the app checks whether someone else changed the file and asks before overwriting.
• Chrome and Edge remember recent files: ☰ ▸ File ▸ Open Recent. In Safari, Firefox and on phones, Open uploads a copy and Save downloads a new file.
• Unsaved work is kept in this browser and restored the next time you open the page. An orange dot on a file tab means unsaved changes.
• Export: choose the Project or the Assignee view. Project view: PNG and SVG images (one per page, transparent background), a CSV table (opens in Excel) or a Markdown outline. Assignee view: the columns as PNG or SVG, or a CSV with one row per assignee and piece of work; it uses the Status and Assignees filters. Tick whole pages or single projects.
• Import turns a Markdown outline, a CSV table or pasted text into a new page. Codes (1.1, 1.1.2 …) or indentation decide the levels; you see a preview before anything is added. Photos, positions and note colors are only kept in .wbs.json.