The latest articles on DEV Community by XMM17879829028 (@xmm17879829028). https://dev.to/xmm17879829028 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3511613%2Fc8a6b102-57ad-4796-963f-5a52952abc1d.png https://dev.to/xmm17879829028 en XMM17879829028 Sat, 28 Mar 2026 04:09:09 +0000 https://dev.to/xmm17879829028/html-viewer-with-bidirectional-highlighting-click-code-highlight-element-2971 https://dev.to/xmm17879829028/html-viewer-with-bidirectional-highlighting-click-code-highlight-element-2971 <p>I built this <a href="https://html-viewer.org" rel="noopener noreferrer">HTML Viewer</a> because I was frustrated with existing tools that only let you view code or preview the page, but never link the two together.</p> <p>The core feature is <strong>bidirectional highlighting</strong>:</p> <ul> <li>Click any line of HTML/CSS in the editor → the corresponding element on the preview page is instantly highlighted and scrolled into view.</li> <li>Click any rendered element on the page → the editor jumps to and highlights the exact source line that generated it.</li> </ul> <p>This makes it way easier to debug, learn HTML/CSS, or teach frontend basics.</p> <p>It's built entirely with vanilla JavaScript, runs 100% client-side (no backend, no data collection), and is completely free to use.</p> <p>Would love to hear feedback on edge cases, feature ideas, or any bugs you find!<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft8iumx1y4veqeqodm4ya.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft8iumx1y4veqeqodm4ya.png" alt=" " width="800" height="421"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcite0y6lmie085mcqq8t.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcite0y6lmie085mcqq8t.png" alt=" " width="800" height="422"></a></p> webdev html code