Getting Started

NPM Installation

shell
npm install diff-view-element

NPM Usage

JavaScript
// entrypoint.js
import "diff-view-element"; // Will register `<basic-diff-view-element>` and `<diff-view-element>` for you

CDN usage

HTML
<script type="module">
  import "https://cdn.jsdelivr.net/npm/diff-view-element";

  // Loading a version range. This will load the latest >= 1.0.0 and < 2.0.0 of diff-view-element.
  import "https://cdn.jsdelivr.net/npm/diff-view-element@^1.0.0";

  // Loading a specific version. This will only load v1.0.0
  import "https://cdn.jsdelivr.net/npm/diff-view-element@1.0.0";
</script>

A basic example

With the imports in place, you can now use the custom element and get to diffing!

HTML
<diff-view-element old-value="abcd" new-value="abce"></diff-view-element>

Cherry picking

For the bundle size conscious, or those looking to extend, diff-view-element has exports available for element definitions that both do not register, and will auto register.

For more, check out the “Imports” section of <diff-view-element> and <basic-diff-view-element>