webflow-to-astro

Convert a Webflow export directory into a production-ready Astro + Vue project.

npx webflow-to-astro ./my-site-export ./my-site-astro
cd ./my-site-astro && pnpm install && pnpm dev

Install

npm install -g webflow-to-astro

Or run without installing:

npx webflow-to-astro <export-dir> [output-dir]

Usage

webflow-to-astro <export-dir> [output-dir]

output-dir defaults to ./astro-output if omitted.

Flags

| Flag | Description | |------|-------------| | --dry-run | Show what would be generated without writing any files | | --force | Re-run the transform on an existing output directory |

What gets generated

my-site-astro/
├── src/
│   ├── layouts/
│   │   └── BaseLayout.astro       # Shared layout: head links, CSS, CDN scripts, slots
│   ├── pages/
│   │   ├── index.astro
│   │   ├── about.astro
│   │   └── ...                    # One .astro file per Webflow page
│   ├── assets/
│   │   └── icon-svg-1.svg         # SVGs extracted from w-embed divs
│   ├── components/                # Empty — ready for your Vue components
│   └── env.d.ts
├── public/
│   ├── css/
│   │   ├── normalize.css          # Copied from Webflow export
│   │   ├── components.css
│   │   ├── my-project.css
│   │   ├── my-project-custom.css  # Extracted from w-embed <style> blocks
│   │   ├── about-head.css         # Per-page Page Settings CSS (if any)
│   │   └── ...
│   ├── js/
│   │   ├── shared.js              # Inline scripts shared across multiple pages
│   │   ├── index-page.js          # Page-unique scripts (only if needed)
│   │   └── ...
│   ├── images/
│   ├── fonts/
│   └── ...                        # All Webflow asset dirs copied as-is
├── astro.config.mjs
├── package.json
├── tsconfig.json
└── .gitignore

Re-running with --force

When your Webflow design changes, re-export and re-run:

webflow-to-astro ./updated-export ./my-site-astro --force

What gets updated: Generated files that still contain the webflow-to-astro:generated sentinel comment are overwritten with the latest output.

What is preserved: Any file where you have removed the sentinel is treated as user-edited and left alone. The tool reports these files so you know to merge changes manually if needed.

Your own files are always safe: Files you created yourself (custom components, extra CSS, etc.) are never touched — they don't exist in the Webflow export and are never targeted by the write step.

SVG handling

SVGs inside Webflow w-embed divs are extracted to src/assets/ and deduplicated across pages. The rendering strategy is chosen automatically:

• Inline (?raw + <Fragment set:html>) — SVGs with class, data-* attributes, or currentColor. Needed so CSS and JS can target inner elements.
• Static (import + <img>) — Purely decorative SVGs with no CSS hooks or dynamic colour.

Requirements

• Node.js 18+
• A Webflow export directory (unzip the .zip Webflow provides in Site Settings → Export)

License

MIT