🚀 Powerful while effortless Markup-driven and Extendable form controller.

SmarkForm is a lightweight form library designed for front-end developers to enhance HTML forms with powerful features like subforms and dynamic, variable-length lists. As a form controller, it seamlessly integrates with the DOM to provide a CSS-agnostic solution, freeing your form layout from rigid styling constraints. This no-dependencies vanilla JavaScript library enables JSON form data import and export, ensuring compatibility with modern workflows. With a focus on accessibility (a11y), SmarkForm offers configurable hotkeys, smooth navigation, and a low-code experience, making it an extendable and versatile tool for building HTML form applications. [More...]

Main Features

• <> Markup agnostic: Maximum decoupling between design and development teams.
• 🧩 Low code: Markup driven. No manual wiring between controls and fields.
• 🗂 Subforms: Nested forms to any depth.
• 📑 Lists: Sortable and variable-length lists (arrays) either of scalars or subforms.
• 🫳 Configurable hot keys: Context-driven and discoverable keyboard shortcuts.
• 🫶 Consistent UX: Smooth navigation and consistent behaviour across all forms.
• {} JSON format: Data is imported / exported as JSON.
• 🪶 Lightweight: Only ~38KB minified.
• 💪 Flexible, extendable and more....

Installation

• As NPM package: npm install smarkform.

• Alternatively you can get SmarkForm through several other resources such as CDN and more...

Usage

For detailed usage instructions and API reference check out 📔 SmarkForm Reference Manual.

Try it yourself!!

• See our Live Examples.

  • You can download each one and modify as you like.

• See also interactive code snippets across the Reference Manual.

  • They show relevant HTML, JS (and sometimes CSS).
  • Try them out in the Preview tab.
  • Don't miss the Notes tabs for relevant insights.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.

Before contributing, make sure to read our contribution guidelines.

Documentation

You can find official SmarkForm documentation at:

👉 https://smarkform.bitifet.net

Documentation Source:

Documentation source can be found in /docs directory of this repository.

It uses Jekyll and just-the-docs Jekyll layout and it is automatically deployed by GitHub infrastructure anytime new revision is pushed..

Documentation Building:

To build SmarkForm documentation localloy you first need to install follow this instructions:

• Install Jekyll prerequisites

• Execute gem install jekyll bundler.

• Run npm run doc.

Then you will be able to see the documentation at http://localhost:4000 or http://<your-ip>:4000.

Keywords

front-end – form – form-controller – form-library – json-form – lightweight – vanilla – css-agnostic – DOM – html-form – no-dependencies – a11y

License

MIT

Acknowledgements

We would like to express our gratitude to the open source community for their valuable contributions and feedback.