search

plasmicapp / plasmic

Visual builder for React. Build apps, websites, and content. Integrate with your codebase.
https://www.plasmic.app
MIT License
4.69k stars 377 forks source link
builder cms design design-systems design-tools drag-drop frontend gatsby headless headless-cms jamstack lowcode nextjs nocode page-builder react ui-builder wysiwyg

readme

Plasmic

Plasmic

The open-source visual builder for your codebase.

Build beautiful apps and websites incredibly fast.

Drag and drop your own components, integrate with your codebase.

Break through the low-code ceiling.

 

License Types code style: prettier PRs Welcome

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:

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:

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:

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.

Check out the Case Studies and Community Showcase.

Customer logos

Showcase

How does Plasmic work?

How codebase integration works

Note: you do not need to integrate Plasmic with a codebase. This is core to using Plasmic as a CMS, but you can build complete apps and websites without this, entirely within Plasmic.

Read the full technical overview.

Bring your own React components

You can register your own arbitrary custom React components for use as building blocks within Plasmic Studio. Learn more about code components.

Codegen

Besides the Headless API, you can also generate React code into your codebase. 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. See the application development tutorials to learn more.

Note on versioning

One common issue we see is mismatched or duplicate versions of packages.

@plasmicapp packages can depend on each other. Each package always has an exact version of its @plasmicapp dependencies. This is because we want to ensure that all packages are always in sync, and that we don't end up with a mismatched set of packages.

Packages like @plasmicapp/host must also be deduped, since functionality such as registerComponent make use of globals and side effects, so with multiple versions you could end up using the wrong "instance" of this package. Additionally, types can be tightly coupled across multiple packages.

Unfortunately, npm and yarn make it easy for you to end up with mismatched versions and duplicate versions of packages. Use the npm list command to ensure that you have unique deduped versions of packages. Furthermore, issues can be "sticky," since npm/yarn are stateful. At times, you may need to rely on npm dedupe, or removing and reinstalling Plasmic packages (including @plasmicpkgs packages), resetting package-lock.json/yarn.lock, in order to unwedge npm/yarn.

@plasmicpkgs (the built-in code component packages) have @plasmicapp packages as peer dependencies, and these specify ranges rather than exact versions--this is to offer some flexibility for developers to use the core package versions they need, while still using @plasmicpkgs.

Note: exact versioning does not imply that every package increments versions for every release. Packages are only incremented if they or their dependencies have changed. Incrementing versions, including those referenced in dependencies and devDependencies, is done automatically when our deployment scripts run lerna version patch --exact..., which detects whether a package has changed since its last git-tagged release.

Contributing 🚀

Please see CONTRIBUTING.md.

Get help and join our community

Our docs and our community forum and Slack with 3000+ members are the best places to get help with Plasmic.

For support from the Plasmic team, please use the forum. The forum is also easily searchable for all previously asked questions and discussions.

Both the docs and forum are indexed by search engines! Search both by including “plasmic” in your query.

License

All content outside of platform/ is licensed under the MIT license--see LICENSE.md.

platform/ is licensed under the AGPL--see LICENSE.platform.md.

Contributors ❤️

Thanks to all the people who make Plasmic!