🌟 Help others discover us, star our GitHub repo! 🌟

Integrate React with Webiny Headless CMS

Building user interfaces with React using Webiny as a data source using our GraphQL APIs makes for a declarative, clean and efficient codebase.

Why React?

React is so ubiquitous to the frontend development scene these days that the technology hardly needs an introduction. React makes it easy to create interactive UIs. It does this by creating a representation of the DOM, called the Virtual DOM, and updating only the right components when your data changes.

Stylized React logo

Why Webiny?

Webiny Headless CMS contains everything an enterprise needs to build, manage and deliver content at scale.

Webiny doesn't just manage your content, it also allows you to manage all of your projects centrally using built-in internationalization and multi-site features, and use advanced processes that support organization-wide collaboration.

Stylized Webiny logo

React + Webiny integration

You can easily build a dynamic site or complex application with React and use Webiny to decouple engineering needs from your marketing team using a highly-scalable, fault-tolerant Serverless service that scales in and out in seconds. Use a single Webiny instance to manage content for an unlimited number of websites. All under one tenant in your own security perimeter.

React Benefits

  • Declaratively create interactive UIs
  • Build encapsulated components that manage their own state
  • Easily pass rich data through your app and keep state out of the DOM
  • Also render your UI on the server using Node

Webiny Headless CMS Benefits

  • Keep your data in your cloud, under your own security perimeter
  • Unlock greater performance by storing and delivering content closer to your users
  • Webiny runs on highly-scalable fault-tolerant serverless services that scale in and out in seconds
  • Marketing teams have full control to create and manage content, landing pages, files, and forms across multiple web properties
  • Webiny is open source, released under an MIT license, and architected for extensibility

Building a Frontend With React

Learn how to build a frontend for Webiny Headless CMS using React.

Step 1

Install and Deploy Webiny

Skip this step if you already have Webiny installed and deployed. Be sure to check out the prerequisites for installing Webiny on your local machine.

Then, create a new Webiny project by running the following command. If you get stuck or for more details, please see our documentation.

npx create-webiny-project my-webiny-project
Copy
Step 2

Create a new React site

Run the following command to create a React application bootstrapped with Facebook's Create React App tool.

Visit the React documentation to find out more.

npx create-react-app my-react-app
Copy
Step 3

Add and Configure React Apollo

Add Apollo Client and follow the instructions in the docs to configure it to connect to Webiny's GraphQL API using the API URL and your API Token.

Webiny API instructions →

npm install @apollo/client graphql
Copy

Check out these tutorials on using
Webiny + React on our blog

Menard MarananMenard Maranan
How to Build a Custom Field Plugin for Webiny Headless CMS

In this tutorial we will create a custom field type for Webiny Headless CMS.

Victory TuduoVictory Tuduo
Build a Marketing Site with Forms Functionality in React using Webiny

In this tutorial, we will learn about the Webiny CMS and how we can use it in React by building a job board application.

Taminoturoko BriggsTaminoturoko Briggs
Build a Job Board with React and GraphQL using Webiny Headless CMS

In this tutorial, we will learn about the Webiny CMS and how we can use it in React by building a job board application.

Taminoturoko BriggsTaminoturoko Briggs
How to Implement Pagination with Webiny Headless CMS in React

In this tutorial, we are going to learn how to implement cursor-based pagination when using Webiny headless CMS in React.

Victory TuduoVictory Tuduo
Build a ToDo app with React, Tailwind and Webiny Headless CMS

Create and destroy items on this ToDo list application using React and Tailwind with Webiny as a data source.

Other Integrations

Webiny also supports other frontend technologies.

Gatsby logo

Gatsby

Gatsby integrates different content, APIs and services seamlessly into one experience.

Discover more →
Next.JS logo

Next.js

Next.js is a React framework that lets you build hybrid static and server rendered applications.

Discover more →
Vue logo

Vue.js

Vue.js is an approachable, performant and versatile framework for building web user interfaces.

Discover more →
Flutter logo

Flutter

Build apps for any screen with Flutter. Compiles to mobile, web, desktop and JavaScript runtimes.

Discover more →
By using this website you agree to our privacy policy
Webiny Chat

Find us on Slack

Webiny Community Slack