Code-GUI bidirectional editing via LSP

I built a small proof-of-concept for a system that enables real-time bidirectional editing between any modern code editor and a GUI, enabled by an LSP server.

Code-based CAD

I like working on small projects at home that benefit from CAD. I’m also a programmer with a personal development environment that I’ve spent years making as cozy as possible. Naturally I’ve been interested in finding code-based CAD system to use for my projects that allows me to use that cozy development environment.

I read a recent update from Kevin Lynagh about his ongoing work on codeCAD, and this part on bidirectional editing stood out to me (emphasis mine):

For example: One idea I’m exploring is “bidirectional editing”, so geometry can be manipulated using either: a purpose-built graphical UI, or

the textual codeCAD language If you graphically drag a point around, the coordinates in the source code should automatically update. If you edit the source code, the graphical UI should automatically update. A simple way to test this idea is to throw a in the UI that displays the corresponding source code. But to me, that feels terrible because I never want to be coding in some janky, in-browser <textarea> — I want to be working with source code in Emacs, with all of my familiar key bindings, color schemes, autocomplete, and decades of cozy practice. That’s the core appeal of a textual programming language. But doing this properly is an absolute boatload of work: How does the system rewrite source code? Is it mediated by files on disk with reload on save? How do the editor and UI stay in sync and avoid clobbering each other’s unsaved changes? Maybe we need an LSP server?</p> <p>The language interpreter needs to preserve comments and flow them through, even when the UI makes edits to the code.</p> <p>What about whitespace / pretty-printing? How much of this needs to be built to evaluate whether bidirectional editing “fits nicely in the hand”?</p> <p>In particular:</p> <p>Maybe we need an LSP server?</p> <p><em>... <a href="https://jamesbvaughan.com/bidirectional-editing/" 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/212055">Recursive macros in C, demystified (once the ugly crying stops)</a> </div> <div class="related-item"> <a href="/article/211951">A Lost IBM PC/at Model? Analyzing a Newfound Old Bios</a> </div> <div class="related-item"> <a href="/article/211715">Ruby and Its Neighbors: Smalltalk</a> </div> <div class="related-item"> <a href="/article/211521">From vibe coding to context engineering: 2025 in software development</a> </div> <div class="related-item"> <a href="/article/211403">Hypothesis: Property-Based Testing for Python</a> </div> </div>  <div class="footer"> <p>© 2025 GoKawiil</p> </div> </div>  <script> // No JavaScript needed for this simple layout </script> </body> </html>