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 (warning: advanced)? Learn about codegen.

Note: If you’re deploying to Shopify Oxygen, then you’ll need to use codegen—see build-time codegen and this example repo.

Installation

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

If you’re using Remix with Vite, you’ll need to add the following to your vite.config.js to ensure the Plasmic modules work during SSR:

Copy
import { defineConfig } from 'vite';


export default defineConfig({
  plugins: [
    // ...
  ],
  ssr: {
    noExternal: [
      '@plasmicapp/data-sources-context',
      '@plasmicapp/loader-core',
      '@plasmicapp/loader-fetcher',
      '@plasmicapp/loader-react',
      '@plasmicapp/loader-splits',
      '@plasmicapp/prepass',
      '@plasmicapp/query'
    ]
  }
});

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.

Copy
// This page will show up at the route /mypage


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


// Fetch the data needed to render Plasmic pages or components, server-side.
export async function loader() {
  // 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() as ComponentRenderData;
  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.