offline-diff-viewer

A diff viewer that gives you sharable diff view links but does not store your data. (This takes inspiration from typescript playground how it stores your code in url itself) but the for very large data we will be doing end to end encryption just like excalidraw so you can still have sharable links without worrying if you should store your enterprise data or not.

‼️ No data sent to server

You can take a look at the source code itself. All your data is kept as hash fragment in URL which never makes its way to server. Totally avoiding man in middle and XSS attacks to steal your data or any data breach. The data always stays in your URL and browser and never makes its way on the wire. Thats the main motive behind developing this tool. More about reasoning, why and how can be found in Motivation section below.

Formats currently supported

1. Any texual format (JSON, HTML, Plain text, JS, CSS and any text based file content)

Upcoming support

1. Images
2. Audio wave format

Resoning for building yet another diff viewer tool

I realise we are missing a diff viewer that is

• Privacy focused
• Simple to use
• And most importantly does not store any data on server to give sharable diff urls

Motivation

I realise as a developer community we are missing on a diff viewer tool that does not store your data on their server to give you links to diff view to share with your teams. There can be serious implications of storing your enterprise data on some server that you don’t know anything about.

Also current diff tools lack one major ability that is to compare any two text blocks. Many diff viewers out there target specific text types like JSON etc which is not what we want most of the time.

Also due to lack of such tool, if you want to see the the diff again you have to do the following

1. Ask/get the data from someone/somewhere
2. Search for a diff viewer tool online
3. Copy paste the data sources to the tool
4. Compare and share findings

This is still a mechnical part that can be easily automated. But most such tools out there right now store your data to give you sharable diff URLs which was a concerning thing at least for me for security reasons.

The simplest solution in my opinion will be

1. Get the data just once
2. Search for diff tool online just once
3. Copy your data to the tool just once
4. Compare and get a sharable url that stores your data in link itself (Like typescript playground stores your code in link)

In the chase of one such tool I ended up creating one as I did not find any that satisfied my requirements. This is open source and has very easy user interface. Here is the link to the tool https://diffviewer.vercel.app/ It has following benefits

1. Since the tool does not store your data on its server there is no server required in the tool
2. The tool is blazing fast
3. Most importantly the link can be shared with anyone without security concerns(Unless you share link itself over some insecure network)
4. As the link contains data whomever you share link with can get data too
5. Also note that the data is put with hash in url so server can not read the data

Here is a link to sample diff view

TODO/Upcoming features

Please check all To dos and upcoming things here

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate