FormBuilder and FormViewer reference

FormBuilder

Props

Prop	Type	Purpose
builder-id	string	Stable id used for multi-instance isolation.
schema	FormBuilderSchema	Controlled form schema.
values	FormBuilderValues	Controlled runtime values.
settings	Partial<FormBuilderSettings>	Form settings.
readonly	boolean	Disable editing behavior.
disabled	boolean	Disable interactions.
autosave	boolean	Enable local autosave.
storage-key	string	Custom storage key.
title	string	Optional title.
subtitle	string	Optional subtitle.
height	string	Builder height.
preview-mode	FormBuilderPreviewMode	Preview display mode.
drawer-behavior	FormBuilderDrawerBehavior	Defaults to default: measures the actual builder container, auto-fits both drawers and switches to overlay mode when the canvas can no longer remain readable. desktop and mobile remain explicit overrides.
labels	Partial<FormBuilderLabels>	Targeted overrides for legacy toolbar labels.
locale	QFormBuilderLocaleCode	Active UI locale. Built-in values are fr and en.
locales	QFormBuilderLocaleRegistry	Deep overrides or extra locales supplied by the host application.
catalog	QFormBuilderCatalog	Custom elements appended to or used instead of the Community catalog.
catalog-mode	'append' | 'replace'	Merge with or replace the Community catalog.
templates	QFormBuilderTemplateRegistry	Custom templates merged with the Community registry.
template-mode	'append' | 'replace'	Merge custom templates or replace the Community registry.
config-panels	QFormBuilderConfigPanelRegistry	Host-provided property panel registry.
validation-rules	QFormBuilderValidationRuleRegistry	Runtime registry for custom business rules and localized messages.
history-open	boolean	Controls the visible history panel.
history-depth	number	Maximum retained states, clamped between 2 and 500.
history-shortcuts	boolean	Enables guarded undo/redo keyboard shortcuts.
theme	QFormBuilderThemeInput	Controlled shared Builder/Viewer theme.
theme-open	boolean	Controls the Theme Builder panel.

v-model

<FormBuilder
  v-model:schema="schema"
  v-model:values="values"
  v-model:settings="settings"
  v-model:history-open="historyOpen"
  v-model:history-depth="historyDepth"
  v-model:theme="theme"
  v-model:theme-open="themeOpen"
/>

Events

update:schema
update:values
update:settings
save
reset
cancel
submit
field-add
field-update
field-remove
field-copy
field-select
field-move
schema-import
schema-export
document-import
document-export
template-apply
history-change
history-undo
history-redo
history-restore
error

document-import reports the source format, source and target versions, executed migration steps, warnings, and whether values/settings were applied. document-export returns the canonical versioned document.

API exposed by ref

export interface FormBuilderPublicApi {
  save: () => void
  reset: () => void
  setSchema: (schema: FormBuilderSchema) => void
  getSchema: () => FormBuilderSchema
  setValues: (values: FormBuilderValues) => void
  getValues: () => FormBuilderValues
  importSchema: (schema: FormBuilderSchema) => void
  exportSchema: () => FormBuilderSchema
  importDocument: (input: unknown, options?: QFormBuilderDocumentImportOptions) => QFormBuilderMigrationResult | null
  exportDocument: (options?: QFormBuilderDocumentCreateOptions) => QFormBuilderDocument
  getHistory: () => QFormBuilderHistorySnapshot
  undo: () => QFormBuilderHistoryEntry | null
  redo: () => QFormBuilderHistoryEntry | null
  restoreHistoryEntry: (entryId: string) => QFormBuilderHistoryEntry | null
  clearHistory: () => void
  setHistoryDepth: (depth: number) => number
  openHistory: () => void
  closeHistory: () => void
  setTheme: (theme: QFormBuilderThemeInput) => QFormBuilderThemeConfig
  getTheme: () => QFormBuilderThemeConfig
  openTheme: () => void
  closeTheme: () => void
  getTemplates: () => QFormBuilderTemplateRegistry
  applyTemplate: (
    templateKey: string,
    options?: QFormBuilderTemplateApplyOptions,
  ) => QFormBuilderTemplateApplyEvent | null
}

FormViewer

Props

