TreePaper is a lightweight VS Code-style web application that helps users manage academic papers, navigate their structure, and receive AI-powered feedback. It supports full editing, file management, undo/redo history, and dynamic AI suggestions.
- 📁 Upload
.txt,.md, or.jsonfiles (including tree-structured.tree.json). - 📂 Sidebar displays uploaded files.
- 📄 Click a file to view and edit its contents in the center panel.
- 🧭 Auto-generated Contents panel based on section headers.
- Clickable navigation to jump to each section of the paper.
- Tree structure (
tree.json) is automatically detected and used for logic-based analysis.
- 📝 Edit content inline in the main viewer.
- ⏎ Paragraph-aware rendering with
<p>blocks and dynamic update. - 🖋️ Auto sync with internal state (
setText) for clean paragraph management.
- 💬 AI Chat Assistant on the right panel for smart interactions (in progress).
- ✨
Modify Suggestionbutton (top-right) triggers LLM-based suggestions (WIP). - 📤
Download Current Fileto export current text as.txt.
- ↩️
Undoand ↪️Redobuttons under Contents panel. - Each edit action is pushed into a stack for precise undo/redo operations.
- 🧠 Internal sync between DOM
<div contentEditable>and state using robust paragraph parsing. - Fixes layout issues from innerText flattening by preserving
<p>blocks.
-
🖥️ Three-panel layout:
- Left: File Sidebar & Tree View
- Center: Viewer / Editor with Save + Undo/Redo
- Right: AI Chat (optional)
-
⚙️ Consistent styling using TailwindCSS + minimalistic spacing
| Layer | Technology |
|---|---|
| Frontend | React + TypeScript |
| Styling | TailwindCSS |
| Routing | React Router DOM |
| Bundler | Vite |
# Install dependencies
npm install
# Start development server
npm run dev
# Open your browser at
http://localhost:5173/- ✅ Paragraph-level AI revision suggestions
- ✅ Section-level Tree structure evaluation
- 🔲 AI chat-driven paper editing (right panel)
- 🔲 Tree-based agent analysis for logical errors
- 🔲 Markdown / PDF export
Made with 💡 by AI-assisted paper tools team.
필요하시면 한국어 버전 README도 제공 가능합니다.
추가적으로 Figma, Prompt 방식 등 정리해 GitHub용 README로 확장도 가능합니다!
좋습니다! 첨부된 최신 구현 화면을 반영하여, TreePaper의 기능을 최신 상태로 반영한 완성형 README.md를 아래에 제공합니다.
TreePaper is a lightweight VS Code-style web application that helps users manage academic papers, navigate their structure, and receive AI-powered feedback. It supports full editing, file management, undo/redo history, and dynamic AI suggestions.
- 📁 Upload
.txt,.md, or.jsonfiles (including tree-structured.tree.json). - 📂 Sidebar displays uploaded files.
- 📄 Click a file to view and edit its contents in the center panel.
- 🧭 Auto-generated Contents panel based on section headers.
- Clickable navigation to jump to each section of the paper.
- Tree structure (
tree.json) is automatically detected and used for logic-based analysis.
- 📝 Edit content inline in the main viewer.
- ⏎ Paragraph-aware rendering with
<p>blocks and dynamic update. - 🖋️ Auto sync with internal state (
setText) for clean paragraph management.
- 💬 AI Chat Assistant on the right panel for smart interactions (in progress).
- ✨
Modify Suggestionbutton (top-right) triggers LLM-based suggestions (WIP). - 📤
Download Current Fileto export current text as.txt.
- ↩️
Undoand ↪️Redobuttons under Contents panel. - Each edit action is pushed into a stack for precise undo/redo operations.
- 🧠 Internal sync between DOM
<div contentEditable>and state using robust paragraph parsing. - Fixes layout issues from innerText flattening by preserving
<p>blocks.
-
🖥️ Three-panel layout:
- Left: File Sidebar & Tree View
- Center: Viewer / Editor with Save + Undo/Redo
- Right: AI Chat (optional)
-
⚙️ Consistent styling using TailwindCSS + minimalistic spacing
| Layer | Technology |
|---|---|
| Frontend | React + TypeScript |
| Styling | TailwindCSS |
| Routing | React Router DOM |
| Bundler | Vite |
# Install dependencies
npm install
# Start development server
npm run dev
# Open your browser at
http://localhost:5173/