Tree Pad 2.0

A local-first workspace for hierarchical notes and visual topic mapping.

Tree Pad 2.0 combines a draggable tree navigator, focused writing pane, and freeform visual map so related ideas can be organized and explored without requiring a backend service, database, account, or cloud platform.

Demo

Highlights

• Hierarchical note tree with insert, rename, duplicate, delete, expand/collapse, and drag-and-drop organization
• Focused editor with font family, font weight, formatting, and zoom controls
• Visual topic map for arranging selected text and related ideas spatially
• Resizable three-pane layout for the tree, editor, and map
• Local-first persistence using browser localStorage
• Light and dark themes using Microsoft Fluent UI
• No backend required
• No authentication or API keys required

Interface

Tree Pad 2.0 uses a desktop-style three-pane workspace:

1. Tree Navigator — organize notes into parent and child topics
2. Editor — write and format content associated with the selected topic
3. Visual Map — arrange information spatially to explore relationships between ideas

The panes can be resized to match different workflows.

Tech Stack

• React 18
• TypeScript
• Microsoft Fluent UI
• @minoru/react-dnd-treeview
• react-dnd
• split-pane-react
• Create React App / react-scripts
• Browser localStorage

Local-First Design

Tree Pad 2.0 is intentionally designed to work without external infrastructure.

The application does not require:

• A database
• A remote API
• User accounts
• Authentication
• API keys
• A cloud service

Tree structure, note content, map data, and application preferences are stored directly in the browser using localStorage.

This makes the application easy to run locally and keeps user-created content on the device where the application is being used.

Features

Hierarchical Topic Tree

Information can be organized using a familiar expandable tree structure.

Supported actions include:

• Create topics
• Create nested subtopics
• Rename nodes
• Duplicate nodes
• Delete nodes
• Expand and collapse branches
• Drag and drop nodes to reorganize the hierarchy

Writing Workspace

Selecting a topic opens its associated content in the central editor.

The editor provides controls for:

• Font family
• Font weight
• Text formatting
• Workspace zoom

Visual Topic Map

The visual map provides a second way to work with information outside of the strict tree hierarchy.

Content and related ideas can be positioned spatially to help explore relationships between topics.

Resizable Layout

The tree, writing workspace, and visual map are presented in a three-pane layout with adjustable pane sizes.

Theme Support

Tree Pad 2.0 supports both light and dark interface themes.

Run Locally

Requirements

• Node.js
• npm

Clone the repository

git clone https://github.com/j86schroeder/tree-pad-2.0.git
cd tree-pad-2.0

Install dependencies

npm install

Start the development server

npm start

Then open:

http://localhost:3000

Production Build

Create an optimized production build with:

npm run build

The static production bundle is written to:

build/

The generated application can be served by a standard static web host.

Project Structure

tree-pad-2.0/
├── docs/
│   ├── demo.gif
│   ├── preview.mp4
│   └── thumbnail.png
├── public/
├── src/
│   ├── components/
│   ├── config/
│   ├── context/
│   ├── data/
│   └── types/
├── LICENSE
├── SECURITY.md
├── package.json
├── package-lock.json
└── README.md

Data and Privacy

Tree Pad 2.0 stores application data locally in the browser.

This includes:

• Tree structure
• Note content
• Visual map data
• Theme preferences
• Application settings

No database or external backend is required for normal operation.

Because the data is stored in browser localStorage, clearing browser site data will also remove locally stored Tree Pad content.

Export and backup functionality would be a useful future enhancement before using the application for important long-term notes.

Project Background

Tree Pad 2.0 is a polished public release of an older personal project focused on hierarchical information management.

The goal of this version is to preserve the original desktop-workspace concept while making the project easier to run, review, understand, and extend.

The project explores combining two different approaches to organizing information:

• Structured hierarchy through a tree-based navigator
• Spatial organization through a freeform visual map

Possible Future Enhancements

Potential improvements include:

• Search across notes
• Import and export
• JSON backup and restore
• Markdown support
• Keyboard shortcuts
• Improved visual mapping tools
• File attachments
• Additional editor formatting
• Mobile and tablet layouts
• Optional synchronization
• Automatic local backups

Security

Tree Pad 2.0 does not require application credentials, API keys, or authentication services.

See SECURITY.md for security-related information.

License

Tree Pad 2.0 is released under the MIT License.

See LICENSE for details.

---

Tree Pad 2.0
Hierarchical notes, visual organization, and local-first information management.