Common Issues & Solutions
1. Canvas Shows a Blank Screen or Refuses to Connect
If your target URL fails to render inside the review canvas:
- Check Server Status: Verify that your local development server or staging site is active and accessible in another browser tab.
- Protocol Mismatch: If using HTTPS for your review organization, ensure your target staging domain also supports valid SSL certificates.
- Strict Content Security Policy (CSP): If your web server blocks embedding via frame restrictions (
frame-ancestors 'none'), configure your staging environment headers to permit preview framing for UIDesigner.
2. Custom Web Fonts Do Not Display Correctly
If fonts fall back to system defaults inside the review canvas:
- Ensure your
@font-facedeclarations includefont-display: swap;. - If loading web fonts from Google Fonts or Adobe Typekit, ensure your target domain allows font asset fetching across origins.
3. Review Pins Shift After a Deployment
UIDesigner anchors pins to unique DOM CSS selectors and relative coordinates. If a pin appears marked as Unanchored:
- The underlying HTML element may have been removed, renamed, or refactored with new class selectors.
- Click the unanchored pin badge in the comments sidebar to view the original element snapshot and re-attach it to its new location on the page.
4. Reviewing Local Development Servers (`localhost`)
To review websites running on http://localhost:3000 or private internal networks:
- Ensure the local server is actively running on your machine.
- Open UIDesigner in the same local browser session so your browser can resolve loopback addresses directly.