Have you ever played with Lego toys and made some random structures just by dragging and dropping Lego pieces at the right spot? Even if not played, you would have seen one on the internet. Kids enjoy it and put their creative skills to the test. This basic notion of easily building structures and testing creativity has pushed the technology from code-heavy to low-code and no-code. The no-code tools allow you to build websites simply by dragging and dropping elements at the right spot.

Today, I will talk about the Plasmic.app that has recently stepped into the headless CMS arena with its powers ranging from low-code to no-code. The headless page builder works with React, Vue, Angular, HTML, PHP, Vanilla JS codebase and helps content creators build frontends superfast across devices.

Plasmic Overview

We can define Plasmic in a lot of ways that can sum up to this – Plasmic is a website and app headless page builder that integrates with your codebase so you can easily design frontends.

No-code is always a help for the marketing teams as they can alter the changes as per their campaigns without involving the development or designing teams. This gives two major benefits.

(a) Elimination of development cycles for simple website design editing tasks.

(b) Reduced turnaround time resulting in quick deliveries.

Marketing teams or any teams with no-coders can accomplish more with no-code platforms such as Plasmic.

Easy Switching Between Codegen Mode and CMS Mode

Plasmic goes from no-code to full-code and then comes back to no-code in a few clicks. It does it with the help of Codegen Mode and CMS Mode.

There are two ways to integrate Plasmic-designed content into your application codebase:

Codegen – Plasmic as a UI Builder

With Collagen, you can generate presentational components into your codebase. It is for the more advanced use case where developers want to build arbitrary stateful React apps. It requires you to manage the syncing of actual source files, committing them into your repo, etc.

You can import all the components like a library that you have created with Plasmic and use that in your project in React, Next.js, Gatsby, Shopify, Bigcommerce, WordPress, Contentful, Netlify, Vercel, and more codebases. Along with components, you can also import data from, React YouTube, React Google Maps, Material UI, GraphQL API, and REST API.

PlasmicLoader – Plasmic as a CMS

Plasmic’s USP and the model used by most of the users is the CMS mode. Designed for simple websites that do not need heavy code instrumentation, CMS Mode allows you to load pages/components at build-time without generating code into your repo or version history. Currently, it is available only for Next.js/Gatsby only.

Non-developers can create landing pages, webpages, app pages from scratch or edit the existing pages by drag and drop feature and place elements where they want on the page.

And, because of the Platform’s headless nature, the users do not have to design separately for each device. Even in the dashboard, you will be able to see how your page looks on Desktop and on mobile on a single screen. See the image below.

 plasmic-desktop-and-mobile  

Why Use Plasmic.App?

“Want to Scale Your Content Marketing? Get The Employees Involved”

– Michael Brenner.

Do you know what it means? Every employee should play a role of a marketer every now and then to scale your content marketing.

If marketing is being scaled up this way, then why can’t we scale up development? Why can’t we let every team player play a role of a developer or a designer now and then without letting them use a single line of code? We can now with headless CMS visual page builders such as Plasmic.

Plasmic-Image

  • Plasmic makes it easy and intuitive for anyone to directly create new user experiences without developer involvement.
  • Plasmic can completely change our team collaboration workflow.
  • You can free up developers for high leverage work if you involve non-developers for the Nitty-Gritty work. 
  • Plasmic can unblock non-developers whether they are in marketing, design, product in your organization.
  • Plasmic could just help the whole organization iterate much faster. 

Is Plasmic That Good?

Every tool has its limitations, even Plasmic does, but all these are limitations as the product developers tirelessly work to cover these loopholes in the next updates. So, maybe two years down the lines, Plasmic won’t be limited to a general design/development tool. It will be a more end-to-end product that allows much more than just creating the pages. Options like optimizing webpages for search engines, A/B testing, analytics, own hosting, and more will be there.

These limitations might not bother some developers as they already have a system in place for analytics, A/B testing, or optimization. Such developers can have Plasmic and speed up the way they work. So, Plasmic does the job well in many use case scenarios and lacks in some.