What is Plasmic

Plasmic is a no code visual page builder that integrates with code. With Plasmic, non-developers can build and deploy web pages without oversight from developers or managers. When needed, developers can also integrate these pages into any existing website or app codebase and go live in minutes.

We are removing the dependence on engineers and making it possible for non-developers like marketers, content creators, and designers to manage their processes end to end. For teams of all sizes, this approach ultimately saves development time and maintains engineering focus on the core business goals.

Why Plasmic

We are building Plasmic with a special focus on cross functional team collaboration and deep integration into existing websites and app codebases. At the core of our solution is a drive to empower every team to ship websites faster and allow developers the freedom to use custom code components in a visual page builder.

With Plasmic, we are bridging the gap between design and development, making it possible for everyone to go from ideation to production with minimal time and effort.

Unlike other players in the industry, Plasmic is a true no code tool that allows everyone to create production-grade experiences without depending entirely on developers while also giving you total ownership over your code so you can host or deploy it anywhere.

How does Plasmic integrate with your code

Plasmic works like a design tool to help you quickly iterate on your ideas and build out a visual representation of your web pages. Much like Figma, you can design projects simply by dragging and dropping pixels on a canvas. Plasmic immediately translates your designs into code, which is then optinally available for use in multiple JavaScript frameworks via our headless APIs with full SSR support.

You have two options for using Plasmic:

• as a standalone no code visual page builder
• as a code-first visual page builder.

In major amount of cases, you wouldn’t need to worry about the code part, and it would simply be enough to build your designs and publish them without having to leave the studio!

If you want to dive deeper and integrate Plasmic into your codebase it would only take you three simple steps to go from ideation to production:

1. Visually build pages and components.

2. Integrate into your codebase

3. See it in production

How does your code integrate into Plasmic

Using code components

Code components are one of my favorite features of Plasmic. It gives you the ability to use custom code components—from your own codebase as a building block in Plasmic Studio. What this means is that developers and teams building on Plasmic can:

• Use their existing design system to build their own custom components,
• Show dynamic data,
• Use components of arbitrary complexity and behavior, and
• Introduce interactions, effects, and functionality not yet built into Plasmic Studio.

import ProductCard from '../components/ProductCard';
export const PLASMIC = initPlasmicLoader(...);

PLASMIC.registerComponent(ProductCard, {
  name: "ProductCard",
  props: {
    // Pass in arbitrary content in the visual editing canvas
    children: 'slot',

    // You can have any number of slots.
    header: 'slot',

    // Simple scalar props
    productId: 'string',
    darkMode: 'boolean',

    // Some props can take an enum of options
    elevation: {
      type: 'choice',
      options: ['high', 'medium', 'flat']
    }

    // Some props can take an arbitrary JSON object
    config: 'object',

    // Some props can have dynamic configurations
    headerColor: {
      type: 'choice',

      // Hide the 'color' prop if no header content
      hidden: (props) => !props.header,

      // Offer different choices depending on if darkMode is on
      options: (props) => props.darkMode ? ['black', 'blue'] : ['yellow', 'green']
    }
  }
});

How do we handle data fetching with Plasmic?

Plasmic allows you to bring your own data. This means that you can build custom code components that fetch data from your own backend or from a third party service and register that component in Plasmic.

We also have built-in integrations with several data providers like Supabase, Sanity, HyGraph, Strapi and many others. As a result, you can already use data stored in these places in Plasmic just by configuring them with the right credentials.

Plasmic also supports a fully functioning Content Management System that allows you to define data schemas for your projects. As a result, you have access to an API first headless CMS, in addition to visual page building.

Does Plasmic have e-commerce integrations?

Plasmic already integrates with popular e-commerce solution providers like Shopify and Swell Commerce to ensure that you build out new variations of your store without needing to duplicate and manage your inventory from multiple sources.

We are also working on adding more integrations with other e-commerce service providers to make Plasmic your one-stop-shop for building all kinds of e-commerce solutions.

Other things that make Plasmic great?

Happy you asked, in no particular order, here are some of my favorite features of Plasmic:

• AB Testing - You can run A/B tests showing different versions of your pages to different users, optionally integrate with experimentation platforms like Google Optimize, and analyze the results in your choice of analytics platform
• Personalization - You can conditionally show different versions of your site in different circumstances. This is helpful for targeting specific audiences such as returning shoppers, logged-in users, visitors on mobile, partners, etc. Note that this is not a built-in feature, but very easily achievable within Plasmic.
• Localization - Plasmic works with localization frameworks like react-intl, react-i18next, lingui.js, and more to enable full page translation capabilities for your Plasmic sites. Plasmic’s built-in headless CMS also supports full localization out of the box. Together with localizing your visually built pages, you can have one cohesive workflow for taking your website global.
• Suite of starter templates - Plasmic has a wide range of starter templates covering categories like blogs, portfolio sites, restaurants, e-commerce, Saas, and so much more. You can build an deploy a fully functional Plasmic application in minutes using any of the existing starter templates which makes it super fast and convenient to build with Plasmic.

I hope this helps you make a better sense of what Plasmic is and the problems we are trying to solve. Should you have any more questions about Plasmic, feel free to join our Slack community and we’ll be there to support you.