Visual editor failing to load

Issues
1

Hey folks, new to plasmic here and loving it, but having trouble getting the visual editor to load. I’m still working in localhost dev environment and here’s what happens:

When opening the project, it jumps right live view of my home page with no way to get to the visual editor. After a few seconds, a message in browser window “Looks like the host app is taking a while to load”.

I’ve clear cache, restarted dev server, tried multiple browsers, etc. to no avail. I also tried replacing home page.tsx with simple html so see if something on the page was hanging things up… but still no luck.

Any suggestions for getting past this hiccup are much appreciated.

Relevant links:

2

Most likely you set the wrong URL as the app host. The correct URL to set should look like this when you visit: https://www.plasmic.app/host

You can change the URL in one of these ways:

  1. In the your dashboard, find the project you’re trying to open, click the 3 dots menu, and click “Configure project”.
  2. When you see the “host app is taking a while to load”, click the link to change the URL.
3

Thanks, but my url is set correctly and has been working all along (http://localhost:3000/plasmic-host).

Could this issue be related to my account having transitioned from trial to free tier? The editor loads content just fine but won’t enter edit mode.

Do I need new project tokens? If so, I can’t access the project settings to get them.

Thanks again

4

The editor loads content just fine but won’t enter edit mode.

I’m not sure I understand what you mean when you say "won’t enter edit mode

Do I need new project tokens? If so, I can’t access the project settings to get them.

I’m also unsure what you mean here.

May be a video recording would help clarify the issue.

5

Sure, here’s a screencast:

Before, when I clicked on the project in studio, it would open in the visual editor, now it just loads the page in live view.

6

I saw that the URLs are getting /editor appended to it. Is it possible your app host is changing the URL somehow?

7

Hi Jason, that was me appending /editor to the end of the url manually to see if it would change anything. By default, when I open the project “/editor” is not appended. Thanks for the time looking at this.

I tried troubleshooting using Claude and it seems to think it may be an internal authentication issue that may related to trial-to-free tier conversion and/or expired project tokens.

Any other ideas for what I can try?

8

Was it intentional to add test content in plasmic-host/page.tsx? Because that’s what’s displayed when custom app host is set. Here’s how your plasmic-host/page.tsx should look like for Next.js app router (or you can check detailed docs here)

import * as React from 'react';
import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
import { PLASMIC } from '../plasmic-init';

export default function PlasmicHost() {
  return PLASMIC && <PlasmicCanvasHost />;
}
9

Thanks for the reply!

Yes, it was intentional. During troubleshooting, I temporarily modified the plasmic-host/page.tsx file and commented out component registrations in plasmic-init.ts to isolate whether component registration conflicts were causing the editor loading issue. This approach confirmed for me that component registration wasn’t the root cause.

I’ve now reverted to the recommended configuration:

  • plasmic-host/page.tsx uses your exact code structure
  • Component registrations are active in plasmic-init.ts
  • Host URL validates correctly at localhost:3000/plasmic-host

But the core issue persists: The editor loads my project content successfully but remains in preview mode without transitioning to the editing interface. No editing tools or controls are visible.

Could this be a project-specific authentication issue? The other test project in my account loads the editor normally. The problem began after my trial expired and the account transitioned to free tier, which is why I thought the project tokens may need to be refreshed or reset.

Is Plasmic able to check the authentication status for project ID “pSzwzcjAYS5JgXTnN3AwV5”?

10

Sorry, I still don’t get this part. Please share a screen recording that demonstrates this specific issue.

11

Here’s another screencast from my workspace that shows how the plasmic editor loads ok when opening the test project but doesn’t load when opening the main project.

But I found and fixed the issue, which indeed was a URL issue!

The site uses internationalization, so the plasmic-host page is nested under the [locale] route structure at app/[locale]/plasmic-host/page.tsx'. I had configured Plasmic to connect to localhost:3000/plasmic-hostinstead oflocalhost:3000/en/plasmic-host`. What threw me off was that the page content was still loading fine (because of middleware re-direction). The editor just wasn’t able to establish the proper connection because of the URL mismatch.

All good now. Thank you again for the time looking at this.