What "Gatsby" Means on the puyo.gg Website

Updated

On puyo.gg, "gatsby" is a web development term, not a Puyo Puyo term. It refers to Gatsby, an open-source framework for building fast static websites with React. It has nothing to do with chaining, GTR, or any in-game technique. The site's own content makes the split clear: the learning material (Lessons, Chaining Drills, Chain Simulator) is the product, while gatsby, react, and bootstrap are the technologies used to build and serve the pages around it.

Why a Puyo site would use Gatsby

Gatsby generates pages ahead of time as static files, so lesson pages, the form index, and topic lists can load quickly without a server rendering each request. That fits a content-heavy training site where most pages change rarely.

The interactive parts are a different story. puyo.gg states that much of its content is made with Pixi.js, a WebGL-based animation framework, and that the site requires WebGL. So the architecture is roughly two layers:

Layer Technology What it handles
Page shell and content Gatsby (React-based) Lessons, Special Topics, Form Index, navigation
Interactive content Pixi.js / WebGL Animated drills, chain simulator, visual demos

React appears because Gatsby is built on it; components for lesson lists or drill cards are React components compiled into static pages. Bootstrap, the third keyword, is a CSS framework for layout and styling, separate from both.

Don't confuse the tech stack with the lessons

The keywords describe how the site is built. The actual teaching content is listed on the page itself:

  • Lessons 1–13, from "Introduction to Puyo Puyo" through "Harassment Strategies"
  • Special Topics: The 13th Row, Optimizing Placement Speed
  • Chaining Drills with named forms such as GTR, Sandwich, L-Shape, and Tanaka Special
  • Chain Simulator, linked out to the Puyo Nexus Wiki simulator

None of these depend on knowing what Gatsby is. A reader who wants to learn chaining can ignore the framework entirely.

If content won't load, check WebGL first

A blank drill or simulator is more likely a graphics problem than a Gatsby problem. The site explicitly warns that content won't load if the browser lacks WebGL and advises enabling hardware acceleration in browser settings. Work through that check before assuming the build framework is at fault:

  1. Confirm hardware acceleration is on in your browser settings.
  2. Reload the page and see whether the drill or simulator renders.
  3. If it still fails, try a different browser that supports WebGL.

Gatsby's role is delivering the page; WebGL's role is drawing the animated Puyo content inside it. Separating the two makes troubleshooting straightforward.