Plasmic for content management

How is Plasmic used for content management?

Plasmic as a page builder and “visual CMS” is a common use case. Editors can create and update content in Plasmic without code, and publish this into their production site without needing to block on developers.

The goal is to empower and unblock non-developers such as marketers and designers, while freeing up developers from pixel-pushing. Teams can thus move faster, iterate more, and ship higher quality products.

Central to this use case is the content creator role, who use Plasmic in a streamlined and simplified mode. Content management as a use case inherently bridges workflows across a number of roles:

• Developer: Integrates Plasmic into the codebase. Optionally registers components from the codebase to use as building blocks for the other roles to use within the visual editor.
• Designer: Sometimes, a designer creates the pages and components in Plasmic. They set the design—color, spacing, typography, interactions, etc.
• Content creator: Typically in marketing. They are focused on the content. They often are in a restricted content creator mode that prevents arbitrary free-form design and limits them to using the existing components provided by developers/designers. But with these building blocks, they can still build full pages from scratch—they aren’t limited to only editing text and images.

Who would be using Plasmic Studio?

Most commonly, marketers and designers use Plasmic Studio. Teams adopt Plasmic in order to empower non-developers to help themselves to content changes.

Developers set up one-time integration and provide code components as building blocks. After this, non-developers can independently publish content changes.

Use cases and adoption

Mostly-static page content is the most common starting point.

You can start with a single landing page, or a promotional section to be inserted into some other (existing) page in your site/app.

Simply build the content in Plasmic, using it as a page builder. Use the Headless API to integrate into your website’s codebase, and you’re done.

From now on, editors can directly publish changes or new content.

What does “mostly static” mean?

It means that the page you’re creating contains mostly “fixed content.”

Examples of static content:

• A targeted landing page featuring hero images, marketing copy, seasonal collections, and a call-to-action button.
• A landing page for a particular customer segment that shows hero images, marketing copy, seasonal product collections, and a call-to-action button.
• A section of your conversion page that reinforces your value proposition and showcases some testimonials.
• A section within your product’s user dashboard promoting plan upgrades or highlighting recent product updates.
• A section of your product’s logged-in dashboard that offers a discount for upgrading plans or some recently launched product updates.

Examples of dynamic content:

• An interactive product listings page that lets users browse categories, apply filters, and search.
• An admin dashboard displaying various metrics and graphs that users can customize.
• A shopping cart UI that lets users edit quantity, remove products, and save items for later.
• Interactive design system components like dropdowns, accordions, and similar elements.

This is a spectrum and not a black-and-white distinction—landing pages often do have interactive elements on them, for instance. Plasmic lets you build across this spectrum.

And even if the content you’re creating is mostly static, it can be dropped in anywhere, including interactive parts of your app codebase. For instance, a promotional section could be embedded into your dynamic checkout flow or admin dashboard.

Note that Plasmic has been used to build all of the dynamic content examples above, but this is a more advanced use case. See the below section on building apps.

What is the workflow to get started?

As soon as a Plasmic project is created, developers can render pages and components from it into a codebase, typically via the Headless API.

Thereafter, non-developers can publish changes to Plasmic content (components and pages) without involving developers. You can set up webhooks to trigger your build/deployment pipeline.

Concretely:

Step 1. Install Plasmic into your codebase (exact package [depends on your framework][quickstart]).

npm install @plasmicapp/loader-nextjs

Step 2 (optional). Make components from your app or design system available for drag-and-drop in the visual editor:

// Take any component from your app or design system...
export default function HeroSection({ children }) {
  return <div className="hero-section">{children}</div>;
}

// ...and make it available for drag-and-drop, along with any props you want to
// expose.
PLASMIC.registerComponent(HeroSection, {
  props: {
    children: 'slot'
  }
});

Step 3. Add placeholders that render pages/components made in the visual editor anywhere in your app:

// pages/index.tsx

import { PlasmicRootProvider, PlasmicComponent } from '@plasmicapp/loader-nextjs';
import { PLASMIC } from '../plasmic-init';

// Here we fetch dynamically on the client, to keep the example compact, but you
// can also fetch and render components server-side in SSG/SSR frameworks, such
// as via getStaticProps in Next.js.
export default function IndexPage() {
  return (
    <PlasmicRootProvider plasmic={PLASMIC}>
      <PlasmicComponent component="Summer22LandingPage" />
    </PlasmicRootProvider>
  );
}

Step 4. Non-developers (or developers!) can now create new pages, sections, or components.

Step 5. When they hit Publish, changes get picked up via webhooks that trigger rebuilds, or other mechanisms such as incremental static revalidation or dynamic fetching from the Plasmic CDN.

Content creator mode

Plasmic’s content creator mode is an important facet of Plasmic for content management.

The Plasmic editor—called Plasmic Studio—is a powerful and flexible no-code web design tool, letting you create arbitrary layouts and designs and interactions, entirely from scratch and without code.

However, this level of power may not be appropriate for all collaborators on your team. For instance, while it may be appropriate for a web designer on the team, the marketing department should be able to focus instead on just the content and not layout, typography, spacing, etc.

Or, you may even wish to opt out of freeform creation altogether. For instance, all designs should be components in your codebase.

You can make specific users on your team “content creator roles,” which will put them into “content creator mode.” In this mode, they will (by default) be restricted to only using your components (either those created in Plasmic or from your codebase). This gives them a simpler and more streamlined editing experience that also ensures control, consistency and brand adherence across the site. Learn more about content creator mode.

Additional customizations

On Growth+ plans, you can further customize Plasmic in the following ways:

• Customize the set of page templates available.
• Customize the set of insertable section templates available.
• Enable certain built-in components be inserted.
• Enable sections of the Design tab.

Plasmic vs Plasmic CMS

Plasmic is a visual page builder. It is used to manage content on websites that are built in code. You can use it to lay out and design pages, optionally using your own code components as building blocks.

Plasmic also has a built-in structured content platform, Plasmic CMS. This is appropriate for anything that involves uniformly structured data that you want to keep separate from the layout. For instance, you would build a bespoke landing page in the Plasmic page builder, but you would manage your blog posts or your product catalog in the Plasmic CMS.

Plasmic is unopinionated about where your structured data comes from, however, and we partner with a number of great CMS vendors to make it easy to create no-code sites powered by those CMSes. You can also pull data from databases, platforms like Airtable and Shopify, and other APIs.

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