7 ms·
Plasmic.app: Visual editing and content platform for building websites and apps
- solardev 3y agoI 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 3y agoSame. Reading the page all the way down makes it look like a ReTool competitor?
- nkozyra 3y agoDefinitely 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 3y agoSeems 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 3y agoYes, 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 3y agoI 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-do-i-integrate-plasmic-as-a-cms https://github.com/plasmicapp/plasmic?tab=readme-ov-file#how...
- solardev 3y agoThanks! 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 3y agoFor 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/ https://docs.plasmic.app/learn/styling-and-layout/
- xyzzyrz 3y agoThanks 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 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 3y agoPlasmic 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 3y ago> 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 3y agoBasically, 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 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 3y agoNo, 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/ https://docs.plasmic.app/learn/code-components-ref/ for more details.
- ffitch 3y agoAn 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 3y agoEventually 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 3y agoInteresting comment. I would like to know a bit more about the thinking behind this comment
- ukFxqnLa2sBSBf6 3y agoI don't think the barrier to entry for SaaS products is "how quickly can I create a shoddy front-end."
- superfrank 3y agoMy 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 3y agoPlasmic 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/ https://docs.plasmic.app/learn/codegen-guide/), but also happy to answer questions here!
- nkozyra 3y ago> 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 3y agoWe 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.
- 3y ago
- xyzzyrz 3y agoExcited 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 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 3y agoI 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.
- bigboy12 3y agoEh, their page doesn’t even load. Feh!
- bogwog 3y agoSo it's like a more advanced alternative to something like GrapesJS that also includes integration with some popular web frameworks?
- momojo 3y agoWhat makes this different from other low-code/no-code editors out there? Retool, Appian, Kuika, etc.
- chungwu 3y agoIt 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 3y agoHow many are there actually? Sorry I'm new to this particular space.
- catapart 3y agoThis 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 3y agoRight 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/ 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 3y agoChrome only :( I guess Firefox 121 isn't modern enough...
- bossyTeacher 3y agoMozilla needs to step up its game or its browser is gonna disappear :(
- addisonj 3y agoI 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 3y ago> 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 3y agoThat 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 3y agoIt is possible to use Plasmic in other contexts, but to really unlock the power of Plasmic, yes you need to be using React.
- ___victor 3y ago
- jbverschoor 3y agoI don't understand what it does
- armchairhacker 3y agoWYSIWYG 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 3y agoI 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 3y agoI'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 3y agoI'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 3y agoAs a FE engineer, my preference is to work on the tool that is used to create the websites rather than the website itself
- Lincolnmitchell 3y agoYES! We need more FEs like you.
- wiltonn 3y agoWhats 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.
- xyzzyrz 3y agoWe also have this page that goes into some more detail: https://www.plasmic.app/vs-builder-io https://www.plasmic.app/vs-builder-io
- deleted 3y ago[deleted]
- chungwu 3y agoWe 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
- p2hari 3y agoI did not understand the pricing. Is it for the CMS then? Is it possible to self host and connect other CMSes?
- ilrwbwrkhv 3y agoNo it's another one of those startups looking to cash in on becoming open source. If your open source projects contains a "pricing" page prominently in the top bar, it goes against the open source ethos and you should be ashamed of marketing it as such.
- _fmota_ 3y agoI understand your mention of open source ethos, but open source projects can also have commercial aspects. It is primarily about transparency, collaboration, and free distribution of software. There are many successful open source initiatives that incorporate commercial strategies to support their ongoing development, professional support services, and operational costs. Our pricing page is part of our commercial approach, ensuring we sustain our open source contributions, also for some additional services that we provide.
- _fmota_ 3y agoThe pricing vary depending of the use case, for those using the CMS, it is mainly for the usage of our hosted version of the visual builder and the CMS. We already provide ways to connect with other CMSes besides our own, like sanity, stripe, contentful, hygraph... But it’s possible to self host and connect with other CMSes.
- ryscheng 3y agoI’ve been using Plasmic for the last 6 months to build rich featured Dapps in the web3 space. It takes some time to import all the React components I need but once you do, it is really incredible how much this speeds up my development. We now have non-developers (like designers and PMs) regularly shipping entire features to production without developer help. Really takes some of the pressure off the engineering team while drastically improving team velocity. Just for fun during the ETHDenver hackathon, I shipped an LLM-powered NFT generator, with 0 lines of code in 3 hours, and won a cash prize. This tool completely changes the game for me and my team.
- jc1627 3y agoPlasmic is by far the best kept secret in the no-code industry. Having built apps on Bubble, Flutterflow and a few other platforms, Plasmic takes the cake hands down. It is great for complex apps and allows endless custom components, is super scalable, and is also open source. Best of all, their customer support staff are top tier. Plasmic has a dedicated Slack channel where they respond to questions and solve problems almost immediately. They will literally respond within 5 minutes of a slack and start helping. It's white glove service that is rare.
- Multrex 3y agoCheck also Lowcoder at lowcoder.cloud. Self-hosted many integrations, open-source, free.