Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea

Hi HN! I got so frustrated with modern WYSIWYG editors that I started to play around with building my own.

The problem I had was simple: I wanted a low-tech way to type styled text, but I didn't want to load a complex 500KB library, especially if I was going to initialize it dozens of times on the same page.

Markdown in a plain was the best alternative to a full WYSIWYG, but its main drawback is how ugly it looks without any formatting. I can handle it, but my clients certainly can't.</p> <p>I went down the ContentEditable rabbit hole for a few years, but always came to realize others had solved it better than I ever could.</p> <p>I kept coming back to this problem: why can't I have a simple, performant, beautiful markdown editor? The best solution I ever saw was Ghost's split-screen editor: markdown on the left, preview on the right, with synchronized scrolling.</p> <p>Then, about a year ago, an idea popped into my head: what if we layered a preview pane behind a <textarea>? If we aligned them perfectly, then even though you were only editing plain text, it would look and feel like you were editing rich text!</p> <p>Of course, there would be downsides: you'd have to use a monospace font, all content would have to have the same font size, and all the markdown markup would have to be displayed in the final preview.</p> <p>But those were tradeoffs I could live with.</p> <p>Anyways, version 1 didn't go so well... it turns out it's harder to keep a textarea and a rendered preview in alignment than I thought. Here's what I discovered:</p> <p>- Lists were hard to align - bullet points threw off character alignment. Solved with HTML entities (• for bullets) that maintain monospace width</p> <p><em>... <a href="https://news.ycombinator.com/item?id=44932651" target="_blank">continue reading</a></em></p> </div>  <div class="related-articles"> <div class="related-title">Related:</div> <div class="related-item"> <a href="/article/232475">The best AI image generators of 2025: I retested the top tools - there's one clear winner</a> </div> <div class="related-item"> <a href="/article/232442">Local WYSIWYG Markdown, mockup, data model editor powered by Claude Code</a> </div> <div class="related-item"> <a href="/article/232325">T5Gemma 2: The next generation of encoder-decoder models</a> </div> <div class="related-item"> <a href="/article/232271">Tin Can has reinvented the house phone for today’s families</a> </div> <div class="related-item"> <a href="/article/232415">The immortality of Microsoft Word</a> </div> </div>  <div class="footer"> <p>© 2025 GoKawiil</p> </div> </div>  <script> // No JavaScript needed for this simple layout </script> </body> </html>