### Developer Quickstart: Integrate Plasmic into React

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/.md

This guide helps developers integrate Plasmic into an existing React codebase. It covers the initial setup and basic integration steps to start building with Plasmic.

```React
import { PlasmicComponent } from '@plasmicapp/react-web';

function MyApp() {
  return (
    <div>
      <PlasmicComponent component={{ name: 'HomePage' }} />
    </div>
  );
}
```

--------------------------------

### Start Plasmic App

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/gatsby-quickstart/.md

Starts the local development server for your Plasmic-integrated application. Ensure you have the necessary dependencies installed via npm.

```bash
npm run start
```

--------------------------------

### Plasmic Quickstart for React

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Get started with Plasmic by integrating it into your React application. This quickstart provides the necessary steps and guidance for React developers.

```React
https://docs.plasmic.app/learn/react-quickstart/
```

--------------------------------

### Developer Quickstart: Integrate Plasmic into React

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/.md

This guide helps developers integrate Plasmic into an existing React codebase. It covers the initial setup and basic integration steps to start building with Plasmic.

```React
import { PlasmicComponent } from '@plasmicapp/react-web';

function MyApp() {
  return (
    <div>
      <PlasmicComponent component={{ name: 'HomePage' }} />
    </div>
  );
}
```

--------------------------------

### Install Plasmic Angular Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/angular-quickstart/.md

Installs the Plasmic Angular loader package using npm or yarn. Ensure you have Node.js and npm/yarn installed.

```bash
npminstall@plasmicapp/loader-angular
# or yarn add @plasmicapp/loader-angular
```

--------------------------------

### Install Plasmic Vue Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/vue-quickstart/.md

Installs the Plasmic loader for Vue.js applications using npm or yarn.

```bash
npminstall@plasmicapp/loader-vue
# or yarn add @plasmicapp/loader-vue
```

--------------------------------

### Install Plasmic Gatsby Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/gatsby-quickstart/.md

Installs the Plasmic loader for Gatsby using npm or yarn.

```bash
npminstall@plasmicapp/loader-gatsby
# or yarn add @plasmicapp/loader-gatsby
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart-gui/.md

Commands to clone a Plasmic project from GitHub and install its dependencies using npm or yarn.

```bash
git clone git@github.com:<github-username>/<repo-name>.git
cd <repo-name>
npm install
# or
yarn
```

--------------------------------

### Start Local Development Server

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart-gui/.md

Commands to start the development server for Next.js, Gatsby, or React projects generated with Plasmic.

```bash
npm run dev
# or
yarn dev
```

--------------------------------

### Plasmic Canvas Host Setup

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/react-quickstart/.md

Sets up a host page for Plasmic Studio to connect to, enabling live preview and editing of custom components. This involves using `PlasmicCanvasHost` within a React Router setup. The host route (e.g., `/plasmic-host`) should be configured in Plasmic Studio project settings.

```javascript
import * as React from 'react';
import { PlasmicCanvasHost } from '@plasmicapp/loader-react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { PLASMIC } from './plasmic-init';

export default function AppRoot() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Your other routes... */}
        <Route path="/plasmic-host" element={<PlasmicCanvasHost /> } />
      </Routes>
    </BrowserRouter>
  );
}
```

--------------------------------

### Install Plasmic Loader for React

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/remix-quickstart/.md

Installs the Plasmic loader for React applications using npm or yarn.

```bash
npminstall@plasmicapp/loader-react
# or yarn add @plasmicapp/loader-react
```

--------------------------------

### Plasmic Quickstart for Nuxt.js

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Get started with Plasmic in your Nuxt.js applications. This quickstart is for Nuxt.js developers.

```Nuxt
https://docs.plasmic.app/learn/nuxt-quickstart/
```

--------------------------------

### Plasmic REST API Quickstart

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Get started with the Plasmic REST API for programmatic access to Plasmic content.

```REST API
https://docs.plasmic.app/learn/rest-quickstart/
```

--------------------------------

### Install Plasmic React Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/react-quickstart/.md

Installs the Plasmic React loader package using npm or yarn. This package is essential for integrating Plasmic components into your React application.

```bash
npminstall@plasmicapp/loader-react
# or yarn add @plasmicapp/loader-react
```

--------------------------------

### Install Plasmic Loader for Vue

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/nuxt-quickstart/.md

Installs the Plasmic loader library for Vue.js projects using npm or yarn.

```bash
npminstall@plasmicapp/loader-vue
# or yarn add @plasmicapp/loader-vue
```

--------------------------------

### Create a Simple Example React Component

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/hydrogen-quickstart/.md

Defines a basic React component with props for children, className, and verbose output. This component can be registered with Plasmic Studio.

```typescript
import * as React from 'react';

