Plasmic Product Updates

CRA deprecated in favour of Vite, new features, community contributions and more!

create-plasmic-app now supports Vite

Our create-plasmic-app CLI utility has been updated to replace Create React App (CRA) with Vite.

The update only impacts the newly created projects and does not affect the apps created with CRA in any way.

This change comes in response to CRA’s deprecation, as highlighted in the recent React announcement (see Sunsetting Create-React-App).

We updated our relevant docs with the recent changes. Only two minor things were changed:

• The command to start your app in development mode is now npm run dev instead of npm run development.

• In development mode, the default port is now :5173 instead of :3000. The new dev server URL is localhost:5173.

New context menu feature: Zoom-to-Fit

Navigating a long page with many components can sometimes be challenging. To help you find the elements you need quickly, we’ve added the handy Zoom-to-Fit option in the context menu. Now, when you select an element from the right sidebar, you can:

• Right-click to open the context menu and choose Zoom-to-Fit, or

• Use the Shift + 2 keyboard shortcut.

This feature will automatically adjust the zoom and scroll the page so that your selected component is in clear view, making your workflow smoother and more efficient.

Registered variants

Registered variants is a feature that allows you to define different visual states for your code component when it is used as the root element in a Plasmic component.

You might have noticed this feature before while using Plasmic customizable components. It was introduced internally along with the customizable components, and now we have decided to release it to the public!

To register a variant, you define it in the custom component’s registration metadata code by specifying a CSS selector and a display name.

Each registered variant creates a new artboard in the Plasmic studio, giving you a dedicated space to adjust and preview the styles associated with that state. This approach makes it easier to manage and refine the visual design of your component for states like hover or loading.

Plasmic applies these registered variants based on the CSS selectors you specify. When a particular state is triggered, the corresponding styles are automatically applied to the component. This ensures that your component adapts visually in response to user interactions, all without additional code complexity.

For a more in-depth explanation and further examples, check out our documentation.

Element variants and CSS pseudo-selectors

Element variants (formerly known as element states) is a feature that allows customization of elements based on their interaction state. It’s useful in cases where you want to conditionally apply styles to a single element without creating a separate component.

For example, you could customize how a link looks when hovered or pressed. Now, we’ve expanded element variants to support most of the CSS pseudo-selectors. You can use CSS pseudo-selectors such as :nth-child, :is, :has, etc. One common use case is styling alternating rows differently:

For more details, watch the video tutorial or check out our documentation.

Auto-show hidden elements

Some of your elements might be hidden by default, for example, a Modal window or a select dropdown list. To make it easier to work with these elements in the studio, we have a special mode in the studio to automatically show the hidden components when you focus on them in the right sidebar or in the arena.

This function is enabled by default, but you can disable it in the View dropdown.

New hook: usePlasmicCanvasComponentInfo

Inside Plasmic Studio, code components receive additional props that contain additional information if it is selected or not. You are able to access these props with the hook named usePlasmicCanvasComponentInfo.

This hook will return selection information, which is useful for changing the behavior of the code component when it is selected on the canvas, making it easier to interact with the components and slots that are not always visible in the studio.

For example, this is how you could automatically open a modal when it is selected in the Studio:

function SimpleModal(props: { trigger: React.ReactNode; contents: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  // Open the modal when the SimpleModal code component is selected in the Outline tab
  // We also do not want to open the modal while the trigger slot is selected, to be able to edit the contents of the trigger slot
  const { isSelected, selectedSlotName } = usePlasmicCanvasComponentInfo(props) ?? {};
  const openInCanvas = isSelected && selectedSlotName !== 'trigger';
  return (
    <>
      <button onClick={() => setOpen((prev) => !prev)}>
        {props.trigger}
      </button>
      // Replace with a modal component of your choice
      <Modal
        open={open || openInCanvas}
        onClose={() => setOpen(false)}
      >
        {props.contents}
      </Modal>
      )}
    </>
  ); 
}

Read more in our documentation.

Community contributions

We are actively working together with the community members to integrate their code components into Plasmic Studio and share them with other users.

We will be posting all of the work submitted by the community under the upcoming Community Packages section in the Plasmic Studio insertion panel.

A good example of something that might be included are some visual kits, SDKs, or data-fetching libraries (check out the plasmic-supabase package as a reference for something that people are currently working on.)

If you want to contribute or have some work to share - let us know in Slack!

And let’s also give kudos to the people who contribute to the Plasmic core:

Deletion confirmations in Plasmic CMS

Whenever a user is about to delete a model or entry, they will now be prompted with a modal to prevent accidental changes. PRs: #132, #133

🤝 Join our community

Stay in the loop and connect with fellow creators. Join our forum at forum.plasmic.app and Slack at plasmic.app/slack.