Get started with plain React


This covers integrating Plasmic into your existing React codebase in three steps.

Want to generate a new codebase with Plasmic already integrated? Follow this quickstart instead!


npm install @plasmicapp/loader-react
# or yarn add @plasmicapp/loader-react


Initialize Plasmic with the project ID and public API token. Define this in its own module to make it available globally.

import { initPlasmicLoader } from "@plasmicapp/loader-react";
export const PLASMIC = initPlasmicLoader({
projects: [
id: "PROJECTID", // ID of a project you are using
token: "APITOKEN" // API token for that project
// Fetches the latest revisions, whether or not they were unpublished!
// Disable for production to ensure you render only published changes.
preview: true,

To find your project’s public API token: open the project in Plasmic Studio, and click the Code toolbar button.

Render a single Plasmic page or component

For client-rendered or single-page apps, we fetch components dynamically at runtime. (These are cached for the lifetime of the application.)

import { PlasmicRootProvider, PlasmicComponent } from '@plasmicapp/loader-react';
import { PLASMIC } from './plasmic-init';
function MyComponent() {
return (
<PlasmicRootProvider loader={PLASMIC}>
<PlasmicComponent component="COMPONENTNAME" />

Auto load all Plasmic pages

To automatically render all Plasmic-defined pages at the routes specified in Plasmic, create a catch-all route for your specific routing framework.

Here is an example for react-router:

import { initPlasmicLoader, PlasmicRootProvider, PlasmicComponent, ComponentRenderData } from '@plasmicapp/loader-react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { PLASMIC } from './plasmic-init';
function AppRoot() {
return (
<PlasmicRootProvider loader={PLASMIC}>
{/* Your other routes... */}
<Route component={CatchAllPage} />
// We try loading the Plasmic page for the current route.
// If it doesn't exist, then return "Not found."
export function CatchAllPage() {
const [loading, setLoading] = useState(true);
const [pageData, setPageData] = useState<ComponentRenderData | null>(null);
useEffect(() => {
async function load() {
const pageData = await PLASMIC.maybeFetchComponentData(location.pathname);
}, []);
if (loading) {
return <div>Loading...</div>;
if (!pageData) {
return <div>Not found</div>;
// The page will already be cached from the `load` call above.
return <PlasmicComponent component={location.pathname} />;

There’s much more to explore!

  • Bring your own React components into Plasmic.
  • Perform server-side rendering.
  • Render different variants.
  • Override the content or props.
  • Add dynamic behavior.
Continue learning in the docs.