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 typesCreating type-safe service functions for data fetchingBuilding Zod validation schemas for forms and data validationGenerating framework-specific actions (Astro, Next.js, Nuxt, and more)Supporting both Strapi v4 and v5 with intelligent version detectionWorking 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
Generate ready-to-use Zod schemas for form validation:
React Hook Form
TanStack Form
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 }
Framework-Specific Actions Generate type-safe server actions for your framework:
// 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 (), });
Next.js actions support coming soon
Nuxt server routes support coming soon
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 Strapi2Front is open source and built with ❤️ by Eleven Estudio .