framer prelaunch checklist

Aug 4, 2026

The Ultimate Framer Prelaunch Checklist (2026 Edition)

Launch your Framer website with confidence using this Framer prelaunch checklist. Complete 64 essential checks before going live.

Most Framer launch checklists are just collections of SEO tips, accessibility checks, and forms with no clear workflow. You end up switching between the canvas, CMS, and Site Settings, making it easy to miss something.

This Framer prelaunch checklist follows the same order you build a website in Framer, so you only touch each part of your project once. Whether you're launching a client website, portfolio, startup, or SaaS landing page, it helps you catch critical issues before your site goes live.

Before you start:

Most launch checklists are alphabetised tag lists. You end up bouncing between the canvas, the CMS panel, and Site Settings a dozen times. This one runs in build order - you touch each part of Framer once, then move on.

Domain connection sits at stage 8, because connecting a domain is going live, not preparation for it. Everything before it happens on your .framer.website staging URL.

Time needed	~90 minutes on a clean build, half a day if it isn't
When to run it	The day before launch, not the morning of
What you need open	Framer editor, a real phone, a second browser

Legend used throughout:

Symbol	Meaning
⚠️	Plan-gated — confirm your tier supports it
⚡	FrameSpark tip — the non-obvious version of this check
📎	Official Framer documentation
🔧	External tool

Why Order Matters More Than Coverage

A Framer prelaunch checklist is only useful if the checks happen in the right order. Fix a rogue hex value across dozens of elements manually, and you've wasted hours. Fix it as a single Color Style first, and it's done in one click. The difference isn't how many checks you have-it's when you perform them.

That's why this checklist follows a clear workflow. Design builds the foundation. Content fills it in. CMS validates real-world data. Forms and navigation verify functionality. Setup configures global defaults. SEO and accessibility optimize the finished site. Tools and legal prepare it for measurement and compliance. Go Live publishes it, and the First Hour ensures everything works as expected in production.

Skip a stage, and you're not just missing a check-you're building the rest of your website on something that was never verified.

Stage 1 · Design - Lock the System Before You Build On It

Before a single word of real content goes in, the design system needs to be settled. This is the highest-leverage stage in the entire checklist: every inconsistency you fix here saves you from fixing it dozens of times later, on real pages, under deadline.

Design system

✓	Check	Why it matters
✅	Global colours	Use Color Styles, never raw hex values. Site-wide rebrands become a single edit instead of an archaeology project.
✅	Global text styles	Every text layer linked to a defined style. Manual overrides are what make typography drift across pages.
✅	Global components	Buttons, tags, cards, badges. One edit propagates everywhere - this is the single biggest time-saver in a template build.
✅	Layout templates	Header and footer as templates, so every new page starts structurally correct.
✅	Max-width on containers	Without it, body text stretches to 200 characters per line on a 34" monitor and becomes unreadable.
✅	Border radius consistent	Consistent corner rounding across the template - buttons, cards, and images all sharing the same radius. Mismatched values are small individually, but they add up to a site that reads as sloppy at a glance.

Project hygiene

✓	Check	Why it matters
✅	Organised layers	Clear hierarchy, real names. "Frame 47" is a message to your future self that you didn't care.
✅	Assets in folders	Inside Framer's own asset panel - group images, components, and styles into folders as the project grows. Loose, ungrouped assets get hard to find fast.
✅	Unused assets deleted	Templates ship with more than you'll use — orphan components, unused colour styles, spare text styles.

Interaction & device QA

✓	Check	Why it matters
✅	Hover states	On every button and link. Missing hover states make a site feel broken even when it works.
✅	Effects & animations	Test across breakpoints. Scroll effects that look elegant on desktop often hide content on mobile.
✅	Component interactions	Sliders, tabs, accordions, carousels - click through each one on each breakpoint.
✅	Real device check	An actual phone and tablet. Browser preview cannot reproduce touch targets, momentum scroll, or Safari's quirks.

One of the easiest mistakes to miss during a Framer prelaunch checklist is a layout that only breaks between standard breakpoints. Framer is desktop-first, and while templates are commonly designed for widths like 320, 768, 1024, 1200, and 1920px, real users don't browse at those exact sizes. A page can look perfect at every breakpoint and still break at 850px or 1450px. Test the spaces between breakpoints, not just the breakpoints themselves.

📎 Creating breakpoints · What is responsive design? · Breakpoints guide 2026

Stage 2 · Content - Nothing the Template Author Wrote Should Still Be There

