Your new React CMS – Handle content your way in your applications

Are you managing editorial content with code and git? Are your editors forced to learn developer workflows and are therefore constantly breaking your development pipeline? Is content too hard to manage?

It doesn't have to be that way.

Contentful is a cloud- and API-first headless CMS built with React that allows developers to get their content creators out of their code base. Define and set up your content structures in minutes. Provide your editors with an interface to create content. Query structured data in your React applications via a set of JSON APIs. All this allows you to clean up your code and make your content reusable — structured JSON works everywhere!

React enables thousands of developers to build fast applications in an intuitive way. Its flexible component mindset changed the way developers build for the web. But how do you handle content requirements in cross-functional teams while building apps in the fast moving React ecosystem?

Contentful's content platform enables the usage of your favorite tools by providing a headless CMS that doesn’t stand in your way. Get content creators out of your code base, get rid of maintaining your home-grown CMS' servers and go API-first. Set up your application's content structures and stop worrying about editors, infrastructure and data that is a mix of HTML, JSON and random YAML files.

Power your React components, let it be pages, routes or CTAs — it's up to you!

Power your React components, let it be pages, routes or CTAs — it's up to you!

React's component architecture is essential for fast, maintainable and scalable front-end applications. Contentful allows you to define content structures that match your components' requirements. It doesn't matter if it's a route component to power pages or a single CTA component. You can quickly connect your code base with your content and start coding!

You're in charge of defining the content structure for blog posts, authors or pages. Set up your models with boolean, string and other fields and connect all entries with each other.

A blog entry can connect to an author and an author can connect to an event. You're in charge of defining small pieces or big chunks of editable data. You can then fetch a whole content tree in a single API call or receive only specific entries. Request only what you need, shape the API responses to your needs and start interacting with a content graph that goes beyond posts and pages.

Learn more about content modeling

Request what you need to build fast React applications

Request what you need to build fast React applications

After setting up your content structures, edit your content in the Contentful interface and fetch it via a set of powerful and fast APIs.

Use the read-only Content Delivery API to request your content via fast CDNs that are ready to handle thousands of requests when your project needs to scale. You can build and enable preview workflows using the Content Preview API, which allows you to fetch draft content and review your application's content before hitting publish.

And if you prefer to not use our SDKS on top of RESTful APIs, use the GraphQL API to fetch data faster, get predictable API responses and connect your React components with your content. Make your applications faster: You can query what you need with Contentful as your React CMS.

javascript
fetch(`https://graphql.contentful.com/content/v1/spaces/[YOUR_SPACE_ID]`, {
     method: "POST",
     headers: {
       Authorization: `Bearer [YOUR_TOKEN]`,
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
       query: `query {
   postCollection {
     items {
       title
     }
   }
 }`,
     }),
    })
     .then(response => response.json())
     .then(json => {
       const { data } = json;
       console.log(data.postCollection.items);
       // [ { title: "Hello world"} ]
     });

Speaking of speed, use the Images API to resize and transform images and not waste any transferred bytes. Upload an image in high resolution and deliver the optimal format and size by appending URL query parameters. Your visitors will thank you for it!

Get started with GraphQL, React and Contentful

Extend and change the editing experience with React

Extend and change the editing experience with React

Contentful's interface is highly extensible, so you can create the best possible editing experience for your teams. The React-based CMS editor uses components that are part of our open source design system Forma 36.

Since we can’t know your specific editorial requirements, the App Framework exists to make it easier to run your own code and change and customize the editing experience. This guarantees an experience that works for your editors.

If you need custom content validations for a specific entry, want to enrich the interface with third party APIs such as your headless ecommerce provider or build a custom dashboard, use the App Framework to run your React components and code in the web interface itself. Make Contentful your own and tailor the interface to your needs to edit your content in your preferred way!

Get started with the App Framework

Automate, migrate and change your existing content with code

Automate, migrate and change your existing content with code

Application requirements change over time. Often, content has to evolve with the underlying source code. In that scenario, you don't want to have to change thousands of entries manually. Contentful's content platform allows developers to programmatically migrate and change the content powering your production sites.

You can create new environments, automate content changes and migrate your content similarly to the way you develop software in version control. Work in safe environments to avoid breaking production.

javascript
// Migrate a "post" content type
module.exports = function (migration) {
  const post = migration.editContentType('post');

  post
    .name('A blog post')
    .description('Posts written for your react application');

  post.createField('publishDate')
    .type('Date')
    .name('Publishing Date')
    .required(true);
};

The Content Management API enables you to automate and script content changes programmatically to reduce manual work and test your changes before going into production.

Learn how to migrate and evolve your content with code

Join a community of developers building for the web

Join a community of developers building for the web

Contentful's community includes hundreds of developers and builders sharing what they're working on. Find out more about our community in our developer portal, discover recent developer blog posts and join our public Slack organization to connect with fellow developers.

Join the community

Ready? Sign up for a free Contentful account and get started with your new React CMS using create-react-app in this tutorial.

Don't miss the latest

Get updates in your inbox
A monthly newsletter to help you build better digital experiences with Contentful.
add-circle arrow-right remove style-two-pin-marker subtract-circle