“I do heart Dato, my first choice CMS, always advocate my clients treat CMS flexibility seriously.”
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!
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.
https://datocms-assets.com/image.png
Real-time previews with DatoCMS + 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 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.
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
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.
Try our Project starter
Start your new Gatsby + DatoCMS project in 1 minute
Gatsby works seamlessly with DatoCMS. Experience the best integration on the market, starting with our best-practice project, fully configured and deployable on Netlify/Vercel.
Now that you got it started, you can push your project to the top by installing our Gatsby Preview plugin and get the best developer experience with our Gatsby library!
Get started right away with our Gatsby template, or read our step-by-step Gatsby e-commerce tutorial.
We power experiences for over half a billion users