Serialize a form into various formats

[ This description is mirrored from at on 2019-05-10 ]

Published on


<xtal-formation> declaratively creates objects or http request parameters based on the HTML Form element.

<xtal-formation> is somewhat inspired by Polymer's <iron-form> component. The major differences are:

  • <xtal-formation> has no legacy Polymer dependencies
  • <xtal-formation> does not have any logic to actually submit the form. Instead, its focus is squarely on providing to other components the form input elements in various formats that might be most useful, and applying the validation logic built into the form element / input elements.

Referencing <xtal-formation>

You can reference the component the Polymer < 3 way:

<link rel="import" href="../xtal-formation.html">

But if you don't want to be tied to using HTML Imports, you can instead provide your own reference to Polymer.Element independently, from wherever you choose, and just reference the javascript file directly:

<script async src="../xtal-formation.js"></script>

Or you can use ES6 modules:

<script type="module" src="../xtal-formation.js"></script>

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.


Link to this version
ImportedReleased 24 September 2017Other
Framework Support
Polymer 2.0+
Browser Independent
Install with
Release notes - Version 0.0.1



  • bahrus/xtal-json-editor#^0.0.6