Headless API overview

The “Headless” API 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. It gets its name because it lets you use Plasmic as a headless CMS, but one with a free-form, no-code visual editor.

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.

The Headless API is currently available for Next.js and Gatsby codebases. The Headless API is named “PlasmicLoader,” and the terms are used interchangeably throughout the docs.

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.

Was this page helpful?

Have feedback on this page? Let us know on our forum.