Diffable

It’s amazing the caliber of people who just randomly pop into your Twitter life sometimes. I posted about the lack of text diff tools on iOS a couple days ago, and the very next day Jacob Sam-La Rose very kindly gave me a tip that took me in a direction I didn’t expect: JavaScript and web views.

It turns out that Jacob is the author of a very handy Diff action for Drafts that uses this very trick to let people compare a draft in current form to a previously saved version. It’s really cool use of a web preview and it’s something I would have used many times in Drafts had I realized it existed.

Drafts Diff action by Jacob Sam-La Rose

As Jacob mentioned to me, the JavaScript Diff Algorithm written by John Resig is easily applied to any JavaScript parser such as Scriptable, which also allows for easy file selection for choosing two files to diff. Even more surprising to me was that John not only wrote a function that returns the file contents with additions and deletions indicated, he also included a second version of the function that returns a JSON object that has both files and their modifications inside.

Using this, I was able to fairly easily come up with a web view showing the two files side by side with changes highlighted in the appropriate colors. My major issue with it right now is that each file is one big string, so when there are differences in the two, it doesn’t subsequently maintain side-by-side correspondence with text that is still identical between them.

Text diff viewer in Scriptable

I’m going to have to look at splitting each file into lines and then putting in blank sections for the lines that were deleted in one of the files so that subsequent matching text can line up again.

Still, it’s a pretty good diff tool for a few hours work. Huge thanks to Jacob for showing me the light on a way to make a lightweight diff tool immediately while I ponder a future SwiftUI diff tool app.