Itinerary Builder

A visual trip planner for building, comparing, and managing travel itineraries with an interactive map.

Vue 3 · TypeScript · Pinia · Leaflet · Tailwind CSS v4 · Vite

---

Features

Itinerary Management

• Create, duplicate, import/export itineraries as JSON
• Add single or multiple days with location presets or custom coordinates
• Drag-and-drop to reorder location blocks with automatic date recalculation

Day Planning

• Organize activities by time of day (morning, afternoon, evening, all-day)
• Categorize activities (sightseeing, food, transport, culture, onsen, etc.)
• Mark days as day trips to nearby destinations

Variations

• Add alternative plans for any day as variations
• Transfer days between itineraries (overlapping dates become variations)
• Promote a variation to the main plan with one click
• Edit variations inline with full activity management

Multi-Select Actions

• Select individual days or shift-click for ranges
• Bulk transfer, remove, clean, or create a new itinerary from selected days

Interactive Map

• Route visualization connecting all stops
• Marker size scales with number of nights
• Day trip destinations shown as dashed lines
• Auto-fits to show all locations

Getting Started

npm install
npm run dev

Open http://localhost:5173/itinerary-builder/ in your browser. A sample itinerary is loaded on first visit.

Build

npm run build    # Type-check + production build
npm run preview  # Preview the production build

Data Storage

All data is stored in the browser's localStorage. Use the export/import feature to back up or share itineraries as JSON files.

License

MIT