<commit_before>---
title: Plugins
---

Plugins are Node.js packages that implement Gatsby APIs. They enable you to
easily solve common website build problems e.g. setup Sass, add markdown
support, process images, etc.

For larger more complex sites, they let you modularize your site customizations
into site-specific plugins.

Gatsby has already a large and growing set of plugins. See below for the list
of official plugins. We'll eventually add support here for searching and browsing
both official plugins and community plugins published on NPM.

## How to use?

Plugins are just Node.js packages meaning you install them like anything else
in node using NPM.

For example, `gatsby-transformer-json` is a package which adds support for JSON
files to the Gatsby data layer.

To install it, in the root of your site you run:

`npm install --save gatsby-transformer-json`

Then in your site's `gatsby-config.js` you simply add `gatsby-transformer-json`
to the plugins array like:

```javascript
module.exports = {
  plugins: [
    `gatsby-transformer-json`,
  ],
}
```

Plugins can take options. See each plugin page below for more detailed documentation
on using each plugin.

## Official plugins

* [gatsby-transformer-documentationjs](/docs/packages/gatsby-transformer-documentationjs/)
* [gatsby-transformer-json](/docs/packages/gatsby-transformer-json/)
* [gatsby-transformer-remark](/docs/packages/gatsby-transformer-remark/)
* [gatsby-transformer-sharp](/docs/packages/gatsby-transformer-sharp/)
* [gatsby-transformer-yaml](/docs/packages/gatsby-transformer-yaml/)
* [gatsby-plugin-catch-links](/docs/packages/gatsby-plugin-catch-links/)
* [gatsby-plugin-coffeescript](/docs/packages/gatsby-plugin-coffeescript/)
* [gatsby-plugin-glamor](/docs/packages/gatsby-plugin-glamor/)
* [gatsby-plugin-google-analytics](/docs/packages/gatsby-plugin-google-analytics/)
* [gatsby-plugin-manifest](/docs/packages/gatsby-plugin-manifest/)
* [gatsby-plugin-offline](/docs/packages/gatsby-plugin-offline/)
* [gatsby-plugin-preact](/docs/packages/gatsby-plugin-preact/)
* [gatsby-plugin-sass](/docs/packages/gatsby-plugin-sass/)
* [gatsby-plugin-sharp](/docs/packages/gatsby-plugin-sharp/)
* [gatsby-plugin-typescript](/docs/packages/gatsby-plugin-typescript/)
* [gatsby-source-filesystem](/docs/packages/gatsby-source-filesystem/)
* [gatsby-source-drupal](/docs/packages/gatsby-source-drupal/)
* [gatsby-source-hacker-news](/docs/packages/gatsby-source-hacker-news/)
* [gatsby-remark-autolink-headers](/docs/packages/gatsby-remark-autolink-headers/)
* [gatsby-remark-copy-linked-files](/docs/packages/gatsby-remark-copy-linked-files/)
* [gatsby-remark-prismjs](/docs/packages/gatsby-remark-prismjs/)
* [gatsby-remark-responsive-iframe](/docs/packages/gatsby-remark-responsive-iframe/)
* [gatsby-remark-responsive-image](/docs/packages/gatsby-remark-responsive-image/)
* [gatsby-remark-smartypants](/docs/packages/gatsby-remark-smartypants/)
* [gatsby-sharp](/docs/packages/gatsby-sharp/)

## Official components

* [gatsby-link](/docs/packages/gatsby-link/)<commit_msg>Add styled components to list of plugins<commit_after>---
title: Plugins
---

Plugins are Node.js packages that implement Gatsby APIs. They enable you to
easily solve common website build problems e.g. setup Sass, add markdown
support, process images, etc.

For larger more complex sites, they let you modularize your site customizations
into site-specific plugins.

Gatsby has already a large and growing set of plugins. See below for the list
of official plugins. We'll eventually add support here for searching and browsing
both official plugins and community plugins published on NPM.

## How to use?

Plugins are just Node.js packages meaning you install them like anything else
in node using NPM.

For example, `gatsby-transformer-json` is a package which adds support for JSON
files to the Gatsby data layer.

To install it, in the root of your site you run:

`npm install --save gatsby-transformer-json`

Then in your site's `gatsby-config.js` you simply add `gatsby-transformer-json`
to the plugins array like:

```javascript
module.exports = {
  plugins: [
    `gatsby-transformer-json`,
  ],
}
```

Plugins can take options. See each plugin page below for more detailed documentation
on using each plugin.

## Official plugins

* [gatsby-plugin-catch-links](/docs/packages/gatsby-plugin-catch-links/)
* [gatsby-plugin-coffeescript](/docs/packages/gatsby-plugin-coffeescript/)
* [gatsby-plugin-glamor](/docs/packages/gatsby-plugin-glamor/)
* [gatsby-plugin-google-analytics](/docs/packages/gatsby-plugin-google-analytics/)
* [gatsby-plugin-manifest](/docs/packages/gatsby-plugin-manifest/)
* [gatsby-plugin-offline](/docs/packages/gatsby-plugin-offline/)
* [gatsby-plugin-preact](/docs/packages/gatsby-plugin-preact/)
* [gatsby-plugin-sass](/docs/packages/gatsby-plugin-sass/)
* [gatsby-plugin-sharp](/docs/packages/gatsby-plugin-sharp/)
* [gatsby-plugin-styled-components](/docs/packages/gatsby-plugin-styled-components/)
* [gatsby-plugin-typescript](/docs/packages/gatsby-plugin-typescript/)
* [gatsby-remark-autolink-headers](/docs/packages/gatsby-remark-autolink-headers/)
* [gatsby-remark-copy-linked-files](/docs/packages/gatsby-remark-copy-linked-files/)
* [gatsby-remark-prismjs](/docs/packages/gatsby-remark-prismjs/)
* [gatsby-remark-responsive-iframe](/docs/packages/gatsby-remark-responsive-iframe/)
* [gatsby-remark-responsive-image](/docs/packages/gatsby-remark-responsive-image/)
* [gatsby-remark-smartypants](/docs/packages/gatsby-remark-smartypants/)
* [gatsby-sharp](/docs/packages/gatsby-sharp/)
* [gatsby-source-drupal](/docs/packages/gatsby-source-drupal/)
* [gatsby-source-filesystem](/docs/packages/gatsby-source-filesystem/)
* [gatsby-source-hacker-news](/docs/packages/gatsby-source-hacker-news/)
* [gatsby-transformer-documentationjs](/docs/packages/gatsby-transformer-documentationjs/)
* [gatsby-transformer-json](/docs/packages/gatsby-transformer-json/)
* [gatsby-transformer-remark](/docs/packages/gatsby-transformer-remark/)
* [gatsby-transformer-sharp](/docs/packages/gatsby-transformer-sharp/)
* [gatsby-transformer-yaml](/docs/packages/gatsby-transformer-yaml/)

## Official components

* [gatsby-link](/docs/packages/gatsby-link/)
{'fraction_non_alphanumeric': 0.13999358563181527, 'fraction_numerical': 0.0, 'mean_word_length': 5.014464802314368, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1029394', 'n_tokens_mistral': 2151, 'n_tokens_neox': 2100, 'n_words': 400}