Data-fetching components

Data-fetching components are special components that can fetch data or interact with data sources. They can be used in Plasmic Studio like any other component, letting you go beyond static websites to rich, dynamic web applications.

To learn about other ways to integrate with data sources, check out our documentation on integrations.

Here’s an example of adding Shopify data to a Plasmic project:

Setting up data-fetching components

Plasmic provides many data integration packages in the Component Store. Each package contains a group of related data-fetching components. To use data-fetching components, first install and configure its package.

Open up your project in Plasmic Studio.
Click “Insert…” (keyboard shortcut: Q) to open the insert menu.
Browse the Component Store or type an integration name to search for it.
Click a package to install.
Configure the package in the “Project Settings” left sidebar tab.

Now you can start building! Try inserting a component you just installed and configuring its data fetching options.

Each integration is a bit different. Below is a catalog of our integrations and links to their documentation and tutorials.

Ecommerce

Plasmic’s ecommerce integrations let you build your online store with the power of Plasmic Studio.

Plasmic has built-in support for the following ecommerce platforms:

Shopify (YouTube tutorial)
Swell (YouTube tutorial)
Saleor

To learn more, read our documentation on ecommerce integrations.

CMS

Plasmic can integrate with any modern content management system (CMS). This empowers you to manage your structured records of data (e.g. blog posts, product reviews) in the system of your choice, while leaving visual needs to Plasmic.

Plasmic supports the following built-in integrations:

Plasmic CMS, our in-house solution (YouTube tutorial)
Airtable
Contentful
Contentstack
Hygraph, formerly GraphCMS (YouTube tutorial)
Sanity (YouTube tutorial)
Strapi (YouTube tutorial)
Wordpress

API

Got an API? We can access it.

HTTP API
GraphQL API

Dynamic values

You’ll need to be familiar with dynamic values to use API integrations.

Need something else?

If the built-in data sources don’t work for your use case, let us know on our community forum.

If you would like us to prioritize building integrations, please get in touch with our enterprise team.

If you are a developer, you can always provide your own data by writing your own data-fetching code component. If your code component is generally useful, please consider contributing it to the component store by submitting a pull request to our open-source GitHub project.

Was this page helpful?

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