DEV Community

Cover image for How I built Unframer: export Framer sites to portable HTML
Niranjan
Niranjan

Posted on Originally published at niranjand.in

How I built Unframer: export Framer sites to portable HTML

Turns a published Framer site into framework-free HTML and CSS that runs on any static host, with trackers, the React runtime and the watermark removed, and entry animations compiled to pure CSS.

Try it live ยท Source code

The problem

Framer sites can only live on Framer. The served HTML is already complete, so a static copy should be possible, as long as the animations survive once the runtime is gone.

Decisions that shaped it

  1. Read before stripping. The declarative animation and breakpoint data is read first and compiled to CSS keyframes, and only then is the roughly 212 KB React runtime removed.

  2. Links that work everywhere. Internal links are rewritten as relative, file-explicit paths, the only form that works opened from disk, on a static host and from a subdirectory.

  3. Crawled routes are untrusted input. Path traversal, backslashes and drive letters are rejected so a link can never write outside the output folder.

  4. Canonical URLs are retargeted with --base-url or removed, so a self-hosted copy isn't treated by search engines as a duplicate of the original.

Built with

TypeScript, Node.js, Docker, HTML, CSS


Originally published at niranjand.in.

Top comments (0)