The 'Error loading preview' in Framer means the design canvas or code component preview failed to render. Common causes include broken code components that access browser APIs during server-side rendering, corrupted project state, and missing assets. Check for components using window/document without useEffect wrappers, reload the project, and use CMD+K to locate crash identifiers.
What does "Error loading preview" mean in Framer?
When Framer shows 'Error loading preview,' the canvas rendering engine failed to display your design. The preview is the central part of the Framer editor where you see your design in real time. When it fails, you cannot see changes you make until the error is resolved.
The most common cause is a code component crash. Framer code components run in a sandboxed environment, and errors in these components can crash the preview. Components that access browser APIs like window, document, or navigator during server-side rendering are the top offender — these APIs do not exist during SSR and cause the component to throw an error that cascades to the entire preview.
Framer identifies code component crashes with identifiers like code-crash:IilknqsQI:TlIGJvk3t. You can paste these into Quick Actions (CMD+K) to locate the problematic component. Other causes include corrupted project files, overly large assets (SVGs above 1 MB), and collections that exceed CMS size limits.
Common causes
A code component accesses window, document, or
navigator during server-side rendering without a useEffect wrapper
A useEffect callback returns a
non-function value (e.g., returning a number from useEffect(() => counter++, [state]))
An asset (image, SVG, video) is
too large, causing the preview renderer to time out or crash
The project's CMS collection grew
too large, triggering the 'Module too large' warning and halting the preview
Nested links (a link inside
another link) create invalid HTML that the renderer cannot handle
The project file is corrupted due
to a sync conflict or interrupted save operation
How to fix "Error loading preview" in Framer
If the error includes a crash identifier (like code-crash:xxx:xxx), press CMD+K to open Quick Actions, paste the identifier, and it will locate the problematic component. Fix or remove that component to restore the preview.
For code components accessing browser APIs: wrap all browser API calls (window, document, navigator, localStorage) in useEffect(). Code that runs outside useEffect executes during SSR where these APIs do not exist.
For the useEffect return value error: ensure every useEffect callback either returns nothing (undefined) or returns a cleanup function. A common mistake is writing useEffect(() => counter++, [state]) which returns a number. Fix by wrapping in braces: useEffect(() => { counter++ }, [state]).
If no crash identifier appears, try refreshing the editor (CMD+R). If that does not help, try opening the project in a different browser. Clear the browser cache for framer.com if the issue persists.
For asset-related issues: check for SVGs above 1 MB (Framer can convert these to WebP) and remove any overly large media files. For CMS issues, reduce the size of your collections or split them into smaller ones.
As a last resort, check the project's version history and restore a previous version where the preview worked.
Prevention tips
- Wrap all browser API calls (window, document, navigator) in useEffect() — they do not exist during Framer's server-side rendering pass
- Use CMD+K and paste crash identifiers to quickly locate the exact component causing the preview crash
- Keep SVGs under 1 MB and compress large images before uploading to prevent preview rendering timeouts
- Check useEffect callbacks to ensure they return either nothing or a cleanup function — returning a non-function value crashes components
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
My Framer project shows 'Error loading preview' and the canvas is blank. I have several custom code components. How do I find which component is crashing the preview?
My Framer preview fails with crash identifier code-crash:xxx:xxx. Here is my code component: [paste code]. Find the error causing the crash and fix it for Framer's SSR environment.
Frequently asked questions
What causes "Error loading preview" in Framer?
The most common cause is a code component that accesses browser APIs (window, document) outside of useEffect(), crashing during Framer's server-side rendering. Other causes include corrupted project state, overly large assets, and CMS collections that exceed size limits.
How do I find which component is crashing the Framer preview?
Look for a crash identifier in the error (like code-crash:IilknqsQI:TlIGJvk3t). Press CMD+K to open Quick Actions and paste the identifier — Framer will navigate to the problematic component. If no identifier appears, disable code components one by one.
Why does my code component work in React but crash in Framer?
Framer performs server-side rendering where browser APIs like window, document, and navigator do not exist. Code that works in a browser-only React app will crash in Framer if it accesses these APIs outside of useEffect(). Wrap all browser API calls in useEffect().
Can large images crash the Framer preview?
Yes. SVGs above 1 MB cause significant slowdown and can crash the preview. Framer automatically converts and compresses images to WebP, but very large files can still cause issues. Compress images before uploading.
Can RapidDev help fix Framer code component issues?
Yes. RapidDev can debug code components for SSR compatibility, optimize assets, fix CMS performance issues, and resolve custom domain DNS configuration problems for Framer projects.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your issue.
Book a free consultation