Skip to main content
This guide is designed to give you an overview of Frontic. Dive into the essentials section to learn more about the different features and concepts.

​
Two Paths to Building

Frontic supports two ways to build your storefront API - choose the one that fits your workflow.

Frontic Studio

Describe what you need in natural language. Studio creates endpoints, configures data structures, sets up blocks, and wires everything together. No manual configuration required.

Design-First

Define blocks based on your UI design to decouple frontend from backend. Use the CLI and SDK for full control over every detail.

​
Frontic Studio

The fastest way to get started. Open Studio, describe what you need, and let AI build your storefront API.
1

🔗 Connect Your Backend

Connect your commerce system, CMS, or PIM using integrations. Frontic understands your data structures automatically.
2

💬 Describe What You Need

Tell Studio what you want to build - “I need a product listing with color filters and sort by price” - and it creates the working configuration.
3

🔨 Build Frontend

Generate a Client SDK and use it in your frontend application. Or let Studio help you build that too.
4

🚀 Ship to Production

When you’re ready, use release management to roll out to production.

​
Design-First

For teams who prefer full manual control, Frontic supports a traditional design-first approach. Define blocks based on your UI design to decouple frontend from backend.
1

🎨 UI Design

A good UI design is the starting point of any ecommerce project, migration or relaunch.
2

🔍 Extract Content Structure

Use the design to extract the content structure and define it using blocks.
3

🔮 Mock Data

Use powerful mock data to get started with your frontend application.
4

🔨 Build Frontend

Generate a Client SDK to use the blocks in your frontend application.
5

🔗 Connect to Backend

Connect your blocks to the backend to fetch real data and bring your design to life.

​
Lifecycle

Whether you use Studio or the design-first approach, Frontic complements your development process by providing help when needed. This section outlines the stages and how Frontic assists you.

​
Setup Project

After you register for a Frontic account, you can create your first project. Think of a project as a container for your frontend application.

​
Store Data

Frontic is designed to be used with one or multiple backends. You can connect backend systems using integrations and store data in your project.
You can also skip this, follow the design-first approach and connect a backend later.

​
Design Blocks

You start by designing blocks, which are essentially API endpoints that you can use in your frontend application. Blocks are feature rich and can be used to create simple data structures as well as complex, nested, queryable data.
With Frontic Studio, blocks are created automatically based on your natural language descriptions.

​
Create Pages

Since blocks on their own are not very useful, you can create pages that make them discoverable. Pages are a way to associate routes with blocks and manage language variants.

​
Generate Client SDK

Once you have your blocks and pages defined, you can use the Frontic CLI to generate a Client SDK specific to your project. 
npx @frontic/cli@latest generate
And use it in your frontend application. 
import client from "./.frontic/generated-client";

const data = await client.block("CategoryDetail", "running-shoes");

​
Build Frontend

Frontic does not enforce any framework or flavor of frontend development. We are big fans of Nuxt.js, but you can use any frontend framework you want. Check out the Nuxt.js integration for a quick start.

​
Ship to Production

Once you are happy with your API and frontend, you can ship it to production. Frontic offers a release management system to control the release of new features to various environments.

​
What’s next?

Try Frontic Studio

The fastest way to build. Describe what you need and let AI do the rest.

Explore Essentials

Dive deeper into blocks, pages, storage, and more.