Skip to content
wpgraft
SquarespaceSquarespaceAny published Squarespace site
WebflowWebflowClipboard paste straight onto the Designer canvas

How to move a page from Squarespace to Webflow

Move a page from Squarespace to Webflow as real, editable Webflow elements, not a screenshot. What comes across, and what does not.

wpgraft reads the page as your browser rendered it, every element and the computed styles on each one, at every breakpoint you ask for, and rebuilds it as Webflow’s own native elements with the styles in Webflow’s own fields. It needs no access to your Squarespace account, no export file and no API key. If Chrome can draw the page, wpgraft can copy it.

Squarespace does not let you take your design out, and that is not an oversight. A hosted platform’s layout is its own format and stays that way. So this is not an export. You open the published page, point at the part you want, and it is rebuilt in Webflow from what was on screen. Your Squarespace site keeps running the whole time, which means you can move one section at a time and switch over when the new one is genuinely better.

Before you start

What to have ready

  • 01A Webflow site you can open in the Designer.
  • 02No WordPress plugin. Webflow is the one destination that does not use one.
Phase 1 · Set up
  1. 01

    Install the wpgraft extension in Chrome

    wpgraft is a Chrome extension. Get it from wpgraft.com/releases. Install it, click the icon, sign in: the free tier needs an account but is never billed. On your very first copy it asks you to confirm you have the right to reuse what you are copying, once, and does not ask again.

    Get the Chrome extensionwpgraft.com/releases → Get the Extension
  2. 02

    No plugin: Webflow needs nothing installed

    Webflow is the one destination with no WordPress in the story. There is nothing to install on the Webflow side; the extension talks to the Designer directly.

Phase 2 · Copy, in Squarespace
  1. 03

    Open the Squarespace page you want

    Your live domain or the *.squarespace.com address, logged out if you can, because the editor adds chrome that is not part of the design.

    Open the published site
  2. 04

    Choose Webflow in the extension

    Click the wpgraft icon on the source tab and pick your destination under Copy into. There is one Webflow entry, labelled Webflow. Switch Also copy tablet & phone on unless you only want the desktop layout: it is off until you turn it on, and it captures three viewports instead of one, so the copy arrives responsive.

  3. 05

    Point at what you want and copy it

    Select element starts a picker: hover to highlight, press ↑ to widen the selection to the parent and ↓ to narrow it again, click to confirm, Esc to cancel. Whole page takes the entire document in one pass and is a Pro capture. wpgraft scrolls the page for you first so lazy images and scroll-triggered effects have fired, then waits for the fonts and images to finish before it reads anything.

    click copies · ↑ widen · ↓ narrow · Esc cancels
Phase 3 · Insert, in Webflow
  1. 06

    Open your project in the Webflow Designer

    Either Designer address works: webflow.com/design/<site> or a *.design.webflow.com URL. There is nothing to install in the Designer and no panel inside it: for Webflow the extension’s own popup is the insert surface, because Webflow is a cloud app with no plugin to load.

    Open the project in the Webflow Designer
  2. 07

    Add it in Webflow, then paste onto the canvas

    Click the wpgraft icon: the queued copy has an Add in Webflow button, which puts it on your clipboard in Webflow’s own format. Then click where you want it in the Webflow canvas, because the paste lands relative to the selected element, and press ⌘V (Ctrl+V on Windows). Webflow accepts only a genuine keystroke, so this last inch is yours. It rebuilds the copy as native elements with real style classes, exactly as it does when you copy between two Webflow projects.

    Add in Webflow → click the canvas → ⌘V / Ctrl+V
  3. 08

    Add the fonts, then publish

    Webflow’s clipboard cannot carry font files. It will say so if the copy used one it does not have. Add those families under Site settings → Fonts. Webflow autosaves as you work, so the only thing left is Publish.

Phase 4 · Edit
  1. 09

    Edit it like you built it

    This is where the product earns its keep. Click anything in the copy and Webflow’s own panel opens with real values in it. There is no wrapper you may not touch, no “generated, do not edit” block and no code view. Change the heading, swap the image, drag the padding.

The result

What lands in Webflow

Native Designer elements

Real elements in the Navigator with real style classes, not an embed, not a code block.

Styles on the Style panel

Every property is applied to the element’s real Webflow style, and the ones a designer actually reaches for have a control: 96 CSS properties land on a dedicated Style-panel control and 8 more on Webflow’s native Custom properties row. The long tail, vendor-prefixed and exotic properties, is applied and rendered without a dedicated control of its own. Nothing is dropped and nothing is frozen into an embed.

After the insert: Webflow autosaves as you work. Publish when you want it live.

The source side

Copying out of Squarespace

Your live domain or the *.squarespace.com address, logged out if you can, because the editor adds chrome that is not part of the design.

  • Squarespace’s Fluid Engine lays sections out on a CSS grid with explicit row and column tracks. Grid tracks are captured as tracks, so a Fluid Engine section arrives as a real grid in the destination rather than as a pile of guesses.
  • Squarespace images are loaded through its own loader and swapped in after the page renders. The auto-scroll and image-settle passes are there for this; a slow connection needs a moment more.
  • Squarespace section padding is often set by the section’s own controls rather than by CSS you can see in the theme. It arrives as computed padding, which is what you want.
  • Commerce, forms and member areas are Squarespace applications. The design copies; the function does not.
