Harrison 
Editor’s note: We’ve partnered with toddle.dev to bring you this article by its co-founder, Andreas. At Codrops, we’re always excited to introduce tools that push the boundaries of web development, and we believe that toddle excels in bridging the gap between design and development. Want to try it? Use our link for 10% discount. Below are Andreas’ own words.
Why use a text editor to build visual web apps? That question has been on my mind for the past five years.
Before founding toddle, I spent 20 years building web applications for everything from small startups to large enterprises. In that time, we’ve seen many new tools and frameworks come and go. The tools we have today are much better than what was available in the early 2000s, but one thing remains the same. You’re still writing code in a text editor to build web applications.
While I was coding web applications, my co-founder was working as a product designer. Coding may not have changed much in 20 years, but design tools are a different story. Tools like Figma allow designers to create powerful design prototypes without any technical knowledge, something that wasn’t possible when I started developing years ago.
Throughout our careers, we’ve spent countless hours bouncing back and forth from designer to developer. This got us thinking, “What if we could eliminate design handoffs?”
Figma is a great design tool, but what if instead of just creating designs to hand over to developers, you could build UIs on the fly? Using the same tools you use to create designs in Figma. What if you could build applications?
That’s toddle.dev, a visual interface that lets you build feature-rich web applications. It is designed to bring large development teams together in the same development environment and eliminate duplication of effort. The visual interface greatly speeds up the setup of standard routine tasks that come with web applications, such as configuring API calls and building UI components.
Toddle’s visual framework is a new way of looking at modern web development. Built on the latest development advances over the past decade. This puts it at the center of a visual development environment that is accessible to developers and designers.
Isn’t this just no-code?
Visual editors are nothing new. One of the first reported cases was GRAIL in the 1960s, when you could draw pictures and create programs.
Since then, we’ve seen tools like Dreamweaver, Flash, and Bubble try to move developers toward visual editors. However, the consensus remains that text editors are great tools for building visual web apps. This is strange since visual editors are dominating other industries. Build AAA games with editors like Unreal Engine and Unity.
Although most websites are built with WordPress and Webflow, web developers still prefer to recreate Figma files in a text editor.
What is the main reason?
- flexibility
- collaboration
- share
developers value flexibility. They prefer tools that allow them to build without limits, so the tool of choice for web development is often a simple text editor. Although it’s not feature-packed, it gives you complete creative freedom and seamlessly connects with tools that help bring your ideas to life. Toddle is a low-level abstraction programming language designed to ensure maximum flexibility. It is designed around the established and evolving web platform, and is designed to grow with the web platform.
Collaboration is the foundation of effective teams. Without this, progress will be slow. Linus Torvalds solved this problem when he created Git. Toddle has a robust version control system that allows large teams to work in parallel and ship at maximum speed. While visual tools can speed up your workflow, the following adage still applies: “The best line of code is You don’t have to write it. ” Writing code for visual interfaces takes time, but having access to pre-built modules by other developers saves you redundant work and speeds development. Toddle’s packaging system allows you to benefit from the community.
What does Todol look like?
Here’s a video where you can watch us waddle through building a button component to get a better idea of what to expect.
Built for the web by web builders
There were clear details between developers and designers, and we needed to build a system that worked for both. developers will see the module. The designer looks at the canvas. Visual developers see both. Superior development tools allow users to design, build, and customize without compromise. Default components are useful, but they shouldn’t be constrained. Creating standards, styles, and elements requires flexibility.
None of these should come at the expense of performance. Toddle is performant by default and renders just as fast, if not faster, than hand-written custom code.
The real challenge was not the visual approach, but the tools. They simply weren’t good enough. A modern visual framework should work flawlessly, offer endless creative possibilities, accelerate time to market, and enable seamless collaboration across multi-tenant teams.
Todol unlocks new ways of working. It brings designers and developers together in a shared environment where creativity flows, collaboration thrives, and your favorite tools are always at your fingertips. This is a different way of developing for the web, and we’re trying to bring the fun back to web development. . We recently concluded the Bad UI World Cup, where developers and designers can build bad UI that would put even the most aggressive online travel agency to shame.
Tools for professionals
It takes about a minute to learn this tool, as even toddlers can build anything. If you want to find out if toddler walking is for you, we recommend starting with our ‘Toddler’s First Week’ course. This tutorial is a great introduction to toddle and its core concepts.
If you want to learn more about this, we recommend this tutorial by product designer Miguel. Miguel creates neat MacOS dock animations. It still amazes me to see product designers waddling around and letting themselves go.
Pre-built templates and UI kits are also available. One of my favorites is this free e-commerce template with a backend to create a full-fledged e-commerce store. It’s almost as easy as Shopify, but with more customization. We regularly make templates available to our community. To access them, just sign up for toddle and start your project.
I’m really looking forward to hearing your opinions. If you have any feedback or questions, please feel free to contact Bluesky or X.
