plasmicapp/plasmic

这是什么？

核心功能

• 01将你自己的 React 组件拖拽到可视化编辑器中使用。
• 02把可视化搭建的页面发布到现有应用和网站中。
• 03通过 codegen 将 React 代码生成到代码库里。
• 04提供 Headless API，在运行时获取内容和组件。
• 05内置基于 react-aria 的可定制设计系统组件。
• 06支持从 Figma 导入设计并转换为 DOM/CSS。
• 07提供带设计约束的内容编辑模式，方便非开发人员协作。

适用场景

• 让市场团队使用已批准的 React 组件，在 Next.js 站点中搭建落地页。
• 借助可视化编辑器开发内部工具、客户门户和业务软件。
• 在现有 React 代码库上增加可视化 CMS 层，无需更换托管或电商平台。

快速上手

1. 1

   为你的框架安装 Plasmic loader 包（以 Next.js 为例）

   npm install @plasmicapp/loader-nextjs
2. 2

   注册你自己的 React 组件，使其可在可视化编辑器中拖放使用

3. 3

   在应用中使用 PlasmicRootProvider 包裹的 PlasmicComponent 渲染在 Plasmic 中制作的组件

使用前须知

• !platform/ 目录采用 AGPL 许可证，而非 MIT。
• !与代码库完整集成需要按文档完成特定框架的配置。

标签

常见问题

plasmic 是什么？

开源可视化搭建工具，可拖拽你自己的 React 组件来构建应用和网站，并与现有代码库集成。 Plasmic 是一款面向 Web 的可视化搭建工具，可以在需要时结合代码来设计和构建应用与网站。常见用途包括让市场人员在 Next.js 站点中用 React 组件拖拽搭建落地页、快速开发内部工具和客户门户，以及在不绑定特定 CMS、电商平台或托管服务的前提下制作网站。

plasmic 可以免费使用吗？用的什么许可证？

plasmic 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

plasmic 还在维护吗？

活跃维护中。plasmic 最近一次提交是在 2026年10月21日。

plasmic 适合用来做什么？

让市场团队使用已批准的 React 组件，在 Next.js 站点中搭建落地页。 借助可视化编辑器开发内部工具、客户门户和业务软件。 在现有 React 代码库上增加可视化 CMS 层，无需更换托管或电商平台。

plasmic 怎么安装和运行？

为你的框架安装 Plasmic loader 包（以 Next.js 为例）: npm install @plasmicapp/loader-nextjs 注册你自己的 React 组件，使其可在可视化编辑器中拖放使用 在应用中使用 PlasmicRootProvider 包裹的 PlasmicComponent 渲染在 Plasmic 中制作的组件

在哪里获取 plasmic？

源代码和安装说明在 GitHub 上：https://github.com/plasmicapp/plasmic