Quick links
See Plasmic in action
What is Plasmic?
Plasmic is a visual builder for the web.
It enables rapidly designing and building applications and websites--code optional.
Main use cases:
-
Content management: let marketing drag/drop your React components to build landing pages in your Next.js website, with design guardrails
-
Applications: let developers and technical users quickly build internal tools, client portals, and business software
-
Website builder and design tool that doesn’t limit you to some built-in ecommerce platform, CMS, or hosting
Plasmic is powerful, with a deep feature set that scales to complex projects.
And with codebase integration, it removes the ceiling typically associated with low-code tools.
What makes Plasmic special?
Plasmic combines some seemingly disparate genres:
- Webflow, Wordpress and other site builders
- Retool and other tool builders
- Glide and no-code app builders
- Contentful and other CMSes
Today these are different tools to specialize in, but the line between, say, a website and an application is blurry (consider an ecommerce storefront with user logins). With the right foundations, we think these can be unified—Plasmic’s UI can adapt to different levels of control for different personas/tasks.
But more importantly, unlike existing tools, Plasmic integrates with codebases. This is critical to making low-code scale past the complexity ceiling that all such tools (including Plasmic) have. You can drag and drop existing complex React components, and you can visually create new UIs/components within traditionally-coded applications, seamlessly weaving code and no-code.
Some feature highlights:
- Full design freedom and speedy modern design tool UX.
- Integrate with codebases to drag/drop existing React components, publish screens into existing applications, and extend/customize Plasmic Studio.
- Create rich stateful interactions and behavior.
- Connect with arbitrary data source and backend integrations.
- Powerful abstractions like components, variants, slots, composable state management, and more that promote composition and let you build and maintain at scale.
- Customizable headless design system components powered by react-aria.
- Content creator mode: give specific collaborators a more simplified editing experience with design guardrails.
- Open integrations: choose your own CMS, ecommerce platform, hosting provider, and more.
- Deep collaboration with multiplayer, branching, cross-project imports, and multi-workspace organizations.
- Import designs from Figma, translating its proprietary vector document format into DOM/CSS.
- Page performance and high-quality codegen. Supports static site generation, automatic image optimization, layout shift reduction, and more.
- Deploy/host/export anywhere, including Vercel, Netlify, or any hosting provider.
- End-user auth and permissions, including RBAC and user-scoped permissions.
- Open-source platform that you can always fork and control.
Learn more on our website and our docs. Or check out comparisons of Plasmic vs other tools.
How do I integrate Plasmic as a CMS?
This is one popular use case of Plasmic.
Step 1. Install Plasmic into your codebase (exact package depends on your framework).
npm install @plasmicapp/loader-nextjs
Step 2 (optional). Make components from your app or design system available for drag-and-drop in the visual editor:
// 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",
},
});
Step 3. Add placeholders that render pages/components made in the visual editor anywhere in your app:
// pages/index.tsx
import {
PlasmicComponent,
PlasmicRootProvider,
} 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>
);
}
Step 4. Non-developers (or developers!) can now create new pages, sections, or components that ship directly into the app/website.
Step 5. When you hit Publish, changes get picked up via webhooks that trigger rebuilds,
or more specific mechanisms such as incremental static revalidation or dynamic fetching from the Plasmic CDN.
Who uses Plasmic?
Plasmic is used by companies ranging from Fortune 500s to boutique brands to solo makers.
It's used for websites ranging from headless commerce storefronts to marketing websites to logged-in app content.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
