pdyform-builder provides a complete visual editing experience for generating complex form schemas. It comes with a beautiful three-pane layout (Component Palette, Canvas, Property Inspector), making it effortless to integrate a professional form builder into your application.

✨ Features

• 🎨 Visual Drag & Drop: Powered by @dnd-kit for a smooth, accessible, and robust drag-and-drop experience.
• 📦 Out of the box: Ready-to-use three-pane layout without complex configuration.
• 🔄 Real-time Preview: Instant live preview of the generated FormSchema and UI.
• ⚡ High Performance: State management driven by zustand and immer for optimal React rendering.
• 🛡️ Strict Type Safety: Fully written in TypeScript, ensuring robust integration with pdyform-core.
• 🧩 Framework Agnostic Schema: Generates a standard JSON schema that can be rendered using pdyform-react or any other adapter.

📦 Installation

# Using npm
npm install pdyform-builder pdyform-core pdyform-react

# Using pnpm
pnpm add pdyform-builder pdyform-core pdyform-react

# Using yarn
yarn add pdyform-builder pdyform-core pdyform-react

Note: pdyform-builder requires react and react-dom as peer dependencies.

🚀 Quick Start

Drop the FormBuilder component into your React application to get a complete, working form builder interface instantly.

import React from 'react';
import { FormBuilder } from 'pdyform-builder';

// Optional: Import CSS if the package provides compiled styles
// import 'pdyform-builder/dist/index.css'; 

export default function App() {
  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      <FormBuilder />
    </div>
  );
}

🏗️ Architecture

The builder uses a clean, intuitive layout by default:

1. Left Panel (Palette): A list of available form fields and layout elements (Input, Select, Grids, etc.).
2. Center Panel (Canvas): The interactive drag-and-drop area where users assemble the form.
3. Right Panel (Inspector): Property configuration for the currently selected field (Validation rules, default values, placeholders, etc.).

📖 Related Packages

This package is part of the pdyform ecosystem:

• pdyform-core: The core logic, types, and schema definition.
• pdyform-react: The React renderer that converts schemas into working forms.

📄 License

MIT © Pidan