export interface HelloWorldProps {
  children?: React.ReactNode;
  className?: string;
  verbose?: boolean;
}

export function HelloWorld({ children, className, verbose }: HelloWorldProps) {
  return (
    <div className={className} style={{ padding: '20px' }}>
      <p>Hello there!{verbose && ' Really nice to meet you!'}</p>
      <div>{children}</div>
    </div>
  );
}
```

--------------------------------

### Install Plasmic Next.js Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/nextjs-quickstart/.md

Installs the Plasmic Next.js loader package using npm or yarn. This package is essential for integrating Plasmic components into your Next.js application.

```bash
npm install @plasmicapp/loader-nextjs
# or yarn add @plasmicapp/loader-nextjs
```

--------------------------------

### Install Plasmic React Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/hydrogen-quickstart/.md

Installs the Plasmic React loader package using npm or yarn. This package is essential for integrating Plasmic components into a React-based application like Shopify Hydrogen.

```bash
npminstall@plasmicapp/loader-react
# or yarn add @plasmicapp/loader-react
```

--------------------------------

### Initialize Plasmic Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/react-quickstart/.md

Initializes the Plasmic loader with your project ID and public API token. This setup should be done in a dedicated module for global availability. It configures Plasmic to fetch project data.

```typescript
import{initPlasmicLoader}from&quot;@plasmicapp/loader-react&quot;;

exportconstPLASMIC=initPlasmicLoader({
projects:[
{
id:&quot;PROJECTID&quot;,// ID of a project you are using
token:&quot;APITOKEN&quot;// 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,
})
```

--------------------------------

### Plasmic Quickstart for Next.js

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Learn how to integrate Plasmic into your Next.js projects. This guide covers the specific steps for Next.js developers.

```Next
https://docs.plasmic.app/learn/nextjs-quickstart/
```

--------------------------------

### Plasmic Quickstart for Hydrogen

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Discover how to use Plasmic with Hydrogen for Shopify storefronts. This guide is for Hydrogen developers.

```Hydrogen
https://docs.plasmic.app/learn/hydrogen-quickstart/
```

--------------------------------

### Plasmic Canvas Host Setup

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/nextjs-quickstart/.md

Configures the Plasmic Canvas Host for a Next.js application, enabling the visual editing experience within Plasmic Studio. This involves creating a host page that renders the `PlasmicCanvasHost` component.

```typescript
import * as React from 'react';
import {PlasmicCanvasHost} from '@plasmicapp/loader-nextjs';
import {PLASMIC} from '../plasmic-init';

export default function PlasmicHost() {
  return PLASMIC && <PlasmicCanvasHost />;
}
```

--------------------------------

### Initialize Plasmic Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/remix-quickstart/.md

Initializes the Plasmic loader with your project ID and public API token. This setup should be in its own module for global availability.

```typescript
import{
  initPlasmicLoader
}from"@plasmicapp/loader-react";

exportconst 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,
})
```

--------------------------------

### Plasmic No-code Quickstart

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Publish a Plasmic website in a couple of minutes with no coding experience needed.

```No-code
Publish a Plasmic website in a couple minutes.
```

--------------------------------

### Auto Load All Plasmic Pages

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/hydrogen-quickstart/.md

Automatically loads all Plasmic pages using a catch-all route. This example sets up a parameterized route file to handle any page created in Plasmic.

```typescript
import { HydrogenRouteProps } from '@shopify/hydrogen';
import { usePlasmicData } from '../../lib/plasmic';
import { PlasmicClientComponent, PlasmicClientRootProvider } from '../../lib/plasmic-helpers.client';

export default function PlasmicLoaderPage({ params }: HydrogenRouteProps) {
  const { handle } = params;
  // If the url is /pages/hello, then `handle` will be "hello". We convert this into the page path
  // that we used in Plasmic for the corresponding page.
  const data = usePlasmicData([`/${handle}`]);

  if (!data) {
    return your404Page();
  }

  const { plasmicData, queryData } = data;

  return (
    <PlasmicClientRootProvider prefetchedData={plasmicData} prefetchedQueryData={queryData}>
      <PlasmicClientComponent component={plasmicData.entryCompMetas[0].name} />
    </PlasmicClientRootProvider>
  );
}
```

--------------------------------

### Initialize Plasmic Loader in Vue

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/vue-quickstart/.md

Initializes the Plasmic loader with project ID and public API token. This setup should be in its own module for global availability.

```typescript
import{initPlasmicLoader}from"@plasmicapp/loader-vue";

