[HN Gopher] Plasmic.app: Visual editing and content platform for... ___________________________________________________________________ Plasmic.app: Visual editing and content platform for building websites and apps Author : octopoc Score : 144 points Date : 2023-12-19 16:27 UTC (6 hours ago) (HTM) web link (www.plasmic.app) (TXT) w3m dump (www.plasmic.app) | solardev wrote: | I don't really get what this does. The front page feels like a | lot of empty marketing, but I still don't understand how it | works...? | theogravity wrote: | Same. Reading the page all the way down makes it look like a | ReTool competitor? | nkozyra wrote: | Definitely a textbook example of too much splash. | | If you pull all the marketing taglines together, it's a no/low- | code app builder. We have those, what makes this different? | That's the front page sell. | chaos_emergent wrote: | Seems like it's Framer-meets-Retool. | | Framer has a great UI builder, but doesn't connect to backends | very well. They have their own CMS but the net result is that | you typically use it for marketing sites but not business app | interfaces. | | Retool can connect to a lot of different data sources but is | ugly and wouldn't help build a customer-facing app that I would | feel proud of. They give you easy to use UI primitives to get | you up and running fast. | | This seems like a UI builder that can hook into backend | systems. | chungwu wrote: | 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. | octopoc wrote: | I think they're trying to invent a new market where none exists | yet, and when you do that you HAVE to communicate very clearly. | Basically I think they're a WYSIWYG editor for a React SPA. For | me, this section helped: | | https://github.com/plasmicapp/plasmic?tab=readme-ov-file#how... | solardev wrote: | Thanks! That's a lot more helpful. I understand the gist of | its value offering now. | | Still have questions about how component composition and | layout work, but at least the readme is clearer about what | the product IS. | jason_plasmic wrote: | For component composition and layout, Plasmic makes it easy | to build responsive pages. Our primitives like stacks are | all based on flexbox, though you can use absolute | positioning if needed. | | For some more detailed docs, check out | https://docs.plasmic.app/learn/styling-and-layout/ | xyzzyrz wrote: | Thanks for the feedback, we're still iterating on the homepage | and didn't expect to get posted here yet! | | Our repo https://github.com/plasmicapp/plasmic might be a bit | more concrete. | | It's a visual page builder that integrates with React | codebases. Content management is our biggest use case - i.e., | dev team integrates with Plasmic, and then | marketing/content/design teams can create landing pages on the | marketing site. | | (A newer use case is building applications as well, hence some | of the comparisons with Retool etc. There's actually quite a | bit of overlap between these use cases, esp. when considering | external-facing "customer portal"-style applications.) | chungwu wrote: | 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). | bossyTeacher wrote: | > You can also bring in your own React components | | What does that mean? Does it mean that you can import your | own components like using a standard import statement? | chungwu wrote: | 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. | georg-malahov wrote: | No, if you use codegen, you should register your component | by providing additional necessary metadata, like | importPath, importName and others. Then you can use you | component in the Studio same way like other builtin | components. Check https://docs.plasmic.app/learn/code- | components-ref/ for more details. | ffitch wrote: | An ability to connect a custom UI to managed data source | connectors seems interesting. Probably just me, but I find most | of the point-and-click intranet builders a bit cumbersome and | restrictive. | octopoc wrote: | Eventually someone is going to build a good enough visual app | builder with AI assistant, and nobody will ever know except that | a mysterious startup with seemingly unlimited resources and | agility is taking over every SaaS market. | zubairq wrote: | Interesting comment. I would like to know a bit more about the | thinking behind this comment | ukFxqnLa2sBSBf6 wrote: | I don't think the barrier to entry for SaaS products is "how | quickly can I create a shoddy front-end." | superfrank wrote: | My question with these WYSIWYG editors is always how maintainable | is the code they output? | | I have no problem using these on smaller projects that are fairly | static, but on more complex things it has always felt to me like | the time you save by using a tool like this, you end up losing | when you want to do something not supported by the tool and you | have to hack through the spaghetti code it outputs. | | Can anyone speak to the quality of the code that Plasmic puts | out? | chungwu wrote: | 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! | nkozyra wrote: | > 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. | | I think that actually amplifies the concern. Basically it's | "don't touch the output," but what if we want/need to? | chungwu wrote: | 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. | jason_plasmic wrote: | +1 to Chung's reply. There's also a loader API where you'll | generally never need to see the code that is output. Check | out the differences between loader API and codegen here: | https://docs.plasmic.app/learn/loader-vs-codegen/ | | In case you still want to see the code from codegen, here's | an example. We generate 3 files per page/component: | | 1. JS/TS: https://github.com/plasmicapp/plasmic/blob/master/p | latform/w... | | 2. CSS: https://github.com/plasmicapp/plasmic/blob/master/pla | tform/w... | | 3. An entry point wrapper JS/TS file: https://github.com/plas | micapp/plasmic/blob/master/platform/w... | | While 1 and 2 will be overwritten as you update your project | in Plasmic (and therefore you should never modify it), the | wrapper (3) is yours to customize as needed, like setting | props or binding event handlers. In the above example, we | computed how much free trial time a customer has. You can | read more about the generated code here: | https://docs.plasmic.app/learn/codegen-components/ | superfrank wrote: | That's not really the question I was asking. Most WYSIWYG's | that I've used in the past are built around the idea that you | can use them over and over. I'm thinking of things like Wix | and Squarespace or even all the way back to Microsoft | Frontpage. | | My question is more focused on the idea that at some point | there will be something that I need to do that can't be done | through the WYSIWYG editor. I'm wondering what happens in | that use case. Can I open up VS code and start changing the | underlying code myself? If so how does the tool maintain | those changes through iterations and how maintainable is the | code that Plasmic generates? | | My concern comes from the fact that I've used some of these | tools in the past and the code they spit out will have things | like 8 levels of nested divs for no reason, empty tags, and | inlined and !important styles all over the place. I'm not | saying Plasmic will do that, but I'm wondering if anyone who | has used this can say how good or bad the generated code | actually is. | chungwu wrote: | 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 :-) | chungwu wrote: | You can also take a look here! https://github.com/plasmicap | p/plasmic/tree/master/platform/w... | | This is Plasmic-generated code that we ourselves use to | build our visual editor. | momojo wrote: | What makes this different from other low-code/no-code editors out | there? Retool, Appian, Kuika, etc. | chungwu wrote: | 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. | wg0 wrote: | How many are there actually? Sorry I'm new to this particular | space. | xyzzyrz wrote: | Excited to see this posted here! I think probably because we | announced it going open source today. | | I think the GitHub page is probably a bit clearer than our | website right now: | | https://github.com/plasmicapp/plasmic | | Basically, it's a visual page builder that plugs into your own | Next.js/Remix/React/etc. codebase. Your marketing/content/design | team can then build and publish pages without filing tickets on | eng. This (content management) is the main use case. | | The most interesting aspect is that editors can drag and drop | React components from your own codebase as building blocks. This | is very powerful, esp. with e.g. data fetching React components. | | Why open source? Because we love the tool. 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 a broader community take it in unexplored directions. | Community users have even started using it to build emails with | React.Email and mobile screens in React Native. | | Would love to hear folks' questions and feedback! | xyzzyrz wrote: | I think another thing interesting about Plasmic is that it is a | bit ambitious in trying to combine 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, or a customer | portal). With the right foundations, we think these can be | unified--Plasmic's UI can adapt to different levels of control | for different personas/tasks. | | So a newer use case is that you can use it to build | applications as well as websites, for both developers and non- | developers. This is the more experimental side of the project, | beyond the content management use case. | bogwog wrote: | So it's like a more advanced alternative to something like | GrapesJS that also includes integration with some popular web | frameworks? | xyzzyrz wrote: | You can think of it like that - GrapesJS ultimately outputs | HTML that exists in its own universe, whereas Plasmic focuses | more on integrating with existing codebases, where you might | want to use your React components, render in your React | context, etc. | nilsbunger wrote: | Looks really cool and ambitious! | | Curious why you guys decided to go open-source, and whether | that was always the plan. | xyzzyrz wrote: | I talk about the "why" a bit above, but we've talked about | how to open source it internally since almost its inception, | but there's work involved in open sourcing that we just had | to prioritize like any other work item, as well as concerns | around whether we were ready to support it (for instance, in | light of rapidly changing code and data). | santa_boy wrote: | This is awesome. Would love to learn more and build content at | n0c0de.com using this. Please kindly fix the slack link. | xyzzyrz wrote: | Fixed, thanks! | octopoc wrote: | Congrats on going open source! Which components are open | sourced specifically? Is there any chance it will be self- | hosteable? I don't want to host it myself any time soon but I | prefer giving my money to a company where that's an option. | xyzzyrz wrote: | We still have work to do to make self hosting (much) easier, | but yes, that's the plan! | octopoc wrote: | Awesome, that is great news! | promiseofbeans wrote: | How does it stack up against MUI's Toolpad? | (https://mui.com/toolpad/) | | All things considered, they seem pretty similar - visual UI to | generate React code that works alongside existing codebase, | open-source & self-hostable, etc. | jason_plasmic wrote: | Replied to similar comment here: | https://news.ycombinator.com/item?id=38701366 | xyzzyrz wrote: | There's a vibrant industry of similar tools - but lots of | differences and room to innovate! | | Just a few of the differences: Plasmic.... | | - Is not specific to MUI | | - Supports actual design control (beyond theming) | | - Supports defining reusable components in the editor, with | slots/props/variants | | - Is suitable for websites and applications where page speed | matters (static/SSR pre-rendering and data fetching, image | optimization, etc.) | | - Has a more structured layout system | | - Is highly configurable UI for different personas - e.g. | non-developers on the team | | - Has cross-project imports / reusable libraries | | - Has Figma import | | - More... | catapart wrote: | This doesn't quite hit the sweet spot for me, yet, but I really | wish something described the exact output of this app. Is it a | react app, always? Or can it be just a vanilla js-based web app? | Can it make svelte components? | | Just a sample of the output would go a very long way in telling | me whether or not it can produce anything I can use. | chungwu wrote: | 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). | mholt wrote: | Chrome only :( | | I guess Firefox 121 isn't modern enough... | bossyTeacher wrote: | Mozilla needs to step up its game or its browser is gonna | disappear :( | ireadmevs wrote: | Or maybe Chrome needs to stop implementing non standardized | APIs and becoming the new IE | addisonj wrote: | I have been using Plasmic for the last 3 months as part of a | contract app where the goal was to get the technical, but not | frontend experienced client able to do a lot of the design. I did | a lot of custom work on components (like integrating the Supabase | API and custom Auth for RLS support) as well as integrating some | other endpoints/libraries. | | In short, I have gone pretty deep with it as a proper "app" | builder compared to maybe a more CMS/design use case. By far, for | front-end low code UI tools it is my favorite. However, it isn't | without the typical pains of that when the abstraction breaks it | can be quite a hassle and requires some real knowledge (or | support help) to figure things out. The real thing that keeps me | on it though is that it really can have hand written react and | Plasmic generated react live by side, which drastically lowers | the risk compared to a lot of other app builders. | | I do genuinely think it can speed up development for certain | teams on app use cases, but I think the structure of those teams | is a bit particular, because you do need someone who really knows | react/next ecosystem to manage the underlying integration. | | Thanks to the Plasmic team! | | Happy to answer questions in thread | bossyTeacher wrote: | > you do need someone who really knows react/next ecosystem to | manage the underlying integration. | | So this is react specific? It doesn't say so in the home page. | It vaguely hints at it with a "Bring your data sources, React | components, deployment environments, design system, and more.". | throwup238 wrote: | That omission jumped out at me too. I immediately googled | "django plasmic" and had to find out from the Github repo | title: "plasmicapp/plasmic: Visual builder for React. Build | apps, ..." | chungwu wrote: | It is possible to use Plasmic in other contexts, but to | really unlock the power of Plasmic, yes you need to be using | React. | ___victor wrote: | While Plasmic does offer the flexibility to export designs to | other frameworks like Angular, Vue or even plain HTML, it is | mainly targeting React. Some features, such as the ability to | register custom components from the user's codebase, are | React-specific. | octopoc wrote: | Is the project open to contributions for supporting other | frameworks? I'm interested in Blazor specifically, which is | based on HTML. Do you see this becoming a pan-framework | "design mode" tool? Do you think it's architected for that? | A related question is, is it easy to use it for client- | side-only stuff and leave the backend alone? | ___victor wrote: | > is it easy to use it for client-side-only stuff and | leave the backend alone? | | Yes - using Plasmic to manage landing pages design and | content is our main use case! | | We still need to improve the experience for open source | contributions, but we are open to that! That being said, | React is still our main priority at the moment. | | I'm not familiar with Blazor, but you may also explore | our render API (https://docs.plasmic.app/learn/render- | api/). It allows fetching rendered HTML from Plasmic | servers, then you would just render it in the DOM. | claytongulick wrote: | This is my main concern too. | | I don't understand why tools like this "pick a winner" with a | specific framework instead of rendering to Web Components | with a framework wrapper, or using something like Stencil[1] | that can render to any framework. | | [1] https://stenciljs.com/ | ___victor wrote: | It really depends on how well you want the design to | integrate with your codebase, which is where most of | Plasmic power lies on, such as: leveraging your existing | custom components as building blocks within the design | tool; or adding heavier instrumentation to props and | rendered contents on the code side. | | It is possible to use Plasmic's render API | (https://docs.plasmic.app/learn/render-api/) to fetch the | rendered HTML and just render your designs using any | framework, but that means it's a more limited experience. | chungwu wrote: | 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. | georg-malahov wrote: | I also started using Plasmic exactly 3 months ago and | accomplished now one client project with all the | backend/auth/frontend integrations entirely using plasmic. I | agree with you that this is a great tool, that is far beyond | other known builders and low-code solutions. | | I'm curious about your approach to integrating APIs with | Plasmic. Did you utilize Plasmic's backend integrations, or did | you prefer a client-side fetcher? | | In my case, I found that using backend integrations through | Plasmic's servers resulted in noticeable latency issues, with | response times varying between 1 to 3 seconds, which was quite | slower compared to direct API calls that took no more than | 200ms. Have you encountered similar challenges? | | On another note, while the client-side Fetcher was a potential | alternative, it fell short in several areas for my needs. | Specifically, it lacked options for customizing SWR fetch | options, built-in mutation support, and accessible state | management. To address some of these issues, I've made a | contribution through a pull request: | https://github.com/plasmicapp/plasmic/pull/102. I thought it | might be of interest to you. I would love to hear your thoughts | on this and any insights you might have based on your | experience. | addisonj wrote: | I am using custom components for all data fetching which | primarily wraps the supabase JS sdk. I have some issues I | still need to make a bit more robust around caching and | invalidation, but the Supabase JS sdk does help some. | | I do think that is another weakness right now is the built in | plugins aren't quite sophisticated for a lot of real use | cases | promiseofbeans wrote: | The generated react living alongside custom react sounds | similar to MUI's low-code drag-n-drop editor that they're | working on (https://mui.com/toolpad/). | | Looking at the demo, does Plasmic have any killer features that | MUI's offering doesn't? At the moment, MUI's main limitation is | that it can't connect directly to a database: you have to go | through an API, or write an API route for each app that proxies | the SQL queries. | ___victor wrote: | Plasmic does have support to different data integrations, | including databases: https://www.plasmic.app/integrations | jason_plasmic wrote: | MUI's Toolpad looks pretty cool! I'm going to try it out | today. | | One big difference is that Plasmic is a platform and can be | used by non-developers to make changes that go straight to | production. Think marketers, content managers, and other non- | devs that are on your team who want to ship new designs and | content without bugging the dev. | xyzzyrz wrote: | Just some of the differences: | https://news.ycombinator.com/item?id=38701406 | | And yes you can connect directly a database - critically, | Plasmic lets you define backend operations that work with | auth: https://docs.plasmic.app/learn/integrations/#security | mattgreenrocks wrote: | It looks very nice for exploring the large design space of what | UI an app needs, and actually laying it out. I think in terms | of the backend, but the gap to visualize what the frontend | needs like can be large; the blank page stares back so much. | Hoping something like this can help. | senthuJ wrote: | Balanced viewpoint here. Good writeup. Got potential. In my | view looks solid in certain use cases e.g. websites, mobile | apps and for rapid prototyping. Step in the right direction | (open sourcing) for Plasmic i think. | jbverschoor wrote: | I don't understand what it does | armchairhacker wrote: | WYSIWYG web design has been tried since the internet has existed, | but people keep coming back to writing UI in code. How does this | compare to other tools? What is the best WYSIWYG tool today? | jason_plasmic wrote: | I think, with most WYSIWYG editors in the past, a developer | runs into some limitation, forcing them out of the system into | uncharted/hacky territory. But for Plasmic, developers are a | first-class citizen. | | For example, one huge advantage with Plasmic is that Plasmic | components run within your React tree. This means you can | naturally embed Plasmic components in your React components, | and even the other way around! | Lincolnmitchell wrote: | I've been using Chakra UI components in Plasmic for around 1 year | after trying to do this in Framer and UXPin Merge. Plasmic is | what Framer was hyped to be but did not deliver, it's the best I | have found. | | The downside to Plasmic has been the community size and therefore | lake of support so I hope Plasmic going open source will resolve | these issues. | | These types of tools can be overlooked by traditional siloed | Design and Development, and is best suited to hybrid teams were | the power of designing with code components can be realised. | | Plasmic was like discovering a Gem, a rough diamond that a hybrid | open source community get the chance to shape. | | I highly recommend this product! | Lincolnmitchell wrote: | I'd add that our current workflow is to complete our webapp | designs using code components and deploy via Vercel as a | prototype. Later we aim to publish production directly from | Plasmic. These little steps are addressing cultural issues | mostly, a the idea of a design team publishing the FE touching | a lot of cultural issues and fears like reporting lines, | processes, job loss - change is scary. | ireadmevs wrote: | As a FE engineer, my preference is to work on the tool that | is used to create the websites rather than the website itself | wiltonn wrote: | Whats the difference between this and Builder.io? both no/low | code apps with a CMS as its base. Drag and drop for UI, auto-code | generation and plug into back end of choice. | chungwu wrote: | 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 | xyzzyrz wrote: | We also have this page that goes into some more detail: | https://www.plasmic.app/vs-builder-io | p2hari wrote: | I did not understand the pricing. Is it for the CMS then? Is it | possible to self host and connect other CMSes? ___________________________________________________________________ (page generated 2023-12-19 23:00 UTC)