Bring Your Favorite React Frontend

Cosmic and React are a deadly fast combination.

Start Building   Talk to Sales
+

Why use a Headless CMS as React’s CMS?

Using a headless CMS for your React application eliminates cumbersome layers of technological setup and maintenance from your React CMS that are necessary for coupled and decoupled CMS systems (e.g. WordPress, Drupal, Joomla, Shopify, Magento, etc.) Headless CMS data is accessible and extensible, providing future-proofed delivery via API to any destination. This circumvents investing in CMS infrastructure maintenance, allowing development focus to be on presentation and application business logic.

1. Create
2. Code
{
  title: "A Wonderful Blog Post About Earth",
  slug: "a-wonderful-blog-post-about-earth",
  content: "This is a great day for our team...",
  metadata: {
    hero: "https://cdn.cosmicjs.com/my-image.jpg",
    publish_date: "Apr 18",
    author: {
      full_name: "John Doe",
      link: "https://our-website.com/authors/john",
      avatar: "https://cdn.cosmicjs.com/johnny.jpg"
    }
  }
}
3. Deploy

Cosmic is the Best Headless CMS for React

Cosmic's headless CMS makes it a breeze to manage and deliver React CMS content for websites, applications, or platforms. Our feature set is unmatched - it's our goal to provide a product that eliminates your need to work on CMS infrastructure. We also provide pre-built examples so you can kick-start your projects, or facilitate new purposes and use cases. What's more, our React resources and documentation are unparalleled.

With Cosmic, developers build better React applications, faster.

Top-Tier React CMS Features

Cosmic offers world-class API speed, industry-leading uptime reports, and a verbose feature set built for React - including:

  • Component composition with Objects
  • Media / file management
  • Easy access to documentation and code samples
  • Extensive NPM module
  • and more

Use Cosmic to Deploy React Starter Applications in Minutes

Start off with dozens of React CMS templates, complete with GitHub source code examples, and deploy the application to your favorite hosting platform in minutes. Don't want to use a template? Start building your own React application now - it's free.
View more CMS templates and examples in the App Marketplace

React Resources

What else makes Cosmic the best headless CMS to use for React developers?

One thing that sets us apart is our extensive developer resources. Check out some of our favorite articles and videos below, learn more about what to look for in a good React CMS, and how we've made Cosmic best-in-class.
Getting Started with Cosmic CMS and Next.js (Part 1)
Using Cosmic as a Headless CMS with Gatsby
Build a Cosmic-powered blog using Gatsby

React CMS Documentation

From zero to Cosmic-powered app in seconds. Use the Cosmic docs to add dynamic content to your React apps.
React CMS | Cosmic Headless CMS

Uptime Guarantee Means Stable React Apps

The most important factor of any reliable network-based React application is its availability or uptime. Without a reliable uptime, access to the React CMS will be impossible, inconsistent, or otherwise unstable. Never fear downtime on Cloud or Enterprise plans. Enterprise plans start at a 99.95% uptime guarantee. Check our status page for historical uptime on our serverless, cloud infrastructure.

Why choose the Cosmic Headless CMS?

No CMS Maintenance
We maintain everything for you so you can focus on what matters most: building great products and user experiences.
Scalability
Your content is now infinitely scalable. Powered by best-in-class Serverless technology, your content can scale to billions of users.
Security
You no longer have to worry about CMS security. Your data is encrypted at rest and in transit with our 256-bit SSL encryption.
Cost Savings
Save time and money on developer resource spending. Along with our best-in-class product, you also get our best-in-class support team.

Industry-Leading Professionals Choose Cosmic

When you build applications with Cosmic, you're in good company. Everyone from Developers to Directors of Marketing to Fortune 500 CTO's has had great things to say about Cosmic.

"It was literally 10 to 15 minutes from taking the SDK, to getting the data I needed, to consuming it. We cut our server response time down from 300-400 ms to about 50 ms. Instead of needing to query the Shopify API, now we only need to query Cosmic."
John Leider, Vuetify
"Really like Cosmic. Build your content in a CMS and get a REST or GraphQL API immediately! Slick tool to make dev quicker! Even has Gatsby Preview so you can check out changes before publishing."
Chris Sevilleja, Scotch.io
"The headless CMS we chose had to tick a lot of boxes. At the end of the day, though, it needed to be easy for our external writers to use. We recorded a quick screencast video internally showing how to set up a piece of content, sent that out to our team, and I haven’t had a question from any of our writers since."
Katie Prowd, Co-Founder of Hypometer Technologies
"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system."
Owen Liversidge, Lead Developer, Tripwire Interactive
"Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform."
Dustin Brink, Derive Systems
Want to chat with some of these people? Join us in the Cosmic Community, one of the fastest-growing communities for developers of all skill sets.

Getting Started with Cosmic as Your React CMS

