No description, website, or topics provided.
JavaScript TypeScript
Clone or download
Latest commit 2c813e1 May 4, 2017


RxCSS is a very small library for manipulating CSS Custom Properties (aka CSS Variables) with RxJS Observables.

More Info


Make sure RxJS is installed and globally available.


You can either use RxCSS in an existing project:

npm install rxcss@latest --save

Or you can include it directly in a <script> tag:

<script src=""></script>
<script src=""></script>


const mouse$ = Rx.Observable
  .fromEvent(document, 'mousemove')
  .map(({ clientX, clientY }) => ({
    x: clientX,
    y: clientY

const style$ = RxCSS({
  mouse: mouse$,

// Optional
:root {
  --mouse-x: 0;
  --mouse-y: 0;

.ball {
    translateX(calc(var(--mouse-x) * 1px))
    translateY(calc(var(--mouse-y) * 1px));


RxCSS(observableMap[, target])

Sets each key/value pair, where each value is an observable, as a CSS variable on the target.

  • observableMap (Object) - an object where each:
    • key is the CSS variable name to be set on the target
    • value is either an Observable stream of values, or a single value to set the CSS variable to.
  • target (Element) - the DOM node to set the CSS variables to. Default: document.documentElement.