Hi HN! I work on Plasmic. It’s a visual page builder and design tool that generates React components and integrates seamlessly into your existing web app codebase. It empowers content creators to build things for production without involving developers.
When we started on Plasmic two years ago, we didn’t begin with this product-market. I’d like to share the backstory of how we got to where we are, but first, a bit more explanation of what Plasmic is for:
Today, teams that have a marketing/ecommerce/etc. website frequently run on a “JAMstack”—typically statically generated using frameworks such as Next.js. Whenever marketing or other business units have a request, developers either have to code up everything by hand, or set up a “headless CMS”—giant JSON editors that business users use to specify the content a page should show. Developers need to define the schema to reflect the (near-infinite) design needs of the business users, who in turn must interface with the schema by filling out sprawling complex forms that look nothing like the final page they are creating. Companies do a ton of work to build out this sort of bespoke non-visual page editing infrastructure. CMSes have perfectly reasonable uses, but visual content isn’t one of them.
With Plasmic, developers just need to render a <PlasmicComponent/> placeholder wherever they want Plasmic content to show up. Content creators then create their content using Plasmic’s visual editor. At build time, the Plasmic content gets downloaded and swapped in, and goes live with the rest of the site. This eliminates tons of requests on developers and lets content creators iterate quickly.
The visual editor is at the core of Plasmic, but we wanted it to be more than just a big form for filling out CSS values. We wanted:
* A design surface that resembles Figma / Sketch, but powered by real browser layout, allowing you to design across multiple variants and screen sizes at once.
* Styling and layout that is intuitive and smooths over CSS’s rough edges.
* A deep system of components and variants, where variants can provide specific overrides without unnecessary duplication. This is used for everything from responsive design to A/B testing and personalization to component states.
* Design tokens and mixins (bundles of styles) you can use to systemize your designs.
* Ability to use arbitrary custom React components in your design.
This last bullet — using arbitrary React components — is critical; it allows developers to craft custom building blocks for content creators to drag/drop and visually manipulate in the editor. These components can be anything from design system components to data-fetching blocks to animation/interaction wrappers. For instance, you can trivially introduce new types of reveal animations or new data integrations not built into Plasmic. This effectively lets developers extend and customize the platform, and lets them “build their own page builder” for their broader team to use.
Please check it out—sign up at https://www.plasmic.app. We’d love any questions and feedback you have!
===
And now some backstory of how we got here.
We’ve worked on many product teams, where designers create vector drawings, and developers try to recreate them from scratch using the “real” tech stack. Because there are two parallel sources of truth that often diverge, getting anything done involved tedious rounds of back-and-forth to get everyone on the same page. When we first started on Plasmic two years ago, we wanted to create a design tool for React that can produce not just pretty mock-ups, but actually generate the final production UI code; it can be the ...
Are there any plans to add more extensibility to the code components, e.g. showing a custom UI for setting properties? I think the whole concept of being able to bring in external React components is a big differentiator for Plasmic and something like that would enable a bunch of new use-cases around making it easier for non-devs to build stuff on it.
Well, I'm still feeling out the platform, but I'm tossing around some ideas for components like these:
- A generic GraphQL query component. It would be nice to be able to pop open an embedded GraphiQL UI to set up the query and maybe set variables.
- A generic "state" component that could have a list of state vars you want to track. The UI I'm envisioning would let you add a list of state vars (essentially wrapping `useState`) and their default values.
- An authorization component that could show/hide children based on a role or auth status. The UI would need to be able to select the role or user property to key off of.
Maybe these would be built into the platform itself in the future, but they could probably be done as components in the meantime.
Nothing but love for the team behind it! great support, and a fantastic tool.
HTML and CSS are the bane of my existence and iv loved being able to focus on functionality rather than small design problems.
Its also allowed me to pass over most of the design work ect to my non technical co-founder who is a fantastic designer but normally cant do much more then send me a figma file, she now instead plays a big part in the design of the marketplace! and I don't have 50 tickets lined up to change margins in 50 different places!
Its not without its downsides, but by god is it worth it!
We've been developing a fairly complex hybrid mobile app for iOS/Android.
We found Plasmic ideal for working with responsive, localized designs via its rich editor and the possibility to import code components. The greatest benefit is that designers and developers can now work on the same canvas with no back and forth.
And we only have great things to say about the team at Plasmic.
Hey HN, I'm a bit of a tourist here, but I wanted to add my 2 cents from the perspective of a technical person from a non-traditional background.
I started using Plasmic in August 2020, mostly because of my frustration with existing "no-code" tools.
I'm a designer, and I wanted something professional that allowed me to use my existing skills to develop my own applications. In real code. I wanted to participate with engineers in the development process and be able to translate my ideas into something that could turn into something if it took off.
Plasmic got a newb like me up and running on a Sunday afternoon.
They have one of the best onboarding "games" called Plasmic levels which teaches you how to visually create fully functional, albeit "presentational" react components-- So anyone with a basic design background can create react, or Nextjs app that can be deployed anywhere.
I cant really cram as much as I want into this humble review, but I highly recommend you investigate your skepticism and check it out. It will shave months off your development time and give your team an intuitive way to collaborate and ship waaaay faster.
I started a project that is the high quality alternative to Upwork. It's an advanced ecommerce application with embedded financial services. If I hadn't discovered plasmic I'm not sure I would have been able to make this on my own.
8 comments
[ 1.6 ms ] story [ 32.6 ms ] threadWhen we started on Plasmic two years ago, we didn’t begin with this product-market. I’d like to share the backstory of how we got to where we are, but first, a bit more explanation of what Plasmic is for:
Today, teams that have a marketing/ecommerce/etc. website frequently run on a “JAMstack”—typically statically generated using frameworks such as Next.js. Whenever marketing or other business units have a request, developers either have to code up everything by hand, or set up a “headless CMS”—giant JSON editors that business users use to specify the content a page should show. Developers need to define the schema to reflect the (near-infinite) design needs of the business users, who in turn must interface with the schema by filling out sprawling complex forms that look nothing like the final page they are creating. Companies do a ton of work to build out this sort of bespoke non-visual page editing infrastructure. CMSes have perfectly reasonable uses, but visual content isn’t one of them.
With Plasmic, developers just need to render a <PlasmicComponent/> placeholder wherever they want Plasmic content to show up. Content creators then create their content using Plasmic’s visual editor. At build time, the Plasmic content gets downloaded and swapped in, and goes live with the rest of the site. This eliminates tons of requests on developers and lets content creators iterate quickly.
The visual editor is at the core of Plasmic, but we wanted it to be more than just a big form for filling out CSS values. We wanted:
* A design surface that resembles Figma / Sketch, but powered by real browser layout, allowing you to design across multiple variants and screen sizes at once. * Styling and layout that is intuitive and smooths over CSS’s rough edges. * A deep system of components and variants, where variants can provide specific overrides without unnecessary duplication. This is used for everything from responsive design to A/B testing and personalization to component states. * Design tokens and mixins (bundles of styles) you can use to systemize your designs. * Ability to use arbitrary custom React components in your design.
This last bullet — using arbitrary React components — is critical; it allows developers to craft custom building blocks for content creators to drag/drop and visually manipulate in the editor. These components can be anything from design system components to data-fetching blocks to animation/interaction wrappers. For instance, you can trivially introduce new types of reveal animations or new data integrations not built into Plasmic. This effectively lets developers extend and customize the platform, and lets them “build their own page builder” for their broader team to use.
Here’s a segment from our recent Next.js Conf talk showing this in action: https://www.youtube.com/watch?v=fhEwNlzzobE&t=278s
Please check it out—sign up at https://www.plasmic.app. We’d love any questions and feedback you have!
===
And now some backstory of how we got here.
We’ve worked on many product teams, where designers create vector drawings, and developers try to recreate them from scratch using the “real” tech stack. Because there are two parallel sources of truth that often diverge, getting anything done involved tedious rounds of back-and-forth to get everyone on the same page. When we first started on Plasmic two years ago, we wanted to create a design tool for React that can produce not just pretty mock-ups, but actually generate the final production UI code; it can be the ...
- A generic GraphQL query component. It would be nice to be able to pop open an embedded GraphiQL UI to set up the query and maybe set variables.
- A generic "state" component that could have a list of state vars you want to track. The UI I'm envisioning would let you add a list of state vars (essentially wrapping `useState`) and their default values.
- An authorization component that could show/hide children based on a role or auth status. The UI would need to be able to select the role or user property to key off of.
Maybe these would be built into the platform itself in the future, but they could probably be done as components in the meantime.
Nothing but love for the team behind it! great support, and a fantastic tool.
HTML and CSS are the bane of my existence and iv loved being able to focus on functionality rather than small design problems.
Its also allowed me to pass over most of the design work ect to my non technical co-founder who is a fantastic designer but normally cant do much more then send me a figma file, she now instead plays a big part in the design of the marketplace! and I don't have 50 tickets lined up to change margins in 50 different places!
Its not without its downsides, but by god is it worth it!
We found Plasmic ideal for working with responsive, localized designs via its rich editor and the possibility to import code components. The greatest benefit is that designers and developers can now work on the same canvas with no back and forth.
And we only have great things to say about the team at Plasmic.
Thank you for all the hard work!
I started using Plasmic in August 2020, mostly because of my frustration with existing "no-code" tools.
I'm a designer, and I wanted something professional that allowed me to use my existing skills to develop my own applications. In real code. I wanted to participate with engineers in the development process and be able to translate my ideas into something that could turn into something if it took off.
Plasmic got a newb like me up and running on a Sunday afternoon.
They have one of the best onboarding "games" called Plasmic levels which teaches you how to visually create fully functional, albeit "presentational" react components-- So anyone with a basic design background can create react, or Nextjs app that can be deployed anywhere.
I cant really cram as much as I want into this humble review, but I highly recommend you investigate your skepticism and check it out. It will shave months off your development time and give your team an intuitive way to collaborate and ship waaaay faster.
I started a project that is the high quality alternative to Upwork. It's an advanced ecommerce application with embedded financial services. If I hadn't discovered plasmic I'm not sure I would have been able to make this on my own.