Toolset

A new way to develop for the web

September 19, 2024 11:10 AM
Power Talk
🇬🇧 English
Wisła

About

Text has been the dominant way to develop visual web apps, even though other areas like web design has moved to a visual format. Join Andreas as he explores what software development could look like in a visual environment and how we every team member can contribute to the code base. Imagine a scenario where an engineer doesn't have to recreate a Figma mockup from scratch and a designer who doesn't have to file a Jira ticket to adjust the border radius of a button. Tune into Andreas talk and see what the next generation development platform look like.

Watch the full talk

Watch this WaysConf session, then continue with related talks or explore the current programme.

From the recording

Talk in brief

In his WaysConf 2024 talk, Andreas Møller presents Toddle, a visual web development platform designed specifically for professional software engineering teams. Traditional product workflows require designing UIs in tools like Figma before translating those visual mockups line-by-line into code text editors, creating duplicated effort and unnecessary ticketing overhead. Toddle solves this by enabling designers, developers, and marketers to build interactive web applications directly on a visual canvas while maintaining the flexibility, performance, and version control expected from modern web frameworks like React. During a live demo, Møller constructs a dynamic application consuming an external API, showcasing formulas for live data binding and event workflows for user interactions. He also demonstrates complex real-world applications created on the platform, including a custom drum machine, an e-commerce platform, and Toddle's own web editor. Toddle handles front-end UI construction while decoupling from back-end logic, enabling cross-functional teams to collaborate seamlessly and deliver applications faster.

Key takeaways

  1. 01

    Redefining Team Contributions

    Rather than forcing designers to produce static mockups that developers rebuild line-by-line in code, visual web development enables designers to construct production UIs and visual behaviors directly. This eliminates duplicated effort and avoids cumbersome ticketing workflows for minor UI or copy updates.

    Watch from 2:02
  2. 02

    Key Pillars for Professional Visual Tools

    Visual development platforms must offer complete framework flexibility, Git-like version control, and native performance to replace traditional text code in professional teams. Without these capabilities, scaling products inevitably hit feature ceilings that trigger costly complete rewrites.

    Watch from 5:17
  3. 03

    Live Data Binding and Action Workflows

    Toddle pairs HTML-compatible DOM elements with dynamic formulas to bind UI components directly to live API endpoints. Button clicks trigger visual workflow actions that handle asynchronous data fetching and state updates inside the active editing canvas.

    Watch from 8:28
  4. 04

    Dogfooding for Product Validation

    Developing complex tools like the Toddle web editor within Toddle demonstrates that visual environments can support production-grade SaaS applications. An eight-person team uses the visual environment daily to maintain and expand their own platform.

    Watch from 18:06
  5. 05

    Front-End Decoupling and API Integration

    Toddle focuses specifically on client-side front-end development, delegating database management and server-side processing to external APIs. This separation allows backend engineers to maintain core business logic while front-end builders assemble interactive web interfaces.

    Watch from 22:25
Read edited transcript highlights

These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.

Ending the Duplicate Work Cycle

Modern software teams routinely build user interfaces twice: first in design tools like Figma to define visual details and interactions, and then again line-by-line in code editors. This workflow forces software engineers to translate static assets while creating ticket overhead for trivial changes like copy edits. Visual web development redefines team roles by empowering designers to construct production UI elements and behavior directly. Engineers can focus on complex back-end logic while allowing marketers and designers to push front-end updates independently.

Watch from 1:14

Beyond Generic No-Code Tools

Traditional no-code tools were built for non-technical users to build simple sites quickly, but they lack the scalability, performance, and architectural flexibility required by professional product teams. Visual programming concepts date back to systems like GRAIL in 1964, yet early iterations failed to gain mainstream adoption in enterprise software. Instead of targeting beginners with restrictive abstractions, Toddle starts from the needs of professional SaaS teams, providing visual workflows without sacrificing the power of underlying web standards.

Watch from 2:50

Essential Pillars for Developer Adoption

Replacing text-based code requires meeting three non-negotiable principles: flexibility, collaboration, and speed. A visual editor must match the capabilities of modern front-end frameworks like React so teams never hit feature walls or require full code rewrites. Second, it must incorporate robust version control mechanics akin to Git so multiple developers can collaborate simultaneously on the same codebase. Finally, runtime performance must equal or exceed traditional code, ensuring that applications remain responsive as they scale in usage.

Watch from 5:17

Building Dynamic Logic with Live Data

Toddle structures web applications on standard HTML elements while allowing developers to bind visual properties directly to live API data. By employing visual formulas instead of hardcoded values, elements automatically update on the canvas as data changes. Event workflows allow developers to attach interactive behaviors, such as calling external APIs on button clicks to refetch dynamic content. Working directly with live data on the canvas eliminates static UI mockups and gives instant visual feedback during application assembly.

Watch from 8:28

Proving Platform Capability Through Dogfooding

To prove that visual programming can support enterprise-grade software, Toddle's entire web editor is built inside Toddle itself. An eight-person engineering and design team uses the platform daily to construct complex formula editors, style panels, and internal AI tools. Operating as primary users of their own creation ensures the platform can handle complex state management and scalable architectures while enabling designers and engineers to build features together without traditional handover delays.

Watch from 18:06
Explore WaysConf 2026