👉 Visit the DatoCMS homepage or see What is DatoCMS?

This repository contains the source code of datocms.com. It's built with Astro, gql.tada and the DatoCMS Astro SDK.

It's a server-only app (every route is dynamic), and it's meant to be the origin for a surrogate-keys-capable CDN like Fastly, which will then apply granular caching rules thanks to DatoCMS cache tags.

It can also be directly visited by the content editors to see the result of their draft changes in real time.

We have thoroughly discussed this repository on our blog; be sure to explore the complete article series:

https://www.datocms.com/blog/why-we-switched-to-astro

1. Clone this repository: git clone https://github.com/datocms/website
2. Install dependencies with npm install.
3. Run npm run decrypt-env to decrypt the secrets.
4. Run npm run dev to start a local development server at localhost:4321.

SVGs are inlined, both in HTML and CSS. For the HTML part, there's a <Svg /> Astro component:

<Svg name="icons/regular/tachometer" />

There are two main directories for SVGs: src/icons/ and src/svg. Depending on the directory, <Svg /> will apply different SVGO settings:

• SVGs in src/icons/ are 1em in size and have their fill color inherited from the parent HTML element's color attribute by forcing the fill of every element to currentColor.
• SVGs in src/svg/ are more flexible: they don’t have a set size, and there’s no automatic fill color.

For the CSS part, we use postcss-inline-svg which let's you inline SVGs like this:

background: svg-load('icons/regular/check.svg');
background: svg-load('img/arrow-down.svg', fill=#000, stroke=#fff);

This component is meant to add some nice, consistent formatting on text-heavy content like articles or blog posts.

The <prose-island> element is a custom HTML element that you can wrap around part of HTML inside that you don't want to style with the rules below. It's basically a reset.

<Prose>
  <h1>This will be formatted</h1>

  <prose-island>
    <h1>This will NOT be formatted</h1>

    <Prose>
      <h1>This will be formatted again</h1>
    </Prose>
  </prose-island>
</Prose>

To render markdown, you can use:

• <Markdown of={content} /> or markdown(content) (they're basically the same).
• inlineMarkdown for small, single-paragraph markdown content that you want to render without the wrapping paragraph.

On top of standard GFM, the markdown pipeline supports a few extras:

• Callouts — GitHub-style blockquotes: > [!NOTE] Title\n> Body (also TIP, WARNING, etc.).

• Tabs — remark-directive container syntax for grouping mixed content into tabs:

  ::::tabs
  :::tab[Overview]
  A paragraph, then code:
  
  ```js
  console.log('hi');
  ```
  
  :::
  
  :::tab[Details]
  
  - bullet
  - list
    :::
    ::::

  Outer container needs more colons than inner (:::: vs :::). Each tab can contain any markdown (paragraphs, code, lists, blockquotes, …). Only recognized at the root level.

• Syntax highlighting — fenced code blocks are rendered through Expressive Code (see ec.config.mjs).

• Auto-linked headings — every heading gets an anchor and a permalink, slugified from its text.

Avoid directly using <StructuredText />. Prefer <Text /> or <InlineText /> which offers a few sane defaults.

Also, make sure to use ensureValidStructuredTextProps to make sure that EVERY kind of available block/linked record is handled correctly!

<Text
  {...ensureValidStructuredTextProps({
    data: episode.content,
    blockComponents: {
      InternalVideoRecord: InternalVideo,
      ImageRecord: Image,
      TableRecord: Table,
    },
  })}
/>

Prettier sometimes will format the code this way (please notice the {link.text} is on a separate line). This will generate visible white-space inside the link.

<div>
  {navLinks.map((link) => (
    <a href={link.href}>{link.text}</a>
  ))}
</div>

It's a known issue. Sometimes you can solve adding /* prettier-ignore */ to avoid auto-formatting...

The title says it all. More info in this Github issue.

DatoCMS is Headless CMS for the modern web. Trusted by 25,000+ businesses, agencies, and individuals, it gives your team one place to manage content and ship it to any website, app, or device via API.

New here? Start with Create free account and the Documentation. Stuck? Ask the Community. Curious what's new? Product Updates.

Building with AI: Agent Skills turn coding assistants (Claude Code, Cursor) into expert DatoCMS developers, with full read/write via the auto-installed CLI. No local terminal? Use the MCP Server instead.

Talking to DatoCMS from code:

• Content Delivery API (CDA) — the fast, read-only GraphQL API your website/app uses to fetch published content.
• Content Management API (CMA) — the REST API for creating and updating content, models, and project settings (think scripts, migrations, integrations).
• CLI — terminal tool for schema migrations and importing from Contentful/WordPress.

Framework guides: end-to-end recipes for fetching content, rendering Structured Text, optimizing images/video, handling SEO, and setting up live preview with visual editing in Next.js, Nuxt, Svelte, and Astro.

Want a head start? Browse our starter projects — ready-to-deploy example sites for popular frameworks.