Features

📖 Table of Contents

Markup-driven and Intuitive API

  • Create powerful interactive forms with just plain HTML.
  • Just add data-smark attribute to relevant tags and see the magic.
  • Properties be automatically mapped as data-smark-<property_name>-like attributes enabling [data-smark-<property_name>]-like CSS selectors.
  • Intuitive option names.
    • Ex.: <button data-smark='{action: "addItem"}'>

Easy to use

  • Leverage your existing HTML and CSS knowledge to create powerful forms.
  • No need for extensive JavaScript coding.

Advanced capabilities

  • Addressable elements by easy-to-read path-style relative or absolute addresses.
  • Complete separation between View and Controller logic.
  • Context-based actions (no need to hard-wire context and/or target).
  • Dynamic and reactive options loading for dropdowns (comming soon) through the API Interface).
  • Infinite lists (with lazy loading through the API Interface).

Improved UX

  • Configurable context-driven keyboard shortcuts.
  • Automatically enabled/disabled controls (depending on context).
  • Non-breaking unobtrusive flow (controls removed from navigation flow when accessible through hotkeys.

Can hold any data structure expressible in JSON

  • With subforms and arrays.
  • Allow users to add or remove items from arrays.
  • Impose lower and upper limits for arrays lengths.

Flexible and extendable

  • JSON import and export capabilities
  • Local Import and export of any subform instead of the whole one.
  • Develop your own component types to suit your specific needs.
  • Mixin feature to create new component types based on (but not limited to) SmarkForm template.

Lightweight yet highly compatible

  • Bundled both as modern ES Module and UMD for wide compatibility.
  • Only 29KB minified!
  • > 0.25%, browser coverage thanks to Babel
About SmarkForm
About SmarkForm
About SmarkForm
TO-DO List