Skip to content
JavaScript DOM user interface library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
lib
.gitignore
README.md
package-lock.json
package.json
tsconfig-build.json
tsconfig.json
webpack.config.js

README.md

Vanillin (preview)

Vanillin is a JavaScript DOM user interface library.

Try it out at the playground.

Installing

For the latest stable version:

npm install vanillinjs

For dev builds:

npm install vanillinjs@dev

Using Vanillin

  1. With including global library:

    index.html:

    <button onclick="onclick()">Click</button>
    <script src="node_modules/vanillinjs/vanillin.bundle.js"></script> <!-- Or any other bundle location -->
    <script>
      vanillin.bindDOM(document.querySelector("button"), console.log, console.error, {
        onclick() {
          console.log("clicked");
        }
      });
    </script>
  2. With webpack:

    $ npm install webpack webpack-cli

    index.js:

    import { bindDOM } from "vanillinjs/vanillin-0";
    bindDOM(document.querySelector("button"), console.log, console.error, {
      onclick() {
        console.log("clicked");
      }
    });

    or

    import vanillin from "vanillinjs";
    vanillin.bindDOM(document.querySelector("button"), console.log, console.error, {
      onclick() {
        console.log("clicked");
      }
    });

    Build with webpack.config.js:

    const path = require("path");
    
    module.exports = {
      entry: "./index.js",
      output: {
        path: path.resolve(__dirname),
        filename: "bundle.js"
      }
    };

    run:

    $ webpack

    and run index.html page:

    <button onclick="onclick()">Click</button>
    <script src="bundle.js"></script>

Documentation

Available at docs page and on GitHub repository.

Development

For development repository installation use following:

git clone git@github.com:metaes/vanillin.git
cd vanillin
npm install

Contribution

Use GitHub issues or pull requests.

License

MIT.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.