utilising plasmic CMS with custom components

Developer Support
1

What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets, and reproduction steps)

I am a front-end developer looking for a website building platform focused on front-end development. The goal is to find a platform that allows for efficient collaboration, where developers can set up custom components, and non-developers can easily modify or update content or change the design flexibly using a visual editor.

Regarding this, does Plasmic support the functionality of binding custom components to data models, such as data from Plasmic CMS or other data models, after specifying and registering the data? I have thoroughly searched the documentation but couldn’t find anything related to this. I believe that the ability to register custom components in the visual editor, after non-developers create the necessary data and fields in the CMS without having to write JSON forms, and then binding the data to the components, would be groundbreaking and could dramatically improve work efficiency.

Alternatively, if it’s possible for fields like objects and arrays within the custom component’s prop types to be editable in the visual editor without the need to manually create JSON forms, I think that would also be a great solution.

I really like Plasmic’s pricing model, visual editor, and other features, but since this functionality seems to be missing, I’m finding it hard to make a decision as I compare it to other platforms. If I missed something or if there is an alternative way to achieve this, I would greatly appreciate it if you could let me know!

What have you tried so far? (please link relevant docs and other forum posts)

looked all of Docs about code components and CMS.

Relevant links:

2

Hi @joon_park, welcome to the Plasmic forum!

Thanks for your thoughtful response. One of the features we’ve been thinking about building is exactly as you said–binding custom components to data models. Would you be interested in working with us to help us understand your use case and workflows?

3

sure. for example, in navigation bar. Im working on the component like this

<NavigationMenu>
  <NavigationMenuItem>
    <....more children components>
  </NavigationMenuItem>
</NavigationMenu>

and all of data defined in types and passing as props through JSON file.
But for working with non-coder(content creator) let them learn and handle JSON form to create the content is not the best way to do, because type has object and array types and
there will be edge cases(typo, ) and not intuitive for them.
If I can define all of the props that include all of children components in one place without writing whole JSON form for the props, it would be good.

name: 'NavigationMenu',
  props: {
    navigation: {
      type: 'array',
      field: {
        label: 'string',
        href: 'string',
        icon: {
          type: 'choice',
          options: iconList,
        },
        description: 'string',
        items: {
          type: 'array',
          description: 'Menu items with nested structure',
          itemType: {
            type: 'object',
            fields: {
              label: { type: 'string', defaultValue: 'Menu Item' },
              href: { type: 'string', defaultValue: '/' },
              icon: { type: 'string', defaultValue: 'defaultIcon' },
              description: { type: 'string', defaultValue: 'Description' },
              items: { type: 'array', itemType: 'self' },
            },
          },
        },
      },
    },
    logo: {
      type: 'object',
      fields: {
        src: 'string',
        width: "number",
        height: "number",
        alt: "string"
      }
    }
  },
   classNameProp: 'string',

*** navigation prop is require JSON form in the visual editor

I’m playing around ‘slot’ but its not a good solution as well for me - why would I need to register children component that I don’t really use??

4

The NavigationMenu you are trying to register is your own code component, and the props need to match your data model in the CMS, correct? So navigation and logo are the top-level fields in the CMS? And you want an easier way to register the code component that automatically matches what’s in your CMS?

5

Sorry I’ve made more confusing what Im asking,

Im asking about is there any way to define props for children component without writing JSON form in visual editor. If i can do that I don’t need to make CMS data.

6

Ah I see, you want users to easily edit the props of the NavigationMenu component. I think you are doing a good job with using our supported data types already, but users would still need to edit JSON for the more deeply nested items.

Some ideas to improve this UX:

  1. Add a default value for the prop, which should show an example JSON.
  2. Break up the components into multiple components, so that users can configure props for nested components more easily.
1 Like