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
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.
Have feedback on this page? Let us know on our forum.