Using custom data sources / external data

If your data source is not listed in the integrations page, you can still bring it into Plasmic using one of the following approaches:

• Custom data queries
• Data-fetching code components
• Render overrides

Approach 1: Custom data queries

Custom data queries are the easiest and most secure way to fetch or modify data from remote sources (like databases or APIs). You register server-side Javascript functions in your codebase, which then become available directly in Plasmic Studio’s Data Queries section.

You can learn more about how to set up and use them in the Custom data queries documentation.

Approach 2: Using code components

If you already have existing React components or hooks for data fetching, or if you prefer to build UI components entirely in code that happen to fetch data, you can register them as code components.

See the docs on data-fetching code components.

Approach 3: Using render overrides

This approach will be great when you use Plasmic as a UI builder, which means you just design the UI and let the developer handle all the business logic. So a regular workflow will looks like this:

• Designer creates a UI component in Plasmic editor.
• Designer configures the component properties
• Developer uses this component in the code, and overrides the properties of the component to display the actual dynamic data.

See the specific API reference for the framework you’re using for how to specify these overrides. For instance, to use the Plasmic component in React you would:

const post = useBlogPost();
<PlasmicComponent
  component="BlogPostPage" // component name in Plasmic editor
  componentProps={{
    title: post.title, // string
    author: post.author, // string
    date: moment(post.timestamp).fromNow(), // datetime
    // In this case `body` and `heroImage` are elements.
    // You can override its `children` prop to display your content.
    body: {
      children: post.body
    },
    // or set src to display an image
    heroImage: {
      src: post.heroImage.src
    }
  }}
/>;