One of the many things that might get people to use Gatsby JS is the vast Gatsby Plugin Library that comes with it. Thousands of different plugins, built by the Gatsby team, the community, or sole developers with almost seamless drop-in support make the developing experience with Gatsby very smooth. In this post, we will go through my top 50 plugins with all kinds of different purposes and categories.
Let's get started!
Please note: There are lots of basic plugins I have left out in this list, although there are amazing! I would love to know what plugins you guys use and love, so let me know in the comments!
Table Of Contents
Styling
Styled Components, maybe the most popular of the "CSS-in-JS" solutions, makes probably for a good start to this list of top 50 plugins. Find out more about how to implement it in your existing repo in this DigitalOcean article.
Emotion is the counter-part to Styled Components and arguably the second most popular "CSS-in-JS" solution. Let me know in the comments which you like best!
TypographyJS is a tool I often use for my sites and this Gatsby JS plugin makes sure to include it with minimal configuration.
For people who prefer Sass/SCSS over "CSS-in-JS" or standard CSS we have gatsby-plugin-sass providing drop-in support for Sass/SCSS stylesheets
And if you want to use PostCSS "the tool for transforming CSS with JavaScript", we've got you covered as well.
Remove unused CSS from CSS/Sass/Less/stylus files and modules in your Gatsby project using purgecss. 🎉 Supports tailwind, bootstrap, bulma, etc.
The plugin to include Material-UI v4 in your project. However you might want to consider using "gatsby-theme-material-ui" which already uses the plugin under the hood, adds web fonts, meta-viewport, CSS baseline, and MaterialUI theme support and has MaterialUI styled Gatsby link components.
Drop-In support for Chakra-UI! "Chakra UI is a simple, modular, and accessible component library that gives you the building blocks you need to build your React applications." - chakra-ui.com.
Drop-In support for AntDesign! 🌈 Enterprise-class UI designed for web applications. 📦 A set of high-quality React components out of the box. 🛡 Written in TypeScript with predictable static types. ⚙️ A whole package of design resources and development tools.
Markdown
gatsby-plugin-mdx is the official integration for using MDX with Gatsby. The default configuration will allow you to automatically create pages with .mdx files in src/pages and will process any Gatsby nodes with Markdown media types into MDX content! 🔥
PrismJS is a syntax highlighter for your code snippets on your Gatsby Blog! Lightweight and extensible! Checkout different themes at PrismJS!
Now, what if you want to embed a Youtube video in your Markdown? You can write the code to detect it yourself or you can use gatsby-remark-embed-video!
Becoming more popular each day, you can now add a reading-time tag to your blog posts like you see on Medium on really anywhere these days!
This plugin automatically turns your Markdown headers into GitHub-style hover-links! Note: this is a sub-plugin to the gatsby-transformer-remark plugin.
Instead of Youtube Videos, with this plugin, you can embed any Tweet or Moment right in your Markdown files!
Next up is another sub-plugin of gatsby-transformer-remark, this time we can automatically replace “dumb” punctuation marks with “smart” punctuation marks. This uses the retext-smartypants plugin under the hood.
CMS
Now if you didn't want to go with managing markdown files on your own, the next best and easy option for you is NetlifyCMS. A CMS deployed with your Gatsby Netlify Site makes changing and previewing your markdown files easy!
Prismic CMS is a little bit more difficult to configure, but once you have the setup, it's a really good option for a multilingual website like my own! Create and source content in different languages to programmatically create your pages in Gatsby for you!
This is probably one of the most popular options for headless CMS. Easy to set up with a simple web interface, Contentful has become one of the biggest in the market.
Another headless option is DatoCMS. It excels at managing pages with complex layouts or big teams with multi-roles, for bigger sized companies this is definitely worth considering!
Sanity allows for real-time content preview in development and minimal configuration to get started. Check out the guide to get started here.
Source your data into your Gatsby application from your Airtable base tables. "Airtable evolves with you and your team, so you can build a solution with increasing sophistication and capability." - airtable.com
"Building self-hosted, customizable, and performant content API has never been easier." - Strapi.io. This our first self-hosted option!
This plugin will soon be deprecated for the next version v4, but still worth mentioning! Over 35% of the web is powered by WordPress and some might want to think about just deploying the frontend with Gatsby. With this plugin, you can! Source your WordPress content on build time and get Gatsby's blazing fast front-end on top! ⚡️
Socials
Do you want sharing buttons for your blog posts? This plugin is for you! Social9 social sharing provides you beautiful buttons, sharing capabilities, and analytics. (20+ buttons- Whatsapp, Facebook, Twitter, LinkedIn, Reddit, and many more…)
Parse your posts and generate socials cards for Twitter, Facebook, Slack, and more! You can also configure lots on your own like custom backgrounds, custom author images, etc.
Sourcing data from Instagram hasn't been easier. Scrape posts from an account or a hashtag. Or scrape user profile information if that's what you are after!
If Twitter is what you are after instead of Instagram, this plugin has got you covered. The plugin supports 8 different API endpoints from Twitter's official API and you can pull it right into your Gatsby site.
Some people might be trying to create a newsletter following and with this Mailchimp plugin, it just becomes easier! There are lots of other options for providers, but Mailchimp is one of the most popular.
Do you want your blog to be available as an RSS feed? This plugin gives you all the configuration options you need.
Analytics / SEO
Understanding your users and how they behave is key to creating a following. The most popular option is Google Analytics. This plugin offers drop-in support for the "not yet" deprecated Google Analytics.
Google gtag is the newest version of Google Analytics, also called Google Analytics v4 supporting the GA4 property. If you signed up recently, this is most likely what you got. Make sure to use this plugin for drop-in support then!
If you want Google Tagmanager on your Gatsby site. This plugin is for you. Add your Google ID and off you go!
"Sentry's application monitoring platform helps every developer diagnose, fix, and optimize the performance of their code. Over 1M developers and 60K organizations already ship better software faster with Sentry. Won’t you join them? " - Sentry.io Why not with this Gatsby plugin?
Create your sitemap with ease! But why do you even need one? This article goes through the basics and most importantly explains its use cases!
Next up is the robots.txt. One line in your gatsby-config.js and you are good to go. If want to learn more about it, check out this article.
Guess.js is a library for enabling data-driven user-experiences on the web. This plugin will predict which page a user is most likely to visit from a given page by automatically downloading your Google Analytics data and use this data to create a model!
Hosting
There are lots of different options for hosting, but among them, the two most common I use are Amazon S3 Buckets and Netlify. This plugin focuses on the S3 buckets and makes deployment easy!
Now Netlify is probably one the most popular options to deploy your Gatsby site and this plugin will automatically generate a _headers and a _redirects at the root of your public folder to configure HTTP headers and redirects on Netlify.
One thing Gatsby has already struggled with is Build speed on subsequent builds. This plugin might be for you in that case. Caching your previous builds locally or in the Netlify cache directory, this plugin can speed up your build times.
Other
If you are trying to build a multi-language website with Gatsby? Then, this plugin might be for you. Automatically built different languages for different file paths like src/pages/about.en.js ⇒ /en/about or src/pages/about.jp.js ⇒ /jp/about!
I talked about this plugin in one of my recent posts on how to get scroll animations done easily in Gatsby! Based on the Sal (Scroll Animation Library) this plugin is fire! 🔥
Or maybe you fancy a progress indicator for page scrolling at the top of your page? Then this plugin is for you. Based on NProgress.js, it is very handy and easy to set up.
Is loading Google Fonts in slowing down your site? Maybe you should prefetch them? With this plugin, you can prefetch your fonts and increase performance as opposed to loading web fonts from Google’s external stylesheet.
Some people working with JSON files as their database, but at last want to access them as JavaScript objects, this plugin is for them. Parse raw JSON strings into JavaScript objects e.g. from JSON files. Also supports arrays of objects and single objects.
In case you want to search your GraphQL layer using a search engine like FlexSearch, you might want to have a look at this plugin!
Do you need the user to know, where there are in the page hierarchy? Do you want them to find their way back? Simply use Breadcrumbs!
Chatwoot is a live chat software for websites running on open-source! With a very generous free-tier, this is one of my favorites on this list!
One of Gatsby's downsides especially recently has been the Javascript file size it needs to ship with the application. Preact is working to solve that. While Preact doesn’t provide full support for the React ecosystem, it is an intriguing option for Gatsby sites as it saves ~30kb of JavaScript vs. using React!
This is an official Gatsby plugin, and by default works only with the /pages directory, but what if you want to use another directory for automatically generating pages? Simply add this plugin in your gatsby-config.js, define your custom directory, and let's goo!!
That’s pretty much it!
Thanks so much for reading this far!
And I hope you found a few plugins in this list that you might not have known about yet and are going to try out in the future! There are thousands of different plugins and especially the CMS plugins make Gatsby so powerful to me. Being able to easily access the contents on build time from your CMS without having to go to much length is just so nice.
Let me know in the comments what plugins you like the best!
And feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!
