What's Frontastic?

Hi, there 👋

Welcome to the Frontastic documentation, but before we go through how to work with us, let's introduce ourselves a little.

Frontastic removes the complexity when building commerce sites in a headless world.

Frontastic enables you to:

  1. Orchestrate data from different headless services with our API hub
  2. Build, deploy, and iterate on websites faster by using our component layer
  3. Create, manage, and optimize websites with the Frontastic studio
  4. Serve your websites as PWAs, optimized for performance and mobile first with our delivery layer

Frontastic provides a development framework and all the necessary tools to build, deploy, and iterate on a commerce site. At the heart of what we do are Frontastic components, which are React components with a schema. They're built by developers, added to pages by business users, the data is brought in from the API hub, and they're delivered optimized for performance to your customers.

With the Frontastic API hub, you can connect to any backend API and use the content and data from them when building websites. With the API hub, you get a unified way of connecting and working with your technology stack as it takes care of all the complex wiring that usually comes with composable architectures.

All extensions to backend APIs are written as JavaScript cloud functions. A ready-to-use extension to commercetools is included.

Frontastic comes with a component library for the most common commerce use cases, like product listings, details pages, cart, and checkout. You can copy these into your project to get started quickly.

Components are made available in the Frontastic studio, where anyone in your team can manage the full website without needing a developer. Here, you can edit and optimize your sites, including pages, components, navigation, and layouts.

Frontastic provides the delivery layer that serves the website as a Progressive Web App (PWA). Frontastic uses Next.js, which is based on React and is known for its performance and features for developing web applications. We also provide auto-scaling and fail-safe hosting and Server Side Rendering (SSR).

For more information, see our article about the Frontastic architecture and Frontastic stack.

How do you work with Frontastic?

As a developer, you'll interact with Frontastic in 2 different ways. To create extensions, you'll work with a Frontastic sandbox that's provisioned automatically in the Frontastic studio. To build, modify, and deploy Frontastic components, you'll use the Frontastic CLI in combination with the Frontastic studio.

As a business user, you'll be working within the Frontastic studio to create, manage, and optimize your commerce site.


If you can't find what you're looking for in the documentation or if you have any general feedback, please send us a message using the Submit a ticket button at the top of your page.

Did this page help you?