Use the following step-by-step guide to get started using Cosmic as a headless CMS for your React apps.

Initial Setup

Before doing any coding, let's set up a Bucket with content using the following steps:

  1. Create or log in to your Cosmic account.
  2. Install the Simple Blog by clicking "Select App" then following the steps to create a new Bucket with the demo content. Alternatively, you could start by creating a new Bucket from scratch and add an Object Type titled Posts that has the slug posts and add a File Metafield titled Hero with key hero. Then add a few Objects with your own demo content.

Now that we have some demo content, we can integrate the content using the following steps to make Cosmic your headless CMS for React.

1. Install a new React app

You can use Create React App to install a new React app that includes tooling and configurations.

npm i -g create-react-app
create-react-app cosmic-react-app

2. Install the Cosmic NPM module and SWR

cd cosmic-react-app
yarn add cosmicjs swr

3. Add the following code into your src/App.js file

Find your Bucket slug and API read key in Your Bucket > Basic Settings > API Access after logging in.

// src/App.js
import React from 'react'
import useSWR from 'swr'
import Cosmic from 'cosmicjs'
const api = Cosmic()
// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login
const bucket = api.bucket({
  slug: 'YOUR_BUCKET_SLUG',
  read_key: 'YOUR_BUCKET_READ_KEY'
})
const fetchPosts = async () => {
  const data = await bucket.getObjects({
    type: 'posts',
    props: 'slug,title,metadata' // Limit the API response data by props
  })
  return data
}
function App() {
  const { data, error } = useSWR('fetch-posts', fetchPosts) // Use SWR hook
  if (!data)
    return <div>Loading...</div>
  const posts = data.objects
  return <div>
    { posts.map(post => 
      <div key={post.slug} style={{marginBottom: 20}}>
        {
          post.metadata.hero &&
          <div><img alt="" src={`${post.metadata.hero.imgix_url}?w=400`}/></div>
        }
        <div>{post.title}</div>
      </div>)
    }
  </div>
}
export default App

4. Start your app

Start your app, and go to http://localhost:3000. Dance 🎉

npm start

See more guides in React CMS documentation and other headless CMS-based integrations including Next.js and Gatsby.

Frequently Asked Questions

React (or ReactJS, React.js) is a JavaScript library for building user interfaces. It enables you to build robustly dynamic single-page web applications by using a component-based architecture, purposed for greater code reusability.

React can also render on the server-side using Node.js, or on mobile apps (compilation) using React Native. Originally developed at Facebook, it is under active development by employees at Facebook and the open source community.

React only provides the “front-end” user interface (UI), handling the visual presentation of an application’s content. React applications must be complemented with a compatible “back-end” database to store and retrieve content; further, that data source needs a way to be managed. This data storage and management demands the need for a content management system (CMS).

To provide content to a React CMS application, data for the React application is servable:

  • Client-side (from the browser or app) on-demand
  • Server-side on-demand
  • At compilation (build) time

A React CMS is created when a React UI is integrated with a CMS to handle content. To communicate with React, a CMS must offer a compatible application programming interface (API). For example:

A headless CMS can be used as a flexible data source for your React application to supply content to any or all of: client-side, server-side, or during compilation. Compilation refers to the build process commonly known as Jamstack approach, which deploys pre-rendered web pages to a static website hosting provider.

React CMS Data Compatibility and Accessibility

Using available API tools like our REST, GraphQL, or Cosmic NPM module empower developers to create powerful user experiences using Cosmic as the React CMS.

React, formerly and often still incorrectly referred to as React.js, is one of the most popular JavaScript frameworks. React is only the new brand name for what was formerly known as React.js. In 2017, Facebook dropped the ".js" from React's name.

A headless CMS like Cosmic natively facilitates React’s component-based JavaScript architecture. React components integrate with Cosmic’s content model, supporting JSON data Objects, Metafields, and Object Relationships, facilitating creation of reusable React CMS components. This native JavaScript component synchronicity with React makes Cosmic headless CMS ideal to facilitate any React application’s content needs.

Headless CMS data is securely delivered by the Cosmic APIs within industry standard 256-bit SSL encryption in transit and in storage in our global data centers. Additional security via two-factor authentication is also available for free. This industry standard level of security comes included with all Cosmic accounts.

In contrast, when using a coupled CMS system, you are responsible for providing these security features with none of the above security features included.

Community support is crucial to our headless CMS culture. Cosmic’s intention is to provide headless CMS resources that save time and money using our solution as your React CMS. To support and supplement this, Cosmic regularly publishes educational resources, open source libraries, example applications/boilerplates, extensions, hosts events, and more.

Paid dedicated support is offered in either dedicated or enterprise support plans, each is optional with 24/7 technical assistance.

You can also find us during normal and abnormal business hours in our #technical slack channel.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales