Skip to content

jQuery library to connect html forms with json. This allows filling of html forms automatically with json data and retrieving changes. Even for collections and deeper objects.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.


jQuery based form library that allows you to handle data within a javascript object (like from a JSON request) with plain html forms.

This is a library allowing a binding between html and a javascript object as described in MVVM similar to other libraries like knockout.js or AngularJs. JsForm only takes care of the rendering of data in a html. The controller can be written in standard jQuery. This keeps the library clean and simple.

The main features of this library are:

  • Use html markup to fill your forms/page with almost any js object dynamically
  • Update an existing js object with changes done within a form (=manipulate data without extra code)
  • Provide basic functions for formatting (i.e. date/time, money, byte) using html markup
  • Provide form validation functionality
  • handle collections (arrays) with subobjects
  • handle binaries (blobs) within json by converting them to data url
  • provides helper methods to handle array manipulation (add new entry/remove an entry) using only html markup
  • Can be used in connection with an autocomplete function to add new array objects
  • Compatible with bootstrap, jQuery UI and jQuery Mobile and other frameworks by working directly on the DOM
  • addon library for form controls and layouting (comes bundled in the minified version), internationalisation
  • unit tested using QUnit
  • jslint clean
  • Minified+Gzipped: 7kb

You can also check out some Demos.



  • jQuery 1.9 or higher
  • luxon Luxon for Date/Time Formatting


Optional Libraries are used with jquery.jsForm.controls.js to allow various input methods:

  • jQuery Format Plugin 1.2 or higher- used when working with date/number formats
  • clockpicker used to display a clock input using input class="time"
  • flatpickr date and dateTime control (class="date" or class="dateTime")
  • datetimepicker alternative datetime picker (class="date" or class="dateTime")
  • Moment.js allows for finer grained international date support (deprecated) -> use luxon


Current Version: 1.5.4


bower install jquery-jsform --save


can be found in the github wiki:

Custom UI Controls

Additionally to the base form, I created some custom controls. There might be much more powerful versions out there, but the aim here is to have simple to use controls that are compatible with the json-approach of jsForm and also compatible to jquery-ui.


<script src=""></script>
<script src=""></script>
	// some json data
	var jsonData = {
		name: "TestName",	// standard inputs
		description: "long Description\nMultiline",	// textarea
		links: [{href:'',description:''},{href:'',description:'GitHub'}],	// lists
		active: true,	// checkbox
		type: "COOL", // radio (enums)
		state: "VISIBLE",	// selects (enums)

	// initialize the form, prefix is optional and defaults to data

	$("#show").click(function() {
		// show the json data
		alert(JSON.stringify($("#details").jsForm("get"), null, " "));
<h1>Simpel Form Test</h1>
<div id="details">
	Name: <input name=""/><br/>
	<input type="checkbox" name=""/> active<br/>
	<textarea name="data.description"></textarea><br/>
	<select name="data.state">
		<option value="VISIBLE">visible</option>
		<option value="IMPORTANT">important</option>
		<option value="HIDDEN">hidden</option>		
	<input type="radio" name="data.type" value="COOL"/> Cool<br/>
	<input type="radio" name="data.type" value="HOT"/> Hot<br/>
	<input type="radio" name="data.type" value="WARM"/> Warm<br/>
		<ul class="collection" data-field="data.links">
			<li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
	<button class="add" data-field="data.links">add a link</button><br/>
	Additional field: <input name="data.addedField"/>
<button id="show">Show Object</button>

Also check out the other samples:

view life demos


jQuery library to connect html forms with json. This allows filling of html forms automatically with json data and retrieving changes. Even for collections and deeper objects.






No packages published