open-index/open-npm huggingface dataset:
npm package: @parama-dev/form-builder-core
Description: Core functionality for the form builder system
Latest version: 0.5.1

# @parama-dev/form-builder-core

Core functionality for the form builder system.

## Installation

```bash
npm install @parama-dev/form-builder-core @parama-dev/form-builder-types
```

## Usage

```typescript
import { FormEngine } from '@parama-dev/form-builder-core';

const engine = new FormEngine(schema);
```

## Features

- Form validation engine
- Schema processing
- Workflow management
- Store management with Zustand
npm package: @parama-dev/form-builder-editor
Description: Visual form builder editor with drag-and-drop interface
Latest version: 0.6.51

# @parama-dev/form-builder-editor

A visual form builder editor with drag-and-drop interface for creating forms.

## Installation

```bash
npm install @parama-dev/form-builder-editor @parama-dev/form-builder-core @parama-dev/form-builder-types @parama-dev/form-builder-renderer @parama-ui/react react react-dom
```

## Usage

### Basic Usage

```tsx
import { FormEditor } from '@parama-dev/form-builder-editor';
// Import the required styles
import '@parama-dev/form-builder-editor/styles';

function App() {
  const handleSave = (schema) => {
    console.log('Form schema:', schema);
  };

  return <FormEditor schema={yourSchema} onSaveSchema={handleSave} />;
}
```

### Alternative CSS Import

If you prefer to import CSS from your bundler configuration or CSS file:

```css
/* In your main CSS file */
@import '@parama-dev/form-builder-editor/dist/styles.css';
```

Or in your bundler (webpack, vite, etc.):

```js
// In your main.js or app.js
import '@parama-dev/form-builder-editor/dist/styles.css';
```

### CSS Integration

For detailed CSS integration options, see [CSS_INTEGRATION.md](./CSS_INTEGRATION.md).

## Features

- Visual drag-and-drop form builder
- Monaco Editor for advanced schema editing
- Real-time form preview
- Component toolbox with search
- Property panel for field customization
- Validation rules editor
- Conditional logic support

## Components

### FormEditor

Main editor component with full drag-and-drop functionality.

### Editor

Core editor without the wrapper UI.

### EditorProvider

Context provider for editor state management.

### Preview

Form preview component.

### Toolbar

Editor toolbar with actions.

## Requirements

- React 18+
- TailwindCSS for styling
- All peer dependencies must be installed
npm package: @parama-dev/form-builder-renderer
Description: React components for rendering forms from the form builder
Latest version: 0.6.51

# @parama-dev/form-builder-renderer

React components for rendering forms from the form builder.

## Installation

```bash
npm install @parama-dev/form-builder-renderer @parama-dev/form-builder-core @parama-dev/form-builder-types @parama-ui/react react react-dom
```

## Usage

```tsx
import { FormRenderer } from '@parama-dev/form-builder-renderer';
import '@parama-ui/react/styles';

function App() {
  return <FormRenderer schema={yourSchema} onSubmit={(data) => console.log(data)} />;
}
```

## Features

- Complete form rendering from schema
- Built-in validation
- File upload support
- Custom field components
npm package: @parama-dev/form-builder-types
Description: Type definitions for the form builder system
Latest version: 0.3.3

# @parama-dev/form-builder-types

Type definitions for the form builder system.

## Installation

```bash
npm install @parama-dev/form-builder-types
```

## Usage

```typescript
import { FormSchema, FieldType } from '@parama-dev/form-builder-types';

const schema: FormSchema = {
  // your schema
};
```

## Features

- Complete TypeScript definitions for form schemas
- Validation types and interfaces
- Field type definitions
- Form configuration types