Building web app to check diff between two texts
The idea
I have started this a few years ago when I had to compare two configuration files and find the difference. I know there are many desktop software and online tools to do it. But I haven't seen anything that I could use to compare files with a given format. For example, if I have given two JSON files to compare and find what are the changes, you can do a plain text diff. But things are getting harder since two JSON can be identical even if they look different. think of the following scenario of comparing two JSON content. The first one is as follows:
{ "key1": "value1", "key2": "value2" }
The second one is as follows:
{ "key2": "value2", "key1": "value1" }
Technically, these two are the same JSON but in a different order. Therefore, I wanted to get rid of that and build software that can compare two JSON considering their structure.
The solution I came up with was to convert both of these cases into the canonical format and then compare it. The online version of the app is deployed in https://differ.netlify.app/ as a netlify app. Here, you can insert two texts and compare them as text, JSON, XML, or as a property file.
Here is what happens if you compare two JSON contents:
Limitations
- This is in a browser application and therefore the content size that can handle is also limited.
- UI is not responsive with mobile and there are some works to do.
Future plans
- Make UI more responsive.
- Support saving and sharing a diff with others