This is the stage people underestimate because it feels like the easy part. It isn't. Content is the most visible category on the entire list - it's what the first real visitor sees, and it's what you're implicitly asking them to trust.

✓	Check	Detail
✅	Placeholder text replaced	Search the project for lorem, ipsum, Acme, Company Name, Your Brand.
✅	Component variants checked	⚡ The one everyone misses. Unused variants still ship with your published site.
✅	Logo replaced	Header, footer, and the source file for your favicon.
✅	Demo images replaced	Or deliberately kept — but decide, don't default.
✅	No placeholder people	"Jane Doe, CEO of Acme" going live is a real thing that happens to real businesses.
✅	Pricing matches reality	Everywhere: pricing table, FAQ, comparison section, checkout. These drift apart during editing more than any other content.
✅	Contact details correct	Company name, address, email, phone.
✅	Copyright year	Current or dynamic.
✅	Proofread	⚡ Headlines separately from body copy. Typos hide in large type because your eye reads the shape, not the letters.

During your Framer prelaunch checklist, pay special attention to component variants and pricing. Unused component variants can still contain placeholder content and get published with your site, even if they're never visible. Pricing is another common issue because it often appears in multiple places, like pricing tables, FAQs, comparison pages, and checkout flows. Review it across the entire site to ensure everything stays consistent.

Stage 3 · CMS - Prove It Works at Zero, One, and Many

The Framer CMS lets you manage dynamic content like blog posts, case studies, team members, and documentation from one place. This stage ensures your CMS works correctly with real-world content, not just sample data.

Structure

✓	Check	Detail
✅	Only necessary fields	Delete what you won't use. Add descriptions to complex inputs so whoever manages content later knows what each field does.
✅	Rich text styles defined	Headings, links, lists, quotes inside the rich text element. Otherwise long-form posts render inconsistently.
✅	Human-readable slugs	/blog/framer-seo-guide - not the full auto-generated title. Framer generates these from titles and they get long fast.
✅	Dynamic meta tags mapped	Collection fields → SEO title, description, OG image. Set once, and every future post optimises itself.

Edge cases - this is the section that separates a working CMS from a demo:

✓	Check	Detail
✅	Empty states designed	What does the blog page look like with zero posts? A category with none? Most sites ship a blank void here.
✅	Conditional visibility	Hide elements when a CMS field is empty — a missing social link or secondary image otherwise leaves a gap.
✅	Longest content tested	Long titles wrap. Do they wrap gracefully, or push the layout apart?
✅	Shortest content tested	Short posts leave detail pages looking collapsed and unfinished.
✅	Filters and sorting	Test each filter alone, then two combined. Then a combination that returns nothing — that needs a message, not a blank page.
✅	Demo items deleted	The template's sample posts should not go live.

A Framer prelaunch checklist should test your CMS with real-world content, not just a few sample posts. Long titles, empty categories, and filters with no results are common issues that only appear once your content grows. A quick way to catch them is to duplicate a CMS item until you have around 20 entries. In just a few minutes, you'll spot layout, pagination, filtering, and card-sizing issues that are easy to miss with only a handful of posts.

📎 CMS collections, items & fields · Get started with the Framer CMS · All CMS lessons

Stage 4 · Forms & Navigation - Click Every Clickable Thing

⚠️ Forms are plan-gated on Framer - confirm your tier includes them before relying on this stage.

By this point the site looks finished. This stage checks whether it actually functions - whether every link, button, and form does what it visually promises.

Navigation

✓	Check	Detail
✅	Every nav link works	Header, footer, and mobile menu are three separate menus. Check all three.
✅	Logo links home	Trivially small, universally expected, frequently missed.
✅	Buttons point somewhere real	Templates ship with # placeholders. A hero CTA pointing at # is a dead conversion on your highest-traffic page.
✅	Link targets correct	External opens in a new tab, internal doesn't.
✅	Social icons	Point to your accounts, not the template author's.
✅	mailto: and tel:	Tap-to-call on mobile is not optional for a service business.

Forms

✓	Check	Detail
✅	Recipient email set	And a real test entry sent.
✅	Test entry received	Check the destination inbox — and the spam folder.
✅	Success message	The user must know it worked.
✅	Error message	Submit a malformed email and confirm it tells you what's wrong.
✅	Validation rules	On each field, so you get clean data.
✅	Correct input types & labels	email, tel, number. Matters for mobile keyboards and screen readers.
✅	Spam protection enabled	Otherwise your first week is bot submissions.
✅	CRM / newsletter integration tested	Push one real signup end to end — webhook, Zapier, Make, or native.

