Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including astatine with all npm packages installed. Try it out:

var astatine = require("astatine")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

astatine v1.2.0

Astatine - A Small Ajax and HTML Form Library


Astatine - A Small Ajax and HTML Form Library. Library entry point. Globally available by using Astatine or At.


  • 3KB uncompressed
  • Install npm install astatine
  • Link astatine.min.js
  • ES5 browsers and up. (Probably older ones but who cares about those)


  • File Upload



Sets up spinner color, thickness, and size. Defaults are listed bellow. Do this before any Astatine or At operations.

Astatine.setup.spinner.size = '3px';
Astatine.setup.spinner.thickness = '15px';
Astatine.setup.spinner.colorTop = 'darkgray';
Astatine.setup.spinner.colorBottom = 'lightgray';


Listens on a form element for submit event to be fired.

Special Features
  • radio will only appear if it is checked.
  • checkbox will either be true or false.
  • type="submit" will automatically hide. And a spinner will show on submit.
  • .spinner will automatically created and make visible a spinner.

The options object accepts all items form the Astatine.ajax method. Please review that section for more detail.

  • action: String Resource action url. Required

  • query: String | Element Query selector or element. Required

  • method: String Valid methods get, post, put, delete. Required

  • reset: Boolean Resets form after submit success. Defaults to true.

  • complete: Function Parameters are the XHR. Required

    • error An xhr object
    • success An xhr object
  • prepare: Function Allows the ability to edit/validate the object before complete/post.

    • data: Object The form data object.
    • resolve: Function Async resolve function requires the data as a parameter.
    • reject: Function Async reject passes its parameter to the complete function as an error.
<form class="form" method="post" action="/post/path">
    <input type="text" name="name" placeholder="Name" required>
    <input type="submit" value="Submit"/>
    query: '.form',
    prepare: function (data, resolve, reject) { = 'bar'; // manipulate data before send

        // return data;

        setTimeout(function () {
            if (true) resolve(data); // async resolve
            else reject({ response: 'rejected' }); // async reject
        }, 1000);

    complete: function (error, success) {
        if (error) console.log(error);
        else console.log(success);


Ajax is a lower level utility function that allows for more control but less features than the submit method.

  • action: String Resource action url. Required

  • method: String Valid methods get, post, put, delete. Required

  • success: Function Required

  • error: Function Required

  • data: Object If method is GET than data is concatenated to the action/url as parameters.

  • requestType: String Converts the request data before sending.

    • script 'text/javascript, application/javascript, application/x-javascript'
    • json 'application/json' stringify
    • xml 'application/xml, text/xml'
    • html 'text/html'
    • text 'text/plain'
    • DEFAULT 'application/x-www-form-urlencoded' serialized
  • responseType: String Converts the response data after sending.

    • script 'text/javascript, application/javascript, application/x-javascript'
    • json 'application/json'
    • xml 'application/xml, text/xml'
    • html 'text/html'
    • text 'text/plain'
  • contentType: String Short hand to set the Content-Type Headers. (For request)

  • accept: String Short hand to set the Accept Headers. (For response)

  • mimeType: String Overwrites return type.

  • username: String

  • password: String

  • withCredentials: Boolean

  • headers: Object A low level headers object it will map directly to the XHR header. The Will overwrite any above options.

    method: 'get',
    action: '/examples/index.html',
    data: { name: 'stuff' },
    success: function (xhr) {
    error: function (xhr) {


  • Object DOM element
var objectData = Astatine.formData(element);


  • Object Single level deep key value pare
var stringData = Astatine.serialize(data);


Licensed Under MPL 2.0 Copyright 2016 Alexander Elias

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free