Live Coding: Making a Line Deduper with bitty

September 2025

My first use of bitty beyond the original examples. I used it to make a new tool for my tools site that dedups lines in text. I'm super happy with the way it works.

The Results

Here's the code:

HTML

<bitty-js data-connection="/components/line-deduper/line-deduper.js">
  <textarea rows="8" data-send="update"></textarea>
  <textarea rows="8" data-receive="update"></textarea>
</bitty-js>

JavaScript: /components/line-deduper/line-deduper.js

export default class {
  update(el, event) {
    const lines = event.target.value.split("\n");
    const seen = [];
    const output = [];
    lines.forEach((line) => {
      if (line === "") {
        output.push(line);
      } else if (!seen.includes(line)) {
        seen.push(line);
        output.push(line);
      }
    });
    el.innerHTML = output.join("\n");
  }
}

And a live example:

Type something like this into the left-hand box to see the duplicate line getting removed in the one on the right:

alfa
bravo
alfa
charlie
alfa
delta

Notes

Probably could have used filter and map to cut out a few lines. I don't have those in my head for JavaScript though.

end of line