Supabase integration, attached behaviors, focus mode
Supabase integration
It’s Supabase’s launch week!
With thanks to our friends at Supabase, we’ve released an integration and tutorial of how to use Plasmic as a no-code app builder for Supabase. This includes not just reading Supabase databases, but making updates using form components and even Supabase Auth login/signup.
All of this is functionality is enabled within Plasmic via normal React components that talk to Supabase and have custom controls.
This integration was originally envisioned and prototyped by prolific freelance React developer, Asim! He shares his learnings as he continues to explore what’s possible with Plasmic, such as his super in-depth video on how to build your own React components similar to the Supabase ones and register them for use in Plasmic.
For now, we are iterating on the integration outside of the component store, as we have many more improvements planned. Please play with it and let us hear your feedback.
Plasmic and Supabase are a perfect pairing, and we’re excited to explore this much further—with the goal of enabling production-grade apps of any sort to be built end-to-end. For now, don’t miss the other exciting announcements this week from Supabase.
“Attached behavior” code components
Some code components are “wrappers”—they expose only a slot for children, and might not even render anything themselves, only existing to inject some kind of behavior into their children. Examples of this are things like parallax scroll, reveal, and 3D tilt components, available in our component store.
To make these more intuitive to use, we’re introducing a new concept—any element can have “attached behaviors.” So you can now simply select any element you want to add parallax scroll or reveal effects on, and from the right sidebar, directly attach this behavior in the “Custom Behaviors” section.
These attached behaviors are just code components! They have set a flag, isAttachment: true. This is what makes the component available to directly “attach” to any element from the right sidebar. See the docs.
This is currently rolling out. Play with it and let us know your feedback!
Focus mode
We have an overhauled “focus mode,” which shows a single canvas artboard in Plasmic Studio for you to edit.
You can access it from the View menu, or by pressing the M key whenever you have an artboard selected.
This mode is now optimized for performance, ensuring that only the single artboard is loaded in-memory. You can continue to view and edit different variants using the dropdown menu in the top toolbar.
If you are experiencing performance issues using Plasmic Studio on large or complex projects, please give this a try.
Feature recap from the past two months
Here are some of the recent feature releases, in case you missed them—time flies!
Content creator mode is now available for all Growth and Enterprise plans
Custom CSS, embed codes, and carousels are in the component store
Developers can access any style token as a CSS variable
React utility library available for performing Suspense-style SSR data fetching, perfect for any data-fetching component
New rich text editor released that supports inline styles and Markdown formatting
Start from a page template in any existing project
Customize tokens and default styles for different global variants, such as dark mode or mobile screen sizes
And don’t miss Chung’s React server components deep-dive