Back to Help Center

Troubleshooting: My App is a White Screen

Why your AI-generated app might show up blank and how to fix syntax or import errors.

You pasted your code, hit save, and... nothing. Just a blinding white box.

This usually happens because the code has a syntax error that crashed the renderer before it could paint anything.

Common Causes

1. Missing Imports

If your code says import { Card } from "@/components/ui/card", it will crash. Fix: Ask AI to "Inline all components" or "Use standard HTML/CSS instead of imported usage."

2. Syntax Errors (Unclosed Tags)

Sometimes AI streams get cut off mid-sentence. Fix: Ensure the code ends with </html> or }. If it looks cut off, ask AI to "Continue generating."

3. "Export Default" Missing (React)

React apps need an entry point. Fix: Ensure your main component has export default function App() { ... }.

How to Debug

  1. Right-click on the white preview area.
  2. Select Inspect (or "Inspect Element").
  3. Go to the Console tab.
  4. Look for Red Error Messages.

Error: Module not found: Can't resolve... -> Issue #1 (Imports) SyntaxError: Unexpected token... -> Issue #2 (Syntax)

The "Fix It" Prompt

Copy the error from the console and paste it back to your AI:

"I pasted this code into a browser-only environment and got this error: [Paste Error]. Please fix the code to work without a build step."