As part of your Framer prelaunch checklist, test the header, footer, and mobile menu separately. They're built independently, so a link fixed in one menu may still be broken or point to a placeholder in another.

Also, test every form in an incognito window on a real phone using cellular data. This helps uncover latency, mobile keyboard, and validation issues that desktop testing often misses.

📎 Creating your first form

Stage 5 · Setup - Global Fallbacks for Everything You Miss

Now you leave the canvas and move into Site Settings. Everything here exists to catch what individual pages forget to define themselves.

✓	Check	Detail
✅	Site title, description, language	Under 60 and 155 characters. This is the fallback for any page that forgets its own.
✅	Favicon	High resolution. ⚡ Check it against both light and dark browser themes.
✅	Apple Touch icon	For home-screen bookmarks on iOS.
✅	Default OG image	1200 × 630px. Verify with a preview checker before launch, not after.
✅	Custom 404 page	Your nav, your branding, a clear route home. Test it: visit /asdfghjkl.
✅	Search visibility toggle	🚨 Confirm you haven't left noindex on from staging. This is the single most common launch-day disaster.

One of the most important checks in any Framer prelaunch checklist is the search visibility toggle. Staging sites are often set to noindex, and it's easy to forget to disable it before launch. Your site will work normally, but it won't appear in search results. That's why this check appears again in Stage 9.

📎 Site settings & global accessibility

🔧 OGimage.gallery · OpenGraph checker · 404 page inspiration

Stage 6 · SEO & Accessibility - No Page Left on Defaults

Run this loop on every page, including the 404. The goal, specifically: no page should be left with a default title, a default description, or an auto-generated slug.

Per-page metadata

✓	Check	Target
✅	Unique meta title	Under 60 characters. Front-load the meaningful word — not "Home", not "Page 1".
✅	Unique meta description	Under 155 characters, different from the global fallback. Write it like ad copy.
✅	Clean URL slug	Lowercase, hyphenated, 3–6 words.
✅	Per-page OG image	At minimum for homepage, pricing, and top blog posts.

Semantic structure

✓	Check	Detail
✅	H1–H6 in logical order	Exactly one H1 per page, no skipped levels. ⚡ Two H1s is the classic casualty of duplicating a hero section.
✅	p tags for body text	Not styled headings. Keeps the markup semantically correct for screen readers.
✅	Semantic tags	nav, footer, ul rather than generic frames. Helps crawlers and assistive tech navigate.
✅	Internal linking	Pages should link to each other meaningfully.

Accessibility

✓	Check	Standard
✅	Alt text on every meaningful image	The most common issue found in Framer site audits, by a wide margin. Decorative images get empty alt, not missing alt.
✅	Colour contrast	WCAG AA — 4.5:1 for body text. Light grey on white is the recurring taste-versus-readability failure.
✅	Keyboard navigable	Tab through the whole site. Every interactive element reachable, with a visible focus state.
✅	Descriptive link labels	"Read the pricing guide", not "Click here".

Performance

✓	Check	Target
✅	Images compressed	Hero under ~200KB, WebP where possible. Framer serves responsive sizes automatically — but it can't fix a 4MB source file.
✅	No redundant upscaling	Don't scale a 400px image to 1200px on canvas. Wasted bandwidth for no visual gain.
✅	Descriptive filenames	pricing-comparison.webp, not Screenshot 2026-07-14 at 3.42.11 PM.png.
✅	Video compressed	Never upload raw exports.
✅	Speed audit run	See targets below.
✅	Animations checked for shift	⚡ Entrance animations are the most common CLS source on Framer sites.
✅	Large media externally hosted	Host large images and videos on an external CDN (e.g., Cloudinary) and embed them instead of uploading them directly to Framer.

Framer's automatic responsive image serving is genuinely useful, but it optimizes delivery, not source quality - it can resize a 4MB hero image for different viewports, but it can't shrink the underlying file weight. That work happens before upload.

The Core Web Vitals thresholds worth targeting:

Core Web Vitals are Google's performance metrics that measure how fast, stable, and responsive your website feels to visitors. Improving these scores helps create a better user experience and can positively impact search rankings.

Metric	Target	What it measures
LCP	under 2.5s	Largest Contentful Paint - when the main content appears
CLS	under 0.1	Cumulative Layout Shift - how much things jump while loading
INP	under 200ms	Interaction to Next Paint - responsiveness to clicks and taps

