Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Transformer Code Examples

This plugin transforms file contents into CodeExample types and makes them available in Gatsby GraphQL schema.


npm install --save @commercetools-docs/gatsby-transformer-code-examples


As a prerequisite configure a source plugin, for example, gatsby-source-filesystem to point the directory of the code examples, for example src/code-examples. Other source plugins can be used, too.

Example gatsby-config.js content:

// In your gatsby-config.js
const path = require('path');

module.exports = {
  plugins: [
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `codeExamples`,
        path: path.resolve('./src/code-examples'),

GraphQl Query Example

query GetAllCodeExamplesQuery {
  allCodeExample {
    nodes {

Supported MIME Types

  • application/javascript (JavaScript)
  • text/x-java-source (Java)
  • application/json (JSON)
  • application/x-httpd-php (PHP)
  • application/x-sh (Shell / Bash)
  • video/mp2t (not actually TypeScript, but gatsbyJS represents .ts files as this mime type)
  • text/yaml (YAML)
  • text/vnd.curl (cURL)

In addition the following are included to cover languages with no explicit mime type (for example C#)

  • application/octet-stream
  • text/plain
© 2023 Gatsby, Inc.