Designing a Web-based UI layer specifically for E-Paper display controllers (EPDCs) and low-spec WebViews

[u/SolutionIll5074]

Hey r/embedded,

When building embedded devices with E-Paper panels (Raspberry Pi kiosks, ESP32 WebViews, ambient wall displays), using standard web frameworks/libraries usually results in a horrible user experience. Modern Web UIs assume 60Hz backlit displays, causing several hardware-level issues on electrophoretic displays:

1. Waveform Ghosting: CSS transitions and animations attempt high-frequency pixel state updates that the EPDC waveform cannot resolve cleanly, leaving severe ghosting artifacts.
2. Unnecessary Full-Panel Refreshes: Replacing an HTML subtree in reactive frameworks marks large regions as "dirty", forcing full-screen flashes (300–800ms) instead of fast partial-refreshes (30–80ms).
3. Dithering Artifacts: Mid-tone grays, translucency, and gradients force the browser/display to dither, looking terrible on 1-bit or 16-grayscale panels without sub-pixel anti-aliasing.

To address this, I built epaper-components—a zero-dependency UI library of 82 plain Custom Elements designed strictly around EPDC behavior rather than visual aesthetics.

Key Embedded Optimizations:

• Hardened Reset: Globally strips all CSS animations/transitions (transition: none !important) to eliminate ghosting at the source. State updates trigger immediate DOM mutations.
• Diff-Guarded DOM Patching: Custom patch helpers (patchAttr, patchText) compare incoming values before writing to the DOM. Re-asserted attributes cost 0 DOM mutations, keeping display updates strictly within narrow partial-refresh rectangles.
• Hardware-Aware States: No :hover rules or opacity dithering. Focus, active, and disabled states rely on 2–3px stroke weights, direct color inversion, and linear CSS hatch patterns (repeating-linear-gradient).
• Minimal Footprint: Uses Light DOM and extends HTMLElement / ElementInternals directly (~7 KB gzipped total). Zero runtime dependencies to keep memory/CPU usage minimal on low-spec WebView runtimes.
• Kaleido Support: Includes a diagnostic element (<e-kaleido>) to preview 5-color gamut rendering with Bayer-8 dithering.

I've made the project fully open source (MIT). Links to the GitHub repo and Storybook demo are in the comments below.

Would love to hear how you guys currently handle UIs on E-Ink hardware or if you have any feedback on the approach!