## Gatsby CMS example

### The best integration with Gatsby you can get

As GatsbyJS enthusiasts, we work closely with our friends of the Gatsby team to always provide you best-in-class CMS integration. Enjoy an awesome developer experience: **live reloading of content as it gets saved, drop-in SEO**, **state-of-the-art integration with Gatsby's GraphQL API**.

Read more about our Gatsby source plugin!

[gatsby-source-datocms](https://github.com/datocms/gatsby-source-datocms)

```javascript
import React from 'react';
import { graphql, Link } from 'gatsby';
import { HelmetDatoCms } from 'gatsby-source-datocms';

export const query = graphql`
  query MoviePageQuery($title: String!) {
    movie: datoCmsMovie(title: { eq: $title }) {
      seoMetaTags {
        ...GatsbyDatoCmsSeoMetaTags
      }
      releaseDate
      actors {
        name
      }
      excerpt: excerptNode {
        md: childMarkdownRemark {
          html
        }
      }
    }
  }
`;

export default function MoviePage({ data: { movie } }) {
  return (
    <Layout>
      <HelmetDatoCms seo={movie.seoMetaTags} />
      {/* .. */}
    <Layout>
  );
}
```

## Endless image transformations at your disposal

DatoCMS, together with Gatsby and `gatsby-image`, offers **best-in-class image processing** and image CDN. Optimize, resize, crop, rotate and watermark images on-the-fly, simply adding custom parameters to the URL of your image. Serve lazy loaded, responsive images in one line of code.

[Read more about DatoCMS Image API](https://www.datocms.com/features/images-api.md)

(Image content)

https://datocms-assets.com/image.png

## Real-time previews with DatoCMS + Gatsby Cloud

DatoCMS is fully compatible with [Gatsby Cloud](https://www.gatsbyjs.com/cloud/). Share temporary URLs for **viewing changes immediately** and in context, so you can make sure that the new header plays nicely with the rest of the page before hitting “publish.”, and dramatically reduce the time you spend waiting for builds or deployments.

(Video content)

# A component-centric CMS, just like Gatsby

Thanks to React, Gatsby makes using components easy right from the get-go. You should expect the same from your CMS. A **component-based approach** allows developers to clearly divide work amongst themselves and progress without having to rely on each other every step of the way.

[Read more about DatoCMS modular blocks](https://www.datocms.com/features/dynamic-layouts.md)

“I do heart Dato, my first choice CMS, always advocate my clients treat CMS flexibility seriously. ”

(Image content)

Callum Flack

Owner at Callum Flack Design