https://github.com/plasmicapp/plasmic

Skip to content
 
Sign up

  * Why GitHub?
      + Features
      + Mobile
      + Actions
      + Codespaces
      + Packages
      + Security
      + Code review
      + Issues
      + Integrations
      + GitHub Sponsors
      + Customer stories
  * Team
  * Enterprise
  * Explore
      + Explore GitHub
      + Learn and contribute
      + Topics
      + Collections
      + Trending
      + Learning Lab
      + Open source guides
      + Connect with others
      + The ReadME Project
      + Events
      + Community forum
      + GitHub Education
      + GitHub Stars program
  * Marketplace
  * Pricing
      + Plans
      + Compare plans
      + Contact Sales
      + Education

[                    ] 

  *  
    #
    In this repository All GitHub |
    Jump to |

  * No suggested jump to results

  *  
    #
    In this repository All GitHub |
    Jump to |
  *  
    #
    In this organization All GitHub |
    Jump to |
  *  
    #
    In this repository All GitHub |
    Jump to |

Sign in
Sign up
{{ message }}

plasmicapp / plasmic Public

  * Notifications
  * Fork 40
  * Star 654
  * 

Visually build pages and frontends, lightning-fast. Plug into your
React codebase. Empower anyone to ship.

www.plasmic.app
MIT License
654 stars 40 forks
Star
Notifications

  * Code
  * Issues 6
  * Pull requests 0
  * Actions
  * Wiki
  * Security
  * Insights

More

  * Code
  * Issues
  * Pull requests
  * Actions
  * Wiki
  * Security
  * Insights

master
Switch branches/tags
[                    ]
Branches Tags
Could not load branches
Nothing to show
Loading
{{ refName }} default View all branches
Could not load tags
Nothing to show
{{ refName }} default
Loading
View all tags
6 branches 0 tags
Code
Loading

Latest commit

@yang
yang Fix up README
...
acfbc45 Dec 15, 2021
Fix up README

Change-Id: I18e066a34de1291e06b92dd80712f342b418a2d5

acfbc45

Git stats

  * 1,070 commits

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
packages
[bug] Fix type error when having union type props
Dec 9, 2021
plasmicpkgs
[antd] Hide icon slot for Dropdown Button
Dec 13, 2021
.gitignore
Do not ignore yarn.lock
Apr 18, 2021
.gitreview
Add .gitreview pointing to our repository
Feb 23, 2021
.pre-commit-config.yaml
[cpa] Create plasmic app with loader v2
Aug 23, 2021
.prettierrc
Add prettier to help with formatting
May 19, 2021
LICENSE.md
Add MIT license
Feb 23, 2021
README.md
Fix up README
Dec 15, 2021
lerna.json
[loader-svelte] Add loader-svelte
Sep 20, 2021
package.json
[loader] Add option to warn / error when fetching from browser
Oct 14, 2021
yarn.lock
[loader-vue] Fix loader-vue
Nov 24, 2021
View code
[                    ]
Plasmic The headless page builder + web design tool for React, Vue,
Angular, PHP, vanilla JS, and more. Quick links The gist Overview Get
help and join our community Features Users of Plasmic Technical
overview Bring your own React components Codegen Contributing Getting
started Development workflow Release workflow

README.md

                               Plasmic

                               Plasmic

 The headless page builder + web design tool for React, Vue, Angular,
                     PHP, vanilla JS, and more.

  Drag and drop your own code components. Let non-developers create
    stunning content, and free up developers from pixel-pushing.

 

                            [146098801-]

                            [139351025-]

           License Types code style: prettier PRs Welcome

 Quick links

  * Website
  * Documentation
  * Quickstart
  * Slack Community

 The gist

Step 1. Install Plasmic into your codebase (exact package depends on
your framework).

npm install @plasmicapp/loader-nextjs

Step 2. 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 {
  PlasmicRootProvider,
  PlasmicComponent,
} 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.
export default function IndexPage() {
  return (
    <PlasmicRootProvider plasmic={PLASMIC}>
      <PlasmicComponent component="Summer22LandingPage" />
    </PlasmicRootProvider>
  );
}

 Overview

Plasmic is a visual builder for the web. Developers integrate this
into their codebase, and anyone (including non-developers) can build
pages or parts of pages.

The goal is to empower and unblock non-developers such as marketers
and designers, while freeing up developers from pixel-pushing
content, thus letting the whole team move faster.

Plasmic as a page builder and "visual CMS" is its simplest and most
common use case. Editors can create and update content in Plasmic
without code, and publish this into their production site without
needing to block on developers.

Beyond website content, Plasmic can even be used to create frontends
for complex web applications (such as Plasmic itself, which was built
in Plasmic). This is possible because--despite being easy to start
with--Plasmic gives you full visual control and works deeply with
code.