exportconst 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,
})
```

--------------------------------

### Create New Plasmic App

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart-cli/.md

Command to create a new Plasmic project using npx or yarn. It installs the latest version of `create-plasmic-app` and prompts for project setup.

```bash
npx create-plasmic-app@latest
# or
yarn create plasmic-app
cd <your-new-app-name>
```

--------------------------------

### Create Plasmic Host Page

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/hydrogen-quickstart/.md

Sets up a host page for Plasmic Studio, allowing visual editing and interaction with registered components. This page should be accessible at a designated route like /plasmic-host.

```typescript
import { PlasmicClientCanvasHost } from '../lib/plasmic-helpers.client';
import { PLASMIC } from '../plasmic-init';

export default function PlasmicHost() {
  return PLASMIC && <PlasmicClientCanvasHost />;
}
```

--------------------------------

### Plasmic Canvas Host Setup in Gatsby

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/gatsby-quickstart/.md

This code sets up a Gatsby page at the `/plasmic-host` route to serve as the Plasmic Canvas Host. It initializes the Plasmic loader with registered components and renders the `PlasmicCanvasHost` component, enabling visual editing and previewing of Plasmic designs within the Gatsby development environment.

```javascript
import * as React from 'react';
import {PlasmicCanvasHost} from '@plasmicapp/loader-gatsby';
import {initPlasmicLoaderWithRegistrations} from '../plasmic-init';
import {graphql} from 'gatsby';

export const pageQuery = graphql`
  query {
    plasmicOptions
  }
`;

export default function Host({data}) {
  const {plasmicOptions} = data;
  initPlasmicLoaderWithRegistrations(plasmicOptions);
  return <PlasmicCanvasHost />;
}

```

--------------------------------

### Create New Plasmic App

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart-cli.md

Command to create a new Plasmic project using npx or yarn. It installs the latest version of `create-plasmic-app` and prompts for project setup.

```bash
npx create-plasmic-app@latest
# or
yarn create plasmic-app
cd <your-new-app-name>
```

--------------------------------

### Install Plasmic Customizable Components

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/customizable-components-overview/.md

Instructions for installing all Plasmic Customizable Components at once. This involves opening the insertion menu, navigating to Design Systems, and selecting 'Plasmic Customizable Components' to install.

```markdown
1. **Open the insertion menu:**Click the blue plus button on the left side or press “Q” to open the insertion menu. Then, navigate to**Design Systems**.
2. **Install the design system:**Select**Plasmic Customizable Components**from the list of design systems and click to install it.
That’s it! Once Customizable Components are installed, you’ll see its components in your available components list. A dedicated arena will also appear, where you can explore the design system’s overview and features.
![SDS arena](https://docs.plasmic.app/static/5730eec3dc882f43ff7b34bbe0c91e01/267c0/design-systems-arena.png)
```

--------------------------------

### Plasmic Quickstart for Remix

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Integrate Plasmic into your Remix applications. This quickstart provides instructions for Remix developers.

```Remix
https://docs.plasmic.app/learn/remix-quickstart/
```

--------------------------------

### Plasmic CLI Quickstart

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Generate a new Plasmic codebase by running `create-plasmic-app` on your terminal.

```CLI
create-plasmic-app
```

--------------------------------

### Next.js Catch-all Page for Plasmic

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/nextjs-quickstart/.md

This code snippet demonstrates how to create a catch-all page in Next.js to dynamically render Plasmic pages. It includes `getStaticPaths` to fetch all Plasmic page routes and `getStaticProps` to pre-fetch data for each page. The `PlasmicRootProvider` and `PlasmicComponent` are used to render the Plasmic content. This setup allows for automatic rendering of all pages defined in Plasmic.

```typescript
import * as React from 'react';
import {
  PlasmicComponent,
  ComponentRenderData,
  PlasmicRootProvider,
  extractPlasmicQueryData
} from '@plasmicapp/loader-nextjs';
import {GetStaticPaths, GetStaticProps} from 'next';
import Error from 'next/error';
import {useRouter} from 'next/router';
import {PLASMIC} from '../plasmic-init';

/**
 * Use fetchPages() to fetch list of pages that have been created in Plasmic
 */
export const getStaticPaths: GetStaticPaths = async () => {
  const pages = await PLASMIC.fetchPages();
  return {
    paths: pages.map((page) => ({
      params: {catchall: page.path.substring(1).split('/')}
    })),
    fallback: 'blocking'
  };
};

/**
 * For each page, pre-fetch the data we need to render it
 */
export const getStaticProps: GetStaticProps = async (context) => {
  const {catchall} = context.params ?? {};
  // Convert the catchall param into a path string
  const plasmicPath =
    typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? `/${catchall.join('/')}` : '/';
  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);

  if (!plasmicData) {
    // This is some non-Plasmic catch-all page
    return {
      props: {}
    };
  }

  // This is a path that Plasmic knows about.
  const pageMeta = plasmicData.entryCompMetas[0];
  // Cache the necessary data fetched for the page.
  const queryCache = await extractPlasmicQueryData(
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      pageRoute={pageMeta.path}
      pageParams={pageMeta.params}
    >
      <PlasmicComponent component={pageMeta.displayName} />
    </PlasmicRootProvider>
  );

  // Pass the data in as props.
  return {
    props: {plasmicData, queryCache},
    // Using incremental static regeneration, will invalidate this page
    // after 300s (no deploy webhooks needed)
    revalidate: 300
  };
};

