Skip to content

Formity Zero is a versatile form-building suite with 28 customizable fields, flows, & validations via the Formity.js library. Its Integration Engine handles APIs. Ahead-Editor uses Codex Editor.js for rich text, while Ahead-Shadcn/ui offers modern UI components. Developer tools in CLI and GUI streamline workflows for technical & non-tech users.

License

Notifications You must be signed in to change notification settings

ahmedbenaw/formity.js

Repository files navigation

πŸš€ Formity Zero (v0.5 Beta)

Zero-bug, zero-config form & integration suite – A complete monorepo containing everything you need to build modern web applications with forms, editors, and integrations.

Version: 0.5 Beta

This is an early beta release. We welcome feedback, bug reports, and especially contributors!

Contributors: Please review our Code Guidelines before submitting a PR. The guidelines include detailed, line-by-line help and best practices for contributing to this codebase.


βœ… Current Features

  • 28-field form builder with validation and conditional logic
  • Universal integration engine (Editor.js, Shadcn, Google Fonts, LLMs)
  • Developer UX: CLI + GUI, live preview, export to CodeSandbox/StackBlitz
  • Self-healing, cross-platform bootstrap and dependency doctor
  • TypeScript, Turbo, pnpm, Vite, and full monorepo setup

🚧 Upcoming Features

  • Integration Schemas: Standardized, reusable integration blueprints for third-party services
  • πŸ€– AI Assisted Form Builder (via Integration Engine)
  • Serverless Integration Handling (Supabase)
  • CRM Integrations (HubSpot, Zoho, Next CRM, others)
  • Cloud Storage Integrations (Google Drive, OneDrive, Dropbox)
  • Payments Integration (Stripe, others)

πŸš€ Quick Start

One-command bootstrap

  1. Clone or download this repository
  2. Run the bootstrap script:
# Via Node.js
node bootstrap.js

# Or make it executable and run directly
chmod +x bootstrap.js
./bootstrap.js

The bootstrap will:

  • βœ… Check Node.js 18+ requirement
  • πŸ“¦ Auto-install pnpm (or use npm/yarn if preferred)
  • πŸ” Install all workspace dependencies
  • 🩺 Run health checks on all packages
  • 🎯 Present interactive menu for next steps

Available commands

After bootstrap, choose from:

  • Start dev servers – Hot-reload development for all packages
  • Build everything – Production builds for all packages
  • Run unit tests – Complete test suite across all packages

πŸ“ Repository Structure

formity-zero/
β”œβ”€β”€ bootstrap.js                 # 🩺 1-click setup & health check
β”œβ”€β”€ package.json                 # πŸ“¦ Root workspace configuration
β”œβ”€β”€ pnpm-workspace.yaml          # πŸ”§ Workspace definition
β”œβ”€β”€ turbo.json                   # ⚑ Monorepo task orchestration
β”œβ”€β”€ apps/
β”‚   └── developer-ux/            # πŸ› οΈ CLI + GUI development tools
β”œβ”€β”€ packages/
β”‚   β”œβ”€β”€ formity/                 # πŸ“ Form builder with 28 field types
β”‚   β”œβ”€β”€ integration-engine/      # πŸ”Œ Universal integration hub
β”‚   β”œβ”€β”€ ahead-editor/            # ✏️ Editor.js wrapper
β”‚   └── ahead-shadcn/            # 🎨 Shadcn/ui components
└── scripts/
    └── doctor.js                # 🩺 Dependency health checker

πŸ—οΈ Package Details

πŸ“ Formity

The core form building engine with:

  • 28 field types (text, email, select, file upload, etc.)
  • Built-in validation system
  • Conditional logic support
  • Tailwind CSS theming
  • Zero configuration required

πŸ”Œ Integration Engine

Universal hub for connecting any service:

  • Pre-configured Editor.js integration
  • Shadcn/ui component system
  • Google Fonts loader
  • LLM provider support
  • Extensible registry pattern

✏️ Ahead Editor

