Get started with the Model Renderer

You must first create a project in Plasmic.

To view this quickstart with all the IDs and token placeholders replaced with real values, open your project in Plasmic Studio and press the “Code” button in the top toolbar.

Overview

This covers integrating Plasmic into your existing React codebase by using the Model Renderer.

This is powered by the Model API, which loads the raw JSON representation of the Plasmic project (rather than generated code).

This is offered as an alternative to build-time codegen for users who are using platforms such as Shopify Oxygen, Vercel Edge, and other Cloudflare-based edge runtimes.

The following example shows how to load the data and render it in a Remix app.

Installation

Copy

npm install @plasmicapp/loader-react @plasmicapp/model-renderer-react
# or yarn add @plasmicapp/loader-react @plasmicapp/model-renderer-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

Copy

import { json, type LoaderArgs } from '@shopify/remix-oxygen';
import { useLoaderData } from '@remix-run/react';
import { loadModelData, PlasmicModelRenderer } from '@plasmicapp/model-renderer-react';
import { PLASMIC } from '~/plasmic-init';

export async function loader({ params, context }: LoaderArgs) {
  const repr = await loadModelData({
    projectId: 'PROJECTID',
    projectApiToken: 'APITOKEN',
    component: 'COMPONENTNAME',
    preview: true
  });

  return json({
    repr
  });
}

export default function Homepage() {
  const { repr } = useLoaderData<typeof loader>();

  return (
    <PlasmicModelRenderer
      repr={repr}
      loader={PLASMIC}
      componentName={'COMPONENTNAME'}
      componentProps={{}}
      globalVariants={{ experiment: 'override' }}
    />
  );
}

Was this page helpful?

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