Introduction to Strapi2Front

Strapi2Front is a powerful CLI tool that automatically generates type-safe TypeScript code from your Strapi CMS schema. Stop writing boilerplate code and let Strapi2Front handle types, services, validation schemas, and server actions for you.

What is Strapi2Front?

Strapi2Front bridges the gap between your Strapi backend and frontend applications by:

Auto-generating TypeScript types from your Strapi content types
Creating type-safe service functions for data fetching
Building Zod validation schemas for forms and data validation
Generating framework-specific actions (Astro, Next.js, Nuxt, and more)
Supporting both Strapi v4 and v5 with intelligent version detection
Working with JavaScript projects via JSDoc annotations (no TypeScript required)

Type Safety

End-to-end type safety from your CMS to your frontend components

Zero Boilerplate

Generate thousands of lines of code with a single command

Framework Agnostic

Works with Astro, Next.js, Nuxt, SvelteKit, and any TypeScript/JavaScript project

Always in Sync

Keep your frontend types synchronized with your Strapi schema

Key Features

TypeScript & JSDoc Support

Strapi2Front works with both TypeScript and JavaScript projects:

TypeScript
JavaScript (JSDoc)

// Generated types for your Article collection
export interface Article {
  documentId: string;
  title: string;
  content: string;
  author: Author;
  publishedAt: string | null;
  locale: string;
}

// Type-safe service functions
export const getArticles = async (): Promise<Article[]> => {
  const response = await client.from('articles').findMany();
  return response.data;
};

/**
 * @typedef {Object} Article
 * @property {string} documentId
 * @property {string} title
 * @property {string} content
 * @property {Author} author
 * @property {string | null} publishedAt
 * @property {string} locale
 */

/**
 * @returns {Promise<Article[]>}
 */
export const getArticles = async () => {
  const response = await client.from('articles').findMany();
  return response.data;
};

Generated Code Structure

Strapi2Front uses a by-feature structure (screaming architecture) that organizes code by content type:

src/strapi/
├── collections/
│   ├── article/
│   │   ├── types.ts       # TypeScript interfaces
│   │   ├── schemas.ts     # Zod validation schemas
│   │   ├── service.ts     # CRUD functions
│   │   └── actions.ts     # Framework actions
│   └── author/
│       ├── types.ts
│       ├── schemas.ts
│       └── service.ts
├── singles/
│   └── homepage/
│       ├── types.ts
│       ├── schemas.ts
│       └── service.ts
├── components/
│   ├── seo.ts
│   └── hero.ts
└── shared/
    ├── utils.ts           # Shared utilities
    ├── client.ts          # Configured Strapi client
    ├── locales.ts         # i18n locales
    └── upload-action.ts   # File upload helpers

Form Validation with Zod

Generate ready-to-use Zod schemas for form validation:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { createArticleSchema } from '@/strapi/collections/article/schemas';

function ArticleForm() {
  const form = useForm({
    resolver: zodResolver(createArticleSchema),
  });
  
  // Form is now fully type-safe with validation
}

import { useForm } from '@tanstack/react-form';
import { zodValidator } from '@tanstack/zod-form-adapter';
import { createArticleSchema } from '@/strapi/collections/article/schemas';

function ArticleForm() {
  const form = useForm({
    validatorAdapter: zodValidator(),
    validators: {
      onChange: createArticleSchema,
    },
  });
}

Framework-Specific Actions

Generate type-safe server actions for your framework:

Astro
Next.js
Nuxt

// Generated Astro actions
import { actions } from 'astro:actions';

const { data, error } = await actions.article.create({
  title: 'My Article',
  content: 'Article content...',
  publishedAt: new Date().toISOString(),
});

File Upload Support

Built-in file upload helpers for browser and server:

import { uploadFile } from '@/strapi/shared/upload-action';

const file = document.querySelector('input[type="file"]').files[0];
const { data, error } = await uploadFile(file);

if (data) {
  console.log('Uploaded:', data.id, data.url);
}

Supported Strapi Versions

Strapi v5

Full support with automatic version detection and Document Service API

Strapi v4

Complete compatibility with Entity Service API and legacy schemas

Requirements

Node.js 18+

Strapi2Front requires Node.js version 18 or higher

Strapi v4 or v5

Works with both Strapi v4 and v5 backends

Package Manager

Compatible with npm, pnpm, yarn, and bun

How It Works

Configure Connection

Run npx strapi2front init to set up your Strapi connection and preferences

Sync Schema

Run npx strapi2front sync to fetch your Strapi schema and generate code

Use Generated Code

Import types, services, and actions in your frontend application

Stay Synchronized

Re-run sync whenever your Strapi schema changes

Framework Support

Framework	Types	Services	Schemas	Actions
Astro 4+	✅	✅	✅	✅
Next.js	✅	✅	✅	🔜
Nuxt	✅	✅	✅	🔜
SvelteKit	✅	✅	✅	🔜
TanStack Start	✅	✅	✅	🔜
Any Framework	✅	✅	✅	-

Types, Services, and Schemas work with any TypeScript or JavaScript framework. Framework-specific Actions are being added progressively.

Next Steps

Quick Start

Get up and running in 2 minutes

Installation

Detailed installation and setup guide

Configuration

Configure Strapi2Front for your project

CLI Reference

Complete command-line interface documentation

Community & Support

Strapi2Front is open source and built with ❤️ by Eleven Estudio.

GitHub

View source code and contribute

Report Issues

Found a bug? Let us know

Get Started

Configuration

Guides

Framework Integrations

Introduction

Introduction to Strapi2Front

What is Strapi2Front?

Type Safety

Zero Boilerplate

Framework Agnostic

Always in Sync

Key Features

TypeScript & JSDoc Support

Generated Code Structure

Form Validation with Zod

Framework-Specific Actions

File Upload Support

Supported Strapi Versions

Strapi v5

Strapi v4

Requirements

How It Works

Framework Support

Next Steps

Quick Start

Installation

Configuration

CLI Reference

Community & Support

GitHub

Report Issues

​Introduction to Strapi2Front

​What is Strapi2Front?

Type Safety

Zero Boilerplate

Framework Agnostic

Always in Sync

​Key Features

​TypeScript & JSDoc Support

​Generated Code Structure

​Form Validation with Zod

​Framework-Specific Actions

​File Upload Support

​Supported Strapi Versions

Strapi v5

Strapi v4

​Requirements

​How It Works

​Framework Support

​Next Steps

Quick Start

Installation

Configuration

CLI Reference

​Community & Support

GitHub

Report Issues

Introduction to Strapi2Front

What is Strapi2Front?

Key Features

TypeScript & JSDoc Support

Generated Code Structure

Form Validation with Zod

Framework-Specific Actions

File Upload Support

Supported Strapi Versions

Requirements

How It Works

Framework Support

Next Steps

Community & Support