LessIO is a autoreload tool for Single Page Apps. It enables xhr-reload on less-css generated stylesheets and dust templates. It triggers a page-reload on browserified client-code
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



npm install -g lessio


Go to your project's main directory, and execute:

lessio --generate


This will generate an example configuration file with the name lessio.json. Edit this file and change the mappings configuration so it reflects your project structure. Each mapping has a name to distinguish between mappings in the lessio log feedback. A mapping's main LESS file(which can import other less files) is specified with a relative path in the mapping' in directive. The out directive is a relative path that the lessCss compiler uses to write the result to. This css file is eventually included in your project's html head.

The href mapping directive is used to recognize the mapping's out CSS in the browser, when a reload is triggered. This can be the full path or a partial href, as long it uniquely identifies this CSS file.


Normally you don't have to change anything here, unless you want to run LessIO's watch service on another port...



When you only need to compile all mappings just once, use the compile option like:

lessio --compile


LessIO's watch service autocompiles LESS to CSS and autoreloads the CSS in the browser. Launch LessIO's watch service in the same directory as the configuration file once you finished configuring it:

lessio --watch


When you save a modified LESS file, specified in one of the mappings, LessIO's watch service will automatically compile/save all LESS mappings to their respective CSS counterparts.


With the watch service running, navigate your browser to localhost:8081. You should see a blank page with a Bookmarklet link. In order to use autoreload on your project's html-page, the browser needs to connect to LessIO's watch service. This is done by injecting some javascript into your project's webpage, using a bookmarklet. A LessCSS bookmarklet(Chrome) can be made like this:

  • Right-click on The Bookmarklet link at localhost:8081
  • Select Copy Link Address
  • Right-click in the bookmarks bar, select Add Page
  • Paste the javascript in the URL field
  • Enter LessIO for the Name field

Now that you have a bookmarklet in the browser's navigation bar, open the URL to your development site(e.g. http://localhost:8123). CLick on the LessIO bookmarklet link in the navigation-bar and start editing your LESS files(as specified in the configation mapping). Once you save a LESS file, it should trigger an autocompile on the out file and an autoreload on the href version in the browser.

Happy styling!

Ps. Don't forget to update the bookmarklet when you change watch service settings!