HTML to Webflow

Line wrapping

How it works

This tool converts standard HTML, CSS, and JavaScript into Webflow elements. Paste in your code, click convert, and the Webflow elements will be added to your clipboard.

Merge Embeds Native Images Native Forms Native Navbar

Class name patterns

Combo classes pattern Utility classes pattern

Special attributes

Instructions to this converter, not markup — each one is stripped from the pasted element.

data-wf-displayName="Hero" Names the element in Webflow’s Navigator.

data-wf-slot Makes the element a component Slot. It must be empty and not a void tag, otherwise it converts normally.

data-wf-submitLoadingText="Sending…" Text a submit button shows while sending. Needs Native Forms.

data-wf-navbar="wrapper" Names a part of a native Navbar: wrapper, menu and button make one; brand and link opt a link into Webflow’s own class and default styling. Needs Native Navbar.

data-wf-xattr="width height loading" Publishes the named attributes as custom attributes instead of native ones. For a Native Image’s width/height/loading, so they stay verbatim rather than owned by the Image panel.