Structured data & migration:

Structured data helps search engines understand your website, making it eligible for rich search results like FAQs, ratings, and breadcrumbs. If you're migrating an existing site to Framer, planning redirects is equally important to preserve your SEO rankings and traffic.

✓	Check	Detail
✅	Schema markup	JSON-LD. Organization and WebSite at minimum; Article for blog posts; FAQPage where relevant. Can earn rich snippets.
✅	301 redirects planned ⚠️	Only if migrating from an existing site - but critical. Skip this and you lose every ranking you built.

Alt text is one of the most commonly missed items in a Framer prelaunch checklist. Add descriptive alt text to every meaningful image, and use an empty alt (alt="") for decorative images. This improves accessibility, helps screen readers, and can also benefit SEO.

📎 Titles, descriptions & URLs · Semantic tags · Optimising images & icons · Adding alt tags · JSON-LD structured data · Redirects guide · Site optimisation · Video optimisation · SEO testing & auditing

🔧 TinyPNG · Skwiz plugin · PageSpeed Insights · Lighthouse · GTmetrix · Rich results test

Stage 7 · Tools & Legal - Measure What Happens After Launch

A site that launches without analytics is a site you're flying blind on. This stage is short, but skipping it means the first month of real traffic data is simply lost.

✓	Check	Detail
✅	Analytics connected	Added via Site Settings → Custom Code. Verify in the real-time view.
✅	Heatmap tool	Optional but useful — shows where people actually click and how far they scroll.
✅	Google Tag Manager	Worth it if you're running more than two scripts. Keeps your project code clean.
✅	Conversion events configured	⚡ Pageviews alone don't tell you whether the site works. Define what a win looks like.
✅	Cookie banner	If you track EU visitors. GDPR / CCPA.
✅	Privacy policy & terms	Written, published, and linked in the footer.

Pageview counts answer "did anyone show up." They don't answer "did the site do its job." A conversion event - a form submission, a checkout completion, a signup - is what actually connects traffic to outcome, and it needs to be defined and verified before launch, not reverse-engineered from analytics data a month later when someone asks how the site is performing.

📎 Cookie banner component · Adding custom code

🔧 Google Analytics · Microsoft Clarity (free heatmaps) · Hotjar · Google Tag Manager

Stage 8 · Go Live - The Site Becomes Real

Everything above happened on a .framer.website staging URL. This is the stage where that changes.

✓	Step	Detail
✅	Remove Framer badge ⚠️	Requires a paid plan. Nothing says "unfinished" louder on a client site.
✅	Connect custom domain	Update DNS, verify. Both yoursite.com and www.yoursite.com should resolve — pick one as primary and redirect the other. Don't leave both live as separate URLs.
✅	Confirm SSL	Padlock present, no mixed-content warnings in the browser console.
✅	Publish	Publish your site and verify everything works correctly on the live domain.
✅	Redirects live ⚠️	If you set them in stage 6, confirm they're working now.
✅	Check /sitemap.xml ⚠️	Sitemap generation is plan-dependent.
✅	Check /robots.txt	Confirm nothing critical is disallowed.
✅	Search Console verified	Submit the sitemap. Do this on day one so you capture data from the start.
✅	llms.txt published	So ChatGPT, Perplexity, and AI search tools can parse what your site is. Increasingly the difference between being cited and invisible.

As part of your Framer prelaunch checklist, make sure your domain redirects are configured correctly. Choose either the www or non-www version as your canonical URL and redirect the other to avoid splitting SEO authority.

Also, consider adding an llms.txt file. As AI search engines become more common, it helps tools like ChatGPT and Perplexity better understand and cite your website.

📎 Connecting a custom domain

🔧 Google Search Console · Framer AEO scanner

Stage 9 · First Hour - Live Is Not the Same as Working

Staging and production differ more often than most builders expect. This final stage exists to confirm the live site actually behaves the way the preview promised - not assumes it, confirms it.

✓	Check	Why
✅	Fresh incognito window	Not the editor preview. The real, cached-nothing thing.
✅	Load on cellular data	Not wifi. This is how a real visitor arrives.
✅	Paste into Slack, WhatsApp, X	Confirm the preview card renders in each. A broken card kills more clicks than bad copy.
✅	Submit a form from the live site	Production behaves differently to staging.
✅	Walk the conversion flow	As a stranger would, from landing to completion.
✅	Check analytics after 15 min	Confirm your own visit registered. If it didn't, tracking isn't working.
✅	Re-confirm indexability	🚨 Yes, again. This is the one that ruins launches.

