PHPackages draggable/formeo - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. draggable/formeo ActiveLibrary draggable/formeo ================ Drag and Drop Javascript form builder v1.7.0(1y ago)597169203[100 issues](https://github.com/Draggable/formeo/issues)[3 PRs](https://github.com/Draggable/formeo/pulls)MITJavaScriptCI passing Since Aug 30Pushed 2mo ago35 watchersCompare [ Source](https://github.com/Draggable/formeo)[ Packagist](https://packagist.org/packages/draggable/formeo)[ Docs](http://draggable.github.io/formeo/)[ RSS](/packages/draggable-formeo/feed)WikiDiscussions main Synced 2mo ago READMEChangelog (10)DependenciesVersions (75)Used By (0) Formeo ====== [](#formeo) A highly configurable drag & drop form building module for creating dynamic, responsive forms with an intuitive visual editor. [![npm](https://camo.githubusercontent.com/b5e8180afb3d2a139092f409eff37c9d81fdae0b42de50b1456974851602f2ef/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f666f726d656f2e737667)](https://camo.githubusercontent.com/b5e8180afb3d2a139092f409eff37c9d81fdae0b42de50b1456974851602f2ef/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f666f726d656f2e737667) [![npm downloads](https://camo.githubusercontent.com/436817d31de34167c61cbf44d04e2c0fecb8f325d92ca68451aae81c6eeb94d3/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f666f726d656f2e737667)](https://camo.githubusercontent.com/436817d31de34167c61cbf44d04e2c0fecb8f325d92ca68451aae81c6eeb94d3/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f666f726d656f2e737667) [![GitHub](https://camo.githubusercontent.com/e0ae7eeb52d59968324da7ed35bedc9f226dcf4c6ccc5a9963c2c04ae46e7759/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f447261676761626c652f666f726d656f2e737667)](https://camo.githubusercontent.com/e0ae7eeb52d59968324da7ed35bedc9f226dcf4c6ccc5a9963c2c04ae46e7759/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f447261676761626c652f666f726d656f2e737667) [![build](https://github.com/Draggable/formeo/workflows/build/badge.svg)](https://github.com/Draggable/formeo/actions?query=workflow%3Abuild) [Demo](https://formeo.io) ------------------------- [](#demo) [![formeo-demo](https://user-images.githubusercontent.com/1457540/54798148-72c3c400-4c14-11e9-9d3f-bafe1ce0c8c1.gif)](https://formeo.io) Table of Contents ----------------- [](#table-of-contents) - [Features](#features) - [Installation](#installation) - [Usage](#usage) - [Framework Integration](#framework-integration) - [Documentation](#documentation) - [Development](#development) - [Contributing](#contributing) - [Changelog](#changelog) Features -------- [](#features) - 🎯 **Drag & Drop Editing** - Intuitive visual form builder - 📐 **Column/Inline Layout** - Create multi-column forms and inline field groups - 🔀 **Conditional Fields** - Show/hide fields based on user input - 🎨 **Custom Controls** - Extensible control API for custom field types - 🌍 **i18n Support** - Multi-language support out of the box - 📱 **Responsive** - Mobile-friendly form editor and renderer - ⚡ **Zero Config** - Works out of the box with sensible defaults - 🔧 **Highly Configurable** - Extensive options and event system - 📦 **TypeScript Support** - Full type definitions included - 🎭 **Preview Mode** - Test forms before deployment Installation ------------ [](#installation) ### NPM [](#npm) ``` npm install formeo ``` ### Yarn [](#yarn) ``` yarn add formeo ``` ### CDN [](#cdn) For quick prototyping or simple projects, you can use a CDN: ``` ``` Usage ----- [](#usage) ### Basic Setup [](#basic-setup) First, import Formeo into your project: ``` import { FormeoEditor, FormeoRenderer } from 'formeo' import 'formeo/dist/formeo.min.css' ``` ### Creating a Form Editor [](#creating-a-form-editor) ``` // Create a container element in your HTML // const editorOptions = { editorContainer: '#formeo-editor', // Add any additional options here } // Initialize the editor const editor = new FormeoEditor(editorOptions) ``` ### Saving Form Data [](#saving-form-data) ``` // Get the form data (typically in an onSave event) const formData = editor.formData // Save to your backend fetch('/api/forms', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }) ``` ### Rendering a Form [](#rendering-a-form) ``` // Create a container element for the rendered form // const rendererOptions = { editorContainer: '#formeo-renderer', // Add any additional options here } // Initialize the renderer and render the form const renderer = new FormeoRenderer(rendererOptions) renderer.render(formData) ``` ### Complete Example [](#complete-example) ``` import { FormeoEditor, FormeoRenderer } from 'formeo' import 'formeo/dist/formeo.min.css' // Set up the editor const editor = new FormeoEditor({ editorContainer: '#formeo-editor', events: { onSave: (formData) => { console.log('Form saved:', formData) // Render the form renderer.render(formData) } } }) // Set up the renderer const renderer = new FormeoRenderer({ editorContainer: '#formeo-renderer' }) ``` ### TypeScript [](#typescript) Formeo includes TypeScript definitions. Import and use with full type support: ``` import { FormeoEditor, FormeoRenderer } from 'formeo' import type { FormeoOptions, FormData } from 'formeo' const options: FormeoOptions = { editorContainer: '#formeo-editor' } const editor = new FormeoEditor(options) const formData: FormData = editor.formData ``` Framework Integration --------------------- [](#framework-integration) Formeo can be integrated with popular frontend frameworks: - **[React Integration Guide](https://github.com/Draggable/formeo/blob/main/docs/react-integration.md)** - Custom hooks, functional components, and Context API patterns - **[Angular Integration Guide](https://github.com/Draggable/formeo/blob/main/docs/angular-integration.md)** - Services, components, and standalone patterns Documentation ------------- [](#documentation) Comprehensive documentation is available in the [docs](https://github.com/Draggable/formeo/blob/main/docs/README.md) directory: - **[Options](https://github.com/Draggable/formeo/blob/main/docs/options/README.md)** - Complete configuration reference - **[Controls](https://github.com/Draggable/formeo/blob/main/docs/controls/README.md)** - Custom field types and controls API - **[Events](https://github.com/Draggable/formeo/blob/main/docs/options/events/README.md)** - Available events and callbacks - **[Actions](https://github.com/Draggable/formeo/blob/main/docs/options/actions/README.md)** - Action handlers - **[Editor API](https://github.com/Draggable/formeo/blob/main/docs/editor/README.md)** - Editor methods and properties - **[Build Tools](https://github.com/Draggable/formeo/blob/main/docs/tools/README.md)** - Development and build utilities Development ----------- [](#development) ### Prerequisites [](#prerequisites) - [Node.js](https://nodejs.org) (v18 or higher) - npm or yarn ### Getting Started [](#getting-started) ``` # Clone the repository git clone https://github.com/Draggable/formeo.git cd formeo # Install dependencies npm install # Start development server npm start ``` The demo will be available at `http://localhost:5173/` ### Available Scripts [](#available-scripts) ``` npm run dev # Start development server npm run build # Build library and demo npm run build:lib # Build library only npm test # Run tests npm run lint # Lint code npm run format # Format code with Biome ``` ### Running Tests [](#running-tests) ``` # Unit tests npm test # End-to-end tests npm run playwright:test # View test report npm run playwright:test:report ``` Contributing ------------ [](#contributing) We welcome contributions! Please see our [Contributing Guide](https://github.com/Draggable/formeo/blob/main/CONTRIBUTING.md) for details on: - Setting up your development environment - Code style and conventions - Submitting pull requests - Reporting issues License ------- [](#license) Formeo is [MIT licensed](https://github.com/Draggable/formeo/blob/main/LICENSE). [Docs](https://github.com/Draggable/formeo/blob/main/docs/README.md) -------------------------------------------------------------------- [](#docs) [Changelog](https://github.com/Draggable/formeo/blob/main/CHANGELOG.md) ----------------------------------------------------------------------- [](#changelog) --- Made with ❤️ by [Draggable](https://draggable.io) ### Health Score 54 — FairBetter than 97% of packages Maintenance62 Regular maintenance activity Popularity36 Limited adoption so far Community30 Small or concentrated contributor base Maturity78 Established project with proven stability Bus Factor1 Top contributor holds 78.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~40 days Recently: every ~377 days Total 75 Last Release 575d ago Major Versions v0.7.18 → v1.0.02019-03-22 ### Community Maintainers ![](https://www.gravatar.com/avatar/e19a99adfa0ab971cda5b01d82f58408ba89ea7c53f0e43754d976ce64eee5a3?d=identicon)[kevinchappell](/maintainers/kevinchappell) --- Top Contributors [![kevinchappell](https://avatars.githubusercontent.com/u/1457540?v=4)](https://github.com/kevinchappell "kevinchappell (449 commits)")[![semantic-release-bot](https://avatars.githubusercontent.com/u/32174276?v=4)](https://github.com/semantic-release-bot "semantic-release-bot (75 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (22 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (8 commits)")[![svenvandescheur](https://avatars.githubusercontent.com/u/10243534?v=4)](https://github.com/svenvandescheur "svenvandescheur (4 commits)")[![mrjacobbloom](https://avatars.githubusercontent.com/u/2879020?v=4)](https://github.com/mrjacobbloom "mrjacobbloom (3 commits)")[![larrypaul93](https://avatars.githubusercontent.com/u/10649897?v=4)](https://github.com/larrypaul93 "larrypaul93 (2 commits)")[![allan-ayamah](https://avatars.githubusercontent.com/u/5589155?v=4)](https://github.com/allan-ayamah "allan-ayamah (2 commits)")[![rcackerman](https://avatars.githubusercontent.com/u/1258266?v=4)](https://github.com/rcackerman "rcackerman (1 commits)")[![derrandz](https://avatars.githubusercontent.com/u/13497307?v=4)](https://github.com/derrandz "derrandz (1 commits)")[![adnahmed](https://avatars.githubusercontent.com/u/70430987?v=4)](https://github.com/adnahmed "adnahmed (1 commits)")[![blt950](https://avatars.githubusercontent.com/u/2505044?v=4)](https://github.com/blt950 "blt950 (1 commits)")[![markandrewkato](https://avatars.githubusercontent.com/u/5277002?v=4)](https://github.com/markandrewkato "markandrewkato (1 commits)") --- Tags builderformform-builderformbuilder ### Embed Badge ![Health badge](/badges/draggable-formeo/health.svg) ``` [![Health](https://phpackages.com/badges/draggable-formeo/health.svg)](https://phpackages.com/packages/draggable-formeo) ``` ### Alternatives [kevinchappell/form-builder jQuery formBuilder 2.7k6.9k2](/packages/kevinchappell-form-builder)[kris/laravel-form-builder Laravel form builder - symfony like 1.7k2.2M45](/packages/kris-laravel-form-builder)[xaboy/form-builder 好用的PHP表单生成器，快速生成现代化的form表单,支持前后端分离。内置17种常用表单组件。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。 76275.0k5](/packages/xaboy-form-builder)[kartik-v/yii2-builder Build forms (single-row or multi-row/tabular) easily for Yii Framework 2.0 1011.1M33](/packages/kartik-v-yii2-builder)[barryvdh/laravel-form-bridge This packages integrates Symfony Form Component in Laravel. 163354.8k1](/packages/barryvdh-laravel-form-bridge)[lara-zeus/bolt Zeus Bolt is form builder for your users, with so many use cases 23640.2k2](/packages/lara-zeus-bolt) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)