Some beginner questions about using Plasmic

Developer Support
1

Hey Team, new to Plasmic hoping to integrate this into my app.
Few questions/confirmations:

  1. “Plasmic allows logic/data/behavior to be attached using code” — Does this mean that I’ll be able to bring in add/update state based off whats streaming from database? What are the limitations?
  2. If I fetch components client side, this means that the component will be downloaded (html/css) at runtime? Does this affect bundle size?
  3. In general, my use case is the following: I need the end user to be able to edit css properties of a component. The css property values would be coming from the database. Thing is, each component has a unique design and thus would have a 1:1 ratio where 1 design = 1 component. This does not scale well at all if hypothetically we approach 1000+ designs. on a side note, im currently dealing w this in fe via dynamic imports
    EDIT -----
    It appears as though bundle size would not be affected? Even with client side rendering?

Thanks in advance (crossing fingers)

2

Hi @nervous_tick!

  1. Yes, when using Plasmic as a UI builder (with codegen), you can add logic using code. Plasmic designs encapsulate presentational aspects/CSS and you just wrote the logic/state management. Not entirely sure what you mean by limitations, it’s just your React code at that point. See https://docs.plasmic.app/learn/todomvc-tutorial/ as an example.
  2. Yes, if you choose to fetch components client-side, then that means fetching a bundle that includes the HTML/CSS.
  3. If CSS is coming from the DB (?), you can jus pass them into your rendered component (the following assumes loading components via the Headless API)—but let me know if I’m misunderstanding what you mean:
<PlasmicComponent
  component="Homepage"
  componentProps={{
    someElement: {
      style: whateverStyleDataYouWant
    }
  }}
/>
3

Thank you for your help Yang! And thats quite interesting. Few follow up questions to clarify…

  1. Regarding fetching components client-side, does this work similar to code-splitting/dynamic imports? Do these components weigh in on the initial bundle size of the application? Bundle size is a concern as my application will eventually end up with a large number of uniquely designed components. Currently I’m dealing with this by creating a unique template per unique html/jsx, and fetching all styles from db. And by styles, my schema is an object that looks like { maxWidthMobile: "", maxWidthDesktop: "" }
  2. Regarding the handling with CSS, let me try and elaborate —
    The end user needs to be able to click on a button, update a style in the db, and be reflected in real time in the UI.

To do this, I’m using a combination of styled-components so that i can inject the style directly from the db. The style object thats getting fetched looks like { maxWidthMobile: "", maxWidthTablet, maxWidthDesktop: "", ... } When I load components via Headless API like youve shown, will the properties in the injected style object be dynamicly updateable? As in, if an end user clicks on a button to change one of the style properties, will the plasmic component update in realtime without the need for refresh?

Given the nature of Plasmic, I’m not only hopefuly but quite keen on hearing your thoughts on this in general. Thank you again Yang, very much appreciated

4
  1. Dynamically fetching the components from the client means they will not be part of the initial page payload, correct.
  2. Yes, since these are normal react components that take props, you can make them re-render in whatever states/props you want.
5

Thank you. It just sounded too good to be true so I had to confirm/hear it a second time. I’ve only been genuinely impressed with a handful of companies past few years (supabase, nextjs, etc), and this is certainly an incredible, well-thought out product. Great job Yang. Btw, I dont see a careers page — are you looking for help by any chance?