The indexability check appears twice in this list on purpose. It's not a formatting error - it's the checklist's way of flagging that this specific failure mode is common enough, and silent enough, to justify checking it once when you're leaving staging and again once the site is live and DNS has propagated. A noindex tag left on doesn't throw an error. It just means nobody finds the site until someone happens to notice.

The Panic Check - 8 Items, 80% of Disasters

No time to run all nine stages? These eight checks catch the overwhelming majority of real launch problems on their own.

#	Check	Stage
1	Site is indexable	5, 9
2	Every nav link works	4
3	CTAs point somewhere real	4
4	Form actually delivers	4
5	No lorem ipsum left	2
6	Pricing matches reality	2
7	Works on a real phone	1
8	Analytics firing	7

If a launch is happening in the next thirty minutes and the full 64-item pass isn't possible, this is the list to run instead. It's not a substitute for the rest - it's triage.

After Launch: The Checklist Doesn't End at Publish

A site that passes every check on launch day can still fail quietly over the following weeks if nobody keeps watching. The checklist extends naturally into an ongoing cadence:

When	What to check
Week 1	Search Console crawl errors · indexing status · form submissions for spam patterns
Month 1	Traffic by page · Core Web Vitals under real load, not synthetic tests · which CTAs actually convert
Ongoing	Every new CMS item gets stage 3's checks · every new page gets stage 6's

The core insight here is that Stages 3 and 6 don't retire once the site launches — every new blog post is a new CMS item that deserves the empty-state and edge-case scrutiny of Stage 3, and every new page deserves the metadata and semantic-structure pass of Stage 6. The checklist isn't a one-time gate. It's the standard the site is held to permanently.

Reference Library

Framer Academy - the SEO series. Maps directly onto Stages 5 and 6, about 30 minutes total, worth watching in this order:

#	Lesson	Time	Stage
1	Structuring content with semantic tags	6:16	6
2	Optimising images, icons & interactive elements	4:54	6
3	Page titles, descriptions & URLs	7:25	6
4	Site settings & global accessibility	3:48	5
5	SEO testing, auditing & launch checklist	4:33	8
6	The Framer Prelaunch Checklist	3:00	all

By topic:

Topic	Resources
Responsive	What is responsive design? · Creating breakpoints · Breakpoints guide 2026
CMS	Collections, items & fields · CMS course · All CMS lessons
Forms	Creating your first form
Media	Site optimisation · Video optimisation · Image optimisation
Technical	Custom code · Redirects · JSON-LD · Custom domain · Alt tags
Framer 3.0	Release notes · Content & CMS with Agents
Hubs	Framer Academy · All lessons · AEO scanner

External toolkit:

Purpose	Tool
Image compression	TinyPNG · Skwiz plugin
Speed testing	PageSpeed Insights · Lighthouse · GTmetrix
Search & schema	Google Search Console · Rich results test
Social previews	OGimage.gallery · OpenGraph checker
Analytics	Google Analytics · Microsoft Clarity · Hotjar · GTM
Inspiration	404 page gallery

Frequently Asked Questions

How long does a Framer prelaunch checklist actually take? Around 90 minutes on a clean, well-maintained build. Half a day if the project has drifted from its design system or the CMS hasn't been touched since the template was installed.

What's the single most common launch-day mistake on Framer? Leaving noindex enabled from the staging environment. It produces no visible error - the site loads normally - which is exactly why it causes the most damage. It's checked twice in this list for that reason.

Do I need to run all 9 stages every time? For a full launch, yes. For urgent, time-boxed launches, the 8-item Panic Check catches roughly 80% of real disasters and is a reasonable substitute under time pressure - but it's triage, not a replacement for the full pass.

Does this checklist apply after launch too? Yes. Stage 3 (CMS edge cases) and Stage 6 (SEO and semantic structure) aren't one-time gates - they apply to every new blog post and every new page added after launch.

Conclusion:

A successful website launch isn't about publishing quickly—it's about publishing confidently. By following this Framer prelaunch checklist from start to finish, you'll catch SEO, performance, accessibility, CMS, and usability issues before your visitors do. Whether you're launching a client website, startup landing page, portfolio, or SaaS product, keeping this checklist as part of your workflow will help every Framer project go live with confidence.