/**
 * Actually render the page!
 */
export default function CatchallPage(props: {plasmicData?: ComponentRenderData; queryCache?: Record<string, any>}) {
  const {plasmicData, queryCache} = props;
  const router = useRouter();

  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
    return <Error statusCode={404} />;
  }

  const pageMeta = plasmicData.entryCompMetas[0];

  return (
    // Pass in the data fetched in getStaticProps as prefetchedData
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      prefetchedQueryData={queryCache}
      pageRoute={pageMeta.path}
      pageParams={pageMeta.params}
      pageQuery={router.query}
    >
      {/* pageMeta.displayName contains the name of the component you fetched. */}
      <PlasmicComponent component={pageMeta.displayName} />
    </PlasmicRootProvider>
  );
}

```

--------------------------------

### Setting up Data-Fetching Components in Plasmic Studio

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/data-fetching-components/.md

Instructions on how to install and configure data integration packages within Plasmic Studio. This involves using the 'Insert...' menu to find packages in the Component Store, installing them, and configuring them in Project Settings.

```en
1. Open Plasmic Studio.
2. Click 'Insert...' (Q).
3. Browse or search the Component Store for integration packages.
4. Click a package to install.
5. Configure the package in 'Project Settings'.
```

--------------------------------

### Initialize Plasmic Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/nuxt-quickstart/.md

Initializes the Plasmic loader with project ID and public API token. This setup makes Plasmic available globally within the Nuxt application.

```typescript
import{initPlasmicLoader}from"@plasmicapp/loader-vue";

exportconstPLASMIC=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,
})
```

--------------------------------

### Plasmic Quickstart for JavaScript

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Learn how to use Plasmic with plain JavaScript. This quickstart is for JavaScript developers.

```JavaScript
https://docs.plasmic.app/learn/js-quickstart/
```

--------------------------------

### Install Dependencies

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/minitwitter-tutorial/.md

Installs necessary dependencies for the project, including uuid, moment, react-router-dom, and their corresponding types.

```bash
yarn add uuid moment react-router-dom
yarn add -D @types/uuid @types/react-router-dom @types/react-router
```

--------------------------------

### Plasmic Quickstart for Vue

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Learn how to integrate Plasmic into your Vue.js projects. This guide is designed for Vue developers.

```Vue
https://docs.plasmic.app/learn/vue-quickstart/
```

--------------------------------

### Initialize Plasmic Loader

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/hydrogen-quickstart/.md

Initializes the Plasmic loader with project-specific details, including the project ID and public API token. This setup should be done in a dedicated module for global accessibility. The `preview` option controls whether to fetch the latest or only published revisions.

```typescript
import{initPlasmicLoader}from"@plasmicapp/loader-react";

