{"id":13907283,"url":"https://github.com/One-com/livestyle","last_synced_at":"2025-07-18T05:31:08.212Z","repository":{"id":2115717,"uuid":"3057856","full_name":"One-com/livestyle","owner":"One-com","description":"NodeJS middleware and binary for setting up a webserver that notifies the browser of CSS updates.","archived":false,"fork":false,"pushed_at":"2018-02-13T20:13:20.000Z","size":397,"stargazers_count":75,"open_issues_count":11,"forks_count":14,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-07-06T07:08:01.696Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/One-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-12-27T17:29:00.000Z","updated_at":"2022-10-21T08:23:36.000Z","dependencies_parsed_at":"2022-09-02T05:51:06.554Z","dependency_job_id":null,"html_url":"https://github.com/One-com/livestyle","commit_stats":null,"previous_names":[],"tags_count":89,"template":false,"template_full_name":null,"purl":"pkg:github/One-com/livestyle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-com%2Flivestyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-com%2Flivestyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-com%2Flivestyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-com%2Flivestyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/One-com","download_url":"https://codeload.github.com/One-com/livestyle/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-com%2Flivestyle/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265705314,"owners_count":23814420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-06T23:01:52.254Z","updated_at":"2025-07-18T05:31:07.935Z","avatar_url":"https://github.com/One-com.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Livestyle\n=========\n[![NPM version](https://badge.fury.io/js/livestyle.png)](http://badge.fury.io/js/livestyle)\n[![Build Status](https://travis-ci.org/One-com/livestyle.png?branch=master)](https://travis-ci.org/One-com/livestyle)\n[![Dependency Status](https://david-dm.org/One-com/livestyle.png)](https://david-dm.org/One-com/livestyle)\n\nLivestyle is a small web server that refreshes the stylesheets on your\nweb sites live as you edit them.\n\nIt does so by injecting a small JavaScript client on each html page,\nwhich subscribes to changes on the served css files through a\nWebSocket (via [socket.io](https://github.com/LearnBoost/socket.io)).\n\nThe server then notifies the client to reload specific stylesheets\nwhen they are updated on the file system.\n\nThe livestyle client also falls back to active polling, which means\nyou can use the client as a standalone script on your normal web\nserver.\n\nUse livestyle to get live feedback while staying in your favorite\neditor. Effective use cases spotted so far:\n\n* Styling parts of web applications that require several clicks to\n  get to the state you are working on.\n* Getting instant feedback from many browsers at the same time, including mobile browsers!\n* Testing several media queries at the same time with different\n  devices or browser window sizes.\n\nIf you are looking for a grunt task doing the same, take a look at [grunt-livestyle](https://github.com/Munter/grunt-livestyle).\n\nUsage\n=====\nLivestyle installs an executable script on your system called `livestyle`.\n\nTo get started quickly just change the directory to where your\ndocument root is and run the `livestyle` command. The server will now\nlisten on port 3000.\n\nHere's the full set of command line options:\n\n#### --root|-r \u0026lt;dir\u0026gt;\n\nThe directory to serve static files from. Unless `--proxy` is\nspecified, it defaults to the current working directory. If you want\nto serve static files in `--proxy` mode, `--root` must be specified\nexplicitly.\n\n#### --host|-h \u0026lt;hostNameOrIp\u0026gt;\n\nThe local hostname or IP-address to listen on. Defaults to `0.0.0.0`.\n\n#### --port|-p \u0026lt;portNumber\u0026gt;\n\nThe local post number to listen on. Defaults to `3000`.\n\n#### --proxy http://\u0026lt;hostname\u0026gt;[:port]/\n\nInstructs livestyle to proxy requests for everything but CSS files to\na remote server, as determined by the `Accept` request header.\n\n#### --map|-m \u0026lt;sourcePathPrefix\u0026gt;=\u0026lt;targetPathPrefix\u0026gt;\n\nTranslate the paths of incoming requests. Think of it as a very\nprimitive mod_rewrite that only works on request path prefixes.  For\nexample, to translate all requests for `/foo/*` to `/bar/*`, use this\nswitch: `--map /foo/=/bar/`\n\nMultiple --map switches are allowed. When used in conjunction with\n`--proxy`, the mappings are applied before proxying the request.\n\n#### --compiless\n\nCompile less assets on-the-fly using \u003ca\nhref=\"https://github.com/papandreou/express-compiless\"\u003eexpress-compiless\u003c/a\u003e. Also\nsupports watching @import'ed less assets.\n\n#### --compilesass\n\nCompile sass assets on-the-fly using \u003ca\nhref=\"https://github.com/Munter/express-compile-sass\"\u003eexpress-compile-sass\u003c/a\u003e. Also\nsupports watching @import'ed sass assets.\n\n#### --autoprefixer\n\nadd missing css vendor prefixes on the fly using\n[express-autoprefixer](https://github.com/gustavnikolaj/express-autoprefixer)\n\nIf you only provide the flag with no value (like this:\n`--autoprefixer`) it will use the autoprefixer defaults.  '\u003e 1%, last\n2 versions, Firefox ESR, Opera 12.1'.\n\nYou can pass options as a string of supported browsers separated by comma. For syntax\nand valid options see the autoprefixer [projectpage](https://github.com/ai/autoprefixer).\n\nIf you wish to support IE9 and the last 2 versions of every browser\nyou should provide the options like this: `--autoprefixer \"ie \u003e 8, last 2 versions\"`.\n\n#### --jsxtransform\n\nIf this value is set, JSX code (used in\n[facebook/react](https://github.com/facebook/react) will be compiled\nto javascript on the way out. Using\n[express-jsxtransform](https://github.com/gustavnikolaj/express-jsxtransform).\n\n#### --processimage\n\nProcess images on the server according to the query string using using \u003ca\nhref=\"https://github.com/papandreou/express-processimage\"\u003eexpress-processimage\u003c/a\u003e.\n\n#### --watchhtml\n\nAlso watch the HTML file itself and refresh if it changes on disc.\n\n#### --watchcssimages\n\nAlso watch (background) images used by CSS and refresh them if they change on disc.\n\n#### --debug|-d\n\nOutputs a bunch of debugging information on both the server and the\nclient.\n\n#### --watchfile=true\n\nIf set, will use fs.watchFile instead of fs.watch.\nIf you experience problems that the server stops watching a file\nafter the first time you save a file, this method will help.\n\n#### --mtime\n\nOnly notify clients about a changed file if its `mtime` has\nincreased. Experimental, only supported when using `fs.watch`.\n\nInstalling livestyle\n====================\nLivestyle requires NodeJS and npm to be installed. See this page for\ninstallation instructions:\nhttps://github.com/joyent/node/wiki/Installation\n\nWhen the prerequisites are in place, run the following command:\n\n    npm install -g livestyle\n\nAnd you are done.\n\n\nSupported platforms\n===================\nLivestyle uses pure web technologies. It uses WebSockets if possible,\nbut falls back to polling via XHRs. This means that every non-ancient,\nJavaScript-enabled browser should be supported, also on mobile.\n\nCurrently there are some troubles with updating stylesheets using\n@import in IE, which you want to avoid anyway\nhttp://www.stevesouders.com/blog/2009/04/09/dont-use-import/\n\n\nModule loaders\n==============\nLivestyle supports asynchronous loading and injection of stylesheets.\nIf you are using requirejs you might want to take a look at css.js and\nless.js, wich can be used as module loaders for both less and css\nfiles using requirejs like so:\n\n``` javascript\ndefine([\n    'less!bootstrap/theme.less',\n    'css!styles/myLoginBox.css'\n], function () {\n    // My module depending on certain styles\n})\n```\n\nThese two loaders are both usable without livestyle.\nThe less.js loader will change behavior depending on wether you have\nset the `--compiless` flag for livestyle to make live updates possible.\n\nHelp! fs.watch throws ENOSPC errors!\n====================================\n\nYou are hitting the limit of inotify watchers on your system. To\nremedy this, you can increase the limit. On modern computers it should\nnot be worsening the performance significantly.\n\nTo check what your current limit is run:\n```\n$ cat /proc/sys/fs/inotify/max_user_watches\n```\n\nIt should generally be safe to just double that if you see this error.\n\n```\n$ echo 16384 \u003e /proc/sys/fs/inotify/max_user_watches\n```\n\nYou will need to run the above command with super user privileges.\n\nTo make the change permanent you can add the following line to the\n/etc/sysctl.conf file.\n\n```\nfs.inotify.max_user_watches=16384\n```\n\nThis solution is assuming you are running Debian.\n\n\nCSS preprocessors\n=================\nSince livestyle watches the css files that are actually served to the\nbrowser, livestyle work with any CSS preprocessor that runs on the\nserver out of the box.\n\nIf you want live updates you will of course need to enable your\npreprocessor's option to automatically build a new CSS files for each\nfile update. livestyle will then detect the update in the built file\nand push it to the client.\n\nThere are two CSS preprocessors that run in the browser, which is a\nbit of a special case:\n\nPrefixfree\n----------\n[Prefixfree](http://leaverou.github.com/prefixfree/) inserts vendor\nprefixes for the style properties that need them. It does this runtime\nin the browser by fetching the stylesheet content through XHR and\nreplace the link tags with a style block with prefixed CSS. Livestyle\nnow supports prefixfree.\n\nLess.js\n-------\n[Less.js](https://github.com/cloudhead/less.js) injects preprocessed\nstyle into the page by loading .less files and reworking the content\nto real CSS. Livestyle supports live updates using Less.js by\nrefreshing all less stylesheets on the page.\n\nLicense\n-------\n\nLiveStyle is licensed under a standard 3-clause BSD license -- see the\n`LICENSE`-file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOne-com%2Flivestyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOne-com%2Flivestyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOne-com%2Flivestyle/lists"}