Descartes | Write CSS in JavaScript
JavaScript CSS HTML
Latest commit ee2ab13 Aug 22, 2016 @JonHMChan committed on GitHub Update


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).