Converter

Docs

How converter works

The converter rebuilds your code as native Webflow elements wherever it can, and falls back to embedded custom code where it can't.

Wherever possible, your code is recreated as native Webflow elements — layout, content, styling, and the CSS states Webflow itself supports (hover, focus, active, transitions, keyframe animations) all come across as editable elements and Style panel properties. Features that don't have a native Webflow equivalent are preserved as custom code instead, so nothing gets silently dropped — the goal is to keep as much of your page editable as possible while making sure advanced functionality still works after publishing.

Custom code

Some browser features simply can't be represented as native Webflow elements — libraries like GSAP and ScrollTrigger, scroll-based interactions, click handlers, Intersection Observers, and unsupported CSS selectors or pseudo-elements all fall into this bucket. Rather than dropping them, the converter inserts them as Embed elements within the converted page. Embedded code keeps working on Preview and on your published site, but — unlike native elements — it isn't editable inside Designer. If you'd rather manage it centrally, you can move the generated code into your project's Page Settings or Site Settings and remove the Embed element afterward.

Designer view vs. the published site

A converted page can look different inside Designer than it does once published, and that's expected — Designer doesn't execute JavaScript inside Embed elements, so a page that relies on JavaScript for animation or reveal effects shows its static layout while you're editing. To see the real result, turn on Render custom code in Preview, or publish to your .webflow.io staging domain — either way, the embedded scripts run normally and the page behaves as intended.

CSS vs. JavaScript animation

CSS animations and transitions convert into native Webflow styles, stay editable through the Style panel, and render correctly inside Designer. Animations driven by GSAP, ScrollTrigger, or custom JavaScript are preserved as custom code instead — they run correctly once previewed or published, but they aren't editable through Webflow's Interactions panel and won't animate while you're editing. Both approaches are fully supported during conversion; which one to use just depends on what your project needs.

CMS Collections

CMS Collection Lists aren't converted directly into native Webflow Collection List elements. Instead, the converter detects CMS-style layouts and recreates them as Div blocks that follow the same wrapper and item structure a real Collection List would use — which keeps the layout intact and makes it straightforward to reconnect the section to your CMS after pasting.

To reconnect it: add a Collection List from the Add panel, replace the generated wrapper with the Collection List structure, move the converted elements into the Collection Item, and connect them to your CMS fields. If you've used Relume components before, this will feel familiar — the generated structure is a placeholder you swap for a native Collection List while keeping the original design.