<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: aktky</title>
    <description>The latest articles on DEV Community by aktky (@aktky).</description>
    <link>https://dev.to/aktky</link>
    <image>
      <url>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%2F3160340%2Ffbb26c45-6f6f-4f1d-a210-5afded16cbaa.png</url>
      <title>DEV Community: aktky</title>
      <link>https://dev.to/aktky</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aktky"/>
    <language>en</language>
    <item>
      <title>Tired of GUI builders? I made a code-first alternative to Retool</title>
      <dc:creator>aktky</dc:creator>
      <pubDate>Wed, 14 May 2025 01:55:23 +0000</pubDate>
      <link>https://dev.to/aktky/tired-of-gui-builders-i-made-a-code-first-alternative-to-retool-2kgh</link>
      <guid>https://dev.to/aktky/tired-of-gui-builders-i-made-a-code-first-alternative-to-retool-2kgh</guid>
      <description>&lt;p&gt;Hey DEV community! 👋&lt;/p&gt;

&lt;p&gt;Have you ever found yourself spending hours dragging and dropping components in a GUI builder when all you wanted was to quickly create an admin panel? That was me, and I got tired of it. So I built something different.&lt;/p&gt;

&lt;h2&gt;
  
  
  The drag-and-drop frustration
&lt;/h2&gt;

&lt;p&gt;As a backend developer, I love working with databases, implementing business logic, and building APIs. But every time I needed to create an internal tool or admin panel, I'd struggle with GUI-based builders like Retool.&lt;/p&gt;

&lt;p&gt;Don't get me wrong - Retool is powerful. But I kept running into issues:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🤦‍♂️ Moving components in the GUI would mysteriously break connections&lt;/li&gt;
&lt;li&gt;😵 Reviewing changes in pull requests was nearly impossible&lt;/li&gt;
&lt;li&gt;🤔 Teaching new team members the proprietary UI was time-consuming&lt;/li&gt;
&lt;li&gt;🤖 AI coding assistants couldn't help with GUI-based configurations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Plus, there was always this disconnect between my backend code and the frontend. I'd write a function in Go or TypeScript, then manually wire it up to a UI component through a confusing interface.&lt;/p&gt;

&lt;p&gt;I just wanted to connect my backend functions directly to a UI!&lt;/p&gt;

&lt;h2&gt;
  
  
  The code-first dream
&lt;/h2&gt;

&lt;p&gt;What if we could do this instead:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;usersPage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ui&lt;/span&gt; &lt;span class="n"&gt;sourcetool&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;UIBuilder&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="kt"&gt;error&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c"&gt;// Simple UI definition in Go&lt;/span&gt;
    &lt;span class="n"&gt;ui&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Markdown&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"## Users"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c"&gt;// Input directly connected to your function&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;ui&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;TextInput&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Name"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;textinput&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;WithPlaceholder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"filter by name"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;

    &lt;span class="c"&gt;// Call your existing backend function&lt;/span&gt;
    &lt;span class="n"&gt;users&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;listUsers&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;!=&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c"&gt;// Display the results&lt;/span&gt;
    &lt;span class="n"&gt;ui&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Table&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;users&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it! No frontend code, no separate repository, no complex build setup. Just your backend code with some UI definitions.&lt;/p&gt;

&lt;p&gt;This is exactly what &lt;a href="https://github.com/trysourcetool/sourcetool" rel="noopener noreferrer"&gt;Sourcetool&lt;/a&gt; does.&lt;/p&gt;

&lt;h2&gt;
  
  
  How it actually works
&lt;/h2&gt;

&lt;p&gt;Sourcetool has a simple architecture with three main players:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Your backend server&lt;/strong&gt; (where your Go code runs)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A Sourcetool server&lt;/strong&gt; (handles auth and acts as a WebSocket bridge)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The user's browser&lt;/strong&gt; (where the UI renders)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;When a user interacts with the UI (clicks a button, types in a field), that event travels through WebSockets to your backend, where your code handles it. The UI then updates in real-time based on your response.&lt;/p&gt;

