Descartes | Write CSS in JavaScript
Clone or download
Latest commit 46f23bb Jul 26, 2018


by Jon Chan @jonhmchan

This is an experimental library for writing CSS in JavaScript. The current version is a beta and highly unstable, with changes happening on a daily basis. This library is not recommended for production use. It is actively being developed with your help.


  1. Download descartes.js from the dist folder

  2. Set up Descartes in a webpage by inserting it in your <head> tag, like so:

    <!doctype html>
    		<script type="text/javascript" src="/path/to/descartes.js"></script>
    		<h1>I compute, therefore I am.</h1>
    		<script type="text/javascript" src="/path/to/styles.js"></script>
  3. Create a styles.js where you will write your styles. Try the following:

    	"body": {
    		"color": "#555",
    		"font-family": "Arial",
    		"h1": {
    			"font-family": "Helvetica",
    			"font-size": function() {
    				return 16 + Math.round(Math.random() * 42);
  4. Save and open up your HTML file in a browser. Clicking anywhere on the window should randomize the size of your heading.


For a full overview of features, take a look at the presentation I typically give at (just your right and left arrow keys to go through the slides).