Documentation

Frontend components

Elevate, May 20-22-2025, Miami Beach, Florida

A Frontend component needs to be created by a developer and then can be used to build your commerce site.

A Frontend component is made up of a definition from the Studio, the corresponding frontend code, and the required data from an API.

A Frontend component always consists of 2 parts:

  1. A JavaScript entry point which is a ReactJS (JSX/TSX) component that receives some special props
  2. A JSON file that defines which data the Frontend component requires and how this should be configurable in the Studio, we call this JSON file the schema
Each Frontend component should have their own folder that contains these two files. The folder location should be in the packages/<project>/frontend/frontastic/tastics folder, or for the Store Launchpad for B2B Manufacturing, in the /frontend/src/lib/tastics folder.

In the articles in this section, you'll learn how to develop a Frontend component step by step.

Frontend components are called tastics in code for short.