
HTML Viewer with Bidirectional Highlighting (Click Code ↔ Highlight Element)
I built this HTML Viewer because I was frustrated with existing tools that only let you view code or preview the page, but never link the two together. The core feature is bidirectional highlighting : Click any line of HTML/CSS in the editor → the corresponding element on the preview page is instantly highlighted and scrolled into view. Click any rendered element on the page → the editor jumps to and highlights the exact source line that generated it. This makes it way easier to debug, learn HTML/CSS, or teach frontend basics. It's built entirely with vanilla JavaScript, runs 100% client-side (no backend, no data collection), and is completely free to use. Would love to hear feedback on edge cases, feature ideas, or any bugs you find!
Continue reading on Dev.to Webdev
Opens in a new tab




