chungwu

We have a lot of respect for the work Builder.io is doing! If you're using Plasmic as a CMS, then there is a lot of overlap there. But Plasmic is a general visual React app builder, and as such, it comes with a lot of the abstractions and power you need to build a full React app. For example, you can craft reusable components in Plasmic that have different variants and have stateful behavior, and you can make use of abstractions like style tokens. Whereas Builder.io's UI is pretty focused on building individual pages, Plasmic is more about building the intermediate, reusable pieces of your app -- components, tokens, etc -- that you can then compose into pages and experiences. Using Plasmic will feel a little more like working on a full React application... for better or worse

We wanted to support tight integration with people's existing codebase, so that it is easy to use your React components directly in Plasmic, or to read data from your React contexts provided from outside of Plasmic, or to have your code components communicate with each other via React contexts when they're used within Plasmic, etc. There's power in being in "one React tree" with your existing app.

I imagine it's possible to achieve this with other frameworks too, though the integrations would be deep and bespoke for each framework. We've just decided to focus on React first.

You can also take a look here! https://github.com/plasmicapp/plasmic/tree/master/platform/w...

This is Plasmic-generated code that we ourselves use to build our visual editor.

The main way to extend Plasmic is to use your own React code components. So if there's something you can't achieve with our editor, you can make a component that does it, and use it in the design. An alternative way is to use the Plasmic components that we generate, which expose a lot of hooks that lets you instrument the props and rendered content within the component, without having to edit the generated component code itself. It is our explicit goal that you never need to edit the Plasmic-generated code in order to extend it to do what you want.

As for the actually generated code, it basically maps to what you've created yourself in the studio. Plasmic does have a styling / element abstraction, but it's fairly low-level, and everything is pretty close to how you'd write a React component yourself. If you're not creating empty divs in the editor, you shouldn't see empty divs in the generated code :-)

It is possible to use Plasmic in other contexts, but to really unlock the power of Plasmic, yes you need to be using React.

Basically, you set up a "custom app host" -- stand up your server (which has your code components), and you add a route (say `https://yoursite.com/plasmic-host`) that renders a special `<PlasmicCanvasHost/>` component. When you open a Plasmic project that uses your custom app host, it loads your `/plasmic-host`, and the `<PlasmicCanvasHost/>` component bootstraps the Plasmic visual editor into the page. So now Plasmic studio is actually running on your page, and it can access your code components that you have registered to be used with Plasmic. We never see your code; it's a run-time integration.

We wanted Plasmic to be the source of truth for certain things (the css, the composition, etc), so that it is possible to re-generate code from Plasmic and continue iterating on your designs (design-to-code is never a one-time thing!). We've designed the generated code to be very instrumentable; you can pass in prop overrides for any part of the component, swap out parts of the component with other content, etc., so you can get the component to do what you need, without having to edit the component code itself.

It can deeply integrate into your existing app (reuse your React components, and form the same React tree as your React app and read from the same React contexts, etc), and it can be hosted from anywhere. It also places a lot more emphasis on design and customizability.

Right now Plasmic mainly target outputting React components. The code it generates can either be consumed as files you check into your codebase (see https://docs.plasmic.app/learn/codegen-guide/) or as data you fetch dynamically across the wire to render content without touching your codebase (the "CMS" use case).

Yes, in a way! Plasmic is a general visual React app builder that can be embedded into your existing React app or be deployed standalone. As such, we place a heavy emphasis on _design_, so you can build exactly the thing that you want, and on _integration_, so you're never limited by what Plasmic can do out of the box. A big part of this is being able to use your own React components in your Plasmic designs, which is a major escape hatch that lets you include any amount of data fetching or business logic that can be consumed by your Plasmic designs.

Plasmic isn't a one-time codegen tool, where you generate some code and then modify it to suit your needs. Instead, we've designed Plasmic code generation so that you can generate code, add some business logic, iterate on design, generate code again, without blowing anything away. You're never directly editing the code generated by Plasmic.

You can check out how it works (https://docs.plasmic.app/learn/codegen-guide/), but also happy to answer questions here!

Plasmic at its core is a general React app builder. You can create components, add interactivity, and connect to other data sources. You can also bring in your own React components, so there's endless possibilities in extending the tool for your needs.

Our users have used Plasmic to build all sorts of things, from websites and e-commerce storefronts, to Retool-like internal tools, to full web apps (major parts of the Plasmic visual editor itself is built with Plasmic!). The most popular use case we have is as a CMS -- once developers set up Plasmic, the marketers are able to design and publish sections of the website without developer involvement. One remarkable thing is that the dynamically-fetched Plasmic-generated design is part of the same React tree as the rest of your React app, so it is able to read from your React contexts, etc., making it possible to have rather deep and interesting integrations into your site.

Ultimately, Plasmic generates React code from your designs. This code can either live in your code base alongside the rest of your code, or be dynamically fetched (like in the CMS use case).

For some components, like a button, overriding some css may be all you need. But other components can be more "opinionated" - for example, for a Slider component, do you want to label your thumb value? Does it go on the side of the slider or on top? Maybe even embedded into the slider track itself? Is it only visible when you're dragging or always there? What if there are multiple thumbs? Etc.

Some libraries will offer a ton of props to customize different parts of a component - and for some use cases, that is enough. But sometimes it is just easier to structure and style the component however you want, with custom behavior sprinkled in, and then letting a library like react-aria take care of the rest.

react-aria is about more than just putting the aria-attributes in the right place. It also takes care of interactivity, keyboard accessibility, focus management, and smoothing over some crazy differences between browsers. Sure, it's all code that you can write yourself, but it's complicated and subtle to get right, and it's how we end up with all these half broken components on the web.

Here's a good example of deep thinking and investigative work that goes into react-aria: https://react-spectrum.adobe.com/blog/building-a-combobox.ht...

react-aria is awesome. You structure your DOM and css however you want, and react-aria provides hooks that return props to spread onto your elements to make them come alive. These same hooks also give you visibility into and control of the component state, so you can also easily blend in your own custom logic for the component. It is about as flexible as a headless ui library can get. But it's also lower level and so harder to use than, say, radix primitives.

I work on Plasmic (plasmic.app), a visual builder for React. With react-aria, we're able to let our users build, say, a Select component visually however they want, and then we just use the hooks to spread the right props to the right elements, and It Just Works. See https://youtu.be/mPHS2zg2a8Y

Headless UI is an exciting space. There's only so far you can go with re-skinning material ui or antd, and no one should be building their own from scratch. These headless libraries give you all the interactivity and accessibility you need for your components, but still give you total freedom over how they look. It is the way!