Hello from superplate

Your Docusaurus site did not load properly.

A very common reason is a wrong site baseUrl configuration.

Current configured baseUrl = /superplate/

We suggest trying baseUrl =

The frontend boilerplate with superpowers

Get Started

All plugins follow the best practices

superplate gives you many abilities to create your own plugin and interact with the others. You can add usefull, highly-demands front-end development tools and libraries as a plugin by using superplate CLI during the project creation phase.

To create a project called my-app, run this command:

npx superplate-cli my-app

 const base = {
  _app: {
      import: [
          'import { ChakraProvider } from "@chakra-ui/react";',
          'import theme from "@definitions/chakra/theme";',
      ],
      wrapper: [["<ChakraProvider theme={theme}>", "</ChakraProvider>"]],
  },
  testSetup: {
      import: [
          'import { ChakraProvider } from "@chakra-ui/react";',
          'import theme from "@definitions/chakra/theme";',
      ],
      wrapper: [["<ChakraProvider theme={theme}>", "</ChakraProvider>"]],
  },
};
module.exports = {
    extend() {
        return base;
    },
};

Easy to extend/customize plugin structure

You can easily develop your own framework CLI and plugins according to your needs to on top of superplate codebase due to its framework/plugin agnostic nature.

npm run dev

Tailwind CSS

Bootstrap

Chakra UI

Antd

CSS

SASS/SCSS

styled-components

styled-system

Storybook

svgr

Apollo GraphQL

graphql-request

SWR

React Query

Redux

React Bootstrap

MobX

Mobx State Tree

next-translate

next-i18next

Prettier

ESLint

Enzyme

React Testing Library

Jest

Cypress

WebdriverIO

Docker

GitHub Actions

Travis

Fetch

Axios

Environment Variables

Reverse Proxy

Bundle Analyzer

react-use

Redux Toolkit

Recoil

lint-staged

All plugins follow the best practices

Easy to extend/customize plugin structure