form-dirty

form-dirty is a TypeScript library designed to detect unsaved changes in web forms. It addresses the common need for tracking whether a form's current state differs from its original baseline, helping prevent accidental data loss by notifying users of unsaved modifications. The tool is framework-agnostic and can be integrated with both native HTML forms and controlled form states used in libraries such as React, Vue, and Svelte.

The primary features include a single boolean property, isDirty, which instantly reflects whether any field has changed, eliminating the need for manual comparison or deep equality checks. It also provides a changedFields array detailing each field that differs from the original state, including the field's name, its original value, and its current value. Developers can use the snapshot() method to reset the baseline after a successful save, marking the form as clean again. The library offers a beforeunload guard option, which, when enabled, prevents users from navigating away from the page if the form is dirty, reducing the risk of accidental data loss. Additional methods include update() for pushing new field values in controlled mode, guard() for toggling the beforeunload protection, and destroy() for cleanup.

0kB gzipped) and easy to drop into any project without requiring a specific form library or additional dependencies. Installation is supported via npm, yarn, pnpm, or direct import from a CDN. The library is suitable for developers building web applications who need reliable, minimal overhead detection of unsaved form changes across a variety of frontend frameworks or with plain HTML forms.

The tool is distributed under the MIT License, allowing for broad use and integration in both open-source and commercial projects. Its design emphasizes simplicity, framework independence, and straightforward integration with server-side rendering environments.