exportconstPLASMIC=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,
})
```

--------------------------------

### Plasmic In-app Quickstart

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Generate a new Plasmic codebase in GitHub, initiated from Plasmic Studio.

```GUI
Initiated from Plasmic Studio
```

--------------------------------

### Initialize Plasmic Loader in Next.js

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/nextjs-quickstart/.md

Initializes the Plasmic loader with your project ID and public API token. This setup should be done in a dedicated module for global availability. It configures Plasmic to fetch project data, with an option to enable preview mode for unpublished changes.

```typescript
import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";

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,
});
```

--------------------------------

### Render Plasmic Component with PHP

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/php-quickstart/.md

This snippet demonstrates how to use cURL in PHP to fetch HTML content of a Plasmic component via the REST API. It includes placeholders for PROJECTID and COMPONENTNAME, and shows how to pass the API token for authentication. The example fetches the latest revisions with JavaScript hydration enabled.

```PHP
<?php
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, "https://codegen.plasmic.app/api/v1/loader/html/preview/PROJECTID/COMPONENTNAME?hydrate=1&embedHydrate=1");
// Provide the project ID and public API token.
curl_setopt($curl, CURLOPT_HTTPHEADER, array(
    "x-plasmic-api-project-tokens: PROJECTID:APITOKEN"
));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($curl);
curl_close($curl);
$result = json_decode($response);
echo $result->html;
?>
```

--------------------------------

### Create React App with TypeScript

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/minitwitter-tutorial/.md

This snippet shows how to create a new React application with TypeScript using create-react-app. It initializes the project and starts the development server.

```bash
npx create-react-app minitwitter --typescript
cd minitwitter/
yarn start
```

--------------------------------

### Plasmic Quickstart for PHP

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Integrate Plasmic content into your PHP projects. This quickstart is tailored for PHP developers.

```PHP
https://docs.plasmic.app/learn/php-quickstart/
```

--------------------------------

### Render Plasmic Component in AppComponent

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/angular-quickstart/.md

This example demonstrates how to render a Plasmic page or component within an Angular component. It utilizes the `plasmic-root-provider` to supply the Plasmic loader and the `plasmic-component` directive to specify which Plasmic content to render.

```typescript
import { PLASMIC } from './plasmic-init';

@Component({
  selector: 'app-root',
  template:`
<plasmic-root-provider [loader]="loader">
  <<plasmic-component component=""COMPONENT_OR_PAGEROUTE""></plasmic-component>
</plasmic-root-provider>`
})
exportclassAppComponent{
  ...
  loader=PLASMIC;
}
```

--------------------------------

### Render Single Plasmic Page or Component

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/hydrogen-quickstart/.md

Renders a specific Plasmic page or component using the usePlasmicData hook and PlasmicClientComponent. This example shows how to set up a route for a specific Plasmic page.

```typescript
import { usePlasmicData } from '../lib/plasmic';
import { PlasmicClientComponent, PlasmicClientRootProvider } from '../components/plasmic-helpers.client';

// Render the page or component from Plasmic.
export default function MyPage() {
  const { plasmicData, queryData } = usePlasmicData(['COMPONENT_OR_PAGEROUTE']);
  return (
    <PlasmicClientRootProvider prefetchedData={plasmicData} prefetchedQueryData={queryData}>
      <PlasmicClientComponent component="COMPONENT_OR_PAGEROUTE" />
    </PlasmicClientRootProvider>
  );
}
```

--------------------------------

### Initialize Plasmic Loader in Angular

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/angular-quickstart/.md

Initializes the Plasmic loader with your project ID and public API token. This setup should be done in a dedicated module for global availability. You can find your project ID and token in Plasmic Studio.

```typescript
import{initPlasmicLoader}from"@plasmicapp/loader-angular";

exportconstPLASMIC=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,
})
```

--------------------------------

### Render Plasmic Page/Component in Remix

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/remix-quickstart/.md

Fetches Plasmic data server-side using Remix's `loader()` and renders a Plasmic page or component using `PlasmicRootProvider` and `PlasmicComponent`.

```typescript
// 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.
exportasyncfunction loader(){
  // You can pass in multiple page paths or component names.
  const plasmicData=await PLASMIC.fetchComponentData('');
  return json(plasmicData);
}

// Render the page or component from Plasmic.
exportdefaultfunction MyPage(){
  const plasmicData=useLoaderData()as ComponentRenderData;
  return(
    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
      <PlasmicComponent component="" />
    </PlasmicRootProvider>
  );
}
```

--------------------------------

### Auto-load Plasmic Pages in Nuxt

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/nuxt-quickstart/.md

Renders all Plasmic-defined pages automatically at their specified routes using a Nuxt catch-all route. It fetches component data at build time.

```vue
<template>
<PlasmicRootProvider:loader="PLASMIC" :prefetchedData="plasmicData">
<PlasmicComponent:component="$route.fullPath"/>
</PlasmicRootProvider>
</template>

<script setup lang="ts">
import{PlasmicRootProvider,PlasmicComponent}from"@plasmicapp/loader-vue";
import{PLASMIC}from"../plasmic-init";

constroute=useRoute();
constplasmicData=awaitPLASMIC.fetchComponentData(route.fullPath);
</script>
```

--------------------------------

### Plasmic Publishing Configuration

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/no-code-quickstart/.md

This section details the steps and dialogs involved in publishing a Plasmic project using Plasmic hosting. It covers selecting a template, accessing the editor view, initiating the publish process, configuring a custom subdomain, and finalizing the publication.

```APIDOC
Publishing Process:

1. Initiate Publish:
   - Click the 'Publish' button in the top right corner of Plasmic Studio.

2. Select Hosting Option:
   - In the publish dialog, choose 'Plasmic hosting'.

3. Configure Subdomain:
   - A new dialog appears to configure a subdomain.
   - Enter a unique `*.plasmic.run` subdomain.
   - Click 'Save subdomain'.
   - Option to 'Configure' again to edit the subdomain.

4. Finalize Publish:
   - Double-check the configured subdomain.
   - Click 'Publish' to deploy the project.

Outcome:
- The project is published and accessible via the configured subdomain (e.g., `https://your-subdomain.plasmic.run`).
```

--------------------------------

### Plasmic Render API Endpoints

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/php-quickstart/.md

Documentation for Plasmic's REST API endpoints used for rendering components. It details the different routes available for fetching content, including preview, published, and versioned components, and explains the use of query parameters for hydration.

```APIDOC
Plasmic Render API:

Base URL: https://codegen.plasmic.app/api/v1/loader/html

Endpoints:

1. Preview Route:
   - Path: /preview/PROJECTID/COMPONENTNAME
   - Description: Fetches the latest revisions of a component, including unpublished changes.
   - Query Parameters:
     - hydrate (boolean): Enables JavaScript-hydrated interactivity (default: false).
     - embedHydrate (boolean): Enables embedded JavaScript hydration (default: false).
   - Example Usage:
     https://codegen.plasmic.app/api/v1/loader/html/preview/PROJECTID/COMPONENTNAME?hydrate=1&embedHydrate=1

2. Published Route:
   - Path: /published/PROJECTID/COMPONENTNAME
   - Description: Fetches only published versions of a component.
   - Query Parameters: Same as Preview Route.

3. Versioned Route:
   - Path: /versioned/PROJECTID@VERSION/COMPONENTNAME
   - Description: Fetches a specific version of a component.
   - Parameters:
     - PROJECTID: The ID of the Plasmic project.
     - VERSION: The specific version number of the component.
   - Example Usage:
     https://codegen.plasmic.app/api/v1/loader/html/versioned/PROJECTID@1.2.3/COMPONENTNAME

Authentication:
   - Header: x-plasmic-api-project-tokens: PROJECTID:APITOKEN
   - PROJECTID: Your Plasmic project ID.
   - APITOKEN: Your Plasmic public API token.

Response:
   - The API returns a JSON object with an 'html' property containing the rendered component's HTML.
   - Example Response:
     {
       "html": "<html>...</html>"
     }

Notes:
   - To render static content without interactivity, omit the `hydrate` and `embedHydrate` query parameters.
```

--------------------------------

### Install Plasmic CLI

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/minitwitter-tutorial/.md

Installs the Plasmic CLI globally, which is necessary for syncing Plasmic components into your codebase. Supports both yarn and npm.

```bash
yarn global add @plasmicapp/cli
# or: npm install -g @plasmicapp/cli
```

--------------------------------

### Configure Angular Routes for Plasmic Pages

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/angular-quickstart/.md

Sets up a catch-all route in your Angular application's routing module to automatically render Plasmic-defined pages. This requires importing PlasmicModule and defining a CatchAllComponent.

```typescript
import{NgModule}from'@angular/core';
import{BrowserModule}from'@angular/platform-browser';
import{RouterModule,Routes}from'@angular/router';
import{PlasmicModule}from'@plasmicapp/loader-angular';
import{AppComponent}from'./app.component';
import{CatchAllComponent}from'./catch-all.component';

constroutes:Routes=[
/* ... Your other routes here ... */
// Add this route to catch all pages
{
path:''**'',
component:CatchAllComponent
}
];

@NgModule({
// Include the CatchAllComponent in your declarations
declarations:[AppComponent,CatchAllComponent],
imports:[BrowserModule,PlasmicModule,RouterModule.forRoot(routes)],
bootstrap:[AppComponent]
})
exportclassAppModule{}
```

--------------------------------

### Configure Plasmic Host URL

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/gatsby-quickstart/.md

Sets the Plasmic Studio host URL to point to your local development server. This allows Plasmic Studio to communicate with your running application for live preview and editing.

```javascript
http://localhost:3000/plasmic-host
```

--------------------------------

### Install @plasmicapp/auth-api

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/auth-integration/.md

Command to install the @plasmicapp/auth-api package, which is necessary for integrating custom authentication providers with Plasmic.

```bash
npm install @plasmicapp/auth-api
```

--------------------------------

### Auto Load Plasmic Pages with React Router v6

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/react-quickstart/.md

Configures a catch-all route for React Router v6 to automatically render Plasmic pages. It uses `PlasmicRootProvider` and `PlasmicComponent` to load and display Plasmic-generated content based on the current route.

```javascript
import{
initPlasmicLoader,
PlasmicRootProvider,
PageParamsProvider,
PlasmicComponent,
ComponentRenderData
}from&quot;@plasmicapp/loader-react&quot;;
import{BrowserRouterasRouter,Routes,Route,Link,useLocation,useSearchParams}from&quot;react-router-dom&quot;;
import{useEffect,useState}from&quot;react&quot;;
import{PLASMIC}from&quot;./plasmic-init&quot;;

