Apologies if this has already been asked, I’m just really confused.
I have a full website already built out using astro + react and I want to integrate plasmic into it so that non-technical members can access and modify the website through the plasmic studio (to manage content). I know that we can register individual components from my local codebase and then use them on plasmic studio for the design process by exposing some props. Do I need to just design my application to be a series of components that we register to plasmic and then complete the actual design process on plasmic studio? Is there an easier way to do this? Ideally I would like plasmic to notice my index.tsx or Contact.tsx page and then render that on plasmic studio by itself. I heard that was possible though plasmic loader, but I can’t seem to confirm that? I see there is this new item called custom components, would that help in any way?
I appreciate any suggestions! Thanks!
Hello @nadim_kabir
Plasmic loader works the other way around from what you might have expected. The typical workflow with Plasmic loader is:
- Design in Plasmic Studio: You begin by designing your pages directly in Plasmic Studio. This includes creating full pages, components, and layouts without needing to write code. You can manage content and design freely in the studio.
- Integrate with React: After designing the pages in Plasmic Studio, you use Plasmic’s Plasmic Loader to load and render those pages in your React application. This is where you integrate the pages and components you designed into your app.
For your usecase, you would need to register code components and use them in Plasmic Studio to re-design your pages that need access by non-technical members. That way, non-technical members will have the freedom to build freeform content.
You could maybe also register full pages as code components, and expose content as slots/props. While this may facilitate faster transition, the ability for non-technical members to modify those pages in Studio will be limited by the props exposed by the code components.
1 Like