Skip to main content

Example Apps

This folder contains small demo apps that exercise features of the formitiva library. The apps are intended to:

  • show common integration points (custom submit handlers, form-level validation)
  • demonstrate theming/custom CSS variable overrides
  • exercise conditional visibility, grouping, and localization
  • act as runnable examples during development (they import the local formitiva source)

Each app is a minimal React app located at <vite/<app-name>. Next.js examples are almost same as vite examples, only few differences. There is one example in Next.js to show the difference and others use the same logic and you can reuse the code in correspodent vite examples.

The file is located at REAMDME.md The examples are located at Github Examples

Examples Index​

🎮 Demo Applications​

The example/<vite> directory contains working examples demonstrating various Formitiva features:

instance-app​

Demonstrates instance management - create, load, edit, and save multiple form instances. Shows how to:

  • Create new instances from definitions

  • Load instances from JSON

  • Edit instance values and names

  • Handle form submission with instance updates

    Vite Example

group-app​

Shows how to organize form fields into logical groups (e.g., "Personal Information", "Contact Details"). Demonstrates:

  • Field grouping for better UX

  • Collapsible sections

  • Visual organization of complex forms

    Vite Example

parents-app​

Showcases conditional field visibility based on parent field values. Features:

  • Parent-child field relationships

  • Dynamic show/hide logic

  • Cascading dropdowns

  • Multi-level conditional rendering

    Vite Example

custom-validation-app​

Demonstrates custom validation patterns. Shows how to:

  • Register custom validators

  • Implement field-specific validation logic

  • Display custom error messages

  • Handle async validation

    Vite Example

translation-app​

Multi-language form support with custom translations. Demonstrates:

  • Language switching

  • Custom translation files

  • Localized field labels and messages

  • RTL support preparation

    Vite Example

submit-handler-app​

Custom form submission handling. Shows how to:

  • Register submission handlers

  • Process form data

  • Handle validation errors

  • Display success/error messages

    Vite Example

custom-styles-app​

Advanced CSS customization and theming. Demonstrates:

  • Custom CSS variable overrides

  • Component-level styling

  • Brand-specific themes

  • Responsive design patterns

    Vite Example

button-example-app​

Button and its related callback handler definition. Demonstrates:

  • Button defined in definition

  • Callback handler

    Vite Example

plugin-app​

This example demonstrates how to centralize a custom plugin system that handles components, validation, and form submission. It covers:

  • Defining a custom component

  • Creating a custom validation handler

  • Implementing a custom form validation handler

  • Setting up a submission handler

  • Registering all the above logic within a single plugin

    Vite Example

Install​

  npm install
  npm install @formitiva/react

Run and build​

  • Run a single app in dev mode (hot reload):
  npm run dev

Build a single app for production:​

  npm run build

Registering custom handlers (examples in apps)​

  • Form submission handler (register and reference):
  1. Define and register a handler with registerSubmissionHandler(name, fn) (usually inside a useEffect).
  2. Set submitHandlerName on your definition to the registered name.

Form-level validation handler (cross-field validation):​

  1. Register with registerFormValidationHandler(name, fn).
  2. Set validationHandlerName on your definition.

Example (conceptual):

registerFormValidationHandler('myFormValidator', (valuesMap, t) => {
  const errors: string[] = [];
  if (Number(valuesMap.a) >= Number(valuesMap.b)) {
    errors.push(t('Field A must be less than Field B'));
  }
  return errors.length ? errors : undefined;
});

// definition.validationHandlerName = 'myFormValidator'

The apps include minimal implementations you can copy into your project.

Styling and theme customization​

  • formitiva uses CSS custom properties (variables) for theming (see reracta/formitiva.css).
  • To override the default look, create a class that redefines the variables and apply that class to the same container as the formitiva root element (or a parent). Example in custom-styles-app:
.custom-formitiva {
  --formitiva-primary-bg: #0f1724;
  --formitiva-text-color: #f8fafc;
  --formitiva-button-bg: #2563eb;
}

Then apply both classes to the container:

<div className="formitiva custom-formitiva">
  <Formitiva definitionData={definition} />
</div>

This approach keeps the library styles intact while allowing app-level theming.