Excerra

Read, highlight, connect ideas, and export your notes as mind maps.

Features

• PDF Viewer — Drag and drop any PDF to start reading
• Interactive Split View — Resizable layout with PDF on one side, mind map on the other
• Mind Map Workspace — Build visual connections between concepts using React Flow
• Highlight & Connect — Capture key ideas and link them together
• Export — Save your mind map as an image or PDF
• Clean UI — Modern, responsive interface built with Tailwind CSS

Tech Stack

• React 19 + TypeScript
• Vite — Fast build tool and dev server
• Tailwind CSS — Utility-first styling
• React Flow — Mind map / node-based workspace
• react-pdf — PDF rendering
• html2canvas + jsPDF — Export capabilities
• Zustand (via store.tsx) — Lightweight state management

Getting Started

Prerequisites

• Node.js 18+ recommended
• npm (included with Node.js)

Installation

npm install

Development

Start the local development server:

npm run dev

Open the URL printed in your terminal (typically http://localhost:5173).

Build

Create an optimized production build:

npm run build

The output will be written to the dist/ directory.

Preview Build

Locally preview the production build:

npm run preview

Lint

Run Oxlint to check for code issues:

npm run lint

Project Structure

.
├── public/             # Static assets (favicon, icons)
├── src/
│   ├── assets/         # Images and static resources
│   ├── components/
│   │   ├── MindmapWorkspace.tsx   # React Flow mind map canvas
│   │   └── PDFViewer.tsx          # PDF rendering component
│   ├── App.tsx         # Root layout, toolbar, split view
│   ├── store.tsx       # Global state (Zustand)
│   ├── types.ts        # TypeScript type definitions
│   ├── main.tsx        # Application entry
│   ├── App.css
│   └── index.css       # Tailwind directives
├── index.html
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── vite.config.ts
└── tsconfig.json

Usage

1. Click Upload PDF or drag-and-drop a PDF file into the header area.
2. Read through the PDF in the left panel.
3. Switch to the right panel to create mind map nodes and connections.
4. Drag the divider to resize each workspace.
5. Use the toolbar buttons to change or remove the loaded PDF.

License

This project is marked as private in package.json. Adjust licensing as needed before publishing.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

Excerra

Excerra

Excerra

Excerra