PlasmicLoader guide: pages

By default, once you have set up PlasmicLoader in your Next.js or Gatsby configuration, then any pages you create in your Plasmic project will automatically show up in your built site at the associated routes. No further code changes are needed. (Existing pages at conflicting routes take precedence; Plasmic projects never clobber what’s already in your codebase.)

If you would like to attach code to a page, such as attaching props (data, event handlers) or replacing elements or invoking hooks, you can create a page file at the corresponding route, and render the Plasmic page from there. This effectively creates a wrapper around the Plasmic-rendered page.

For instance, let’s say you created a Plasmic page called “Enterprise Landing Page” at the route /landing/enterprise.

Add a file for the page at the following path:

And insert this code:

Copy
import * as React from 'react';
import PlasmicLoader from '@plasmicapp/loader';
export default function PageComponent() {
return <PlasmicLoader component="Enterprise Landing Page" />;
}

This works because whenever there is both a Plasmic page and a file in your codebase that exist at the same route, your code takes precedence; Plasmic will never clobber what’s in your code.

Now you can add arbitrary other code to this. Learn more about the PlasmicLoader component API. The following example shows how to fetch some data, render it into a slot, and attach an event handler to a contact form submit button:

Give feedback on this page