v0.2 · node ≥ 20 · mit

framershot

A local CLI for clean, retina-quality screenshots of Framer sites. Disables animations, hides sticky bars, primes lazy content, then captures full-page at 2×.

github → node ≥ 20 playwright chromium

Heads-up. This page is documentation. framershot itself runs locally — it needs Node and a real browser, so it can’t execute inside GitHub Pages.

Install

git clone https://github.com/granqvistsanna-web/frameshot.git
cd frameshot
npm install

Two ways to use it

1. Browser UI

Paste a Framer URL, hit capture. Good for one-offs.

node index.js               # opens UI on :5173
node index.js serve -p 8080 # custom port, no auto-open

2. CLI with a YAML config

Repeatable, scriptable. Output paths are printed one per line to stdout, so you can grep or pipe.

node index.js capture config.yaml
node index.js capture config.yaml --smoke

Minimal config

name: my-site
baseUrl: https://example.framer.website
output: ./screenshots/{date}/{viewport}/{page}.png
deviceScaleFactor: 2
viewport:
  width: 1440
  height: 900
  name: desktop
page:
  path: /
  name: home
prepare:
  animations: true     # framer-friendly
  scrollPrime: true    # load lazy content
  extraDelay: 500
  hide:
    - 'nav.sticky'
    - '#consent-banner'

Template placeholders: {date}, {viewport}, {page}, {time}.

Multi-viewport

Use plural viewports: — each name must be unique so {viewport} can’t collide:

viewports:
  - { name: desktop, width: 1440, height: 900 }
  - { name: mobile,  width: 375,  height: 667 }

viewport: (singular) and viewports: (plural) are mutually exclusive.

Try it now

node index.js capture samples/deltaventure.yaml
# → ./screenshots/<today>/desktop/home.png  (~12 MB retina)

Other fixtures in samples/: sample.yaml (annotated), smoke.yaml, smoke-multi.yaml. The smoke fixtures pair with node samples/serve-smoke.js &.

Errors you might hit