Using Plasmic with dynamic data sources

Plasmic designs can display data from any dynamic data source, such as traditional CMSes, ecommerce backends, or application REST/GraphQL APIs. (See comparison with CMSes.)

There are two approaches to adding data into Plasmic pages: using code components, and using render overrides.

But first: when do you need to even need to do this?

When do you need dynamic data / where should content go?

Sometimes your data clearly already exists in some data source, such as an ecommerce backend or REST API backed by an application database. In that case, you will need your Plasmic design to fetch and display that data, using the techniques described in the later sections.

Other times, you’re creating new content and deciding where it should go. You should use a separate data source when you need to display the same data very differently across multiple locations. If not, you can just manage your content directly in Plasmic.

Example: blog posts

Consider blog posts.

• There’s a listing page of all blog posts (showing their truncated snippets).
• Each post must have its own page.
• There may even be different category listing pages.

In each of these locations, the blog posts show content from the same source but rendered very differently—the blog listings may show a truncated snippet, while the blog detail may show hero image, more metadata about authors etc., and the full body. You may even have multiple views of the feed, such as for listing different categories of blog posts.

In this case, Plasmic can be used to create the template for the listing pages and the individual blog post page, while the content for the blog posts can live in the CMS.

Example: testimonials

For instance, say you have a set of testimonials.

If you need to display these on only your homepage, then you can just directly add the testimonials to the homepage in Plasmic Studio.

Even if you need to display the testimonials on multiple landing pages, and the testimonials need to look a bit different on each page, you can simply use Plasmic components (and variants) to do so. Components let you define a schema for the content slots, as well as display the content in different variations.

However, if you need to dynamically query/filter to different subsets of testimonials on different pages, then you should store them in a separate data source (such as a CMS) and use the techniques described in the later sections.

Approach 1: using code components (React only)

See the docs on data-fetching code components.

You can also learn how to create dynamic pages that let you view a specific blog post or data entry within some page template.

Approach 2: using render overrides

In this approach, the workflow looks like:

• User designs a template. This has placeholder elements for the actual dynamic data (or it defines slots).
• User or developer makes sure the elements that need to be overridden are named.
• Developer renders this template, and uses the component’s API to override the placeholder elements or slots with the actual dynamic data.

For instance, to use the React component render API:

const post = useBlogPost();
<PlasmicComponent
  component="BlogPostPage"
  componentProps={{
    // Let's say these are slots.
    // You can just directly pass in content into slots.
    title: post.title,
    author: post.author,
    date: moment(post.timestamp).fromNow(),
    // Let's say `body` and `heroImage` are elements.
    // You can override its `children` prop to display your content.
    body: {
      children: post.body
    },
    heroImage: {
      src: post.heroImage.src
    }
  }}
/>;

See the specific API reference for the framework you’re using for how to specify these overrides.

Have feedback on this page? Let us know on our forum.