This project's public API token: APITOKEN
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
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.
import { initPlasmicLoader } from "@plasmicapp/loader-react";export const PLASMIC = initPlasmicLoader({projects: [{id: "PROJECTID", // ID of a project you are usingtoken: "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
.
// This page will show up at the route /mypageimport {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.