Introducing the Plasmic Component Store
Plasmic now has a component store—a set of ready-to-go interactive components that you can simply drag and drop into your project!
Behind the scenes, these are the same as any normal code components that you can already register for use in Plasmic yourself. But now, the component store lets you use common libraries/packages without touching code at all.
The first batch of these has landed, and are now available in the insert menu:
These include:
Core elements, like HTML video elements and iframes
Third-party widgets such as YouTube
Social media widgets, currently featuring Twitter
Animations, such as reveal-on-scroll animations and Lottie
Interactive effects, such as parallax scrolling, and 3D tilt effects
Design systems, currently featuring the Ant design system
The store lets you easily tap into third-party npm libraries that we’ve vetted and curated, such as react-awesome-reveal and lottie-react and antd.
Store components work with any project, including app-hosted projects that bring your own components. Store components can also be made to work with codegen—you just need to make sure to install the respective upstream npm library into your React project, such as @plasmicpkgs/lottie-react.
The @plasmicpkgs are all open-source and available on our GitHub repo, so you can learn from these examples when registering components of your own.
Let us know what other components you’d like to see included!
For developers: richer, dynamic props for code components
Beyond the component store, any code components that you yourself register for use in Plasmic Studio now support a slew of new features.
These will let you make your components easier to use by controlling more of how they’re presented and how they’re interacted with.
Props now take a description field, which lets you add help text that shows up as a tooltip.
Props can dynamically hide/reveal themselves, and choice props can now list dynamically computed options. This can be based on what the other props are set to, and any other data that the component has access to. See docs on prop control functions.
Most props now take a defaultValueHint, which helps indicate to the user what the prop’s default value is when it’s left unset.
Slots now have the option hidePlaceholder which will not show the slot placeholder in the canvas when the slot is not selected. This is helpful if you feel like components are showing too many gray placeholder boxes unnecessarily.
There’s a new "imageUrl" type, making it possible to use an image picker to select an image in the editor to be passed to the component prop (as a string).
number props can now specify control: "slider" to show a slider rather than a numeric input. These props also accept step (for the slider), min and max values.
The options for a choice prop used to accept only a list of strings, but can now accept objects with a label and value that are different.
Choice props can set multiSelect: true to indicate that multiple options can be selected simultaneously.
The JSON input editor now auto-fixes quotes and other syntax, making JSON a bit easier to input by hand.
You can find more details in our property types API reference. Let us know what else you’d like to see when it comes to the prop types!