DocumentationBlocks LibraryGuidesGitHub


Add Reflexjs to a Gatsby project.

Using a starter

Use the gatsby-starter template to create your next Gatsby + Reflexjs site.

gatsby new site reflexjs/gatsby-starter

Once your site is ready, you can run yarn dev to start the development environment.

Add to existing site

You can also add Reflexjs to an existing Gatsby site.

Install dependencies

npm i reflexjs gatsby-plugin-reflexjs babel-preset-gatsby @babel/preset-react

Create a theme

Generate a theme using the Reflexjs CLI utility.

npx reflexjs --preset base

This will create a theme.js file using the base preset at the root of your project.

⚠️ Move your theme to src/gatsby-plugin-reflexjs/index.js.

Enable the plugin

Enable the gatsby-plugin-reflexjs in your gatsby-config.js file.

module.exports = {
plugins: [`gatsby-plugin-reflexjs`],

Add the Babel preset

Reflexjs uses a custom jsx pragma to convert style props. To enable this pragma, create a .babelrc file at the root of your project with the following:

"presets": [
"runtime": "automatic",
"importSource": "reflexjs"
This preset automatically sets the `jsx` pragma for you so that you don't need to import it in individual files

If you prefer manually enabling it, you can set the pragma in your file as follow:

/** @jsxImportSource "reflexjs" */
import * as React from "react"
export default function IndexPage() {
return <p variant="text">Hello World!</p>

You are now ready to start the development server using gatsby develop.

Next.jsCreate React App

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub