<p>
  </a>
</p>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/package/@plasmicapp/loader-react"></a>
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-quick-links" class="anchor" aria-hidden="true" href="#quick-links"></a>Quick links
</h2>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/">Website</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/learn/">Documentation</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/learn/quickstart/">Quickstart</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/slack">Slack Community</a>
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-how-it-works" class="anchor" aria-hidden="true" href="#how-it-works"></a>How it works
</h2>

<p>
  <strong>Step 1.</strong> Install Plasmic into your codebase (exact package <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/learn/quickstart/">depends on your framework</a>).
</p>

<pre class="notranslate"><code>npm install @plasmicapp/loader-nextjs

<p>
  <strong>Step 2 (optional).</strong> Make components from your app or design system available for drag-and-drop in the visual editor:
</p>

<pre>// Take any component from your app or design system...

export default function HeroSection({ children }) { return <div className=“hero-section”>{children}</div>; }

// …and make it available for drag-and-drop, along with any props you want to // expose. PLASMIC.registerComponent(HeroSection, { props: { children: “slot”, }, });

<p>
  <strong>Step 3.</strong> Add placeholders that render pages/components made in the visual editor anywhere in your app:
</p>

<pre>// pages/index.tsx

import { PlasmicRootProvider, PlasmicComponent, } from “@plasmicapp/loader-nextjs”; import { PLASMIC } from “../plasmic-init”;

// Here we fetch dynamically on the client, but you can also fetch and render // components server-side in SSG/SSR frameworks, such as via getStaticProps // in Next.js. export default function IndexPage() { return ( <PlasmicRootProvider plasmic={PLASMIC}> <PlasmicComponent component=“Summer22LandingPage” /> </PlasmicRootProvider> ); }

<p>
  <strong>Step 4.</strong> Non-developers (or developers!) can now create new pages, sections, or components that ship directly into the app/website.<br /> <strong>Step 5.</strong> When you hit Publish, changes get picked up via webhooks that trigger rebuilds,<br /> or more specific mechanisms such as incremental static revalidation or dynamic fetching from the Plasmic CDN.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-overview" class="anchor" aria-hidden="true" href="#overview"></a>Overview
</h2>

<p>
  Plasmic is a platform that contains a few things:
</p>

<ul dir="auto">
  <li>
    Visual builder / web design tool&#8211;<strong>this is the heart of Plasmic</strong>
  </li>
  <li>
    Headless CMS for structured content (or bring your own CMS)
  </li>
  <li>
    Growth optimization tools (A/B testing, personalization, analytics)
  </li>
</ul>

<p>
  Plasmic&#8217;s main feature is its visual builder for the web.<br /> Developers integrate this into their codebase,<br /> and anyone (including non-developers) can build pages or parts of pages.<br /> The goal is to empower and unblock non-developers such as marketers and designers, while freeing up developers from pixel-pushing content, thus letting the whole team move faster.<br /> Plasmic as a page builder and “visual CMS” is its simplest and most common use case. Editors can create and update content in Plasmic without code, and publish this into their production site without needing to block on developers.<br /> A key capability is that <strong>Plasmic lets you drag and drop your own components</strong>.<br /> There are multiple ways to use Plasmic&#8211;editors can:
</p>

<ul dir="auto">
  <li>
    Design and build from scratch entirely in the visual tool, as a freeform page builder. No developer code needed.
  </li>
  <li>
    Exclusively use existing components as building blocks (this can be enforced). This ensures consistency and makes editing easier for non-designer/non-developers.
  </li>
  <li>
    Anything in between.
  </li>
</ul>

<p>
  Beyond website content, Plasmic can even be used to create frontends for complex web applications (such as Plasmic itself, which was built in Plasmic).<br /> This is a more advanced use case.<br /> Learn more on <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app">our website</a> and <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/learn/">our docs</a>. Or check out <a rel="nofollow noopener" target="_blank" href="https://docs.plasmic.app/learn/comparisons/">comparisons of Plasmic vs other tools</a>.<br /> Or check out our <a rel="nofollow noopener" target="_blank" href="https://www.youtube.com/watch?v=fhEwNlzzobE">Next.js-based talk and demo at Next.js Conf 2021</a>:<br /> <a rel="nofollow noopener" target="_blank" href="https://www.youtube.com/watch?v=fhEwNlzzobE"></a>
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-get-help-and-join-our-community" class="anchor" aria-hidden="true" href="#get-help-and-join-our-community"></a>Get help and join our community
</h2>

<p>
  Connect with the Plasmic team and with other Plasmic users on the <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/slack">Plasmic Community Slack</a>.
</p>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-features" class="anchor" aria-hidden="true" href="#features"></a>Features
</h2>

<p>
  A smattering of interesting highlights about Plasmic:
</p>

<ul dir="auto">
  <li>
    <strong>Drag/drop and visually manipulate your own React components</strong>, and seamlessly nest design elements within your React components (using slots).
  </li>
  <li>
    <strong>Import designs from Figma</strong>, translating its proprietary vector document format into DOM/CSS.
  </li>
  <li>
    <strong>Scalable component system</strong> with slots/props, variants (that can be combined), and style mixins/tokens.
  </li>
  <li>
    <strong>High-performance and high-quality codegen</strong>. Supports static site generation, automatic image optimization, layout shift reduction, and more.
  </li>
  <li>
    <strong>Design fully functional and accessible design system components</strong>. For designers, you can craft completely bespoke, complex design system components like dropdowns, and we wire it up to <a rel="nofollow noopener" target="_blank" href="https://react-spectrum.adobe.com/react-aria/">react-aria</a>. Most component libraries give you variables to tweak, but here you can completely change the structure and layout of these components.
  </li>
  <li>
    <strong>Versatility in use cases</strong>. Use it as a page builder to create simple static content like marketing/landing pages and promotional sections, or use it as a development tool for visually building complex, stateful React UIs.
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-users-of-plasmic" class="anchor" aria-hidden="true" href="#users-of-plasmic"></a>Users of Plasmic
</h2>

<p>
  Plasmic is used by companies ranging from Fortune 500s to boutique brands to solo makers.<br /> It&#8217;s used for websites ranging from headless commerce storefronts to marketing websites to logged-in app content.<br /> Check out the <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/casestudies">Case Studies and Community Showcase</a>.
</p>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/casestudies"></p> 
  
  <p>
    </a>
  </p>
  
  <p>
    <a rel="nofollow noopener" target="_blank" href="https://www.plasmic.app/casestudies"></p> 
    
    <p>
      </a>
    </p>
    
    <h2 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-technical-overview" class="anchor" aria-hidden="true" href="#technical-overview"></a>Technical overview
    </h2>
    
    <p>
      (Read <a rel="nofollow noopener" target="_blank" href="https://docs.plasmic.app/learn/technical-overview/">the full technical overview</a>.)<br /> The main way to integrate Plasmic into a codebase is via the Headless API.<br /> The Headless API lets developers fetch and render into your existing codebase, without touching your code base besides the initial setup.<br /> This allows your Plasmic users to build designs and pages, and publish directly to production, without involving the development team.<br /> You can think of Plasmic as a CMS, but where editors get to edit HTML/CSS rather than JSON data.<br /> Developers then just render the content as-is.<br /> Plasmic does not host your site;<br /> your site continues to run on your existing infrastructure and tech stack.<br /> For static site generators and server-rendered pages,<br /> Plasmic content is loaded at build-time or server-side and thus pre-rendered,<br /> optimizing page load performance.<br /> For other sites that fetch and render client-side,<br /> Plasmic content is loaded from the AWS Cloudfront CDN.<br /> New pages can automatically just show up.<br /> The codebase integration can be configured such that<br /> as users create pages and routes in Plasmic Studio,<br /> they will be auto-loaded into your app without developer involvement.
    </p>
    
    <h3 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-bring-your-own-react-components" class="anchor" aria-hidden="true" href="#bring-your-own-react-components"></a>Bring your own React components
    </h3>
    
    <p>
      You can register your own arbitrary custom React components for use as building blocks within Plasmic Studio.<br /> <a rel="nofollow noopener" target="_blank" href="https://code-components.plasmic.site">Learn more about code components</a>.
    </p>
    
    <h3 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-codegen" class="anchor" aria-hidden="true" href="#codegen"></a>Codegen
    </h3>
    
    <p>
      Besides the Headless API, you can also <a rel="nofollow noopener" target="_blank" href="https://docs.plasmic.app/learn/codegen-guide">generate React code</a> into your codebase.<br /> This is a powerful way to use Plasmic as a UI builder for creating rich interactive web applications—one example of this is Plasmic Studio itself.<br /> See the <a rel="nofollow noopener" target="_blank" href="https://docs.plasmic.app/learn/minitwitter-tutorial">application development tutorials</a> to learn more.
    </p>
    
    <h2 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-contributing" class="anchor" aria-hidden="true" href="#contributing"></a>Contributing
    </h2>
    
    <p>
      This repo contains the code for all Plasmic component store packages (<code>@plasmicpkgs/*</code>), client libraries/SDKs (<code>@plasmicapp/*</code>), and examples (under the <code>examples/</code> dir).<br /> (For hacking on code components or <code>plasmicpkgs</code>, see specific additional instructions further down.)<br /> We use <code>lerna</code> to help us manage dependencies among all the packages.<br /> In general, we follow the &#8220;fork-and-pull&#8221; Git workflow.
    </p>
    
    <ol dir="auto">
      <li>
        Fork the repo on GitHub
      </li>
      <li>
        Clone the project to your own machine
      </li>
      <li>
        Commit changes to your own branch
      </li>
      <li>
        Push your work back up to your fork
      </li>
      <li>
        Submit a Pull request so that we can review your changes
      </li>
    </ol>
    
    <p>
      NOTE: Be sure to merge the latest from &#8220;upstream&#8221; before making a pull request!
    </p>
    
    <h3 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-getting-started" class="anchor" aria-hidden="true" href="#getting-started"></a>Getting started
    </h3>
    
    <pre class="notranslate"><code>yarn lerna bootstrap  # inter-links all the lerna-managed packages together

    <p>
      We also make use of <a rel="nofollow noopener" target="_blank" href="https://verdaccio.org/">Verdaccio</a> to locally test packages. This just stands up a local npm registry that you can publish your test packages to.
    </p>
    
    <pre class="notranslate"><code>yarn global add verdaccio

verdaccio & # Runs the verdaccio server at http://localhost:4873

    <p>
      You&#8217;ll need to update the verdaccio config file, at <code>~/.config/verdaccio/config.yaml</code>, to instruct verdaccio to not use npmjs for our test packages:
    </p>
    
    <pre class="notranslate"><code>packages:

‘@plasmicapp/’: access: $all publish: $all unpublish: $all ‘@plasmicpkgs/’: access: $all publish: $all unpublish: $all

    <p>
      Then kill and restart the verdaccio server:
    </p>
    
    <pre class="notranslate"><code>verdaccio &

    <p>
      Finally, in order to publish, you may be required to have a user login.<br /> Create this one-time in your Verdaccio&#8211;it doesn&#8217;t matter what user/password/email you input:
    </p>
    
    <pre class="notranslate"><code>npm --registry=http://localhost:4873 adduser

    <h3 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-development-workflow" class="anchor" aria-hidden="true" href="#development-workflow"></a>Development workflow
    </h3>
    
    <ol dir="auto">
      <li>
        Make some changes!
      </li>
      <li>
        If you&#8217;re ready to test, run <code>yarn local-canary</code>. This builds canary versions of your packages to your local registry.
      </li>
      <li>
        Install the canary version into wherever you&#8217;re trying to test, via <code>yarn add ... --registry=http://localhost:4873</code>
      </li>
    </ol>
    
    <p>
      (You can quickly create a test target app to install into with <code>npx create-plasmic-app</code>).
    </p>
    
    <h3 dir="auto">
      <a rel="nofollow noopener" target="_blank" id="user-content-development-tips" class="anchor" aria-hidden="true" href="#development-tips"></a>Development tips
    </h3>
    
    <p>
      You can publish an individual package with, for instance:
    </p>
    
    <pre class="notranslate"><code>cd plasmicpkgs/SOMETHING

yarn publish –registry=http://localhost:4873