Getting Started

HTMLtoWF is a Webflow Designer Extension that converts pasted markup into native Webflow elements. You can work with HTML and CSS directly, compile Tailwind (licensed), and import remote images into Assets (licensed).

Install HTMLtoWF in Webflow

Step 1: Open Apps in Webflow Designer

In the Webflow Designer, open the Apps panel from the left sidebar.

Step 2: Search for HTMLtoWF

Find HTMLtoWF in the app marketplace and click Install.

Step 3: Open the app from your project

After installation, launch HTMLtoWF from the Apps panel inside the same project.

Authenticate on new sites

If the app detects a new or unregistered site, it shows an authentication screen and asks for permission.

1. Click Authenticate.
2. Approve access in Webflow.
3. Return to the Designer and reopen the app.

First conversion workflow

1. Select a container element on the canvas (for example, a Div Block).
2. Open the Converter tab.
3. Paste your HTML in the HTML editor.
4. Optionally add CSS in the CSS tab or provide a stylesheet URL.
5. Click Convert & Insert.

HTMLtoWF inserts native Webflow elements into the selected container and shows a result summary for inserted elements and styles.

Tabs overview

• Converter: HTML and CSS conversion flow
• Tailwind: Tailwind HTML conversion (licensed)
• Images: import image URLs into Webflow Assets (licensed)
• License: activate or deactivate your key
• Settings: SVG processing options (licensed)
• Help: quick start tips and tutorials
• Feedback: share product feedback