smarkform/README.md

[](https://www.npmjs.com/package/smarkform)

[![SmarkForm Logo](docs/assets/SmarkForm_logo.png)](https://www.npmjs.com/package/smarkform)

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

[![NPM Version][npm-image]][npm-url]
[![npm dependencies][dependencies-image]][dependencies-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![jsDelivr Hits][cdnhits-image]][cdnhits-url]
[![License][license-image]][license-url]
<!-- Highlighting fix: []() -->

<a href="https://smarkform.bitifet.net">
<img align="right" alt="Reference Manual" src="docs/assets/ReferenceManual.png" />
</a>

> *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...](https://smarkform.bitifet.net/about/introduction)\]


## Main Features

  * `<>` [Markup agnostic](https://smarkform.bitifet.net/about/features#markup-agnostic):
    Maximum decoupling between design and development teams.
  * `🧩` [Low code](https://smarkform.bitifet.net/about/features#easy-to-use-low-code):
    Markup driven. No manual wiring between controls and fields.
  * `🗂` [Subforms](https://smarkform.bitifet.net/about/features#nestable-forms):
    Nested forms to any depth.
  * `📑` [Lists](https://smarkform.bitifet.net/about/features#variable-length-lists):
    Sortable and variable-length lists (arrays) either of scalars or subforms.
  * `🫳` [Configurable hot keys](https://smarkform.bitifet.net/about/features#context-driven-hotkeys):
    Context-driven and discoverable keyboard shortcuts.
  * `🫶` [Consistent UX](https://smarkform.bitifet.net/about/features#consistent-user-experience):
    Smooth navigation and consistent behaviour across all forms.
  * `{}` [JSON format](https://smarkform.bitifet.net/about/features#json-based):
    Data is imported / exported as JSON.
  * `🪶` [Lightweight](https://smarkform.bitifet.net/about/features#lightweight-yet-highly-compatible):
    Only ~38KB minified.
  * `💪` Flexible, extendable and
    [more...](https://smarkform.bitifet.net/about/features ).


## Installation

  * As NPM package: `npm install smarkform`.

  * Alternatively you can get SmarkForm through [several other resources such
    as CDN and
    more...](https://smarkform.bitifet.net/getting_started/getting_smarkform)

## Usage

For detailed usage instructions and API reference check out [📔 SmarkForm
Reference Manual](https://smarkform.bitifet.net).


## Try it yourself!!

  * See our [Live Examples](https://smarkform.bitifet.net/resources/examples).
    - You can download each one and modify as you like.

  * See also interactive code snippets across the [Reference Manual](https://smarkform.bitifet.net).
    - 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](https://smarkform.bitifet.net/community/contributing).


## Documentation

You can find official *SmarkForm* documentation at:

  👉 [https://smarkform.bitifet.net](https://smarkform.bitifet.net)


### Documentation Source:

Documentation source can be found in [/docs](/docs) directory of this
repository.

It uses [Jekyll](https://jekyllrb.com/) and
[just-the-docs](https://just-the-docs.github.io/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](https://jekyllrb.com/docs/installation/)

  * 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](LICENSE)


# Acknowledgements

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


[npm-image]: https://img.shields.io/npm/v/smarkform.svg
[npm-url]: https://npmjs.org/package/smarkform
[dependencies-image]: https://img.shields.io/badge/dependencies-0-green
[dependencies-url]: https://www.npmjs.com/package/smarkform?activeTab=dependencies
[downloads-image]: https://img.shields.io/npm/dm/smarkform.svg
[downloads-url]: https://npmjs.org/package/smarkform
[cdnhits-image]: https://data.jsdelivr.com/v1/package/npm/smarkform/badge?style=rounded
[cdnhits-url]: https://www.jsdelivr.com/package/npm/smarkform
[license-image]: https://img.shields.io/badge/license-MIT-brightgreen.svg
[license-url]: https://opensource.org/licenses/MIT