JSON Template Mapper

A visual tool for mapping fields between JSON structures. Create transformations, handle arrays, and export your mappings — all in your browser.

Features

• Visual Mapping — Click source fields, then target fields to create mappings visually
• Array Iteration — Automatically handle array-to-array mappings with intelligent iteration
• Transform Functions — Apply built-in transformations (uppercase, number conversion, etc.) or custom expressions
• Live Preview — Test mappings instantly with sample data
• Save & Export — Save projects locally, export/import configurations
• Fully Offline — Works entirely in your browser, no server required

Getting Started

Prerequisites

• Node.js 20+
• npm 10+

Installation

npm install

Development Server

npm start

Open http://localhost:4200 to view the app.

Usage

1. Landing Page (/) — Learn about the tool and get started
2. Mapper Page (/mapper) — Paste source and target JSON templates, create field mappings
3. Transform Page (/transform) — Paste real data and see the transformed output

Creating Mappings

1. Paste your source JSON template in the left panel
2. Paste your target JSON template in the right panel
3. Click a source field, then click the corresponding target field to create a mapping
4. Optionally add transformations (uppercase, to number, custom expressions)
5. Navigate to Transform to test with real data

Project Structure

src/app/
├── core/                    # Services and models
│   ├── models/              # TypeScript interfaces
│   └── services/            # MappingService, StorageService, etc.
├── features/
│   ├── landing/             # Landing page
│   └── mapper/              # Mapper and Transform pages
│       ├── components/      # Field tree, mapping canvas, etc.
│       ├── layout.component.ts
│       ├── mapper-page.component.ts
│       └── transform-page.component.ts
└── shared/                  # Shared components and pipes

Tech Stack

• Angular 21 with standalone components and signals
• TypeScript 5.9 with strict type checking
• Tailwind CSS 4 for styling
• Vitest for unit testing

Building for Production

npm run build

Build artifacts are stored in the dist/ directory.

License

MIT