FormLayer

Type-safe progressive enhancement for server-rendered HTML forms. No React, no Vue — just native <form> elements enhanced with TypeScript.

Zero third-party runtime dependencies. Optional plugins (combobox, client-variants, datepicker, altcha) are separate npm packages.

Documentation: kimamov.github.io/FormLayer

Install

npm install formlayer

Optional plugins:

npm install formlayer-plugin-combobox       # Accessible combobox for <select>
npm install formlayer-plugin-client-variants # Conditional field visibility
npm install formlayer-plugin-datepicker   # Air Datepicker
npm install formlayer-plugin-altcha       # ALTCHA captcha

Quick start

<form id="contact">
  <div data-form-field="email" data-validate='[{"type":"NotEmpty"},{"type":"EmailAddress"}]'>
    <label for="email">Email</label>
    <input id="email" type="email" name="email" />
    <div class="invalid-feedback"></div>
  </div>
  <button type="submit">Send</button>
</form>

import { formRegistry, registerDefaultValidators } from 'formlayer';
import 'formlayer/forms.css';

registerDefaultValidators();

formRegistry.init({
    submitFn: async (ctx) => {
    const response = await fetch(ctx.formEl.action, { method: 'POST', body: ctx.formData });
    ctx.finish('Thank you!');
  }
});

Optional plugins

import { registerComboboxPlugin } from 'formlayer-plugin-combobox';
import { registerClientVariantsPlugin } from 'formlayer-plugin-client-variants';
import { registerDatepickerPlugin } from 'formlayer-plugin-datepicker';
import { registerTypo3AltchaPlugin } from 'formlayer-plugin-altcha/typo3';
import { initTypo3Forms } from 'formlayer/typo3';

registerComboboxPlugin();
registerClientVariantsPlugin();
registerDatepickerPlugin();
registerTypo3AltchaPlugin();
initTypo3Forms();

Package exports (tree-shakeable)

| Import | Use case | |--------|----------| | formlayer | Core API: registry, validators, initField, types | | formlayer/typo3 | TYPO3 EXT:form integration | | formlayer/validators | Direct access to runValidators | | formlayer/forms.css | Default field/error styles |

Related packages

| Package | Description | |---------|-------------| | formlayer-plugin-combobox | data-field-type="combobox" (accessible select) | | formlayer-plugin-client-variants | Conditional field visibility via data-client-variants | | formlayer-plugin-datepicker | data-field-type="datepicker" (Air Datepicker) | | formlayer-plugin-altcha | Generic ALTCHA plugin | | formlayer-plugin-altcha/typo3 | TYPO3 ALTCHA integration |

Development

npm install
npm test
npm run build:all    # core + plugin packages
npm run docs:dev

License

MIT