This is a submission for the DEV Weekend Challenge: Community
The Community
I built this for the automotive hacking and embedded systems community.
The people logging raw CAN traffic from cars, motorcycles, EV conversions, custom dashboards. The people using MCP2515 boards, USB-CAN adapters, SocketCAN on Linux. The ones dumping traffic with candump and trying to reverse engineer what’s happening without a DBC file.
A lot of that workflow still looks like this:
Open terminal.
Capture log.
Scroll through hex.
Try to spot what changed.
There are industrial tools that do everything. They’re powerful and expensive and assume structured workflows. Hobbyists often start with nothing but raw logs.
I wanted something lightweight, local, and visual. Something that makes raw CAN dumps easier to reason about without forcing you into a heavy enterprise stack.
What I Built
I built CAN Frame Playground, a cross-platform desktop app for parsing, visualizing, and exploring CAN bus logs.
Instead of staring at static hex dumps, you get an interactive environment focused on change detection and trend analysis.
Here’s what it actually does:
Parse CAN bus logs with validation and syntax highlighting
You can paste in or load standard candump logs. The app parses arbitration IDs, DLC, payload bytes, and validates formatting. Malformed lines are flagged instead of silently breaking the workflow.
Syntax highlighting makes IDs, payload bytes, and structural elements visually distinct so you’re not decoding a wall of monochrome text.
Visualize hex dumps with delta change detection
This is the core feature.
The app compares consecutive frames per arbitration ID and highlights which bytes changed. If a single byte increments, it’s visually obvious. If multiple bytes flip together, you see it immediately.
Instead of mentally diffing hex, you see deltas in real time.
That alone changes how you explore logs.
Graph delta changes over time
For a selected ID, you can graph how specific bytes evolve over time. This helps with:
- Spotting rolling counters
- Observing smooth numeric trends
- Seeing oscillating values
- Identifying patterns tied to physical input
It turns raw traffic into something you can visually correlate.
Signal annotation system
You can label and document specific byte ranges.
If you discover that bytes 2–3 represent RPM or that byte 7 looks like a counter, you can annotate it directly inside the tool. Those annotations stay with the session and make the log progressively more structured.
This is especially useful when working iteratively over multiple sessions.
Drag-and-drop log loading
You can drop a log file directly into the app. No import wizard. No CLI arguments required.
Small thing. Big friction reduction.
Dark and light mode support
Long log sessions are easier when you can switch themes depending on your environment. It sounds cosmetic, but when you’re staring at data for hours, it matters.
Privacy-focused design
All processing happens locally. No uploads. No telemetry. No cloud dependency.
If you’re reverse engineering proprietary systems or just don’t want your data leaving your machine, that’s important.
Cross-platform
Built with Tauri, it runs on:
- Windows
- macOS
- Linux
Same codebase. Native feel. Small footprint.
Demo
GitHub repository:
https://github.com/numbpill3d/can-playground
You can build and run it locally and immediately start loading your own CAN logs.
Typical workflow:
- Capture CAN traffic with SocketCAN or your preferred tool.
- Save the log file.
- Drag it into CAN Frame Playground.
- Explore delta changes, isolate IDs, annotate signals, graph trends.
It’s designed to sit alongside your hardware tools, not replace them.
Code
The full source code is available here:
https://github.com/numbpill3d/can-playground
It’s built with:
- Rust backend via Tauri
- JavaScript frontend
- Local file parsing and processing
- Delta comparison logic per arbitration ID
- Chart-based visualization for trend analysis
The parsing and delta detection logic is implemented cleanly and modularly, making it easy to extend with additional analysis features later.
How I Built It
The app is built with Tauri, which combines a Rust backend with a lightweight web-based frontend.
Rust handles the system-level side and integration. The frontend handles:
- Log parsing and validation
- Delta comparison logic
- Graph rendering
- Annotation management
- Theme toggling
Because Tauri uses the system webview rather than bundling Chromium, the final binary stays small and efficient.
Prerequisites for building
To build from source, you need:
- Rust (installed via rustup)
- Node.js 18+
Platform-specific notes:
- Linux requires
webkit2gtk(for example:sudo apt install libwebkit2gtk-4.1-devon Ubuntu/Debian) - Windows requires WebView2 runtime (automatically installed)
- macOS requires no additional dependencies
Development involves installing Node dependencies and running cargo tauri dev to launch the desktop environment.
This weekend challenge asked us to build something for a community we care about.
For me, that’s the embedded and automotive experimentation crowd. The people who start with raw logs and curiosity.
CAN Frame Playground doesn’t try to replace industrial tooling. It tries to make the early, messy stage of exploration faster and more visual.
Less squinting at hex.
More seeing what actually changed.
Top comments (0)