Complete Editor.js solution:

  • All essential blocks (header, paragraph, list, quote, etc.)
  • Image upload support
  • Link tool with preview
  • Inline code formatting
  • Zero-config setup

🎨 Ahead Shadcn

Ready-to-use Shadcn/ui components:

  • Button, Input, and core components
  • Tailwind CSS utilities
  • Dark/light mode support
  • Fully typed with TypeScript

πŸ› οΈ Developer UX

Complete development experience:

  • Interactive CLI for common tasks
  • Web-based GUI (http://localhost:3001)
  • Live preview of all components
  • Export to CodeSandbox/StackBlitz

πŸƒβ€β™‚οΈ Development Workflow

Start development servers

pnpm dev
# Starts all packages in development mode with hot-reload

Build for production

pnpm build
# Creates optimized builds for all packages

Run tests

pnpm test
# Runs unit tests across all packages

Type checking

pnpm check
# TypeScript type checking for all packages

Linting

pnpm lint
# ESLint across all packages

🧩 Usage Examples

Quick Form Setup

import { Formity } from 'formity';

const form = new Formity('#my-form', {
  fields: [
    { type: 'short-text', id: 'name', label: 'Full Name' },
    { type: 'email', id: 'email', label: 'Email Address' },
    { type: 'select', id: 'role', label: 'Role', options: ['User', 'Admin'] }
  ],
  onSubmit: (data) => console.log('Form submitted:', data)
});

form.render();

Integration Engine

import { IntegrationEngine } from '@integration-engine/core';

const engine = new IntegrationEngine();

// Load Google Fonts
engine.use('google-fonts').init('Inter', [400, 500, 700]);

// Initialize Editor.js
const editor = await engine.use('codex-editor').init({
  holder: 'editor-container',
  placeholder: 'Start writing...'
});

Ahead Editor

import { Ahead } from 'ahead-editor';

// Simple setup
const editor = Ahead.init('editor');

// With custom tools
const editor = Ahead.init('editor', {
  customTool: { class: MyCustomTool }
});

// Save content
const content = await Ahead.save(editor);

πŸ”§ Configuration

All packages are pre-configured with sensible defaults, but can be customized:

  • TypeScript – Strict mode enabled
  • ESLint – Recommended rules
  • Vite – Fast development and building
  • Turbo – Optimized monorepo builds
  • pnpm – Efficient package management

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Run tests: pnpm test
  5. Build: pnpm build
  6. Submit a pull request

πŸ“„ License

MIT License - see LICENSE file for details

πŸ†˜ Support

  • πŸ“– Check the documentation in each package's README
  • πŸ› Report issues on GitHub
  • πŸ’¬ Ask questions in discussions


πŸ›£οΈ Roadmap

πŸ€– AI Assisted Form Builder (via Integration Engine) [Highest Priority]

Formity Zero features an AI Assisted Form Builder powered by the Integration Engine. This engine is the backbone for all integrations, including current and upcoming roadmap features. Every integrationβ€”whether serverless, CRM, storage, or paymentsβ€”is managed through the Integration Engine, ensuring a unified, extensible, and maintainable architecture.

  • LLM-driven form generation from plain language prompts
  • AI validation rules that adapt to user answers
  • Auto-mapping form fields to CRM columns
Task Status
AI Form Generator 🚧 LLM prompt β†’ JSON schema
AI Validation Engine 🚧 Auto-adaptive rules
Supabase Auth 🚧 User sign-up flows
HubSpot OAuth 🚧 Token storage & sync
Google Drive Upload 🚧 OAuth + list/delete files
Stripe Checkout Field 🚧 Payment confirmation webhook

Tasks

  • Google AI API Integration [High Priority]
    • Integrate Google AI API with the Integration Engine for LLM-driven form generation
    • Enable prompt-to-JSON schema conversion and adaptive validation using Google AI
  • LLM-driven Form Generation [High Priority]
    • Build UI for plain language form creation using [ahead-shadcn]
  • AI Validation Rules [High Priority]
    • Create adaptive validation logic that responds to user answers
    • Integrate validation feedback into the form UI using [ahead-shadcn]
  • Auto-mapping to CRM Columns [High Priority]
    • Map generated form fields to CRM columns automatically
    • Allow user override and review of mappings using [ahead-shadcn]
  • OpenAI Integration [Medium Priority]
    • Integrate OpenAI (GPT-4/3.5) for form generation and validation
    • Add fallback and multi-provider support in the Integration Engine
  • Kimi 2, DeepSeek, Claude, Grok Integrations [Medium Priority]
    • Add Kimi 2, DeepSeek, Claude, and Grok as selectable LLM providers in the Integration Engine
    • Standardize LLM API schema for easy extension and provider switching

1. Serverless Integration Handling (Supabase) [High Priority]

  • Database Integration for Form Builder [High Priority]
    • Implement Supabase client and connection config in the integration engine
    • Enable saving form definitions and user submissions to Supabase tables
  • Authentication [High Priority]
    • Add Supabase Auth for end-user sign-up/sign-in flows (with SSO support)
    • Connect form access and submission to authenticated user sessions using [ahead-shadcn] UI

2. CRM Integrations (HubSpot, Zoho, Next CRM, others) [High Priority]

  • HubSpot Integration [High Priority]
    • Add OAuth2/SSO flow and token storage for HubSpot
    • Map form fields to HubSpot contact properties and push submissions
  • Zoho/Next CRM Integration [Medium Priority]
    • Implement Zoho/Next CRM API connectors with SSO
    • Enable mapping and syncing of form data to CRM leads/contacts using [ahead-shadcn] UI

3. Google Drive, OneDrive, Dropbox Integrations (File Uploads) [Medium Priority]

  • Google Drive Integration [High Priority]
    • Add OAuth2/SSO and file upload endpoint for Google Drive
    • Allow users to select/upload files directly to their Drive from the form using [ahead-shadcn]
  • OneDrive/Dropbox Integration [Medium Priority]
    • Implement OneDrive/Dropbox file upload endpoints with SSO
    • Support file management (list, delete, download) from the form UI using [ahead-shadcn]

4. Payments Integration (Stripe, others) [Medium Priority]

  • Stripe Integration [High Priority]
    • Add Stripe Checkout/Elements to the form builder as a payment field using [ahead-shadcn]
    • Handle payment confirmation and webhook for form submission
  • Other Payment Providers [Medium Priority]
    • Add support for additional providers (e.g., PayPal, Square, Amazon Payment Services, 2Checkout/Verifone, Geidea, Fawry, Mada, takepayments, Worldpay, Revolut) with SSO where available
    • Standardize payment integration schema for easy extension

5. Calendar Integrations (Google Calendar, Microsoft Calendar) [Low Priority]

  • Google Calendar Integration [High Priority]
    • Integrate Google Calendar API via the Integration Engine for booking forms
    • Build booking form UI using [ahead-shadcn] and support SSO for end users
  • Microsoft Calendar Integration [Medium Priority]
    • Integrate Microsoft Calendar API for event creation and management
    • Enable two-way sync and booking management using [ahead-shadcn] UI

🏁 How to Get Involved

  • Fork the repo and pick a subtask above (start with an easy one if you're new!)
  • Open an issue to discuss your approach or ask for guidance
  • Submit a PR with your changes and reference the subtask
  • Join the discussion: Suggest new features, integrations, or improvements

We prioritize easy subtasks for new contributors, but all help is welcome!

Ready to build something amazing? Run node bootstrap.js and you'll be up and running in under 30 seconds! πŸš€

About

Formity Zero is a versatile form-building suite with 28 customizable fields, flows, & validations via the Formity.js library. Its Integration Engine handles APIs. Ahead-Editor uses Codex Editor.js for rich text, while Ahead-Shadcn/ui offers modern UI components. Developer tools in CLI and GUI streamline workflows for technical & non-tech users.

Resources

License

Stars

Watchers

Forks

Packages

No packages published