framer-export 4.4.3 → 5.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +112 -206
- package/dist/cli/index.js +4161 -805
- package/dist/cli/index.js.map +1 -1
- package/package.json +15 -8
package/README.md
CHANGED
|
@@ -1,267 +1,173 @@
|
|
|
1
|
+
<h1 align="center">F-EXPORT</h1>
|
|
2
|
+
|
|
1
3
|
<p align="center">
|
|
2
|
-
<img src="https://img.shields.io/badge/
|
|
3
|
-
<img src="https://img.shields.io/badge/
|
|
4
|
-
<img src="https://img.shields.io/badge/
|
|
5
|
-
<img src="https://img.shields.io/badge/version-4.0.1-blue?style=for-the-badge" alt="Version" />
|
|
6
|
-
<img src="https://img.shields.io/badge/license-MIT-green?style=for-the-badge" alt="License" />
|
|
4
|
+
<img src="https://img.shields.io/badge/version-5.0.0--beta.2-blue" alt="Version" />
|
|
5
|
+
<img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
|
|
6
|
+
<img src="https://img.shields.io/badge/node-%3E%3D20-339933" alt="Node" />
|
|
7
7
|
</p>
|
|
8
8
|
|
|
9
|
-
<
|
|
10
|
-
<br />
|
|
11
|
-
F-EXPORT
|
|
12
|
-
<br />
|
|
13
|
-
<sub>Framer · Webflow · Wix Exporter</sub>
|
|
14
|
-
</h1>
|
|
9
|
+
<p align="center">Export a site built on Framer, Webflow, Wix or 22 other platforms into a local folder that actually works.</p>
|
|
15
10
|
|
|
16
|
-
|
|
17
|
-
<b>Export any Framer, Webflow, or Wix site into a fully working local mirror.</b><br/>
|
|
18
|
-
All assets, animations, fonts, videos, and scripts — downloaded, rewritten, and pretty-printed.<br/>
|
|
19
|
-
Badges and tracking removed. Ready to serve.
|
|
20
|
-
</p>
|
|
11
|
+
## What this is
|
|
21
12
|
|
|
22
|
-
|
|
23
|
-
<a href="#-features">Features</a> ·
|
|
24
|
-
<a href="#-quick-start">Quick Start</a> ·
|
|
25
|
-
<a href="#-platforms">Platforms</a> ·
|
|
26
|
-
<a href="#-cli-reference">CLI</a> ·
|
|
27
|
-
<a href="#-architecture">Architecture</a> ·
|
|
28
|
-
<a href="#-contributing">Contributing</a> ·
|
|
29
|
-
<a href="#-license">License</a>
|
|
30
|
-
</p>
|
|
13
|
+
You have a site on a hosted platform. You want the real files: the HTML as the browser sees it, the CSS, the scripts, the images, the fonts, the videos. Not a screenshot, not a broken "save page as" folder, an actual mirror you can open locally, host anywhere, or hand to an AI agent to rebuild as a clean codebase.
|
|
31
14
|
|
|
32
|
-
|
|
15
|
+
That is what framer-export does. It loads the page in a headless browser, waits for the framework to hydrate, captures the rendered result, downloads every asset it can find, rewrites all the CDN URLs to local relative paths, strips the platform badges and trackers, and writes a folder with a small `serve.js` so you can preview it immediately.
|
|
33
16
|
|
|
34
|
-
|
|
17
|
+
It knows 25 platforms and detects the right one from the URL, and when the URL is a custom domain it falls back to reading the HTML. If a site sits behind Cloudflare or a captcha, the export fails loudly with an explanation instead of giving you an empty folder.
|
|
35
18
|
|
|
36
|
-
|
|
37
|
-
|---------|-------------|
|
|
38
|
-
| **Multi-Platform** | Auto-detects Framer, Webflow, and Wix sites from the URL |
|
|
39
|
-
| **Full Mirror** | Downloads HTML, CSS, JS, images, fonts, and videos |
|
|
40
|
-
| **Badge Removal** | Strips "Made in Webflow", Wix ads banner, Framer badge |
|
|
41
|
-
| **URL Rewriting** | All CDN URLs rewritten to local relative paths |
|
|
42
|
-
| **Pretty-Print** | Minified JS/MJS files reformatted with Prettier |
|
|
43
|
-
| **Integrity Strip** | Removes `integrity` and `crossorigin` attributes for local serving |
|
|
44
|
-
| **SEO Optimization** | Injects canonical, OG tags, and robots meta if missing |
|
|
45
|
-
| **Interactive Setup** | Arrow-key wizard with platform detection and progress animation |
|
|
46
|
-
| **Cooking Animation** | Shimmer gradient progress indicator during export |
|
|
47
|
-
| **Local Server** | Built-in serve.cjs with SPA fallback and CORS headers |
|
|
48
|
-
| **Smart Naming** | Output folder auto-named from URL (e.g. `webflow-mysite/`) |
|
|
19
|
+
## Installation
|
|
49
20
|
|
|
50
|
-
|
|
21
|
+
```bash
|
|
22
|
+
npm install -g framer-export
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Or from source:
|
|
51
26
|
|
|
52
27
|
```bash
|
|
53
|
-
# Clone and install
|
|
54
28
|
git clone https://github.com/danbenba/FramerExport.git
|
|
55
29
|
cd FramerExport
|
|
56
30
|
npm install
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Node 20 or newer. The first run downloads a Chromium build for Puppeteer, which takes a moment.
|
|
57
34
|
|
|
58
|
-
|
|
59
|
-
npm run dev
|
|
35
|
+
## Three ways to run it
|
|
60
36
|
|
|
61
|
-
|
|
62
|
-
npm run dev -- https://mysite.framer.app
|
|
63
|
-
npm run dev -- https://mysite.webflow.io
|
|
64
|
-
npm run dev -- https://user.wixsite.com/my-site
|
|
37
|
+
### The web interface
|
|
65
38
|
|
|
66
|
-
|
|
67
|
-
|
|
39
|
+
```bash
|
|
40
|
+
framer-export ui
|
|
68
41
|
```
|
|
69
42
|
|
|
70
|
-
|
|
43
|
+
This starts a local server on port 4400 and opens your browser. You get a gallery of every supported platform. Click one (or pick auto-detect), paste the URL, adjust the options, and watch the export run with live logs on the left and a summary panel on the right showing the current phase, asset counters and the last files written. When it finishes you can copy the full log or the serve command with one click.
|
|
71
44
|
|
|
72
|
-
|
|
73
|
-
- Auto-detected via `.framer.app`, `.framer.website`, `.framer.ai`
|
|
74
|
-
- Handles framerusercontent.com, framerstatic.com, framercanvas.com
|
|
75
|
-
- Strips Framer badge, analytics events, bootstrap scripts
|
|
76
|
-
- Waits for SPA hydration (`#main` element)
|
|
45
|
+
The server only listens on 127.0.0.1 and rejects cross-origin requests, so nothing on the network or in another browser tab can trigger exports on your machine. Use `--port <n>` to change the port and `--no-open` if you do not want the browser to open by itself.
|
|
77
46
|
|
|
78
|
-
###
|
|
79
|
-
- Auto-detected via `.webflow.io`, `.webflow.com`
|
|
80
|
-
- Handles cdn.prod.website-files.com, cloudfront CDN, GSAP plugins
|
|
81
|
-
- Strips "Made in Webflow" badge, "Powered by" footer, `data-wf-*` attributes
|
|
82
|
-
- Removes generator meta tag and HTML comments
|
|
83
|
-
- Downloads videos (MP4/WebM) and responsive image variants
|
|
47
|
+
### The terminal wizard
|
|
84
48
|
|
|
85
|
-
|
|
86
|
-
-
|
|
87
|
-
|
|
88
|
-
- Strips WIX_ADS banner (nested div with SVG), wix-ads class, wix-badge
|
|
89
|
-
- Blocks frog.wix.com, panorama.wixapps.net analytics
|
|
90
|
-
- Preserves 40+ inline `<style>` tags (Wix architecture)
|
|
49
|
+
```bash
|
|
50
|
+
framer-export
|
|
51
|
+
```
|
|
91
52
|
|
|
92
|
-
|
|
53
|
+
Running it with no arguments opens the interactive setup. First you pick the tool from a scrollable list grouped by category, and you can just start typing to filter it. Then you enter the URL, then the output directory, and finally a single options panel with checkboxes for pretty-printing and sub-pages, plus a concurrency setting. If the URL looks like a different platform than the one you picked, it asks before continuing.
|
|
93
54
|
|
|
94
|
-
|
|
95
|
-
Usage:
|
|
96
|
-
framer-export <url> [output-dir]
|
|
97
|
-
framer-export --setup
|
|
98
|
-
framer-export --setup --legacy-mode
|
|
99
|
-
|
|
100
|
-
Options:
|
|
101
|
-
--setup Launch interactive setup wizard
|
|
102
|
-
--platform <name> Force platform: framer | webflow | wix
|
|
103
|
-
--legacy-mode Use y/n text input instead of arrow selection
|
|
104
|
-
--help, -h Show help message
|
|
105
|
-
```
|
|
55
|
+
While the export runs, terminals wider than 100 columns get a live sidebar on the right with the phase, elapsed time, download counters and recent files. The log stream itself stays untouched.
|
|
106
56
|
|
|
107
|
-
|
|
57
|
+
If arrow keys do not work in your terminal, `framer-export --setup --legacy-mode` falls back to plain text prompts.
|
|
58
|
+
|
|
59
|
+
### The direct command
|
|
108
60
|
|
|
109
61
|
```bash
|
|
110
|
-
# Auto-detect platform from URL
|
|
111
62
|
framer-export https://mysite.framer.app
|
|
112
|
-
|
|
113
|
-
# Force platform for custom domains
|
|
114
|
-
framer-export --platform webflow https://custom-domain.com
|
|
115
|
-
|
|
116
|
-
# Specify output directory
|
|
117
63
|
framer-export https://mysite.webflow.io ./my-export
|
|
64
|
+
framer-export --platform webflow https://my-custom-domain.com
|
|
65
|
+
framer-export --subpages https://mysite.framer.app
|
|
66
|
+
```
|
|
118
67
|
|
|
119
|
-
|
|
120
|
-
framer-export --setup
|
|
68
|
+
Auto-detection covers the hosted domains (`.framer.app`, `.webflow.io`, `.wixsite.com` and so on). For custom domains, pass `--platform` with the platform id, or let the HTML detection figure it out.
|
|
121
69
|
|
|
122
|
-
|
|
123
|
-
|
|
70
|
+
## CLI reference
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
framer-export <url> [output-dir] export a site
|
|
74
|
+
framer-export ui [--port <n>] launch the web interface
|
|
75
|
+
framer-export --setup launch the terminal wizard
|
|
76
|
+
|
|
77
|
+
--platform <id> force a platform (framer, webflow, wix, shopify, notion, ...)
|
|
78
|
+
--subpages crawl internal links and export every page
|
|
79
|
+
--dpr <number> capture device pixel ratio, default 1
|
|
80
|
+
--legacy-mode with --setup, use plain text prompts
|
|
81
|
+
--no-open with ui, do not open the browser
|
|
82
|
+
--about version and package information
|
|
83
|
+
--version, -v version number
|
|
84
|
+
--help, -h full help with the platform list
|
|
124
85
|
```
|
|
125
86
|
|
|
126
|
-
|
|
87
|
+
## Supported platforms
|
|
127
88
|
|
|
128
|
-
|
|
129
|
-
npm run dev # Run with tsx (development)
|
|
130
|
-
npm start # Same as dev
|
|
131
|
-
npm run build # Bundle with tsup
|
|
132
|
-
npm run typecheck # Type-check with tsc
|
|
133
|
-
npm run format # Format with Prettier
|
|
134
|
-
```
|
|
89
|
+
Website builders: Framer, Webflow, Wix, Bubble, Carrd, Strikingly, Duda, Squarespace, Weebly, Tilda.
|
|
135
90
|
|
|
136
|
-
|
|
91
|
+
Landing page tools: ClickFunnels, Instapage, Unbounce, Systeme.io, Elementor.
|
|
137
92
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
│ ├── images/ # PNG, JPG, SVG, WebP, AVIF
|
|
148
|
-
│ ├── videos/ # MP4, WebM
|
|
149
|
-
│ ├── fonts/ # WOFF2, WOFF, TTF, OTF
|
|
150
|
-
│ └── misc/ # Other assets
|
|
151
|
-
└── data/ # CMS data, JSON, search index
|
|
152
|
-
```
|
|
93
|
+
CMS: Notion, Ghost, WordPress.
|
|
94
|
+
|
|
95
|
+
Course platforms: Kajabi, Teachable, Thinkific, Podia.
|
|
96
|
+
|
|
97
|
+
E-commerce: Gumroad, Shopify.
|
|
98
|
+
|
|
99
|
+
AI builders: Gamma.
|
|
100
|
+
|
|
101
|
+
Framer, Webflow and Wix are the stable trio, tested on real production sites. Everything else carries a beta badge in the gallery and in `--help`: the handlers work, but they have seen fewer real-world sites, so expect the occasional rough edge and report what you find.
|
|
153
102
|
|
|
154
|
-
|
|
103
|
+
Each platform is a single self-contained handler in `src/platforms/`. It declares how to detect the platform, which domains and selectors to strip, how long to wait for hydration, how to route assets into folders, and optional hooks that run before capture, after capture and after the build. Adding a platform never touches the others.
|
|
104
|
+
|
|
105
|
+
## What you get
|
|
155
106
|
|
|
156
107
|
```
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
│ └── index.ts # Barrel exports
|
|
172
|
-
├── exporter/ # Export engine
|
|
173
|
-
│ ├── index.ts # FramerExporter orchestrator
|
|
174
|
-
│ ├── capture.ts # Puppeteer browser capture
|
|
175
|
-
│ ├── download.ts # Parallel asset downloader
|
|
176
|
-
│ ├── output.ts # HTML processing and file output
|
|
177
|
-
│ └── summary.ts # Export report
|
|
178
|
-
├── assets/
|
|
179
|
-
│ └── asset-map.ts # URL-to-local-path mapping
|
|
180
|
-
├── network/
|
|
181
|
-
│ ├── download.ts # HTTP download with retries
|
|
182
|
-
│ └── pool.ts # Concurrency pool
|
|
183
|
-
├── formatter/
|
|
184
|
-
│ └── prettify.ts # Prettier-based JS formatter
|
|
185
|
-
├── logger/
|
|
186
|
-
│ └── index.ts # Colored logging with cooking integration
|
|
187
|
-
├── server/
|
|
188
|
-
│ └── template.ts # Embedded HTTP server template
|
|
189
|
-
├── config/
|
|
190
|
-
│ └── index.ts # Global configuration
|
|
191
|
-
└── types.ts # Shared TypeScript interfaces
|
|
108
|
+
framer-mysite-fresh-build-a1b2/
|
|
109
|
+
index.html the rendered page, URLs rewritten to local paths
|
|
110
|
+
serve.js a small static server with SPA fallback
|
|
111
|
+
package.json so "npm run serve" works
|
|
112
|
+
export.log the complete log of the run
|
|
113
|
+
styles/ CSS files
|
|
114
|
+
scripts/vendor/ third-party bundles
|
|
115
|
+
scripts/modules/ page modules and lazy chunks
|
|
116
|
+
assets/images/ images, responsive variants included
|
|
117
|
+
assets/fonts/ font files
|
|
118
|
+
assets/videos/ video files
|
|
119
|
+
assets/misc/ everything else
|
|
120
|
+
data/ JSON and data files
|
|
121
|
+
subpages/ one HTML file per crawled page, when --subpages is on
|
|
192
122
|
```
|
|
193
123
|
|
|
194
|
-
|
|
124
|
+
To preview it:
|
|
195
125
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
5. **Asset Download** - All intercepted resources downloaded with concurrency pool
|
|
201
|
-
6. **Badge Strip** - Platform-specific badges, ads, and tracking removed
|
|
202
|
-
7. **Integrity Strip** - SHA integrity hashes and CORS attributes removed for local serving
|
|
203
|
-
8. **URL Rewrite** - All CDN URLs in HTML, CSS, and JS rewritten to local paths
|
|
204
|
-
9. **Pretty-Print** - Minified JS files reformatted with Prettier for readability
|
|
205
|
-
10. **Output** - Clean `index.html` + `serve.cjs` written to output directory
|
|
126
|
+
```bash
|
|
127
|
+
cd framer-mysite-fresh-build-a1b2
|
|
128
|
+
node serve.js
|
|
129
|
+
```
|
|
206
130
|
|
|
207
|
-
|
|
131
|
+
The site has to be served over HTTP because module scripts do not load from `file://`. The bundled server handles MIME types, CORS headers and the sub-page fallback, so a route like `/about` resolves to `subpages/about.html` automatically.
|
|
208
132
|
|
|
209
|
-
|
|
133
|
+
Every run also writes `export.log` with the full untruncated log history. The finish panel in the terminal and the web interface both offer to copy it to the clipboard, which is handy when you want to report a problem or feed the context to an AI tool.
|
|
210
134
|
|
|
211
|
-
|
|
212
|
-
2. Create a feature branch: `git checkout -b feat/my-feature`
|
|
213
|
-
3. Make your changes
|
|
214
|
-
4. Run type-check: `npm run typecheck`
|
|
215
|
-
5. Format code: `npm run format`
|
|
216
|
-
6. Commit with conventional commits: `git commit -m "feat(platform): add Squarespace support"`
|
|
217
|
-
7. Push and open a PR
|
|
135
|
+
## The AI conversion assistant
|
|
218
136
|
|
|
219
|
-
|
|
137
|
+
After a terminal export you can generate a conversion brief for an AI coding agent. Pick a target stack (React with Vite, Next.js, Vue, SvelteKit or Astro), pick the tool you use (Claude Code, Codex, OpenCode or another agent), pick a goal (clean rebuild, pixel-perfect migration, component system, or performance and SEO), and it writes a detailed prompt file into `ai/` inside the export. The prompt references the real files and counts from your export, so the agent starts from facts instead of guesses.
|
|
220
138
|
|
|
221
|
-
|
|
222
|
-
2. Add it to `src/platforms/detect.ts` and `src/platforms/index.ts`
|
|
223
|
-
3. Test with a real site URL
|
|
139
|
+
## How it works
|
|
224
140
|
|
|
225
|
-
|
|
141
|
+
The pipeline has six phases. First it fetches the server-rendered HTML over plain HTTP, which is what search engines see and what gives the cleanest markup. Then it launches Puppeteer, blocks the analytics domains the platform handler lists, navigates, waits for the hydration selector, scrolls through the page to trigger lazy loading, and records every network response into an asset map. Sub-page crawling reuses the same browser session when enabled.
|
|
226
142
|
|
|
227
|
-
|
|
228
|
-
feat(scope): New feature
|
|
229
|
-
fix(scope): Bug fix
|
|
230
|
-
perf(scope): Performance improvement
|
|
231
|
-
refactor(scope): Code refactoring
|
|
232
|
-
chore(scope): Tooling, deps, config
|
|
233
|
-
```
|
|
143
|
+
Once the browser closes, the downloader writes all unique assets to disk with a configurable concurrency, then follows `import` statements inside downloaded JS chunks to resolve lazily loaded modules the browser never requested. The build step rewrites every URL to a local relative path, strips badges, trackers and integrity attributes, injects canonical and Open Graph tags when they are missing, pretty-prints the JavaScript unless you turned that off, and writes `index.html`, `serve.js` and `export.log`.
|
|
234
144
|
|
|
235
|
-
##
|
|
145
|
+
## When something goes wrong
|
|
236
146
|
|
|
237
|
-
|
|
147
|
+
If a site is protected by Cloudflare, hCaptcha or a similar challenge, the export stops with a clear message rather than saving the challenge page as if it were the site. There is no bypass built in; run the export from a network the site trusts, or use a platform-hosted URL instead of the proxied custom domain.
|
|
238
148
|
|
|
239
|
-
|
|
149
|
+
If the page comes out incomplete, try `--dpr 2` for sharper image variants, or check the log for `Download failed` lines. Some platforms serve assets from session-bound URLs that expire; re-running the export usually resolves it.
|
|
240
150
|
|
|
241
|
-
|
|
151
|
+
If detection picks the wrong platform on a custom domain, pass `--platform` explicitly. Detection priorities are conservative on purpose: a hosted domain always wins over a generator meta tag.
|
|
242
152
|
|
|
243
|
-
|
|
153
|
+
## Development
|
|
244
154
|
|
|
245
|
-
|
|
155
|
+
```bash
|
|
156
|
+
npm run dev # run the CLI from source
|
|
157
|
+
npm test # 150 unit and integration tests, node test runner
|
|
158
|
+
npm run typecheck # tsc --noEmit
|
|
159
|
+
npm run build # bundle with tsup into dist/
|
|
160
|
+
npm run format # prettier over src/
|
|
161
|
+
```
|
|
246
162
|
|
|
247
|
-
|
|
248
|
-
- Using welcoming and inclusive language
|
|
249
|
-
- Being respectful of differing viewpoints and experiences
|
|
250
|
-
- Gracefully accepting constructive criticism
|
|
251
|
-
- Focusing on what is best for the community
|
|
163
|
+
The test suite covers platform detection for all 25 handlers against recorded research profiles, asset mapping, URL rewriting, the logger, the generated serve.js (spawned for real and probed over HTTP), the progress state and every route of the UI server, including its origin and host checks.
|
|
252
164
|
|
|
253
|
-
|
|
254
|
-
- Trolling, insulting, or derogatory comments
|
|
255
|
-
- Public or private harassment
|
|
256
|
-
- Publishing others' private information without permission
|
|
257
|
-
- Other conduct which could reasonably be considered inappropriate
|
|
165
|
+
To add a platform, create one file in `src/platforms/<category>/`, implement the `PlatformHandler` interface, register it in `src/platforms/registry.ts`, and add a research profile in `tests/research/` so the detection tests cover it. Look at `src/platforms/builder/carrd.ts` for a small example and `src/platforms/framer.ts` for a complete one.
|
|
258
166
|
|
|
259
|
-
|
|
167
|
+
Commits follow the conventional format: `feat(scope):`, `fix(scope):`, `test:`, `docs:`, `chore:`.
|
|
260
168
|
|
|
261
|
-
|
|
169
|
+
## License
|
|
262
170
|
|
|
263
|
-
|
|
171
|
+
MIT. See [LICENSE](LICENSE).
|
|
264
172
|
|
|
265
|
-
|
|
266
|
-
Made with ❤ by <a href="https://github.com/danbenba">Dany</a>
|
|
267
|
-
</p>
|
|
173
|
+
Built by [Dany (danbenba)](https://github.com/danbenba).
|