Highlighting changes on the page

Changing the content on the page, only where it is really needed

  • Highlighting changed areas
  • Easy installation
  • No dependencies on other libraries
  • Light weight (only 23kb in compressed form)
  • Saving the browser client's RAM
  • The possibility of different highlighting of the moved, updated or deleted part of the page in different colors
Documentation

Visual diagram

computer-mini
  • Coffee
  • Tea
  • Milk
  • Juice
computer
Austria Germany
Argentina France
  • Coffee
  • Tea
  • Milk
arrow
<ul>
    <li>Tea</li>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Water</li>
</ul>
arrow arrow arrow arrow
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Juice</li>
</ul>
<div>
    <table>
        <tr>
            <td>Austria</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Argentina</td>
            <td>USA</td>
        </tr>
    </table>
    <ul>
        <li>Tea</li>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
</div>
arrow arrow arrow
<div>
    <table>
        <tr>
            <td>Austria</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Argentina</td>
            <td>France</td>
        </tr>
    </table>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</div>
arrow
server

Updating elements

(the content changes every 2 seconds)

# Date Product's name Cost Quantity
1 2022-02-22 Fridge 1 $1354
2 2022-02-23 Cooker 4 $1354
3 2022-02-24 Table Agate white 3 $13543
4 2022-02-24 Table Agate black 1 $13542
5 2022-02-24 Table Diamond 3 $10200
Total amount 91541$
Total amount 91541$

Updating elements

(the content changes when you click on the block)

...

manager

...

manager

...

manager

...

manager

...

head manager

...

manager

...

manager

...

manager

...

manager

Content is added, updated, deleted

(the content changes when you click on the block)

  • squirrel
  • chipmunk
  • dog
  • tiger
  • duck
  • goose
  • pigeon

The content is updated when you click on the block, the entire block is highlighted

(the content changes when you click on the block)

30%

30%

70%

30%

30%

70%