DEV Community

Cover image for I Saw an Instagram Reel Last Night. Now I Built a Bionic Reading Extension.
Shreyan Ghosh
Shreyan Ghosh

Posted on

I Saw an Instagram Reel Last Night. Now I Built a Bionic Reading Extension.

#extensions #programming #development #tooling

This whole thing started at 2am, doom-scrolling Instagram like a responsible adult.

Some reel pops up explaining “bionic reading” — bolding the first few letters of words to help your brain lock onto text faster.
Apparently it helps with focus, speed, and fatigue. Neurodivergent friendly. Science-adjacent. Looked cool.

My first thought wasn’t

“Wow, I should download that.”

It was

“Yeah… I can build that.”

So I closed Instagram, opened VS Code, and accidentally built BoldFlow.

What Even Is Bionic Reading?

If you haven’t seen it yet:

  • Only the first part of each word is bolded
  • Your brain auto-completes the rest
  • Less eye travel, less fatigue
  • You don’t read every letter — you recognize patterns

Example:

Reading becomes faster with less effort

Simple idea.
Shockingly effective.

Also… most existing tools kinda suck.

The Problem With Existing Bionic Readers

Before writing a single line of code, I tried a few extensions.

Here’s what I found:

  • Works on Wikipedia ✔️
  • Breaks on Medium ❌
  • Needs refresh every toggle ❌
  • Dies on SPAs ❌
  • Breaks code blocks ❌
  • Randomly bolds stuff it shouldn’t ❌

Basically:

Cool demo. Terrible daily driver.

So I Built BoldFlow

Not as a gimmick.
Not as a CSS hack.
But as a proper DOM-aware, SPA-safe, state-synced extension.

BoldFlow:

  • Works on real websites, not just static pages
  • Supports SPAs (Medium, Dev.to, GitHub Docs, ChatGPT, etc.)
  • Applies bionic reading without page refresh
  • Syncs popup toggle + keyboard shortcut + tabs
  • Doesn’t touch code blocks, editors, inputs, or scripts
  • Reverts cleanly when turned off

Most importantly:
It feels invisible when it’s on.
Which is exactly what a reading tool should do.

How It Actually Works (The Interesting Part)

I’ll skip the “here’s a regex” nonsense and explain the parts that actually matter.

1. Tokenization (Words Aren’t Just \w+)

The engine doesn’t blindly bold text.

Each text node is tokenized into:

  • words
  • whitespace
  • punctuation

This lets BoldFlow:

  • preserve spacing perfectly
  • avoid breaking sentences
  • support accented characters and Unicode text

Nothing gets reflowed. Nothing gets corrupted.

2. The Bionic Engine

For each word:

boldCount = ceil(word.length * intensity)
Enter fullscreen mode Exit fullscreen mode

So:

  • “reading” → reading
  • “understanding” → understanding

Intensity is configurable, deterministic, and predictable.

No randomness. No magic numbers.

3. DOM Walker (Where Most Extensions Fail)

Instead of rewriting chunks of HTML, BoldFlow uses a TreeWalker:

  • Walks only TEXT_NODEs

  • Skips:

    • SCRIPT
    • STYLE
    • CODE
    • PRE
    • inputs
    • contenteditable regions

  • Wraps processed words in minimal spans

This preserves:

  • event listeners
  • framework bindings
  • page structure
  • selection behavior

No React tantrums. No editor breakage.

4. SPA Support via MutationObserver

Modern websites don’t reload.
They mutate.

BoldFlow watches for new nodes being added, and when that happens:

  • schedules processing
  • debounces aggressively
  • runs during idle time

Meaning:

  • no jank
  • no infinite loops
  • no performance hits

Infinite scroll?
Route changes?
Lazy-loaded articles?

Handled.

5. State Is Global, Not Tab-Local

Popup toggle.
Keyboard shortcut (Ctrl + Shift + Y).
Multiple tabs.

All synced via chrome.storage.sync.

One source of truth.
Every tab reacts instantly.
No refresh needed.

This is the part that finally made it feel real.

Why I’m Keeping It Minimal

I deliberately did not add:

  • dark mode gimmicks
  • flashy animations
  • AI buzzwords
  • “reader mode” clones

BoldFlow does one thing:
make reading easier without getting in your way.

If a feature doesn’t improve focus, it doesn’t ship.

What I Learned (The Real Takeaways)

  • Text manipulation is harder than it looks
  • DOM safety > visual tricks
  • MutationObserver without debouncing is a footgun
  • Storage-first state management saves your sanity
  • Accessibility tools should be invisible, not flashy

And also:

Instagram reels are dangerous.
They lead to projects.

Final Thoughts

BoldFlow wasn’t planned.
It wasn’t scoped.
It wasn’t even supposed to exist.

It started as

“Huh, that’s interesting.”

And turned into a fully-engineered Chrome extension that I now actually use.

If you read a lot, try bionic reading.
If you hate half-working tools, try building your own.

Sometimes the best projects start with
a reel, a thought, and way too much curiosity.

P.S. I will apply for listing in webstore soon and it edit the link here :D

Top comments (0)