For Korean instructions, see README.ko.md
nntype is a modern infinite typewriter canvas supporting Korean/English monospaced fonts, vector/image/JSON export, and infinite zoom & pan.
- Korean/English Monospaced Typewriter - Beautiful typography with Noto Sans Mono KR
- Infinite Canvas - Unlimited space with grid and guide system
- Multi-Mode System - Typography, Link, and Select modes
- Export/Import - PNG, SVG, JSON formats
- Dark Mode - Easy on the eyes
- Keyboard Shortcuts - Comprehensive shortcut system
- AI Integration - GPT-powered text responses
- Auto-Save - Session management with localStorage
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildnntype/
├── src/
│ ├── main.tsx # App entry
│ ├── components/
│ │ ├── InfiniteTypewriterCanvas.tsx # Main canvas component
│ │ ├── Header.tsx # Navigation
│ │ └── ui/ # UI components
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Utility functions
│ ├── types/ # TypeScript definitions
│ └── constants/ # App constants
├── docs/
│ ├── README.md # Documentation index
│ ├── planning/ # Project planning
│ │ └── ROADMAP_v2.0_2025-08.md # v2.0 implementation plan
│ ├── technical/ # Technical docs
│ │ ├── data-architecture-analysis.md # ERD & integration analysis
│ │ ├── naming-convention-summary.md # Naming standards
│ │ └── COORDINATE_SYSTEM_ANALYSIS.md # Canvas coordinate system
│ └── archive/ # Archived documents
├── CLAUDE.md # Claude Code guide
└── README.md # This file
- Type: Enter text in the input box and press Enter
- Width Control: Click 40-60-80 buttons below input
- Canvas Navigation: Click and drag to pan
- Mode Switch: Use toolbar buttons to switch modes
- Zoom Canvas:
Option/Alt + +/- - UI Scale:
Ctrl/Cmd + +/- - Toggle Grid:
G - Toggle Dark Mode:
D - Clear Canvas:
Cmd/Ctrl + K
- Documentation Hub - Complete documentation index
- v2.0 Roadmap - Complete implementation plan
- Technical Architecture - Data models and integration
- API Reference - Components and utilities API
- Project Structure - Detailed architecture
- Framework: React 18 + TypeScript
- Build Tool: Vite
- Styling: TailwindCSS
- Canvas: HTML5 Canvas API
- Icons: Lucide React
- Font: Noto Sans Mono KR
✅ Infinite canvas with text objects
✅ Multi-mode system (Typography/Link/Select)
✅ Export/Import (PNG/SVG/JSON)
✅ Dark mode and session management
🔄 Channel System - Logseq-style tagging and organization
🔄 Drawing System - Apple Pencil support with pressure sensitivity
🔄 Guide System - A4, Letter, Legal, Screen, Mobile formats
🔄 Multimedia - YouTube embeds, Audio, Image objects
🔄 Mobile/Touch - iPad optimized interface with gestures
🔄 Command System - Natural language processing
🔄 State Management - Zustand + IndexedDB storage
🔄 Data Architecture - Unified object system migration
See ROADMAP_v2.0_2025-08.md for the complete v2.0 implementation plan.
Contributions are welcome! Please read CONTRIBUTING.md for guidelines.
This project is licensed under the GNU General Public License v3.0. See the LICENSE file for details.
- © 2025 notnottype
- Original Author: Hyeonsong Kim (kimhxsong@gmail.com)
- GitHub: https://github.com/notnottype/nntype