functionAppRoot(){
return(
&lt;PlasmicRootProviderloader={PLASMIC}&gt;
&lt;Router&gt;
&lt;Routes&gt;
&lt;Routepath=&quot;/&quot;element={CatchAllPage()}/&gt;
&lt;/Routes&gt;
&lt;/Router&gt;
&lt;/PlasmicRootProvider&gt;
);
}

// We try loading the Plasmic page for the current route.
// If it doesn&#x27;t exist, then return &quot;Not found.&quot;
exportfunctionCatchAllPage(){
const[loading,setLoading]=useState(true);
const[pageData,setPageData]=useState&lt;ComponentRenderData|null&gt;(null);
constlocation=useLocation();
constsearchParams=useSearchParams();

useEffect(()=&gt;{
asyncfunctionload(){
constpageData=awaitPLASMIC.maybeFetchComponentData(location.pathname);
setPageData(pageData);
setLoading(false);
}
load();
},[]);

if(loading){
return&lt;div&gt;Loading...&lt;/div&gt;;
}
if(!pageData){
return&lt;div&gt;Not found&lt;/div&gt;;
}

// The page will already be cached from the `load` call above.
return(
&lt;PageParamsProviderroute={location.pathname}query={Object.fromEntries(searchParams)}&gt;
&lt;PlasmicComponentcomponent={location.pathname}/&gt;
&lt;/PageParamsProvider&gt;
);
}

```

--------------------------------

### Plasmic Quickstart for Gatsby

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/quickstart/.md

Integrate Plasmic content into your Gatsby site. This quickstart is tailored for Gatsby developers.

```Gatsby
https://docs.plasmic.app/learn/gatsby-quickstart/
```

--------------------------------

### Plasmic Project Configuration

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/hydrogen-quickstart/.md

Configure your Plasmic project to point to your development host URL. This allows Plasmic Studio to connect to your local development server for code component integration. Later, update this to your production host URL for team access.

```APIDOC
Project Configuration:
  plasmicHostUrl: string
    Description: The URL where Plasmic Studio can connect to your application.
    Development: Set to `http://localhost:3000/plasmic-host` during local development.
    Production: Update to your deployed application's Plasmic host route (e.g., `https://my-app.com/plasmic-host`).
    Note: The `/plasmic-host` route is a special hidden route for Plasmic Studio integration.
```

--------------------------------

### Installing a Single Customizable Component

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/customizable-components-overview/.md

This snippet illustrates the process of installing a single customizable component from Plasmic's insertion menu. It involves opening the menu, navigating to the Customizable Components section, and selecting a component to add to the project.

```Plasmic
1. Open the insertion menu: Click the blue plus button on the left side or press “Q” to open the insertion menu.
2. Navigate to Home > Customizable Components section.
3. Select the desired component and click to add it to your project or drag it onto the canvas.
```

--------------------------------

### Server-Side Data Fetching with Plasmic

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/js-quickstart/.md

Illustrates how to enable server-side data fetching for Plasmic components by using the `prepass=1` query parameter. This ensures that data fetched by components (e.g., from a CMS) is prefetched on the server and included in the HTML response. The `maxAge` parameter can be used to control cache duration.

```javascript
const response = await fetch(
  'https://codegen.plasmic.app/api/v1/loader/html/preview/PROJECTID/COMPONENTNAME?hydrate=1&embedHydrate=1&prepass=1&maxAge=600',
  {
    headers: {
      // Your project ID and public API token
      'x-plasmic-api-project-tokens': 'PROJECTID:APITOKEN'
      //You can find your PROJECT token by visiting
      // https://studio.plasmic.app/projects/[PROJECTID]/docs/loader#showToken=true
    }
  }
);
```

--------------------------------

### Plasmic Initialization with Registrations

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/gatsby-quickstart/.md

Initializes the Plasmic loader and provides a function to register code components. This file serves as the central point for Plasmic integration in your Gatsby project.

```typescript
import{initPlasmicLoader}from'@plasmicapp/loader-gatsby';

