Record a Framer to code tutorial: an outline for creators

A strong Framer to code tutorial converts a site you own, live on screen, and shows the whole path: the published Framer site, the conversion, the review, verification, the downloaded project running locally, one real edit, and a deploy. Plan it as eight scenes over roughly 12 to 20 minutes, use your own site so verification works on camera, say what the tool can't do as clearly as what it can, and disclose your affiliate link out loud and in the description.

This outline is for YouTubers, course makers and streamers. It complements Framer migration content for creators, which covers topics, ranking and where links go; this post is the shooting script. Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer. Say that in your video too.

Before you record

Use a site you own

Deframer converts any published Framer site, but downloading the code needs proof the site is yours, and the tutorial is far better if viewers see the whole flow. Use your own portfolio or a demo site you built and published. Don't use a client's site without their written permission, and never someone else's site: downloading another person's site isn't allowed, and showing it teaches viewers the wrong thing.

Prepare the accounts and tools

Do a dry run

Convert the site once before recording. Conversions can take several minutes, and you want to know what notices appear so you can explain them. Converting is free, so a rehearsal costs nothing. Converting the same published version with the same options within 30 minutes returns the same project, which is handy for retakes.

The outline

Scene 1: The hook (30–60 seconds)

Show the live Framer site, then the same site running from code on localhost. One sentence: "This Framer site is now a Next.js project I own; here's how, start to finish, and what it can't do." Disclose here: "Links below include an affiliate link; I earn a commission if you buy through it."

Scene 2: Why move a Framer site to code (1–2 minutes)

Give honest reasons, not hype: owning the code, hosting where you want, adding a backend, editing with AI tools, a developer taking over. Also give one reason to stay: if your team edits visually every day, the Framer editor is worth keeping. Viewers trust creators who say when not to do something. Framer vs. Next.js for growing sites is good background.

Scene 3: Convert (2–3 minutes)

On screen: paste the published URL (not the editor link), choose the framework, choose the asset option, click Convert.

Explain the choices briefly:

• Framework: Next.js is the default; Astro, TanStack Start, React Router and Vite are in the same menu. Pick the one your audience uses. A framework comparison makes a good follow-up video; which framework to export to has the facts.
• Assets: "Assets on Framer's CDN" (default) keeps images and fonts loading from Framer's CDN; "Assets in the project" downloads them into the project.

Cut the waiting time, but show the progress stages once.

Scene 4: Review the result (2–3 minutes)

Read the notices aloud and explain one. If live previews are on when you record, show the compare view at desktop, tablet and phone widths; previews may be paused, so don't promise viewers they'll see one. This is the scene that builds trust: show anything that isn't perfect.

Scene 5: Verify and download (1–2 minutes)

Copy the verification meta tag, paste it in Framer under Site Settings, Custom Code, at the end of the <head>, publish, click Check again. Download the .zip.

Blur or crop your personal verification code if you prefer; it's tied to your account. State the price accurately: converting is free, a verified download is 1 credit, packs start at $10 for 1 credit, and the lifetime deal is $397 once. Point to pricing instead of reading a long list.

Scene 6: Run it and tour the code (3–4 minutes)

npm install
npm run dev

Open localhost. Then tour the folders: routes, src/views for pages, src/components with CSS modules, src/styles for tokens and text styles, src/cms for collections as JSON, and src/lib/deframer, the small kit that replaces Framer's runtime. Open the README's routes table. What you get in a converted project is a good script for this scene.

Scene 7: Make one real edit (2–3 minutes)

Change something viewers care about: a headline in a view, a CMS item in JSON, a color token. Optionally do it with an AI editor; editing a Framer site with Cursor or Claude Code has prompts that work. Show the change in the browser.

Scene 8: Deploy and wrap up (2–3 minutes)

Run npm run build, push to a Git repository and deploy on a host. Deploying to Vercel, Netlify, Cloudflare or Fly.io covers each. Close with a short recap: what moved over, what needs review, and what you'd do next (custom domain, forms webhook, analytics). Repeat the disclosure.

Claims to make, and claims to avoid

Links and disclosure

Your affiliate link is deframer.co with ?a= and your Whop username added. You can add it to any page, so a video about Astro can link to deframer.co/framer-to-astro?a=yourname. A referral counts for purchases within 30 days of the viewer's first visit through your link, and the latest link a viewer clicks wins. The program pays 50% of lifetime deals and 40% of credit packs. Details are on the affiliate program post.

Rules worth repeating to yourself: disclose clearly (say it in the video and put it at the top of the description), don't bid on the Deframer name in ads, and describe the product accurately. Platform rules on paid relationships also apply; check your platform's current policy.

A description block you can adapt:

Affiliate disclosure: some links below are affiliate links. If you buy through them, I earn a commission at no extra cost to you. >Deframer (convert a Framer site you own to code): [your link]Chapters: 0:00 Hook · Why move · Convert · Review · Verify and download · Code tour · First edit · Deploy >Deframer is an independent tool, not affiliated with Framer.

Titles and thumbnails

Match what people search: "Framer to Next.js", "export Framer site to code", "Framer to Astro". Put the framework in the title. Thumbnails showing the Framer site next to a code editor communicate the idea at a glance. Avoid using Framer's logo in a way that implies the video is official.