See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
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
© 2022 Gatsby, Inc.