@sigamix/form-editor

Visual form builder — 3-panel editor with drag & drop. Create and edit forms defined by @sigamix/form-core schemas.

Installation

npm install @sigamix/form-editor @sigamix/form-renderer @sigamix/form-core

Usage

import { FormEditor } from '@sigamix/form-editor'

<FormEditor
  theme={myTheme}
  dataSources={myConnectors}
  adapter={{
    loadForm: (id) => api.getForm(id),
    saveForm: (form) => api.saveForm(form),
    loadFormTypes: () => api.getFormTypes(),
    saveFormType: (type) => api.saveFormType(type),
  }}
  onChange={(schema) => console.log('Form updated', schema)}
  onSave={() => console.log('Saved')}
/>

IEditorAdapter

The editor makes no direct API calls. All persistence goes through the adapter:

interface IEditorAdapter {
  loadForm?: (id: string) => Promise<IFormDefinition>
  saveForm?: (form: IFormDefinition) => Promise<void>
  loadFormTypes?: () => Promise<IFormType[]>
  saveFormType?: (type: IFormType) => Promise<void>
}

Pass adapter to FormEditor — the host app controls all backend communication.

Features

| Feature | Description | |---------|-------------| | 3-panel layout | Toolbox (left) / Canvas (center) / Properties (right) | | Drag & drop | Drag fields from toolbox to canvas pages (dnd-kit) | | Undo / Redo | 50-step history with action descriptions | | ConditionBuilder | Visual AND/OR condition constructor with 15 operators | | DataSourceSelector | Select connector + map dependency keys to variables | | Live preview | Switch to Preview mode to test with FormRenderer | | JSON view | Inspect raw form schema in the editor | | Export / Import | JSON export with schema version envelope | | Zustand store | Full CRUD: pages, rosters, variables, selection, view |

ConditionBuilder

Build conditions visually — no expression syntax required:

• Choose action: Show, Hide, Validate, Require, Read-only, Set Value
• Add rules: Variable → Operator → Value
• Combine with AND / OR logic
• Expression preview auto-generated
• Error message field for validation rules
• Target variable + value for setValue actions

DataSourceSelector

Connect select/multiselect/radio fields to registered data sources:

• Dropdown of available IDataSourceConnector instances
• Add dependency keys (e.g. parentId, departementId)
• Map each key to a form variable
• Cascading updates handled automatically by the renderer

Theme

Uses the same ISigamixTheme system as @sigamix/form-renderer:

<FormEditor theme={cepiciTheme} dataSources={connectors} adapter={adapter} />

License

Copyright (c) 2026 AFINOV SARL — All rights reserved. Commercial license required. Contact: [email protected]