Created: 2016-12-27 13:40
Updated: 2019-01-15 06:40
License: mit

Substance Forms

Substance Forms is a JavaScript library for creating better web forms. You can mark areas of the page as editable and access the contents with a simple JavaScript API. You have full control over markup and styling, and you can mix the rich text inputs with classic form elements.

See the demos.

Project Status: Beta


Download the latest release and use like shown below.

  <script type="text/javascript" src="substance-forms.js"></script>
    /* FontAwesome is used to display the icons shown in the overlay */
    @import 'lib/font-awesome/css/font-awesome.min.css';
    /* Substance Forms looks best with a CSS reset */
    @import 'substance/substance-reset.css';
    /* Substance Forms UI styles */
    @import 'substance-forms.css';
  var form
  window.addEventListener('load', function() {
    forms = new SubstanceForms()
    /* Activate rich text editing */
    forms.addRichTextArea('about', document.getElementById('about'), {
      enabledPackages: ['heading', 'strong', 'emphasis', 'link', 'list', 'table']
  function _onSubmit() {
    let forms = window.substanceForms
    let formData = {
      about: forms.getHTML('about')
    console.log('Form data', formData)
  <!-- The editable attribute marks editable areas -->
  <div id="about">
    <p>Tell us <strong>something</strong> about <em>you</em>.</p>
  <button onclick="_onSubmit()">Submit</button>

For a complete usage example see here. Learn advanced usage by inspecting the comments example.


If you want to contribute, you can set up a development environment like so:

$ git clone
$ npm install
$ npm start

For faster builds you can run:

$ npm run dev

But then you need a browser that can run ES6 code natively.


This project is developed by Substance in collaboration with the University of California Curation Center.

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more