Get started with Remix

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 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 public API token: open the project in Plasmic Studio, and click the Code toolbar button.

Render a single Plasmic page or component

Note: You can auto-load all Plasmic pages at the correct routes (recommended) rather than manually loading individual pages—see next section.

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.

PATH_OR_COMPONENT 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, json } from 'remix';

// 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('PATH_OR_COMPONENT');
  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="PATH_OR_COMPONENT" />
    </PlasmicRootProvider>
  );
}

There’s much more to explore!

For example:

Continue learning in the full docs.

Give feedback on this page