Blog»Company Updates

Open-Sourcing React-visual-diff: Viewing Changes Between Two React Elements

Shauni Deshmukh | October 25, 2018

Like any software team, we rely on many open-source libraries to accelerate our ability to ship quality code. As a small engineering team, leveraging well-maintained, existing tools is even more crucial in our ability to build the best product possible for our customers.

This is why we’re excited to announce that we’re open sourcing our first library, react-visual-diff, and contributing back to the community that has allowed us to grow to where we are today. We hope that others will find value in it, just as we’ve found value in the libraries that others have shared.

Why We Built This Library

One of the most important features in any shared documentation tool like Tettra is the ability to see changes to a document over time. Having a robust revision history allows everyone to both contribute without fear and stay informed about the latest relevant changes. Consequently, versioning was part of the Tettra product from the beginning.

When we first released the ability to see highlighted changes between two revisions, we relied on the HTML representation of the document to determine the changes. This worked great for a while. Then, in early 2017, we released a brand new version of our editor built on top of Draft.js. Draft.js is a React framework developed by Facebook for building text editors. Using Draft.js let us focus on building the best editor for our users – one that was simple, smart, and connected. Over time, we added many custom features to the editor, including GitHub and Google Drive references, resizable images, user mentions, and table support – all using capabilities specific to Draft.js. Unfortunately, our naive HTML diff-ing library couldn’t distinguish changes on these custom features.

As our customers started using more of the features that made Tettra unique, our revision history became less useful. In addition, we were doing the diffing logic server-side, and longer or more complex revisions would often time out. We had to improve this experience for our users. We needed something that would take advantage of the structure of the React elements we were using in these custom features.

How We Solved the Revision History Pain Point

This is how react-visual-diff came to be. We looked into other options, including the Draft.js-specific library, draft-js-diff, but none could match the UX of our original differ that we wanted to maintain. In the end, our solution was a more generic library that could be used for any React element. Our library can be used to compare any two React elements and render the differences in a unified view. Additions are highlighted in green and deletions are highlighted in red.

Another thing we rely on as a small engineering team is the help of friends, consultants, and the developer community. This library was developed by Julian Krispel-Samsel, an amazing freelancer we’ve been working with since last year. We’re super lucky to have Julian’s React and Draft.js expertise making the Tettra editor even more awesome.

We look forward to continued collaboration with this amazing community on this and other open-source libraries.

Star this on Github