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

SmarkForm is a lightweight library designed for front-end developers and designers to enhance HTML forms with powerful features like subforms and dynamic, variable-length lists, context driven hotkeys and more...

🔧 It seamlessly integrates with the DOM to provide a markup-agnostic solution, freeing your form layout from rigid structure and styling constraints while enabling JSON form data import and export and 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...]

30-second Example

A contact form with a dynamic phone-number list — no manual wiring, just markup:

<!-- HTML -->
<div id="myForm">
  <p><input name="name" data-smark placeholder="Name"></p>
  <ul data-smark='{"name":"phones","of":"input"}'>
    <li><input type="tel" data-smark placeholder="Phone"></li>
  </ul>
  <button data-smark='{"action":"addItem","context":"phones"}'>➕ Add phone</button>
  <button data-smark='{"action":"removeItem","context":"phones"}'>➖ Remove</button>
  <button data-smark='{"action":"export"}'>💾 Export JSON</button>
</div>

// JS — one line to initialize
const myForm = new SmarkForm(document.getElementById("myForm"));

// Listen for the exported data
myForm.on("AfterAction_export", ({ data }) => console.log(data));
// → { name: "Alice", phones: ["555-1234", "555-5678"] }

That's it. No schema, no bindings, no callbacks per field.

👉 See the Showcase for extensive interactive examples.

What SmarkForm Is (and Isn't Yet)

SmarkForm is:

• ✅ A markup-driven form controller: configuration lives in data-smark attributes, not JavaScript objects.
• ✅ Markup-agnostic: it imposes no HTML structure or CSS — you keep full design freedom.
• ✅ A tool for JSON-based import/export of complex, nested form data.
• ✅ Ready for subforms, variable-length lists, context-driven hotkeys, and smooth keyboard navigation.
• ✅ Stable and in active use, but still pre-1.0 (API may evolve).

Not yet implemented (planned for a future release):

• ❌ Built-in validation (field-level error messages).
• ❌ Native <form> tag POST submission — use AfterAction_export + fetch instead.
• ❌ The "API interface" for dynamic dropdown/select options from a server.

⚠️ SmarkForm is currently at version 0.x. The public API is stable for the implemented features, but breaking changes may still occur before 1.0.

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.
• ♿ Accessibility: Focus on UX and accessibility (a11y).
• 🆓 Dependency-free: No external dependencies required.
• 💪 Flexible, extendable and more....

Usage and Documentation

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

• Check our Showcase for a quick overview of what SmarkForm can do.

• The Quick Start Guide provides a fast introduction to get you up and running quickly.

• Don't miss our Live Examples. You can download each one and modify as you like.

• SmarkForm is available as ESM and UMD modules via NPM or GitHub or via CDN. See Getting SmarkForm for more details.

Troubleshooting and FAQ

For troubleshooting tips and frequently asked questions, please visit SmarkForm's Frequently Asked Questions (FAQ)

Community and Support

If you don't find a solution there, feel free to open a discussion on our GitHub repository.

For further support, you can contact me through our Contact Page or reach out via email at smarkform@bitifet.net.

🚀 Stay tuned

News and announcements:

Community Chat:

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.

License

MIT

Keywords

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