exportfunctioninitPlasmicLoaderWithRegistrations(plasmicOptions:any){
constPLASMIC=initPlasmicLoader(plasmicOptions);
// Add all your code component registrations here.
returnPLASMIC;
}

```

--------------------------------

### Plasmic CLI Sync Example

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/versioned-sync/.md

Demonstrates the output of the `plasmic sync` command when syncing a project that includes imported dependencies. It shows how Plasmic resolves and syncs components and icons, including handling new or previously synced projects and their dependencies.

```shell
$ plasmic sync --projects 9pr9hBu15oVRTwBRL9Gnwi
'Login Page' uses 'Design System', which has never been synced before. We will also sync 'Design System'@5.0.0.
'Login Page has never been synced before. Syncing...
Syncing component: Button@5.0.0 ['Design System' e3Q1tGtm8oRtjs3qPa4xvQ/1gHPDFIEcK>=0.0.0]
Syncing component: LoginPage@latest ['Login Page' 9pr9hBu15oVRTwBRL9Gnwi/mUenpOOz61 latest]
Syncing icon: TwittersvgIcon@latest ['Login Page' 9pr9hBu15oVRTwBRL9Gnwi/GbOtzqdgr latest]
Syncing icon: PlusIcon@latest ['Login Page' 9pr9hBu15oVRTwBRL9Gnwi/qKb6SKUWQu latest]
Fixing import statements...
```

--------------------------------

### Render Plasmic Component with Javascript

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/js-quickstart/.md

Demonstrates how to fetch and render a Plasmic component's HTML using plain Javascript and the Plasmic REST API. It includes options for enabling hydration for interactive elements. The API endpoint can be switched between '/preview/', '/published/', or '/versioned/' based on the desired revision.

```javascript
const response = await fetch(
  'https://codegen.plasmic.app/api/v1/loader/html/preview/PROJECTID/COMPONENTNAME?hydrate=1&embedHydrate=1',
  {
    headers: {
      // Your project ID and public API token
      'x-plasmic-api-project-tokens': 'PROJECTID:APITOKEN'
      // You can find your PROJECT token by visiting
      // https://studio.plasmic.app/projects/[PROJECTID]/docs/loader#showToken=true
    }
  }
);
const result = await response.json();
document.body.innerHTML = result.html;

// If you want hydration to happen, load and call the hydrater
if (window.__plasmicHydrater) {
  window.__plasmicHydrater.hydrateAll();
} else {
  var script = document.createElement('script');
  script.src = 'https://codegen.plasmic.app/static/js/loader-hydrate.js';
  document.body.appendChild(script);
}
```

--------------------------------

### Google Font Loading Example

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/page-performance/.md

Demonstrates the HTML and CSS required to load Google Fonts, including preconnect links and @font-face declarations. This illustrates the waterfall of fetches involved in loading fonts.

```html
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link
  rel="preconnect"
  href="https://fonts.gstatic.com"
  crossorigin
/>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"/>
```

```css
/* cyrillic-ext */
@font-face{
  font-family: 'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2)format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* cyrillic */
@font-face{
/* ... */
}
```

--------------------------------

### Auto-load Plasmic Pages with Vue Router

Source: https://github.com/gijs-epping/plasmic-docs/blob/main/learn/vue-quickstart/.md

Configures Vue Router to automatically render Plasmic pages based on their routes defined in Plasmic. This involves creating a catch-all route.

```javascript
import{createRouter,createWebHistory}from"vue-router"; // vue-router 4.x
import{PlasmicComponent}from"@plasmicapp/loader-vue";
import{PLASMIC}from"../plasmic-init";

// Create a catch-all route for your specific routing framework
constCatchAllPage={
data(){
return{
loading:true,
pageData:null,
};
},
created(){
this.fetchData();
},
render(){
if(this.loading){
return<div>Loading...</div>;
}
if(!this.pageData){
return<div>Not found</div>;
}
return<PlasmicComponentcomponent={location.pathname}/>;
},
methods:{
asyncfetchData(){
constpageData=awaitPLASMIC.maybeFetchComponentData(location.pathname);
this.pageData=pageData;
this.loading=false;
},
},
};

constroutes=[
/* ... Your other routes here ... */
// Add this route to catch all pages
{
path:""/:pathMatch(.*)*",
component:CatchAllPage,
},
];

constrouter=createRouter({
history:createWebHistory(),
routes,
})
exportdefaultrouter;
```