Prototyping vehicle infotainment systems with component-based, behavior-driven Human-Machine Interface (HMI) bindings.
Editor Mode
Presenter Mode
Mockpit is an interactive prototyping application for designing, layout-testing, and simulating modern vehicle infotainment systems. It provides modular, highly responsive HMI components with realistic behavior, live state management, and real-time canvas positioning.
Navigation, trip-planning, and vehicle-state components for interactive driving experiences.
- Navigation Map: Static map display with location pin and map tile rendering.
- Navigation Search: Search for points of interest, charging stations, and restaurants using mock results.
- Favorites: Saved favorite places and recent destinations with one-tap routing.
- Trip Planner: Destination and multi-stop trip planning with live distance, travel time, energy use, and arrival estimates.
- Trip Summary: Glanceable, read-only overview of the current trip.
- Overhead Driving Visualization: Vehicle orientation display with integrated Leaflet mapping and real-time driving telemetry.
A collection of music discovery and playback components for an in-vehicle media experience.
- Music Media Player: Music playback with album artwork, recent tracks, and streaming platform selection.
- Discover New Music: Music discovery with album artwork, carousel or grid layouts, and For You and Trending filters.
- Playlists: Playlist browsing with album artwork and carousel or grid layout options.
Communication components for common in-vehicle phone interactions.
- Dial Pad: Responsive dialer with live number display, press-and-hold clearing, contact matching, and container-relative typography.
- Contacts & Messages: Contact directory search, call history, and messaging widget bindings.
A collection of interactive climate controls for temperature, airflow, and seating.
- Temperature: Dual-mode horizontal/vertical temperature slider with mercury color gradients, press-and-hold auto-repeat controls, container-aware scaling, and precise puck bounds.
- Vent Control: Interactive airflow direction and fan speed controls.
- Seat Controls: Multi-stage driver and passenger seat heating and ventilation.
A fixed-layout weather experience providing current conditions, forecasts, radar, alerts, and detailed observations. Weather data can be viewed for different locations using the Select/Change Location control.
- Current Weather: Current conditions and temperature for the selected location.
- 5-Day Forecast: Five-day weather forecast with daily conditions and temperatures.
- Current Radar: Current precipitation radar for the selected location.
- Weather Alerts: Active weather alerts and advisories for the selected location.
- Current Observations: Detailed conditions including Feels Like temperature, UV Index, Dew Point, Air Pressure, and Visibility.
Mockpit supports Component Integration, allowing otherwise independent components to be visually connected through a parent/child relationship. This provides additional layout options while keeping each component independently selectable, editable, and configurable.
Adjacent Components |
Adjacent Components Connected |
Overlaid Components |
Overlaid Components Connected |
Component integration is primarily a visual and layout relationship, not a functional component merge.
The intended workflow is to position and size components first, then connect them. The existing placement is preserved as the intended visual relationship rather than automatically repositioning the child.
- Flexible Layouts: Components can be positioned over, within, or alongside other components.
- Parent/Child Relationships: A component can be connected to one parent, while a parent can have multiple children.
- Independent Components: Connected components remain independently selectable, editable, and configurable.
- Relative Layout: Moving or resizing a parent maintains the child's relative position and size.
- Single-Level Relationships: A child cannot itself have children.
This enables layouts such as a Driver Mode Selector positioned over a Speedometer, a Navigation Search component integrated into the top of a Navigation Map, or a Tire Pressure Monitor positioned below a Tire Pressure Status component.
Mockpit includes an Auditor mode for evaluating vehicle infotainment designs against automotive HMI and accessibility guidelines.
- Automated Compliance: Evaluates screens against guidelines including Federal Register NHTSA Driver Distraction Page, ISO 15005 Ergonomic Design Standard, ISO 9241-410 Physical Input Devices Design Standard, SAE J941 Motor Vehicle Drivers' Eye Locations Standard, and Evince WCAG 2.1 Compliance Guide.
- Static Analysis: Measures touch target sizing, character heights/PPD, contrast ratios, information density, and glance-budget heuristics.
- Runtime Telemetry: Instruments interaction latency, response times, and state transitions.
- Manual Review: Provides checklist criteria, reviewer status controls, and audit notes for each screen.
- Rule View: Groups findings by safety standard, category, and compliance status.
- Component View: Provides screen- and widget-level inspection against measured thresholds.
- Canvas Deep Linking: Selecting "Select on canvas" from a finding switches to Editor mode, activates the relevant screen, and selects the component.
- Rule Registry: Searchable reference library containing evaluated HMI guidelines, regulatory citations, design rationale, and display calibration settings.
The main workspace provides direct manipulation of HMI components and the vehicle environment.
- Three App Modes: Editor for design, Presenter for distraction-free vehicle infotainment simulation, and Auditor for HMI safety inspection.
- Drag & Drop Canvas: Position, resize, align, and integrate HMI components.
- Layers Panel: Reorder components by z-index and control visibility.
- Inspector: Configure component properties, themes, binding values, and integration relationships.
- Drive Simulator & Telemetry: Simulate gears, speed, battery, headlights, ADAS, and predefined driving events. Automatically hidden during Auditor mode.
- Vehicle Dashboard Environment: Scale and pan the vehicle dashboard background with cancel-and-close Reset behavior.
- Frontend: React 19 + TypeScript
- Build Tool: Vite 6
- Styling: Tailwind CSS v4
- State Management: Zustand
- Animations: Motion
- Icons: Lucide React
- Mapping: Leaflet & React-Leaflet
- Node.js v18 or higher
- npm v9 or higher
-
Clone the repository:
git clone https://github.com/your-username/mockpit.git cd mockpit -
Install dependencies:
npm install
-
Start the local development server:
npm run dev
-
Open your browser and navigate to
http://localhost:3000(or the port indicated in your terminal).
npm run dev- Launch the Vite development server.npm run build- Type-check and build the production bundle intodist/.npm run preview- Locally preview the built production bundle.npm test- Run the test suite.
src/
├── components/ # Core HMI widgets & canvas UI
│ ├── climate/ # Temperature, vent, and seat controls
│ ├── hmi/ # HMI safety compliance auditor and rule registry
│ ├── navigation/ # Navigation map, search, trip planner, and mini-nav
│ ├── phone/ # Dial pad, contacts, and messaging
│ ├── vehicle/ # Driving telemetry, gauges, speed, and gear controls
│ └── weather/ # Weather forecasts, radar, and observations
├── store/ # Zustand stores for application and vehicle state
├── types.ts # Global TypeScript declarations
├── utils/ # Helper utilities and color generators
└── main.tsx # Application entry point
Mockpit relies on zero-setup public APIs for realistic mapping and weather data. If Mockpit is ever deployed at significant production scale, consider pointing the base tile URLs to a dedicated tile cache, a commercial tile provider, or a self-hosted tile server.
This project is open-source and available under the MIT License.