How I Built a "Map by Example" JSON Transformer in Vanilla JS (100% Client-Side)
As developers, we’ve all spent too much time writing tedious boilerplate code to map one JSON structure to another. I wanted to solve this for myself, but I had two strict requirements:
No manual rule writing: I wanted to just provide a "Source" and a "Target" and let the tool figure it out.
100% Privacy: I didn't want my data (or my users' data) ever hitting a server.
In this post, I’ll break down the technical challenges of building a multi-level wildcard mapper and why I chose a pure client-side approach.
The Challenge: Mapping by Example
The core logic of the tool is an inference engine. Instead of the user defining target.name = source.user_info.full_name, the engine compares two objects and generates those paths automatically.
Handling Wildcards and Arrays
One of the hardest parts was handling multi-level arrays. If you have a list of users, each with a list of tags, how do you map that without losing the structure?
I implemented a wildcard mapper in vanilla JavaScript that identifies patterns in the source array and applies the transformation logic across all siblings. This allows for complex transformations like: users[].posts[].title -> data.articles[*].headline
Why Vanilla JS and Client-Side?
I decided to keep the entire application as a Single Page Application (SPA) with no backend processing for two reasons:
Performance: There is zero latency from server round-trips. The mapping happens as fast as the browser can execute the JS.
Security & Privacy: JSON often contains sensitive data (PII, API keys, etc.). By keeping everything in the browser, I can guarantee that the data never leaves the user's machine.
Lessons Learned
Obfuscation vs. Security: Since the logic is client-side, I used Terser for obfuscation. While it's not a replacement for server-side logic for proprietary secrets, it’s a great way to keep the payload small and the code clean.
UX for Developers: Developers value speed. Adding features like a "Save to File" button and instant live previews made the tool significantly more useful.
Try it out
I’ve made the tool free to use. I’d love to get your feedback on the mapping logic, especially if you have complex JSON structures that usually break standard mappers.
Live Tool: https://jsonmapper.a7soft.com
GitHub: https://github.com/ykernogo-boop/json-mapper
YouTube: https://www.youtube.com/watch?v=F0Ddd1ONPE8
I’m curious—how do you usually handle complex JSON transformations in your workflow?
Do you write custom scripts, or is there a tool you swear by? Let's discuss in the comments!
Top comments (0)