Editor’s Notice: We’ve partnered with toddle.dev to convey you this text by Andreas, their co-founder. At Codrops, we’re at all times excited to focus on instruments that push the boundaries of net growth, and we consider toddle is a standout in bridging the hole between design and growth. Curious to attempt it? Use our hyperlink for a 10% low cost. Right here’s Andreas in his personal phrases.
Why use a textual content editor to construct visible net apps? That query has been looming in my head for the previous 5 years.
Earlier than I based toddle, I spent 20 years constructing net functions for something from small startups to massive enterprises. I noticed many new instruments and frameworks come and go throughout that point. The instruments we use immediately are a lot better than what was accessible within the early 2000s, however one factor stays unchanged: We nonetheless construct net functions by writing code right into a textual content editor.
Whereas I used to be coding net functions, my co-founder was working as a product designer. Whereas coding may not have modified a lot in 20 years, design instruments are a unique story. Instruments like Figma have enabled designers to construct highly effective design prototypes with out technical data, which was inconceivable once I began growing years in the past.
All through our careers, we now have spent numerous hours handing work backwards and forwards from designer to developer. This made us surprise: What if we might remove design handoffs?
Figma is a good design instrument, however what in the event you might construct the UI proper there as a substitute of simply making a design to be handed off to a developer? What in the event you might construct functions utilizing the identical instruments you employ to make designs in Figma?
That’s toddle.dev, a visible interface the place you may construct feature-rich net functions. It’s designed to convey large-scale dev groups collectively in the identical growth surroundings, eradicating duplicate work. The visible interface makes it a lot quicker to arrange the usual boilerplate work that comes with net functions, comparable to establishing API calls and constructing out UI parts.
Toddle’s visible framework is a brand new tackle fashionable net growth. It’s constructed across the newest growth advances prior to now 10+ years. It brings it entrance and heart in a visible growth surroundings accessible to builders and designers.
Isn’t this simply no-code?
A visible editor is nothing new. One of many first reported circumstances was GRAIL from the Nineteen Sixties, when you may draw to create a program.
Since then, we’ve seen instruments like Dreamweaver, Flash, and Bubble attempt to transfer builders to a visible editor. Nevertheless, the consensus continues to be {that a} textual content editor is the superior instrument to construct visible net apps. It’s odd as a result of the visible editor has taken different industries by storm; we construct AAA video games in editors just like the Unreal engine and Unity.
Though most web sites are inbuilt WordPress and Webflow, net builders nonetheless want to recreate Figma information in a textual content editor.
The primary causes?
- Flexibility
- Collaboration
- Sharing
Builders thrive on flexibility. They like instruments that permit them construct with out limits, so their instrument of selection for net growth is commonly a easy textual content editor. It doesn’t come loaded with options, however it affords full artistic freedom and connects seamlessly with instruments that assist convey concepts to life. Toddle is a low-level abstraction programming language designed to make sure most flexibility. It’s designed across the well-established and ever-evolving net platform and is designed to develop with it.
Collaboration is the cornerstone of efficient groups. With out it, progress slows—an issue Linus Torvalds solved when he created Git. Toddle has a sturdy version-control system to make sure massive groups can work in parallel and ship at most velocity. Whereas visible instruments can speed up workflows, the adage nonetheless holds: “The very best line of code is the one you don’t have to jot down.” Writing code for visible interfaces takes time, however entry to prebuilt modules from different builders eliminates redundant effort and hurries up growth. Toddle’s bundle system lets you profit from the group.
What does toddle seem like?
Right here’s a video the place you may see me construct a button part in toddle to grasp higher what to anticipate.
Constructed for the net by builders of the net
There are distinct particulars between builders and designers, and we would have liked to construct a system that works for each. Builders see modules. Designers see a canvas. Visible builders see each. A fantastic growth instrument empowers customers to design, construct, and customise with out compromise. Default parts are useful, however they shouldn’t field you in. You want the flexibleness to create your requirements, types, and components.
None of this could come at the price of efficiency. Toddle is performant by default—rendering as rapidly, if not quicker, than hand-written customized code.
The true problem was by no means the visible method—it was the instruments. They merely weren’t adequate. A contemporary visible framework should carry out flawlessly, provide limitless artistic potential, scale back time to market, and allow seamless collaboration throughout multi-tenant groups.
Toddle unlocks a brand new method of working. It brings designers and builders collectively in a shared surroundings the place creativity flows, collaboration thrives, and the instruments you like are at all times at your fingertips.It’s a unique approach to develop for the net, and we are attempting to convey the enjoyable again into net growth. We not too long ago concluded the Unhealthy UI World Cup, the place builders and designers might construct dangerous UIs that may disgrace even essentially the most aggressive on-line journey company.
A instrument for professionals
You possibly can construct something in toddle, so this instrument takes a minute to study. In case you’d prefer to see if toddle is for you, I like to recommend beginning with the course First week in toddle; this tutorial is a wonderful introduction to toddle and its core ideas.
If you wish to discover this additional, I like to recommend a tutorial by our product designer, Miguel. Miguel builds a neat MacOS dock animation. It nonetheless blows my thoughts once I see how a product designer can unleash themselves in toddle.
Prebuilt templates and UI kits are additionally accessible. One among my favorites is this free eCommerce template with a backend that creates a fully-fledged e-commerce retailer. It’s virtually as straightforward as Shopify however with rather more customization. We’re frequently making extra templates accessible to the group, and all it’s a must to do to entry them is join toddle and begin a venture.
I’m fairly excited to listen to your ideas, and when you have any suggestions or questions, please be happy to achieve out to me on Bluesky or X.
