The latest articles on DEV Community by Holovanov Oleksandr (@c0mbit). https://dev.to/c0mbit https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4234240%2Fb2813d3f-c483-429a-9eed-7332fc47f167.jpg https://dev.to/c0mbit en Holovanov Oleksandr Mon, 09 Nov 2026 00:24:45 +0000 https://dev.to/c0mbit/i-built-a-two-way-visual-ui-editor-for-rust-inside-vs-code-10o0 https://dev.to/c0mbit/i-built-a-two-way-visual-ui-editor-for-rust-inside-vs-code-10o0 <p>Hey everyone,</p> <p>Like a lot of you, I love writing desktop apps in Rust, but I was getting incredibly frustrated with the GUI workflow. Tweaking layout coordinates, compiling, waiting, and realizing a button is still 5 pixels off... it just kills productivity. </p> <p>So I decided to build a solution: <strong>Ruxel Studio</strong>. <br> It’s an open-source visual drag-and-drop UI editor extension built directly into VS Code.</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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1z924fcsmjcir6zna7dk.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1z924fcsmjcir6zna7dk.png" alt=" " width="800" height="409"></a></p> <h2> The Problem with Most Code Generators </h2> <p>Usually, UI builders generate a massive block of boilerplate. If you need to add custom logic to a button click, you have to edit the generated file. But the next time you move that button in the visual editor, the tool regenerates the file and overwrites your custom code. It's a nightmare.</p> <h2> How Ruxel Studio Fixes It (Two-Way AST Sync) </h2> <p>Instead of blind generation, Ruxel Studio uses <code>syn</code> and <code>quote</code> under the hood for bidirectional AST synchronization. </p> <p>Here is what that actually means:</p> <ol> <li>You can drag and drop a widget on the visual canvas.</li> <li>The extension parses your Rust code, finds the exact spot, and safely injects the UI update.</li> <li> <strong>Crucially:</strong> You can also edit the code manually, and the visual canvas updates instantly to reflect your changes. Your custom event handlers and logic are completely safe.</li> </ol> <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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3jdzn3pzaaoxkzi78pe2.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3jdzn3pzaaoxkzi78pe2.png" alt=" " width="800" height="408"></a></p> <h2> Supported Frameworks </h2> <p>Right now, the extension is in Alpha (v0.1.1) and supports code generation for:</p> <ul> <li>Iced</li> <li>egui</li> <li>Slint</li> <li>Dioxus (Early experimental support)</li> </ul> <h2> Try it out </h2> <p>You can install it right now from the VS Code Marketplace, or check out the source code (MIT / Apache-2.0). </p> <ul> <li> <strong>Marketplace:</strong> <a href="https://marketplace.visualstudio.com/items?itemName=c0mbit.ruxel-studio" rel="noopener noreferrer">https://marketplace.visualstudio.com/items?itemName=c0mbit.ruxel-studio</a> </li> <li> <strong>GitHub:</strong> <a href="https://github.com/c0mbit/ruxel-studio" rel="noopener noreferrer">https://github.com/c0mbit/ruxel-studio</a> </li> </ul> <p>If you are building desktop apps with any of these frameworks, I would really appreciate any feedback on the generated code structure. Tell me what sucks, what's missing, or what you'd like to see next!</p> <p>Cheers,<br> Alex (c0mbit)</p> rust vscode opensource showdev