Text Compare(Angular)
Angular and Monaco Editor

A web application for text compare, built with Angular and Monaco Editor.

1. Text Compare

This app can determine the different content for the given ‘Original Text’ and ‘Changed Text’. It is based on Monaco Diff Editor and currently supporting the following features:

  • Syntax highlighting for 45+ languages, including c, c++, java, javascript, html, typescript, etc.
  • Three editor themes: Visual Studio, Visual Studio Dark and High Contrast Dark.
  • Diff Mode: Side by Side Diff, Inline Diff.

2. Demo

Two available demos:

Note: The demo websites may be slow when you access them for the first time. Be patient!

3. UI

Home page. image Click the ‘Text Compare’ menu. image Input some text in both the original and modified text boxes, and click ‘Find Difference’ button. image Check the ‘Inline Style’ to view the difference in inline mode. image Input some typescripts and set the language to ‘typescript’. image Change theme to ‘Visual Studio Dark’. image

4. Under the Hood

Read tutorial Building Online Text Compare Tool with Angular to learn how this text compare tool is built.

5. Source Files