Learn more on [our website][website] and our docs.

Or check out our Next.js-based talk and demo at Next.js Conf 2021:

Next.js-based talk and demo at Next.js Conf 2021

 Get help and join our community

Connect with the Plasmic team and with other Plasmic users on the
Plasmic Community Slack.

 Features

A smattering of interesting highlights about Plasmic:

  * Drag/drop and visually manipulate your own React components, and
    seamlessly nest design elements within your React components
    (using slots).
  * Import designs from Figma, translating its proprietary vector
    document format into DOM/CSS.
  * Scalable component system with slots/props, variants (that can be
    combined), and style mixins/tokens.
  * High-performance and high-quality codegen. Supports static site
    generation, automatic image optimization, layout shift reduction,
    and more.
  * Design fully functional and accessible design system components.
    For designers, you can craft completely bespoke, complex design
    system components like dropdowns, and we wire it up to react-aria
    . Most component libraries give you variables to tweak, but here
    you can completely change the structure and layout of these
    components.
  * Versatility in use cases. Use it as a page builder to create
    simple static content like marketing/landing pages and
    promotional sections, or use it as a development tool for
    visually building complex, stateful React UIs.

 Users of 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][customers].

                           Customer logos

                              Showcase

 Technical overview

(Read the full technical overview.)

The main way to integrate Plasmic into a codebase is via the Headless
API. The Headless API lets developers fetch and render into your
existing codebase, without touching your code base besides the
initial setup. This allows your Plasmic users to build designs and
pages, and publish directly to production, without involving the
development team.

You can think of Plasmic as a CMS, but where editors get to edit HTML
/CSS rather than JSON data. Developers then just render the content
as-is.

Plasmic does not host your site; your site continues to run on your
existing infrastructure and tech stack.

For static site generators and server-rendered pages, Plasmic content
is loaded at build-time or server-side and thus pre-rendered,
optimizing page load performance. For other sites that fetch and
render client-side, Plasmic content is loaded from the AWS Cloudfront
CDN.

New pages can automatically just show up. The codebase integration
can be configured such that as users create pages and routes in
Plasmic Studio, they will be auto-loaded into your app without
developer involvement.

 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.

 Contributing

We use lerna to help us manage dependencies between the @plasmicapp/
loader-* packages, (though we may pull in more packages to be managed
by lerna, right now those are the ones with tight dependencies on
each other).

 Getting started

yarn lerna bootstrap  # inter-links all the lerna-managed packages together

We also make use of Verdaccio to locally test packages. This just
stands up an npm registry that you can publish your test packages to.

yarn global add verdaccio
verdaccio &  # Runs the verdaccio server at http://localhost:4873

You'll need to update the verdaccio config file, at ~/.config/
verdaccio/config.yaml, to instruct verdaccio to not use npmjs for our
test packages:

packages:
  '@plasmicapp/*':
    access: $all
    publish: $all
    unpublish: $all

 Development workflow

 1. Make some changes!

 2. If you're ready to test, run yarn local-canary. This builds
    canary versions of your packages to your local registry.

 3. Install the canary version into wherever you're trying to test,
    via yarn add ... --registry=http://localhost:4873

 Release workflow

Run yarn bump to bump the versions of the changed packages. If you
already have an existing git commit you want to use, do yarn bump
--amend. Submit for code review.

Make user you are authenticating with npm as the plasmicapp user.

npm whoami # check who you are currently
npm login # if you were not plasmicapp

Ensure you have no outstanding unmerged commits or uncommitted
changes.

Ensure you have pulled the latest changes from master.

Once your change has been approved and you're ready to release to
npm, run yarn release. This will individually publish each package to
npm.

About

Visually build pages and frontends, lightning-fast. Plug into your
React codebase. Empower anyone to ship.

www.plasmic.app

Topics

react cms design design-systems builder frontend drag-drop nextjs 
headless gatsby wysiwyg page-builder jamstack design-tools 
headless-cms ui-builder nocode lowcode

Resources

Readme

License

MIT License

Stars

654 stars

Watchers

22 watching

Forks

40 forks

Contributors 13

  * @chungwu
  * @clovis1122
  * @victoragnez
  * @ydmao
  * @ryscheng
  * @yang
  * @tmadeira
  * @FMota0
  * @IcaroG
  * @gabrielpessoa1
  * @wellguimaraes

+ 2 contributors

Languages

  * TypeScript 94.6%
  * JavaScript 3.1%
  * CSS 1.9%
  * Other 0.4%

  * (c) 2021 GitHub, Inc.
  * Terms
  * Privacy
  * Security
  * Status
  * Docs

 

  * Contact GitHub
  * Pricing
  * API
  * Training
  * Blog
  * About

You can't perform that action at this time.
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session.