Nondigestible Purple Mayonnaise

    TypeScript icon, indicating that this package has built-in type declarations

    1.2.13 • Public • Published

    GitHub license npm version contributions welcome HitCount

    Spainter. Web browSer painter


    Integrating into you server:

    • If you use bundler like webpack:
    npm i spainter lines-logger
    import Painter from 'spainter';
    import 'spainter/index.sass'; // you can import index.css if you don't have sass, ensure that you copy the fonts from the directory as well to production. Set `$FontelloPath: "../node_modules/spainter/font"`
    import {LoggerFactory} from 'lines-logger'; // yarn install lines-logger
    const containerPainter = document.createElement('div');
    const p = new Painter(containerPainter, {logger: new LoggerFactory().getLogger('spainter')});

    If you use fontello in your server, you can generate single font importing no-fonts.sass, joining it with config.json

    • If you use server rendering and cdn:
    <script src=""></script>
    <link rel="stylesheet" type="text/css" href=""/>
    <div id="containerPainter"></div>
    var p = new Painter(containerPainter);

    Target the latest version instead of 1.2.10 npm version

    • You can find an example on pychat

    • Additional parameters

    new Painter(containerPainer, {
      textClass: 'input-txt-class', // set class for all input[type=text] elements
      buttonClass: 'input-button-class', // set class for all input[type=button] elements
      rangeClass: 'input-range-class', // set class for all input[type=range]elements
      rangeFactory: (parentElement) => { // use this div for input[range], e.g. you can use material-design
        var input = document.createElement('input');
        input.type = 'range';
        // you can also do parentElement.
        return input;
      onBlobPaste: function(blob) { // example of uploading image to server
        var formData = new FormData();
        formData.append('file', blob, 'specifyFileNameHereIfNeeded.png');
        fetch(`${host}/upload_file`, {
          method: "POST",
          body: formData,
        }).then(e => {
          console.log('server response', e);
      logger: { // better use lines-logger instead this constructions. If you don't wanna install it, use this ugly construction below
        debug: function log() {
          var args =;
          var parts = args.shift().split('{}');
          var params = [window.console, '%c' + 'painter', 'red'];
          for (var i = 0; i < parts.length; i++) {
            if (typeof args[i] !== 'undefined') {
          return Function.prototype.bind.apply(console.log, params);


    Spainter uses flexbox if you need to support browsers like IE 9 and below, you're free to create a pull request to remove flexbox.


    To build spainter you need

    • yarn run build
    • Open index.html in browser To modify icons use bash it will show you help.

    I also intentionally leaved styles empty so you can easily override them according to your website design. If you want to prettify it a bit, you're wellcome to create a separate .css file with styles.



    npm i spainter

    DownloadsWeekly Downloads






    Unpacked Size

    132 kB

    Total Files


    Last publish


    • deathangel908