JSON Compare Web Client

1. Introduction

The JSON Compare Web Client lets you experiment with and visualise the outputs of the JSON Compare API:

  • Compare - Comparison of two JSON inputs, viewing JSON delta output and difference views
  • Graft - Grafting a JSON Delta changeset onto a target, and viewing the output
  • Two-Way Merge - Merging of two JSON data sets, and viewing the output
  • Patch - Creation of a JSON Patch (RFC 6902) from two JSON data sets

2. Accessing the Application

In order to access the web client's features you will first need to login or create an account (and verify your email if requested). Note: you may be signed-in to the main DeltaXML.com website (e.g. to use our Support Forums), but you will need to re-login to use this web client. This is due to this application being a client-side JavaScript application, and our website authentication being managed server-side.

After logging on, the operations, Usage, and Downloading ID Token features will become available from the main application menu.

3. Standard Data Entry Features and Behaviours

Each feature has a separate page view with Data Entry and Results Display sections.

The Data Entry sections of each page have some standard features and behaviour, including:

  1. Access to a selection of predefined JSON A and B data sets.
  2. Manual entry of your own JSON A and B with real-time JSON validation
  3. Swapping of JSON A with B
  4. Compaction and Prettification of JSON A or B
  5. A feature-specific set of options and a Submit Button
  6. Option to Hide/Show the Data Entry Section when the results are Displayed
  7. The character lengths of the JSON A and B inputs are limited to a max length (currently 5,000,000 characters for each source). Note: this is the same limit that also applies to the JSON Compare Free API.
  8. Entry of values to be ignored by key.

4. Compare

The Compare feature generates a JSON delta and displays the operation results in four side-by-side views that include the A & B sources, the JSON delta and a folded difference view based on the JSON delta.

4.1. Inputs and Options

Input/OptionValueDescription
JSON AAny valid JSON data setThe A input to the JSON comparison
JSON BAny valid JSON data setThe B input to the JSON comparison
Word By WordtrueCompare strings based on word level comparison
falseCompare strings based on entire string comparison
Array AlignmentType with Value PriorityCompare Arrays based on Type with Value Priority
Position PriorityCompare Arrays based on Position Priority
OrderlessCompare Arrays in an Orderless fashion.
NOTE: when using Orderless the result view is disabled due to current technical limitations. You can copy or download the result.
OutputFull ContextJSON Delta result will include all data from both input data sets
Changes OnlyJSON Delta result will omit unchanged data
Ignore ChangesOne or more value's keysValues to be ignored from the delta, by key.

4.2. Results

The Compare results section displays the following four side-by-side views:

  1. Input JSON A
  2. Input JSON B
  3. Result JSON delta
  4. A folded difference view of the JSON delta

The side-by-side views include some useful capabilities and behaviours including:

  1. Each displayed view can be independently scrolled
  2. Clicking on a leaf element in any of the displayed views will:
    1. Display a JSON Pointer (rfc 6901) tooltip for that element in its respective JSON tree
    2. Automatically highlight the selected leaf element then auto-scroll to, and highlight the equivalent element in each of the other three views if the associated element exists in that view.

The Input and Result JSON Delta views include a button to copy the data.

5. Graft

The Graft feature generates a Merged JSON result format based on the following inputs and options.

5.1. Inputs and Options

Input/OptionValueDescription
Graft ChangesetAny valid JSON data setThe set of changes used for the graft, a Full Context Delta comparing Ancestor to Edit 1
Graft TargetAny valid JSON data setThe Edit 2 input to the merge
Output ModeChangeset PriorityAll changes in changeset are applied to the target.
Target PriorityIf the target has data which is inconsistent with the changeset this takes priority.
Additions OnlyOnly changes marked as additions in the changeset are applied.

The result view displays the merged result, and has a button to copy the merged result.

6. Two-Way Merge

The Two-Way Merge feature generates a Merged JSON result format based on the following inputs and options.

6.1. Inputs and Options

Input/OptionValueDescription
JSON AAny valid JSON data setThe A input to the merge
JSON BAny valid JSON data setThe B input to the merge
Word By WordtrueCompare strings based on word level comparison
falseCompare strings based on entire string comparison
Array AlignmentType with Value PriorityCompare Arrays based on Type with Value Priority
Position PriorityCompare Arrays based on Position Priority
OrderlessCompare Arrays in an Orderless fashion
Merge PriorityAItems from JSON A take precedence over items from JSON B when handling merge conflicts
BItems from JSON B take precedence when handling merge conflicts
Ignore ChangesOne or more value's keysValues to be ignored from the merge, by key.

The result view displays the merged result, and has a button to copy the merged result.

7. Patch

The Patch feature generates a JSON Patch result in RFC6902 JSON Patch format based on the following inputs and options.

7.1. Inputs and Options

Input/OptionValueDescription
JSON AAny valid JSON data setThe A input to the patch
JSON BAny valid JSON data setThe B input to the patch
Patch directionA to BProduce patch data that can be applied to JSON A to produce JSON B
B to AProduce patch data that can be applied to JSON B to produce JSON A
Ignore ChangesOne or more value's keysValues to be ignored from inputs to the patch generation, by key.

The result view has a folding tree view, and a button to copy the Patch data.

8. Free Usage Tier

The JSON Compare Free API has a usage limit of 1000 Uses per 30 days. Your usage can be monitored from this web client by signing-in and clicking "Your Usage" in the navbar at the top.

If you reach your usage limit you will receive this error:

9. Downloading ID Token

The JSON Compare Web Client has a feature for downloading the authentication file used by clients.

To use this, when signed-in simply click "Download ID Token" in the navbar at the top. The file will download with the filename "JSON_Compare_Auth.json".

Note: the download implementation is not compatible with versions of Safari below 10.1, and Internet Explorer. On these browsers you will have to copy the ID Token and save it yourself manually.

10. Large Results

This web client has a limit for large Compare and Patch results that will cause a bad user experience if displayed. In that case, a message will display with options to copy or download the result.