Prop	Type	Purpose
form-fields	FormBuilderSchema	Schema to render.
model-value	FormBuilderValues	Runtime values.
readonly	boolean	Render as read-only.
locale	QFormBuilderLocaleCode	Runtime component locale.
locales	QFormBuilderLocaleRegistry	Deep overrides or extra locales.
validation-rules	QFormBuilderValidationRuleRegistry	Same runtime registry used while building the schema.
theme	QFormBuilderThemeInput	Applies the same design tokens as the builder.

v-model

<FormViewer
  :form-fields="schema"
  v-model="values"
/>

submit event

<FormViewer
  :form-fields="schema"
  v-model="values"
  @submit="handleSubmit"
/>

Useful types for a host app

import type {
  FormBuilderSchema,
  FormBuilderValues,
  QFormBuilderDocument,
  QFormBuilderDocumentImportEvent,
  QFormBuilderMigrationResult,
  FormBuilderSavePayload,
  FormBuilderPublicApi,
  QFormBuilderLocale,
  QFormBuilderLocaleCode,
  QFormBuilderLocaleOverrides,
  QFormBuilderLocaleRegistry,
  QFormBuilderCatalog,
  QFormBuilderCatalogMode,
  QFormBuilderElementDefinition,
  QFormBuilderConfigPanelDefinition,
  QFormBuilderConfigPanelProps,
  QFormBuilderConfigPanelRegistry,
  QFormBuilderValidationRuleDefinition,
  QFormBuilderValidationRuleRegistry,
  QFormBuilderValidationMessages,
  QFormBuilderHistoryAction,
  QFormBuilderHistoryEntry,
  QFormBuilderHistorySnapshot,
  QFormBuilderHistoryChangeEvent,
  QFormBuilderHistoryNavigationEvent,
  QFormBuilderThemeConfig,
  QFormBuilderThemePresetKey,
  QFormBuilderTemplateDefinition,
  QFormBuilderTemplateSettings,
  QFormBuilderTemplateRegistry,
  QFormBuilderTemplateApplyMode,
  QFormBuilderTemplateApplyOptions,
  QFormBuilderTemplateApplyEvent,
  QFormBuilderAccessibilityApi,
  QFormBuilderAccessibilityAnnouncementOptions,
} from '@vevedh/qform-builder-layer/types'

field-move also exposes optional fromTarget and toTarget typed locations for moves across root, steps, sections, columns and tabs.

Editing nested columns

Columns inside q-columns are internal configuration nodes rather than separate public components. Selecting and editing them updates v-model:schema like every other builder change. Their data contract is exposed through QFormBuilderColumnDefinition.

Public import validation

import {
  parseQFormBuilderSchema,
  sanitizeQFormBuilderSchema,
} from '@vevedh/qform-builder-layer/schema-transfer'

The schema-transfer subpath exposes the same size, structure and active-content checks as the builder import UI.

Public validation helpers

import {
  parseQFormBuilderValidation,
  resolveQFormBuilderValidationRegistry,
  validateQFormBuilderRegex,
} from '@vevedh/qform-builder-layer/validation'

See Advanced validation for the registry, regex, and cross-field contract.

Public history helpers

import {
  appendQFormBuilderHistory,
  createQFormBuilderHistoryState,
  formatQFormBuilderHistoryLabel,
  normalizeQFormBuilderHistoryDepth,
  restoreQFormBuilderHistory,
} from '@vevedh/qform-builder-layer/history'

See Visible history and state restoration.

Public template helpers

import {
  applyQFormBuilderTemplate,
  canAppendQFormBuilderTemplate,
  createCommunityTemplates,
  defineQFormTemplate,
  mergeQFormBuilderTemplates,
} from '@vevedh/qform-builder-layer/templates'

See Form templates for replace/append modes, collision renaming and custom registries.

Public theme helpers

import {
  applyQFormBuilderThemePreset,
  createQFormBuilderTheme,
  mergeQFormBuilderTheme,
  normalizeQFormBuilderTheme,
  qFormBuilderThemeToCssVariables,
} from '@vevedh/qform-builder-layer/theme'

See Theme Builder and Quasar color field.

Nested accessibility API

A custom component or panel rendered under FormBuilder can use the auto-imported composable:

const accessibility = useFormBuilderAccessibility()

accessibility.announce('Configuration applied')
await accessibility.focusField('email')

The composable is isolated per instance and provides a no-op fallback outside a builder. See Accessibility, keyboard support and axe auditing.