yaaang

Hello again HN!

We’ve been working on this tool for several years now and got HN’d in the past (https://news.ycombinator.com/item?id=29563629), but we’ve just released it as an open source project.

It combines some seemingly disparate genres:

- Webflow, Wordpress and other page builders

- Retool and other tool builders

- Glide and no-code app builders

- Contentful and other CMSes

Today 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.

But 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.

Main use cases we’ve seen:

- Content management: let marketing drag/drop your React components to build landing pages in your Next.js website, with design guardrails

- Applications: let developers and technical users quickly build internal tools, client portals, and business software

- Website builder and design tool that doesn’t limit you to some built-in ecommerce platform, CMS, or hosting

Check out some videos/demos of building:

- Twitter clone: https://youtu.be/rpdjrFuVMog (live app: https://twitter-staging.plasmic.run)

- Service desk app: https://youtu.be/rYqSpUEJSTw (live app: https://tickets.plasmic.run)

- Vercel marketing page: https://youtu.be/itvbmgLZvcM (live app: https://vercel-workflow.vercel.app)

- Shopify headless storefront: https://commerce.plasmic.run

- Apple.com: https://apple.plasmic.run

Plasmic has been in production deployment at companies big and small. But we think it can grow far beyond ourselves as an open source project. We’d love to see it taken in new unexplored directions! Community users have even started using it to build emails with React.Email and mobile screens in React Native—our permission not required.

Would love to hear what you think!

As a "no-code sales person," I actually agree. It's why we started on https://plasmic.app, to bridge the gap between low-code and code—we think there can exist low-code tools that integrate deeply with existing code and codebases, to allow scaling in complexity.

A very nice effect of this is cross-functional collaboration—once it's possible for the team's developers to provide the right components as building blocks, then the non-developers in operations, design, marketing and product functions can compose these into full pages.

https://plasmic.app is a soon-open-source visual builder that (uniquely) integrates with codebases. (I work on this!)

So you can build within existing apps and use your own arbitrarily complex React components. This is what makes it suitable for complex production projects, because (as many others note) you'll invariably hit ceilings with typical low-code tools.

It focuses on both websites and applications, so it can be wielded as either a Webflow or Retool alternative.

Hi! I work on Plasmic. Plasmic's most common use case is actually the same one, letting content editors build pages in your existing website using your React components.

Congrats on this release! We are actually open sourcing Plasmic soon, would love to discuss any possible ways to collaborate.

That sounds like Plasmic: https://plasmic.app

You register React components as building blocks, and compose them together into websites and web apps.

Thanks for the mention of Plasmic!

Indeed, I believe there's a lot of innovation to be had by page builders - Plasmic's approach is to blur the lines between the codebase and the visual editor, so we try to directly confront the myriad issues laid out by three OP.

It depends on how extensive the edits/created components are that you want to allow the non-developer to make.

https://plasmic.app experimented with bringing together design+code in this way, but we found it didn't take hold outside of small visual tweaks. We ended up taking a different approach to this specific problem - letting you build screens out of React components from your codebase (and have the screens rendered back into your app). This has worked out much better for us, as the surface area for coordination between the developer and non-developer is much narrower and less brittle as a workflow (and at the same time doesn't put an IDE in front of the non-developer).

There are other approaches. Tools like https://www.plasmic.app/ give you a drag and drop page builder, but integrated into your codebase so that you can drag and drop your own React components for instance - exactly so that you can build upon rather than circumvent developers' work, while letting marketing/design/product/ops/etc directly edit websites and applications. (I work on this.)

https://www.plasmic.app/ has done this since its inception. It is a page builder that has drag and drop content editing, integrates with arbitrary codebases and modern frameworks like NextJS, and builds static (or non static) sites that are hosted on Vercel/Netlify/etc. (I work on this.)

Plasmic: https://www.plasmic.app

Recently it started merging a chakra UI contrib as well: https://github.com/plasmicapp/plasmic/pull/51

I don't follow how HTML comes anything close to expressing dynamism, composition, state, Turing completeness, etc.

Sure, you can encode whatever you want inside of data attributes, but that's just ignoring the problem. You still have to decide on a language to express all that within your data attributes.

React server components also does not is not trying to serialize this. Quite the opposite. We have an in-depth write up here: https://www.plasmic.app/blog/how-react-server-components-wor...

(Sise note: Plasmic's AST is in the open and has an API.)

Not true for all such tools. Though like a sibling comment suggests, part of the issue is that no-code is defined too broadly to include everything under the sun.

I work on a no-code tool that checks those specific boxes (shameless plug: https://www.plasmic.app), but the use case is very different from Bubble. The key is that it explicitly doesn't try to replace all code, and was designed from the ground up to integrate deeply with existing codebases. I don't think we need be the only one, other tools can also do the same. But this aspect is by far the most complex part of building this product. That, and the pressure to create vendor lock-in is real.

The problem is that no-code is not well-defined. It's used to label everything from Excel to Airtable to Zapier to Webflow to Bubble to Retool.

And within that umbrella, some of them are relevant to the HN crowd.

Your examples, like spreadsheets for supply chain planning or DAWs for music production, are indeed disconnected from what developers touch. Your Ableton projects don't concern them.

But other times, the tool very much impacts developers. For instance, I work on https://www.plasmic.app, which lets marketing teams build landing pages and other content on React websites. Here, the stakes are higher when it comes to page performance, design system consistency, component reuse, and so on. As such, developers heavily vet the tool, similar to picking a CMS, and virtually all of our customer adoption was driven by developers.

So relevancy to devs depends entirely on what specific tool/use case you're talking about.

The API-based integration does track impressions. Besides that, you can also use codegen, which doesn't.

(Copying response from elsewhere)

It's headless as in "headless CMS" - Plasmic is decoupled from your frontend stack, which you run and own. The content you design is delivered via API into your site/app.

You may be interested in https://plasmic.app/casestudies. Note that Plasmic is different from these because it's a full free-form web design tool, so it doesn't restrict you to blocks that also have be authored by developers.

Really not trying to mislead/annoy - Plasmic's client libraries are open source and on GitHub, but not the visual editor currently. Will add clarification to the repo, but any other suggestions are welcome.

It's the opposite - it has no vendor/hosting lock-in. You run and own your own frontend stack, hosting, etc. Plasmic is a visual editor that plugs into your stack.

It's different from TinaCMS because it's a full free-form page builder/web design tool. The developer doesn't need to write any CMS template/schema code.

TinaCMS is like other headless CMSes with visual editors, where you're limited to using blocks that developers need to code up.

(Both support Markdown text content editing and drag/drop of your own components.)

It's headless as in "headless CMS" - Plasmic is decoupled from your frontend stack, which you run and own. The content you design is delivered via API into your site/app.

What makes this noteworthy is that it's built on the still-heavily-WIP React Server Components ([1]), so unlike SSR frameworks, it doesn't require downloading full bundles of JS and raw data to re-render and hydrate your entire UI client-side. This is also the direction Next.js is heading ([2] and [3]), and will have significant ramifications for both architecture and performance of React applications for years to come. Here's a recent talk I gave on the general topic of partial hydration: https://www.youtube.com/watch?v=U28rjWrGVxk

I work on a no-code visual page builder for React-based sites like this (https://www.plasmic.app) - a major customer segment is headless commerce sites, so this is something we care a lot about.

[1]: https://shopify.dev/api/hydrogen/framework/react-server-comp...

[2]: https://github.com/vercel/next-rsc-demo

[3]: https://nextjs.org/blog/next-12#react-server-components