Mobile Menu

Integrate React with Webiny 

Headless CMS

Declaratively create interactive UIs.

Easily pass rich data through your app and keep state out of the DOM.

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

Menard Maranan

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


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

Victory Tuduo

In this tutorial, we will learn about Webiny CMS and how to use it in React by building a marketing site with forms.

Christopher Okoro

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


Victory Tuduo

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


Book a demo

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.js 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