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.

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:

Continue learning in the full docs.

Was this page helpful?

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