The internet is vast, and there are tools for every purpose. If you want to build a form, there’s Typeform and a hundred variants. That's true for most tools
Vakis Rigas
June 2, 2024
You have Webflow, Framer, and more than 100 other platforms, each with unique features and design capabilities that can make your brand stand out. In this sea of options, toddle and Webflow stands tall, offering unique features that can revolutionize your web development process.
The most crucial thing in your tech stack is interoperability. Do your tools connect? When they do, you unlock automation, which enhances your productivity and saves you the time to refactor your code or manually copy-paste from one platform to another.
Imagine the freedom and flexibility of continuing with your codebase and adding to it from other tools.
With web component export, you can export code generated by toddle and add it to your existing codebase. You can, for example, build a terrific drum machine like the T-beat and embed it into your code as a web component.
Many of our best customers do just that. They build their marketing website in Webflow and suddenly find themselves limited. That was the case with Even founders who needed to add a database to their Webflow site. They had an Airtable with over 3,000 records that they needed to load as fast as their Webflow site. Rather than building their site from scratch, they built the database in toddle, exported it as a web component, and embedded it natively on their Webflow site. The team did not need to consider another tool for a small task. They used what they had with a little toddle magic, and now they have a smooth experience that users love.
Can’t I do this with an iframe?
Iframes were created to show a web page on another web page. They work well for that purpose, but not so much if you must show a single component. So technically, yes, you can do it, but it requires more work, runs slower, and has many unnecessary drawbacks.
It’s slow. You must load an additional page from scratch rather than just a component.
It has no context. Iframes don’t know their contents. They need styling to avoid scrollbars.
It doesn’t play well with other components. It’s not meant to interact with other elements.
Here’s Jacob, who explains the differences between iframes and web components.
A web component is much more flexible. You can style it as you like, update CSS variables, and add attributes that allow you to alter the contents of your web components from the code base you have exported it to.
The most potent feature of web components, something that’s nearly impossible to do with iframes, is the ability to add slots. A slot is a component that contains another component that you can update. It essentially enables you to add a web component inside of another web component.
You can add events to web components and trigger specific actions from the site where the component is embedded.
In other words, web components are a much more flexible tool that renders natively in your codebase.
The best way to describe the benefits is to see them side by side.
On the left, you have a web component with a backdrop covering the whole site; on the right, you have an iframe covering only the embedded iframe.
The iframe.
An iframe will typically only cover the embedded frame. There are many ways to work around this, but it's extra work and less performant.
The web component.
With a web component, you have more flexibility. It renders natively as part of your site, and you can add elements outside the embedded frame that allow you to trigger events inside it.
Try Even Founders' database here to get a good sense of the power of embedded web components and how fast they render once embedded. (Note! The backend is Airtable, which isn't designed as a backend. It can still get faster.)
Web components are a great way to test out new frameworks and programming languages. You can build a single component to embed in your codebase without committing to a complete rebuild. This will allow you to test the performance and capabilities in a confined environment.