&lt;p&gt;It takes just a few lines to set up:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;st&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;sourcetool&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;New&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;sourcetool&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Config&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;APIKey&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;   &lt;span class="s"&gt;"YOUR_API_KEY"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;Endpoint&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="s"&gt;"wss://your-sourcetool-instance"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;

    &lt;span class="c"&gt;// Register your pages&lt;/span&gt;
    &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Page&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"/users"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"Users"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;usersPage&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Page&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"/products"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"Products"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;productsPage&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c"&gt;// Start the server&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Listen&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;!=&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;log&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Fatal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Perfect for the AI coding era
&lt;/h2&gt;

&lt;p&gt;With tools like GitHub Copilot, ChatGPT, and &lt;a href="https://cursor.sh/" rel="noopener noreferrer"&gt;Cursor&lt;/a&gt; changing how we write code, GUI builders feel increasingly outdated. &lt;/p&gt;

&lt;p&gt;I can ask an AI to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"Add a form with name and email fields that calls the createUser function"&lt;/li&gt;
&lt;li&gt;"Add validation to this form"&lt;/li&gt;
&lt;li&gt;"Create a new page for displaying analytics"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And since it's all just code, the AI can help directly - no screenshots or complex instructions needed!&lt;/p&gt;

&lt;h2&gt;
  
  
  The advantages over GUI builders
&lt;/h2&gt;

&lt;p&gt;Here's why a code-first approach works better for me:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Git-friendly&lt;/strong&gt; - Review PRs, track changes, and understand the history of your app&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Type-safe&lt;/strong&gt; - Catch errors at compile time, not when users are trying to use your app&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Familiar tools&lt;/strong&gt; - Use your existing IDE, linters, and code review workflows&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI-friendly&lt;/strong&gt; - Let AI assistants help you build and modify your tools&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No context switching&lt;/strong&gt; - Stay in your backend language rather than jumping between environments&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Current status
&lt;/h2&gt;

&lt;p&gt;Right now, Sourcetool supports Go with TypeScript and Python SDKs coming soon. It's entirely open-source under the Apache 2.0 license, so you can self-host and use it for free.&lt;/p&gt;

&lt;p&gt;Here's a quick example of creating a form:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;createUserPage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ui&lt;/span&gt; &lt;span class="n"&gt;sourcetool&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;UIBuilder&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="kt"&gt;error&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;formUI&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;submitted&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;ui&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Form&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Create"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;form&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;WithClearOnSubmit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;true&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;

    &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;formUI&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;TextInput&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Name"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;textinput&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;WithRequired&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;true&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
    &lt;span class="n"&gt;email&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;formUI&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;TextInput&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Email"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;textinput&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;WithRequired&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;true&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;

    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;submitted&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;_&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;createUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;email&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Join the community!
&lt;/h2&gt;

&lt;p&gt;I've open-sourced Sourcetool on &lt;a href="https://github.com/trysourcetool/sourcetool" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt; and would love your feedback. It's still early days, but if you share my frustrations with GUI builders, give it a try!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📚 &lt;a href="https://docs.trysourcetool.com" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;💬 &lt;a href="https://discord.com/invite/K76agfQQKP" rel="noopener noreferrer"&gt;Discord community&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;🤖 &lt;a href="https://github.com/trysourcetool/sourcetool/tree/main/mcp/docs-mcp-server" rel="noopener noreferrer"&gt;AI-friendly docs server&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you find this interesting, a GitHub star ⭐ would really help motivate further development! You can also reach out via &lt;a href="https://twitter.com/theaktky" rel="noopener noreferrer"&gt;Twitter/X DMs&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What do you think?
&lt;/h2&gt;

&lt;p&gt;I'd love to hear your thoughts! Do you prefer GUI builders or code-first approaches? Have you experienced similar frustrations? Let me know in the comments below!&lt;/p&gt;




&lt;p&gt;&lt;em&gt;P.S. If you're curious about how we built the backend-to-frontend bridge, check out &lt;a href="https://docs.trysourcetool.com/docs/getting-started/how-it-works" rel="noopener noreferrer"&gt;this deep dive into WebSocket architecture&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>go</category>
    </item>
  </channel>
</rss>
