Skip to content

Releases: ankurokok/webmap

v1.0.0 - Production Release

11 Oct 02:44
@ankurokok ankurokok
v1.0.0
bd46b24

Choose a tag to compare

View all tags
v1.0.0 - Production Release Latest
Latest

WebMap v1.0.0 - Production-Ready Mind Mapping Application

🌐 Try it now | 📦 View Source

WebMap v1.0.0 is a fully functional, keyboard-first mind mapping application with comprehensive features, excellent test coverage (>80%), and complete documentation.

✨ Highlights

  • Keyboard-First: Complete navigation and editing with keyboard shortcuts
  • Rich Text: Markdown-based editing with Lexical (bold, italic, colors)
  • Performance: Optimized for 100+ nodes with throttled layout and memoization
  • Offline-Ready: PWA with IndexedDB storage and offline support
  • Well-Tested: 148 unit tests, 36+ E2E scenarios, >80% coverage
  • Documented: Comprehensive README, keyboard shortcuts, architecture guide, CHANGELOG

🎯 Core Features

Navigation & Editing

  • Arrow Keys: Navigate between nodes (left: parent, right: child, up/down: siblings)
  • Tab: Create child node
  • Enter: Create sibling node
  • Space: Collapse/expand children
  • Delete: Remove node
  • Cmd/Ctrl+Enter: Edit node text
  • Escape: Exit edit mode

Content Management

  • Rich Text: Bold, italic, multi-line text with markdown shortcuts
  • Emojis: 5400+ searchable emoji keywords, emoji icons
  • Colors: Text and background color picker
  • Copy/Paste: Full subtree support with Cmd/Ctrl+C/V
  • Undo/Redo: 50-state history with Cmd/Ctrl+Z

File Operations

  • Autosave: Automatic IndexedDB storage (500ms debounce)
  • Save/Load: JSON export/import with drag-and-drop support
  • Validation: JSON schema validation on file load

Layout

  • Automatic: Horizontal tree layout with smart positioning
  • Manual: Drag nodes to reposition
  • Reset: Return to automatic layout anytime

📊 Quality Metrics

Test Coverage

  • Unit Tests: 148 tests passing in ~25 seconds
  • E2E Tests: 36+ scenarios across Chromium, Firefox, WebKit
  • Performance: 5 tests for 100+ nodes and deep nesting
  • Coverage: Store 98.69%, Layout 98.83%, Navigation 97.22%, Toolbar 100%

Performance

  • Build Size: ~192 kB gzipped
  • Build Time: ~890ms
  • Node Capacity: Efficiently handles 100+ nodes
  • Layout Speed: ~6-7 calculations/sec (150ms throttle)

🔧 Technical Stack

  • Framework: React 18 + TypeScript + Vite
  • Canvas: React Flow with custom nodes/edges
  • Editor: Lexical with markdown support
  • State: Zustand with history and persistence
  • Storage: IndexedDB via idb wrapper
  • Testing: Vitest (unit) + Playwright (E2E)
  • PWA: Vite PWA Plugin + Workbox

📖 Documentation

  • README: Getting started, features, usage guide
  • CHANGELOG: Complete version history
  • Architecture: State management, layout algorithm, performance optimizations

🚀 Getting Started

Try Online (No Installation)

Visit https://ankurokok.github.io/webmap/ to use immediately

Install as PWA

  1. Visit the live demo
  2. Click install icon (⊕) in browser address bar
  3. App works offline after installation

Run Locally

```bash
git clone https://github.com/ankurokok/webmap.git
cd webmap
npm install
npm run dev
```

📝 What's New in v1.0.0

See CHANGELOG.md for complete details including:

  • Phase-by-phase development history
  • All features and implementations
  • Bug fixes and improvements
  • Technical specifications

🎉 Acknowledgments

Built with Claude Code - AI-powered development assistant

Note: Desktop app packaging (Tauri), PDF/PNG/SVG export, and top menu bar are planned for future releases.

Assets 2
Loading