JSON Mapper VS Code Extension

A Visual Studio Code extension that provides a visual JSON transformation tool for mapping and transforming data from one JSON format to another using an intuitive drag-and-drop interface.

Features

Visual Mapping Interface: Click-to-select interface to create mappings between source and target JSON structures
Two-Panel Layout: Side-by-side view of source and target JSON schemas with synchronized scrolling
Bezier Curve Connections: Smooth visual edges connecting mapped properties between panels
Transformation Pipeline: Build transformation chains using 20+ pre-built functions
Custom Code Transformations: Write JavaScript code for complex transformations
Array Support: Full support for nested arrays with wildcard path notation (orders.*.product_name)
Dark Mode: Automatic VS Code theme integration
Test Modal: Test your transformations with sample data before deployment
Type Coercion Warnings: Visual indicators when mapping fields of different types

Supported File Types

The extension activates for .jmap files, which store JSON mapping configurations.

Commands

JSON Mapper: New JSON Mapping - Create a new .jmap file with an empty mapping configuration

Getting Started

Install the extension
Create a new .jmap file or use the command "JSON Mapper: New JSON Mapping"
The visual editor will open automatically
Import source and target JSON schemas
Create mappings by clicking on source fields and then target fields
Apply transformations as needed
Test your mappings with sample data
Export and use in your applications

Transformation Types

Simple Mode (Pipeline Builder)

Chain multiple pre-built transformations together:

Category	Transformations
Type	toString, toNumber, toBoolean, toDate
String	toUpperCase, toLowerCase, trim, substring, replace, concat, split
Number	round, floor, ceil, multiply, add
Date	formatDate, getYear, getMonth, addDays
Conditional	default, ifEmpty

Advanced Mode (Custom Code)

Write custom JavaScript for complex transformations:

// Transform the value before mapping
// Available variables:
//   value - the source field value
//   sourceData - the entire source object
return value.toUpperCase().trim();

File Format

The .jmap file format is JSON-based:

{
  "version": "1.0",
  "sourceSchema": { ... },
  "targetSchema": { ... },
  "mappings": [
    {
      "id": "mapping-1",
      "source": "fieldPath",
      "target": "targetPath",
      "transformations": [...]
    }
  ],
  "edges": []
}

Development

Prerequisites

Node.js (v18 or higher)
npm
VS Code

Building

Run the setup script:
```
./setup.ps1
```
Build the extension:
```
npm run build
```
Press F5 to launch the extension in debug mode

Packaging

npm run package

This creates a .vsix file that can be installed in VS Code.

@naman22khater/json-mapper - The core transformation engine (npm package)
json-mapper-web - The React-based UI application

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

JSON Mapper

Naman09Khater