HTML to Webflow and Figma to Webflow Conversion tool

{"blocks":{"droip-s-673ed4ec721af":{"visibility":true,"collapse":false,"name":"collection","title":"navbar_collection","properties":{"tag":"div","dynamicContent":{"type":"post","collectionType":"menus","items":3,"current_page":1,"pagination":true,"filters":[],"sorting":[],"menu":"30"}},"styleIds":["dpo4tdal","dp0ahu3l","dp0877bg","dptxaeav"],"className":"","source":"droip","children":["droip-s-673ed4ec721b0"],"id":"droip-s-673ed4ec721af","parentId":"droip-s-673ed4ec721aa","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"droip-s-673ed4ec721b0":{"visibility":true,"collapse":false,"name":"menus","title":"navbar_menus","properties":{"tag":"div"},"styleIds":["dpzkat7o","dp5f8sfk","dpqu1uhs"],"className":"","source":"droip","children":["droip-s-673ed4ec721b1"],"id":"droip-s-673ed4ec721b0","parentId":"droip-s-673ed4ec721af","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"droip-s-673ed4ec721b1":{"styleIds":[],"visibility":true,"collapse":false,"name":"menu-item","title":"Menu Item","properties":{"tag":"div","componentType":"menus"},"className":"","source":"droip","children":["droip-s-673ed4ec721b2"],"id":"droip-s-673ed4ec721b1","parentId":"droip-s-673ed4ec721b0","template_mounted":true},"droip-s-673ed4ec721b2":{"styleIds":["dpu9v8z0"],"visibility":true,"collapse":false,"name":"link-block","title":"navbar_menu-link","properties":{"tag":"a","type":"href","attributes":{"href":"","target":""},"dynamicContent":{"type":"menu","value":"url"},"componentType":"menus"},"className":"","source":"droip","children":["droip-s-673ed4ec721b3"],"id":"droip-s-673ed4ec721b2","parentId":"droip-s-673ed4ec721b1","template_mounted":true},"droip-s-673ed4ec721b3":{"styleIds":["dps9e11i"],"visibility":true,"collapse":false,"name":"paragraph","title":"navbar_menu-text","properties":{"contents":["Menu"],"tag":"p","dynamicContent":{"type":"menu","value":"title"},"componentType":"menus"},"className":"","source":"droip","id":"droip-s-673ed4ec721b3","parentId":"droip-s-673ed4ec721b2"}},"styles":{"dpo4tdal":{"id":"dpo4tdal","type":"class","isDefault":false,"name":"droip collection","variant":{"md":""},"isSymbolStyle":true},"dp0ahu3l":{"id":"dp0ahu3l","type":"class","name":"navbar_collection 1","isDefault":false,"variant":{"tablet":""},"isGlobal":true,"isSymbolStyle":true},"dp0877bg":{"id":"dp0877bg","type":"class","name":["droip collection","navbar_collection 1"],"isDefault":false,"variant":{"tablet":"position:absolute;left:0%;right:auto;bottom:auto;top:100px;z-index:2;background-color:rgba(28, 28, 28, 1);width:100%;padding-left:20px;padding-right:20px;padding-bottom:20px;padding-top:20px;"},"isGlobal":true,"isComboClass":true,"isSymbolStyle":true},"dptxaeav":{"id":"dptxaeav","type":"class","name":["droip collection","navbar_collection 1","is hide"],"isDefault":false,"variant":{"tablet":"display:none;padding-top:24px;padding-bottom:24px;padding-left:24px;padding-right:24px;","md":"padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;"},"isGlobal":true,"isComboClass":true,"isSymbolStyle":true},"dpzkat7o":{"id":"dpzkat7o","isDefault":false,"type":"class","name":"droip menus","variant":{"md":"display:flex;column-gap:20px;row-gap:20px;flex-wrap:wrap"},"isSymbolStyle":true},"dp5f8sfk":{"id":"dp5f8sfk","type":"class","name":"navbar_menus 1","isDefault":false,"variant":{"tablet":""},"isGlobal":true,"isSymbolStyle":true},"dpqu1uhs":{"id":"dpqu1uhs","type":"class","name":["droip menus","navbar_menus 1"],"isDefault":false,"variant":{"tablet":"display:flex;flex-direction:column;padding-left:0px;padding-right:24px;width:100%;"},"isGlobal":true,"isComboClass":true,"isSymbolStyle":true},"dpu9v8z0":{"id":"dpu9v8z0","type":"class","name":"navbar_menu link","isDefault":false,"variant":{"md":"color:rgba(255, 255, 255, 1);fill:rgba(255, 255, 255, 1);font-weight:600;transition-property:all;transition-duration:300ms;transition-delay:0ms;transition-timing-function:linear;","md_hover":"color:rgba(242, 255, 56, 1.00);fill:rgba(242, 255, 56, 1.00);"},"isGlobal":true,"isSymbolStyle":true,"psuedoClassArr":[],"classState":""},"dps9e11i":{"id":"dps9e11i","type":"class","name":"navbar_menu text","isDefault":false,"variant":{"md":"margin-bottom:0px;"},"isGlobal":true,"isSymbolStyle":true}}}

App

Components (Beta)

Pricing

Tutorials

Chrome Extension

My account

Login to access the app

Tablet

For 768px

Mobile Landscape

For 480px

Mobile Portrait

For 375px

How to convert any website or HTML to Webflow with htflow app

Simplify your workflow with HTFlow's HTML to Webflow converter. In a few clicks, inline HTML and CSS code becomes a Webflow-compatible design.

Step 01

Extract html css code from any website with 'HTFLOW inline HTML CSS extractor' chrome extension:

Easily extract HTML and CSS directly from any website with the 'HTFLOW Inline HTML CSS Extractor' Chrome extension. This tool allows you to choose specific DOM elements and effortlessly pull the underlying code, perfect for developers and designers alike.

Scroll through your webpage to ensure it is fully loaded.
Right-click on the webpage and select the 'Inspect' option from the context menu.
Select the desired DOM element from the Elements tab, then click on the htflow tab in the developer panel.
Click on the 'Start Conversion' button, followed by the 'Extract HTML' button to begin the extraction process.

htflow-code-extraction-1_1-2

htflow-inline-html-css-extractor-2_1-2

htflow inline html css extractor

Pro Tips:

Instead of extracting the whole webpage at once, export it piece by piece. Also, skip the navbar to keep things simple.

Step 02

Convert to webflow with HTFlow

Transition your extracted code seamlessly into Webflow with the 'Code to Webflow' feature of the 'HTFLOW Inline HTML CSS Extractor'.

Now, navigate to the 'Code to Webflow' menu.
Click on the 'Beautify HTML' button to refine your extracted code, making it clean and elegant.
To convert it for Webflow, simply click the 'Convert to Webflow' button.

htflow-inline-html-css-extractor-3_1-2

Step 03

Import or paste into Webflow

After conversion, paste the code directly into your Webflow project using (command + v for mac and control + v for windows) it into your Webflow design canvas. It's that simple!

htflow-inline-html-css-extractor-4_1-2