Compare - Compare text and source code directly in the browser

Compare is a browser-based application for directly comparing texts, source code, and configuration files. Two versions of content can be compared side-by-side, with added, removed, and unchanged sections automatically detected and clearly displayed.

Especially with today's use of AI, new versions of texts and code are often generated within seconds. For example, an existing code snippet is passed to an AI model, modified, and then integrated back into the project. However, exactly what has changed is not always immediately apparent. Compare makes it possible to directly compare the original and modified versions and to track even small changes.

Compare is a fully browser-based tool and is provided as a static web page. All comparison logic runs locally on the user's device. Inserted text, source code, or configurations are not transmitted to an application server, backend, or database. The data being compared remains entirely within the browser and is discarded when the page is reloaded or closed. Therefore, using Compare does not require any additional server-side processing of the inserted content.

Link: https://compare.heiselanalytics.cloud

Initial situation

AI-powered tools have significantly increased the speed at which texts, configurations, and especially source code can be modified. Existing code can be extended, refactored, corrected, or adapted to new requirements within seconds.

However, this creates a new problem: at first glance, the generated version often looks very similar to the original version. To truly understand what an AI system has changed, both versions must be compared in detail.

Manually comparing longer texts or code snippets quickly becomes time-consuming. Individual changes can easily be overlooked among many unchanged lines. Especially with source code, even minimal differences can have significant consequences. A modified parameter, an additional condition, a removed character, or a slightly adapted function can fundamentally alter the behavior of an application.

Version control systems like Git offer extensive options for representing such changes. However, they often require that the content is already within a repository or an existing development process.

This is not always the case, especially when working quickly with AI. Often, there is only an original version and a version processed by an AI system, which need to be compared quickly.

Another issue is how to handle the content being compared. For internal source code, configurations, or project-related texts, it should be avoided that the data is transferred to an external service again for a simple comparison.

Therefore, a tool that was as direct as possible was needed: insert the original version, insert the edited version, and immediately see what has actually changed .

Defined solution

Compare is a static web application that allows users to directly insert two different versions of text or source code. The application automatically compares both versions and displays the differences similarly to a traditional code diff. Added, removed, and unchanged lines are distinguished and displayed with their respective line numbers. This makes Compare suitable, for example, for a simple workflow with AI-generated code.

An existing code snippet is first copied into the first input field. Then, the version processed by an AI system is inserted into the second field. The "Compare" function immediately shows which areas have been changed, added, or removed.

The comparison doesn't stop at the level of complete lines. If only individual words, parameters, or code elements within a line have been changed, these differences are also specifically highlighted.

This is particularly relevant for code. Instead of simply recognizing that a line has changed, it's possible to track which part within that line has been modified.

Two different views are available for display.

In split view, the original version and the new version are displayed directly side by side. This allows for an immediate comparison of the original content with the edited version.

Alternatively, a unified view can be used. This displays removed and added content within a common history, similar to the display of a classic Git diff.

On smaller screens, Compare automatically switches to the unified view.

The comparison direction can be reversed at any time. This allows you to quickly check which changes are relevant for the transition from version A to version B, or vice versa. Additionally, the contents of both input fields can be completely swapped.

A summary shows the number of added, removed, and unchanged lines. The generated diff can then be copied to the clipboard as text and used, for example, for documentation, tickets, or development notes.

Additional features include a sample comparison, optional line wrapping, display of the number of lines and characters, and a German and English user interface. A light and a dark color scheme are also available.

Result & Added Value

Compare provides a simple way to track changes before a new version of text or code is implemented. This significantly reduces effort, especially when working with AI. Instead of having to check the entire generated content line by line, the actually changed areas are immediately visible.

This makes it possible to quickly determine, for example:

• which functions were changed by an AI system,

• whether, in addition to the desired adjustment, other code areas were also changed,

• which parameters or conditions were adjusted

• which content was removed or added,

• and whether a change is actually as small as it initially appears.

Compare does not evaluate whether a change is technically or functionally correct. However, the application makes it transparent where a change has occurred . Subsequent reviews can then be focused on the relevant areas. This is particularly helpful with source code, as small changes can potentially have a significant impact on an application's functionality. In addition to AI-generated code, the tool can also be used for configuration files, SQL queries, Markdown documents, prompts, technical documentation, or any other type of text.

Another key advantage is the completely local processing. The inserted content is processed exclusively within the browser. Compare does not transmit the two versions to a backend, analytics, or database server. The web server merely provides the application's static files. After the website loads, the actual comparison takes place on the user's device. The entered data never leaves the browser and is neither stored nor processed server-side by Compare.

This allows internal or sensitive content to be compared without having to transfer an additional copy of this data to an external comparison service. The result is a deliberately simple tool for a very specific use case: insert two versions, identify the differences, and then decide which changes should be adopted.

Technical design

Compare was developed as a fully client-side web application using HTML, CSS, and JavaScript. The application itself is delivered as a static website and requires neither a server-side backend nor a database to process the comparison content.

The server delivers only the static files required for the application, such as HTML, CSS, and JavaScript. Once these have been loaded, all comparison operations run locally within the browser.

The text, source code, and configurations inserted into Compare are not transmitted to the server. They are neither processed by the hosting infrastructure nor stored in a database or logged server-side. The actual comparison data remains on the user's device during use. The comparison logic first breaks down both contents into individual lines and then identifies unchanged, added, and removed sections.

Related removed and added lines are then compared for split-screen display. For modified lines, an additional comparison is made within the respective content. This allows not only completely changed lines, but also individual changed components within a line to be highlighted. Different line breaks from various operating systems are normalized before the comparison. This prevents, for example, Windows and Unix line breaks from being incorrectly interpreted as content changes.

The calculation, if supported by the browser, is performed within a web worker . This separates the comparison logic from the user interface. Especially with longer texts, this allows the application to continue responding to input while the comparison is being calculated. During input, the comparison is re-executed with a short delay. This ensures the display updates automatically without unnecessarily performing multiple calculations simultaneously for every single keystroke.

The actual comparison content is deliberately not permanently stored in the browser. Only settings such as the selected language and preferred color scheme are stored locally. The inserted text or code content is discarded when the application is closed or reloaded. This architecture eliminates the need for any additional server-side processing of the content being compared. Data privacy-relevant information does not need to be transferred to an external comparison server to use the tool.

Automated tests exist for key components of the comparison logic. These tests check for identical content, added and removed lines, changes within individual lines, different line breaks, the reverse comparison direction, and larger inputs.

The deployment process is automated via GitHub Actions . Changes are reviewed before deployment, and the static files are then published. Because Compare can be run entirely statically, no continuously running application or database infrastructure is required. Additionally, the application can be deployed in a containerized manner using Docker and an Nginx web server.

Technologies used: JavaScript · HTML · CSS · Web Workers · Node.js Tests · GitHub · GitHub Actions · GitHub Pages · Docker · Nginx