This project's public API token: APITOKEN

Copy

Overview

This covers integrating Plasmic into your existing Remix codebase.

Want to generate source code into your codebase? Learn about codegen.

Installation

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

Initialization

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

app/plasmic-init.ts
Copy
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 ID and public API token: open the project in Plasmic Studio.

The project ID is in the URL, like: https://studio.plasmic.app/projects/PROJECTID.

The public API token can be found by clicking the Code toolbar button.

Render a single Plasmic page or component

We use Remix’s loader() to fetch the design server-side.

For example, to render a page: add a file under app/routes/, named for your desired route, with the following code.

COMPONENT_OR_PAGEROUTE refers to the name of the page or component that you want to render, such as Winter22LandingPage. If it’s a page, you can also use the route you assigned the page in Plasmic, like /landing.

app/routes/mypage.tsx
Copy
// This page will show up at the route /mypage


import {
  initPlasmicLoader,
  PlasmicRootProvider,
  PlasmicComponent,
  ComponentRenderData
} from '@plasmicapp/loader-react';
import { PLASMIC } from '../plasmic-init';
import { useLoaderData } from '@remix-run/react';
import { json } from '@remix-run/node';


// Fetch the data needed to render Plasmic pages or components, server-side.
export const loader = async () => {
  // You can pass in multiple page paths or component names.
  const plasmicData = await PLASMIC.fetchComponentData('COMPONENT_OR_PAGEROUTE');
  return json(plasmicData);
};


// Render the page or component from Plasmic.
export default function MyPage() {
  const plasmicData = useLoaderData();
  return (
    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
      <PlasmicComponent component="COMPONENT_OR_PAGEROUTE" />
    </PlasmicRootProvider>
  );
}

You can check out a complete working example repo as well.

There’s much more to explore!

For example:

  • Explore what you can do with code components.
  • Render different variants of your pages/components.
  • Override the content or props in your design.
  • Add hooks for state and behavior to any component.
  • (Advanced) Use Plasmic as a UI builder for developers.

Continue learning in the full docs.