{"id":13455627,"url":"https://github.com/plasmicapp/plasmic","last_synced_at":"2025-04-23T23:04:28.507Z","repository":{"id":37472908,"uuid":"335402819","full_name":"plasmicapp/plasmic","owner":"plasmicapp","description":"Visual builder for React. Build apps, websites, and content. Integrate with your codebase.","archived":false,"fork":false,"pushed_at":"2025-04-23T17:06:28.000Z","size":186835,"stargazers_count":5650,"open_issues_count":43,"forks_count":512,"subscribers_count":63,"default_branch":"master","last_synced_at":"2025-04-23T23:04:11.148Z","etag":null,"topics":["builder","cms","design","design-systems","design-tools","drag-drop","frontend","gatsby","headless","headless-cms","jamstack","lowcode","nextjs","nocode","page-builder","react","ui-builder","wysiwyg"],"latest_commit_sha":null,"homepage":"https://www.plasmic.app","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plasmicapp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-02-02T19:37:59.000Z","updated_at":"2025-04-23T17:06:33.000Z","dependencies_parsed_at":"2023-09-27T20:22:12.294Z","dependency_job_id":"64eeee58-93a7-42a7-946c-a6dac577f0f5","html_url":"https://github.com/plasmicapp/plasmic","commit_stats":{"total_commits":4356,"total_committers":75,"mean_commits":58.08,"dds":0.8411386593204775,"last_synced_commit":"fc0cb277ac5f628c05690cc4521588b17bc314c9"},"previous_names":[],"tags_count":6006,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plasmicapp%2Fplasmic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plasmicapp%2Fplasmic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plasmicapp%2Fplasmic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plasmicapp%2Fplasmic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plasmicapp","download_url":"https://codeload.github.com/plasmicapp/plasmic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250528732,"owners_count":21445516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["builder","cms","design","design-systems","design-tools","drag-drop","frontend","gatsby","headless","headless-cms","jamstack","lowcode","nextjs","nocode","page-builder","react","ui-builder","wysiwyg"],"created_at":"2024-07-31T08:01:08.340Z","updated_at":"2025-04-23T23:04:28.465Z","avatar_url":"https://github.com/plasmicapp.png","language":"TypeScript","readme":"\u003c!-- AUTO-GENERATED-CONTENT:START (STARTER) --\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.plasmic.app\"\u003e\n    \u003cimg alt=\"Plasmic\" role=\"img\" src=\"https://static1.plasmic.app/brand/2023/logo-cropped.png\" width=\"120\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  Plasmic\n\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003e\n  The open-source visual builder for your codebase.\n\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  Build beautiful apps and websites incredibly fast.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  Drag and drop your own components, integrate with your codebase.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  Break through the low-code ceiling.\n\u003c/p\u003e\n\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.plasmic.app\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/7129/146098801-0691ff13-e302-40fb-827e-90488a7a28b4.gif\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://docs.plasmic.app/learn/quickstart\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/7129/139351025-8acd6f6d-8e32-4486-982e-a6f26a53d865.png\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/plasmicapp/plasmic\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/github/license/plasmicapp/plasmic\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@plasmicapp/loader-react\"\u003e\u003cimg alt=\"Types\" src=\"https://img.shields.io/npm/types/@plasmicapp/loader-react\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/plasmicapp/plasmic/pulls\"\u003e\u003cimg alt=\"PRs Welcome\" src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Quick links\n\n- [Website](https://www.plasmic.app/)\n- [Documentation][docs]\n- [Quickstart][quickstart]\n- [Plasmic Forum][forum]\n- [Slack Community][slack]\n\n[docs]: https://www.plasmic.app/learn/\n[quickstart]: https://www.plasmic.app/learn/quickstart/\n[forum]: https://forum.plasmic.app/\n[slack]: https://www.plasmic.app/slack\n\n## See Plasmic in action\n\n- Vercel marketing page: https://youtu.be/itvbmgLZvcM (live app: https://vercel-workflow.vercel.app)\n\n- Apple.com: https://apple.plasmic.run\n\n- Shopify headless storefront: https://commerce.plasmic.run\n\n- Twitter clone: https://youtu.be/rpdjrFuVMog (live app: https://twitter.plasmic.run)\n\n- Service desk app: https://youtu.be/rYqSpUEJSTw (live app: https://tickets.plasmic.run)\n\n- Interview with Lee Robinson, Plasmic as a visual CMS: https://www.youtube.com/watch?v=pcVzNR6FBAQ\n\n- Emails with React.Email: coming soon\n\n## What is Plasmic?\n\nPlasmic is a visual builder for the web.\n\nIt enables rapidly designing and building applications and websites--code optional.\n\nMain use cases:\n\n- Content management: let marketing drag/drop your React components to build landing pages in your Next.js website, with design guardrails\n\n- Applications: let developers and technical users quickly build internal tools, client portals, and business software\n\n- Website builder and design tool that doesn’t limit you to some built-in ecommerce platform, CMS, or hosting\n\nPlasmic is powerful, with a deep feature set that scales to complex projects.\nAnd with codebase integration, it removes the ceiling typically associated with low-code tools.\n\n## What makes Plasmic special?\n\nPlasmic combines some seemingly disparate genres:\n\n- Webflow, Wordpress and other site builders\n- Retool and other tool builders\n- Glide and no-code app builders\n- Contentful and other CMSes\n\nToday 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.\n\nBut 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.\n\nSome feature highlights:\n\n- **Full design freedom** and speedy modern design tool UX.\n- **Integrate with codebases** to drag/drop existing React components, publish screens into existing applications, and extend/customize Plasmic Studio.\n- Create **rich stateful interactions and behavior**.\n- Connect with **arbitrary data source and backend integrations**.\n- **Powerful abstractions** like components, variants, slots, composable state management, and more that promote composition and let you build and maintain at scale.\n- **Customizable headless design system components** powered by [react-aria](https://react-spectrum.adobe.com/react-aria/).\n- **Content creator mode**: give specific collaborators a more simplified editing experience with design guardrails.\n- **Open integrations**: choose your own CMS, ecommerce platform, hosting provider, and more.\n- Deep collaboration with multiplayer, branching, cross-project imports, and multi-workspace organizations.\n- **Import designs from Figma**, translating its proprietary vector document format into DOM/CSS.\n- **Page performance and high-quality codegen**. Supports static site generation, automatic image optimization, layout shift reduction, and more.\n- **Deploy/host/export anywhere**, including Vercel, Netlify, or any hosting provider.\n- **End-user auth and permissions**, including RBAC and user-scoped permissions.\n- **Open-source platform** that you can always fork and control.\n\nLearn more on [our website][website] and [our docs][docs]. Or check out [comparisons of Plasmic vs other tools][comparisons].\n\n[website]: https://www.plasmic.app\n[comparisons]: https://docs.plasmic.app/learn/comparisons/\n\n## How do I integrate Plasmic as a CMS?\n\nThis is one popular use case of Plasmic.\n\n**Step 1.** Install Plasmic into your codebase (exact package [depends on your framework][quickstart]).\n\n```\nnpm install @plasmicapp/loader-nextjs\n```\n\n**Step 2 (optional).** Make components from your app or design system available for drag-and-drop in the visual editor:\n\n```tsx\n// Take any component from your app or design system...\nexport default function HeroSection({ children }) {\n  return \u003cdiv className=\"hero-section\"\u003e{children}\u003c/div\u003e;\n}\n\n// ...and make it available for drag-and-drop, along with any props you want to\n// expose.\nPLASMIC.registerComponent(HeroSection, {\n  props: {\n    children: \"slot\",\n  },\n});\n```\n\n**Step 3.** Add placeholders that render pages/components made in the visual editor anywhere in your app:\n\n```tsx\n// pages/index.tsx\n\nimport {\n  PlasmicComponent,\n  PlasmicRootProvider,\n} from \"@plasmicapp/loader-nextjs\";\nimport { PLASMIC } from \"../plasmic-init\";\n\n// Here we fetch dynamically on the client, but you can also fetch and render\n// components server-side in SSG/SSR frameworks, such as via getStaticProps\n// in Next.js.\nexport default function IndexPage() {\n  return (\n    \u003cPlasmicRootProvider plasmic={PLASMIC}\u003e\n      \u003cPlasmicComponent component=\"Summer22LandingPage\" /\u003e\n    \u003c/PlasmicRootProvider\u003e\n  );\n}\n```\n\n**Step 4.** Non-developers (or developers!) can now create new pages, sections, or components that ship directly into the app/website.\n\n**Step 5.** When you hit Publish, changes get picked up via webhooks that trigger rebuilds,\nor more specific mechanisms such as incremental static revalidation or dynamic fetching from the Plasmic CDN.\n\n## Who uses Plasmic?\n\nPlasmic is used by companies ranging from Fortune 500s to boutique brands to solo makers.\nIt's used for websites ranging from headless commerce storefronts to marketing websites to logged-in app content.\n\nCheck out the [Case Studies and Community Showcase][customers].\n\n[customers]: https://www.plasmic.app/casestudies\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.plasmic.app/casestudies\"\u003e\n    \u003cimg alt=\"Customer logos\" width=\"1106\"  src=\"https://github.com/plasmicapp/plasmic/assets/7129/2c682d45-6b72-4571-895a-e48b0c588647\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.plasmic.app/casestudies\"\u003e\n    \u003cimg alt=\"Showcase\" src=\"https://user-images.githubusercontent.com/7129/139349675-a807ad9d-aaaf-411b-ab4b-8247a09be676.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## How does Plasmic work?\n\n### How codebase integration works\n\nNote: you do not need to integrate Plasmic with a codebase.\nThis is core to using Plasmic as a CMS, but you can build complete apps and websites without this, entirely within Plasmic.\n\nRead [the full technical overview](https://docs.plasmic.app/learn/technical-overview/).\n\n### Bring your own React components\n\nYou can register your own arbitrary custom React components for use as building blocks within Plasmic Studio.\n[Learn more about code components](https://code-components.plasmic.site).\n\n### Codegen\n\nBesides the Headless API, you can also [generate React code](https://docs.plasmic.app/learn/codegen-guide) into your codebase.\nThis 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.\nSee the [application development tutorials](https://docs.plasmic.app/learn/minitwitter-tutorial) to learn more.\n\n## Note on versioning\n\nOne common issue we see is mismatched or duplicate versions of packages.\n\n`@plasmicapp` packages can depend on each other.\nEach package always has an _exact_ version of its @plasmicapp dependencies.\nThis 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.\n\nPackages 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.\nAdditionally, types can be tightly coupled across multiple packages.\n\nUnfortunately, npm and yarn make it easy for you to end up with mismatched versions and duplicate versions of packages.\nUse the `npm list` command to ensure that you have unique deduped versions of packages.\nFurthermore, issues can be \"sticky,\" since npm/yarn are stateful.\nAt 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.\n\n`@plasmicpkgs` (the built-in code component packages) have `@plasmicapp` packages as peer dependencies,\nand 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`.\n\nNote: exact versioning does not imply that every package increments versions for every release.\nPackages are only incremented if they or their dependencies have changed.\nIncrementing versions, including those referenced in `dependencies` and `devDependencies`, is done automatically when our deployment scripts run `lerna version patch --exact...`,\nwhich detects whether a package has changed since its last git-tagged release.\n\n## Contributing 🚀\n\nPlease see [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## Get help and join our community\n\nOur [docs][docs] and our community [forum] and [Slack] with 3000+ members are the best places to get help with Plasmic.\n\nFor support from the Plasmic team, please use the forum.\nThe forum is also easily searchable for all previously asked questions and discussions.\n\nBoth the docs and forum are indexed by search engines!\nSearch both by including “plasmic” in your query.\n\n## License\n\nAll content outside of `platform/` is licensed under the MIT license--see LICENSE.md.\n\n`platform/` is licensed under the AGPL--see LICENSE.platform.md.\n\n## Contributors ❤️\n\nThanks to all the people who make Plasmic!\n\n\u003ca href=\"https://github.com/plasmicapp/plasmic/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=plasmicapp/plasmic\" /\u003e\n\u003c/a\u003e\n","funding_links":[],"categories":["TypeScript","react"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplasmicapp%2Fplasmic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplasmicapp%2Fplasmic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplasmicapp%2Fplasmic/lists"}