PlasmicLoader overview

PlasmicLoader lets you load pages and components at build-time into your Next.js and Gatsby applications, without actually needing to store code into your repo/version history. This enables the same workflow as a content management system—non-developers can freely iterate and publish pages and other content directly from Plasmic Studio, without needing to involve developers or commit changes into the codebase. Simply initiating a new build of your website is sufficient to see your content go live.

PlasmicLoader is currently available for Next.js and Gatsby codebases.

Getting started

To get started using PlasmicLoader, see the point-and-click quickstart or the manual quickstart.

In short, you simply install @plasmicapp/loader and add a plugin snippet to your next.config.js or your gatsby-config.js. See the plugin configuration reference.

PlasmicLoader guide

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, see how to create a simple wrapper file for the page.

Besides pages, to render a component somewhere in your app, use the <PlasmicLoader component="ComponentName" /> component. See the PlasmicLoader component API guide.

In addition to components, you can consume various different types of assets from your designs:

Plasmic also supports generating style tokens through the codegen CLI.