Honest limits

What does not carry over

A guide that only lists what works will waste your afternoon. These are the things that surprise people, set out before you start rather than discovered afterwards.

  • What is on screen is what is copied. A closed accordion is copied closed; an inactive tab is copied inactive; a carousel is copied on whichever slide was showing. Put the page into the state you want before you pick.
  • Behaviour does not travel; appearance does. A slider arrives as its markup and its styling, not as a working slider; a form arrives as a form that has had its submit target deliberately removed, so your copy can never post to Squarespace’s endpoint. Wire interactive things up with Webflow’s own tools.
  • Anything driven by a query arrives as a design. A post grid copies as the posts that were on the page at that moment, not as a loop that keeps querying.
  • Raw HTML in a copy needs the unfiltered_html capability, which normally means an administrator. Without it, the parts of the copy that would output markup verbatim are removed before the insert, or, where WordPress sanitizes them on save instead, left to it, and the panel tells you how many. Everything else in the copy still lands. Insert as an administrator if you want all of it.
  • Links that pointed at code are disabled. A javascript: link in the source page is neutralised on the way in, for every account including an administrator’s, and you are told how many. It is the one thing wpgraft will not carry across for you.
  • Only the page in the tab is copied; never what is inside a frame. An <iframe> is kept as the embed it is: a YouTube or Vimeo frame becomes a video element, a Google Maps frame becomes a map. wpgraft does not descend into it, same origin or not, which is also why a builder’s own editor canvas and an AI chat’s artifact preview have to be opened on their own URL before you can copy them.
  • Fonts cannot travel through the clipboard. Webflow itself says so on paste. The copy carries the right font-family names, but you have to add those fonts to your Webflow site under Site settings → Fonts, or the text falls back.
  • Images stay as their original URLs. They render immediately, but they are not in your Webflow Assets, so if the source site takes them down, your copy breaks. Re-upload anything you intend to keep.
  • The paste is a real keystroke that you press. Webflow accepts only a genuine ⌘V; a paste event a script dispatches is ignored. So the extension can put the copy on your clipboard, and the last inch is yours.
  • Click the canvas where you want it before you paste. Webflow pastes relative to the selected element, so with nothing selected the keystroke has no target.
Questions

Squarespace to Webflow: FAQ

Do I need the wpgraft WordPress plugin for Webflow?

No, and there is nothing to install in the Designer either. The plugin is the WordPress half of wpgraft and Webflow is not WordPress; for Webflow the extension popup hands the copy to the Designer through the clipboard.

Why does Webflow say it dropped some custom fonts?

Because the clipboard format cannot carry font files. That message is Webflow’s own, and it appears when you paste between two Webflow projects too. Add the same fonts under Site settings → Fonts and the text picks them up.

Does moving from Squarespace to Webflow change anything on the Squarespace side?

No. Nothing is exported, moved or deleted. wpgraft reads the rendered Squarespace page the same way any browser does and writes a new copy into Webflow. Your Squarespace site keeps running exactly as it did, which is what lets you rebuild one section at a time and switch over when you are ready.

Will the Webflow copy still need Squarespace installed?

No. What lands in Webflow is Webflow’s own elements with the styles in Webflow’s own fields. There is no shortcode, no embed, no wrapper block and no stylesheet borrowed from Squarespace. The copy is fully yours and stands on its own.

Is the result editable, or is it a locked block?

Editable. Click anything in it and Webflow’s own settings panel opens with real values in it. That is the whole product, and it is measured on every release: an inserted copy has to be selectable through Webflow’s own API and the editor has to reopen cleanly on the saved page, or the build does not ship.

Does it copy the mobile and tablet layouts too?

Yes, once you switch Also copy tablet & phone on. It is off by default, and with it off you get the desktop layout only, slightly faster. With it on, wpgraft measures the page three times: at your window’s own width, then at 768px, then at 375px. The per-breakpoint values are written into Webflow’s own responsive controls. One honest caveat about the measurement: the Web Store build produces the narrow viewports inside the page rather than by resizing the window. It re-evaluates every media query at the target width, pins the layout width, resolves vw units and clamps position: fixed boxes to it, and the result is measured at 100% of the property values a real 768px and 375px window produces on getbootstrap.com and on a stock WordPress theme. What it cannot do is re-run the source site’s own JavaScript for the new width, so a layout a script computes on resize is copied as the desktop script left it, and the capture says so in a warning.

What does this cost?

The free tier is three copies in total, usable on any destination, at full fidelity, with nothing watermarked or downgraded, within seven days of signing up. Whole-page copies are a Pro capture; sections and elements are not. Pro removes the copy limit and opens up whole-page captures.

Is copying a page from Squarespace legal?

That depends on whose page it is and what you copy. Your own site, your own client’s site, a template you have licensed, or your own design on a platform you are leaving. None of that is in question. Somebody else’s design is a decision you are making, and wpgraft asks you to confirm you have the right to make it before your first copy. Text, images, fonts and icons all carry their own licences, and they travel with the copy.

Read more

Try a single section first.

Three copies free, every destination unlocked, full fidelity. Point at one Squarespace section, put it in Webflow, then judge the result before you decide anything.