SmarkForm

SmarkForm Hero Image
🔗 Live Examples

Powerful while effortless Markup-driven and Extendable forms.

NPM Version npm dependents NPM Downloads License

SmarkForm is a powerful library for creating markup-driven and extendable forms in web applications.

SmarkForm empowers designers to enhance their form templates with advanced capabilities, such as dynamic list manipulation and context-based interactions, with no need to deal with complex JavaScript code. [More…]

Check out our 🔗 Complete Examples to see what SmarkForm is capable of in a glance!!

Features

  • Markup-driven and Intuitive API.
  • Easy to use.
  • Advanced capabilities.
  • Can hold any data structure expressible in JSON.
  • Flexible and extendable.
  • Lightweight yet highly compatible.
  • More…

Sample Code: 

<ul data-smark='{
    type: "list",
    name: "phones",
    of: "input",
    maxItems: 3,
}'>
  <li>
    <input placeholder='Phone Number' type="tel" data-smark>
    <button data-smark='{"action":"removeItem"}'>❌</button>
  </li>
</ul>
<button data-smark='{"action":"addItem","for":"phones"}'>➕</button>

Current Status

SmarkForm implementation is stable and fully functional, but not all initially planned requirements are yet implemented. Hence, it’s not yet in the 1.0.0 version. [🔗 More…]

Where to Go Next?

To get started with SmarkForm you can:

👉 Follow our 🔗 Quick Start Guide to rapidly dive in.
👉 Check out our 🔗 Downloadable Examples to see them in action and/or start tinkering.
👉 …or just try and modify any of the 🔗 Available CodePen Examples.

License

🔗 MIT

Contributing

We welcome any feedback, suggestions, or improvements as we continue to enhance and expand the functionality of SmarkForm.