Plasmic

适用于你代码库的开源可视化构建器。

以惊人的速度构建美观的应用和网站。

拖放你自己的组件，与你的代码库集成。

突破低代码的天花板。

快速链接

体验Plasmic

Vercel营销页面：https://youtu.be/itvbmgLZvcM（在线应用：https://vercel-workflow.vercel.app）
Apple.com：https://apple.plasmic.run
Shopify无头店面：https://commerce.plasmic.run
Twitter克隆：https://youtu.be/rpdjrFuVMog（在线应用：https://twitter.plasmic.run）
服务台应用：https://youtu.be/rYqSpUEJSTw（在线应用：https://tickets.plasmic.run）
Lee Robinson访谈，Plasmic作为可视化CMS：https://www.youtube.com/watch?v=pcVzNR6FBAQ
使用React.Email的电子邮件：即将推出

Plasmic是什么？

Plasmic是一个用于网络的可视化构建器。

它能够快速设计和构建应用程序和网站——可选择是否编码。

主要用例：

内容管理：让营销人员拖放你的React组件来构建Next.js网站中的落地页，并提供设计指导
应用程序：让开发人员和技术用户快速构建内部工具、客户门户和业务软件
网站构建器和设计工具，不限制你使用某个内置的电子商务平台、CMS或托管服务

Plasmic功能强大，具有深度的功能集，可扩展到复杂的项目。通过与代码库集成，它消除了通常与低代码工具相关的限制。

Plasmic的独特之处是什么？

Plasmic结合了一些看似不相关的类别：

Webflow、Wordpress和其他网站构建器
Retool和其他工具构建器
Glide和无代码应用构建器
Contentful和其他CMS

如今，这些是需要专门研究的不同工具，但网站和应用程序之间的界限是模糊的（考虑一个带有用户登录的电子商务店面）。有了正确的基础，我们认为这些可以统一起来——Plasmic的UI可以适应不同人员/任务的不同控制级别。

更重要的是，与现有工具不同，Plasmic与代码库集成。这对于使低代码超越所有此类工具（包括Plasmic）所面临的复杂性限制至关重要。你可以拖放现有的复杂React组件，并且可以在传统编码的应用程序中可视化地创建新的UI/组件，无缝地将代码和无代码编织在一起。

一些功能亮点：

完全的设计自由度和快速的现代设计工具用户体验。
与代码库集成，可拖放现有的React组件，将界面发布到现有应用程序中，并扩展/自定义Plasmic Studio。
创建丰富的有状态交互和行为。
连接任意数据源和后端集成。
强大的抽象，如组件、变体、插槽、可组合的状态管理等，促进组合并让你能够大规模构建和维护。
由react-aria支持的可自定义的无头设计系统组件。
内容创建者模式：为特定协作者提供更简化的编辑体验，并设置设计指导。
开放集成：选择你自己的CMS、电子商务平台、托管提供商等。
通过多人协作、分支、跨项目导入和多工作区组织进行深度协作。
从Figma导入设计，将其专有的矢量文档格式转换为DOM/CSS。
页面性能和高质量代码生成。支持静态站点生成、自动图像优化、布局偏移减少等。
在任何地方部署/托管/导出，包括Vercel、Netlify或任何托管提供商。
终端用户身份验证和权限，包括RBAC和用户范围的权限。
你可以随时分叉和控制的开源平台。

在我们的网站和文档上了解更多。或查看Plasmic与其他工具的比较。

如何将Plasmic集成为CMS？

这是Plasmic的一个常见用例。

步骤1. 在你的代码库中安装Plasmic（具体包取决于你的框架）。

npm install @plasmicapp/loader-nextjs

步骤2（可选）。 使你的应用程序或设计系统中的组件可在可视化编辑器中拖放：

// 从你的应用程序或设计系统中选择任何组件...
export default function HeroSection({ children }) {
  return <div className="hero-section">{children}</div>;
}

// ...并使其可拖放，同时暴露你想要的任何属性。
PLASMIC.registerComponent(HeroSection, {
  props: {
    children: "slot",
  },
});

步骤3. 在你的应用程序中的任何位置添加渲染在可视化编辑器中创建的页面/组件的占位符：

// pages/index.tsx

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

// 这里我们在客户端动态获取，但你也可以在SSG/SSR框架中服务器端获取和渲染
// 组件，例如在Next.js中通过getStaticProps。
export default function IndexPage() {
  return (
    <PlasmicRootProvider plasmic={PLASMIC}>
      <PlasmicComponent component="Summer22LandingPage" />
    </PlasmicRootProvider>
  );
}

步骤4. 非开发人员（或开发人员！）现在可以创建直接进入应用程序/网站的新页面、部分或组件。 第5步。 当你点击发布时，变更会通过触发重建的网络钩子被获取，或者通过更具体的机制如增量静态重新验证或从Plasmic CDN动态获取。

谁在使用Plasmic？

Plasmic被从财富500强公司到精品品牌再到独立创作者等各类公司使用。它被用于各种网站，包括无头商务店面、营销网站和登录后的应用内容。

查看案例研究和社区展示。

Plasmic是如何工作的？

代码库集成是如何工作的

注意：你不需要将Plasmic与代码库集成。这是将Plasmic作为CMS使用的核心，但你可以完全在Plasmic内部构建完整的应用和网站，无需集成。

阅读完整的技术概述。

引入你自己的React组件

你可以注册自己的任意自定义React组件，以在Plasmic Studio中作为构建块使用。了解更多关于代码组件的信息。

代码生成

除了无头API，你还可以生成React代码到你的代码库中。这是使用Plasmic作为UI构建器来创建丰富的交互式Web应用程序的强大方式——Plasmic Studio本身就是一个例子。查看应用程序开发教程以了解更多。

关于版本控制的说明

我们经常看到的一个常见问题是包版本不匹配或重复。

@plasmicapp包可能相互依赖。每个包总是有其@plasmicapp依赖的精确版本。这是因为我们希望确保所有包始终保持同步，不会出现不匹配的包集。

像@plasmicapp/host这样的包也必须去重，因为registerComponent等功能使用全局变量和副作用，所以如果有多个版本，你可能会使用到错误的包"实例"。此外，多个包之间的类型可能紧密耦合。

不幸的是，npm和yarn很容易导致版本不匹配和包重复。使用npm list命令确保你有唯一的去重版本的包。此外，问题可能会"粘连"，因为npm/yarn是有状态的。有时，你可能需要依赖npm dedupe，或者删除并重新安装Plasmic包（包括@plasmicpkgs包），重置package-lock.json/yarn.lock，以解开npm/yarn的卡顿。

@plasmicpkgs（内置的代码组件包）将@plasmicapp包作为对等依赖，这些包指定范围而不是精确版本——这是为了给开发者提供一些灵活性，使他们可以使用所需的核心包版本，同时仍然使用@plasmicpkgs。

注意：精确版本控制并不意味着每个包在每次发布时都会增加版本。只有当包本身或其依赖发生变化时，才会增加版本。版本增加，包括在dependencies和devDependencies中引用的版本，是在我们的部署脚本运行lerna version patch --exact...时自动完成的，该脚本会检测自上次git标记发布以来包是否发生了变化。