Suppose I develop a blog web application with a blog post editor. The blog posts are stored as JSON files. The web application renders these JSON files to display blog posts with their titles, headers, images, etc.

A user can save different versions of a blog post. I want to provide a new screen to compare two different versions of the same post and merge them if necessary. I don't want to expose the JSONs so it cannot be a JSON comparison tool.

How would you display the comparison of the post versions ? Do you have any examples ?

  • 2
    So basically you want to compare blog post v1 vs v2 and highlight the differences between them? Like google docs version control?
    – Nicolas
    Commented Nov 25, 2020 at 21:09
  • Yes. Google docs, forms, slides are good examples.
    – Michael
    Commented Nov 26, 2020 at 8:54

3 Answers 3


Have you looked at commercial source control merge programs? Not to use them but just to see how they format stuff? FYI I use Beyond Compare myself. Having 3 windows can be user friendly ... version 1, version 2, merged version. Also 3 way merges are best if you have access to an earlier version that both later version were derived from. 2 way merge without an original you can only note differences (not which version has the newer change). Optionally with 3 way merge most changes can be merged automatically, only conflicts occur where the exact same lines have been changed in both later versions. That case requires user to decide ... i.e. keep 'a', keep 'b', keep both 'a''b', keep both 'b''a'


This is how confluence does it. I find it pretty intuitive. confluence page history

  • Thanks but I would like to see comparison of more complex structured data.
    – Michael
    Commented Nov 25, 2020 at 20:55
  • like what? Can you give an example Commented Nov 25, 2020 at 21:01
  • As it was mentioned, Google docs, forms, slides are good examples.
    – Michael
    Commented Nov 26, 2020 at 8:55

Have you tried the Linux diff command? Maybe the output is everything you need to put on the screen.
GitHub use colors to represent modifications, green for additions, red for deletion. Wikipedia use two columns to do so, but I don't think it is suitable for small phone screens.
And on StackExchange, you can see the difference like this, on the answer edited page.StackExchange Diff Tool

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.