The easiest way to manage content with Gatsby

You've got your high performance website, now you need blazing fast content. Well, we've got you covered.
Try our Gatsby demo project now!
  • Best practices
  • 30s setup
Proudly powered by DatoCMS + Gatsby:
Little Caesars
https://littlecaesars.com/en-us/
University of Bristol
https://www.bristol.ac.uk/
Bunker One
https://bunkerone.com/
Dr. Forbes & Associates
https://www.drforbes.ca/
Deutsche Telekom Inflight
https://inflight.telekom.net/
Just Do It - Nike.com
https://justdoit.nike.com/
Becoming John Marin
https://www.becomingjohnmarin.org/
Web Workshop
https://webworkshop.ltd/
Ocean
https://www.ocean.xyz/
Versa
https://versa.agency
Polimoda
http://www.polimoda.com

The best integration with GatsbyJS you can get

We work closely with our friends of the Gatsby team to always provide you best-in-class 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!
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, togheter with 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://datocms-assets.com/image.png

Real-time previews with Gatsby Cloud

DatoCMS is fully compatible with Gatsby Cloud. Share temporary URLs for viewing changes immediately and in context, so you can make sure that new header plays nicely with the rest of the page before hitting “publish.”

Acme Inc. - DatoCMS
Create new Blog post
Title
The Best Video Games to Play
Author
Dan Poe
Content
Text
Lorem ipsum....
Gallery
Text
Lorem ipsum....
CTA label
Try it now!
CTA URL
http://...
Quote
Lorem ipsum....
Author
Steve Jobs
Add a new block:
Text
Gallery
Quote
Call to action
Save Blog Post

A component-centric CMS, just like Gatsby

Thanks to React, Gatsby makes using components easy right from the get-go, and 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

I do heart Dato, my first choice CMS, always advocate my clients treat CMS flexibility seriously.
Callum Flack
Owner at Callum Flack Design
Gatsby + DatoCMS demo
pages/homepage.js - Visual Studio Code
Try our Project starter

Start your new Gatsby project in minutes

Learn from our best-practice project. Fully configured and deployed on Netlify/Vercel. Source included.

We power experiences for over half a billion users