Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-plugin-theme-helpers (Experimental)

An experimental plugin to help with component shadowing discovery by annotating React components with the source file and the shadow target.



To test this plugin, install it as a local plugin.

  1. Clone this repo to a plugins directory in the website’s root directory.
  ├── content
  ├── plugins
  │   └── gatsby-plugin-theme-helpers <-------
  ├── gatsby-config.js
  └── gatsby-node.js
  1. Enable the plugin in gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Gatsby`,
  plugins: [`gatsby-plugin-theme-helpers`],
  1. Run gatsby develop


Inspect your site using Devtools.

The plugin will add data-source and data-shadow attributes to your components to make it easy to figure out the source of a component and the name of the shadow file to create.

Starting a new Gatsby site? Check out https://github.com/reflexjs/reflex

© 2023 Gatsby, Inc.