State-aware client-side form manager for static HTML forms. Tracks per-field state (new, unchanged, changed, invalid, empty) and toggles toolbar actions accordingly

@hradigital/smartforms

State-aware client-side form manager for static HTML forms. It layers reactive behaviour onto the HTML a server-rendered app already produces, driven entirely by attributes - mark a <form> with the smartform class and it takes over. Fields, toolbar buttons and HTTP actions then follow the form's state, with no React or Vue and no rewrite of the markup the server already sends.

• Per-field state - tracks new, unchanged, changed, invalid and empty, applying a matching CSS class for styling.
• Two layouts - a list of records (smartformlist) or a single record (smartformrecord).
• Toolbar wiring - enables and disables create, update, delete and cancel buttons from the form's overall state.
• HTTP Tasks - binds a toolbar action to a verb and endpoint, declared in markup.
• formStateChange events - a CustomEvent per state transition, for anything the library does not cover.
• No framework, no build step - ESM, CJS and a UMD build loadable straight from a <script> tag.

Installation

npm install @hradigital/smartforms
# or
yarn add @hradigital/smartforms
# or
pnpm add @hradigital/smartforms

Or load the UMD build directly in the browser:

<script src="https://unpkg.com/@hradigital/smartforms/dist/smartforms.umd.js"></script>
<script>
    SmartForms.autoInit();
</script>