🚀 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 driveh 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...]

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