← Back to Projects
Open Source / Strapi Plugin

strapi-plugin-form-builder-cms

A Strapi plugin that lets teams create and manage forms directly inside the CMS — no custom schemas, endpoints, or admin UI required.

StrapiNode.jsTypeScriptReact
strapi-plugin-form-builder-cms

Overview

Built a custom Strapi v5 plugin to create and manage dynamic forms directly from the CMS, eliminating the need for custom schemas, endpoints, and repetitive frontend logic.

→ https://www.npmjs.com/package/strapi-plugin-form-builder-cms

What I Built

  • Form builder integrated into the Strapi admin panel
  • Flexible field system (type, validation, options, required state)
  • API-driven form definitions for dynamic frontend rendering
  • Reusable architecture across multiple projects

How It Works

Forms are modeled as structured entities within the CMS. Each form includes a unique identifier and a configurable set of fields.

Frontend applications (Next.js, Astro, React, etc.) fetch the form definition via API and render it dynamically, keeping the system fully decoupled.

Key Decisions

  • CMS as the source of truth
  • API-driven rendering (frontend as renderer)
  • Plugin-based architecture instead of project-specific code
  • Standardized schema across projects

Differentiation

Unlike other plugins that focus on UI features (layouts, conditional logic), this project prioritizes architecture and reusability:

  • Fully frontend-agnostic
  • Designed for multi-project reuse
  • Improved developer experience (DX)
  • Lower coupling and better maintainability

Challenges & Trade-offs

  • Flexibility vs simplicity
    Designing a schema flexible enough without making it complex for non-technical users.

  • Distributed validation
    Validation lives partly in the CMS and partly in the frontend, requiring consistency management.

  • Dynamic rendering vs strong typing
    Sacrifices strict typing in the frontend in favor of flexibility.

  • Strapi plugin ecosystem constraints
    Adapting to internal architecture and admin lifecycle limitations.

Impact

  • Eliminated repeated form implementations across projects
  • Significantly reduced development time
  • Enabled non-technical teams to manage forms
  • Standardized form handling across applications

Tech Stack

  • Node.js + TypeScript
  • Strapi v5
  • React (Strapi Design System)