Get started with Remix
You must first create a project in Plasmic.
Overview
This covers integrating Plasmic into your existing Remix codebase.
Want to generate source code into your codebase? Learn about codegen.
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 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
.
// 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 } 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.
- Use Plasmic as a UI builder for creating full apps.
Continue learning in the full docs.