Running CoffeeScript In-Browser

One of the ways to run CoffeeScript (other than processing on the server or using the command line to pre-compile) is to run CoffeeScripts, directly, in-browser.
This simply means that you can write coffeescript inside the HTML document. It has the disadvantage of being near impossible to debug as the running code will be encased in a very large javascript eval statement.
Running CoffeeScript in-browser is therefore not encouraged by the Author of CoffeeScript (jashkenas) – to the extent that he preferred not to include my submission (or pull-request as it is known on GitHub) to improve the documentation for it. This may be reasonable, however I would like to put the documentation here.

To run your coffeescript inline:

  1. Tag your coffeescript with the type “text/coffeescript”
  2. Include coffee-script.js after all coffeescript on the page (this is the compiler that will evaluate and compile all coffeescript in order)
  • The text contents of remote scripts (those referenced via src=””) cannot be accessed from the browser unless they are hosted on the same domain, and are capable of being accessed via an XMLHTTPRequest (which is how the compiler loads it)

And the main improvement to the documentation I wanted to make, an example:

<html>
<head>
<title>In-Browser test</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&#8221;> </script>
<script type=”text/coffeescript”>
$
-> $(#header).css background-color, green
</script>
<script type=”text/javascript” src=”http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js&#8221;> </script>
</head>
<body>
<h1 id=”header” style=”color:white”>CoffeeScript is alive!</h1>
</body>
</html>

And the corresponding output:
About these ads

11 responses to this post.

  1. One little addition to this: Remote scripts do work, but only if they are hosted on the same domain, and may be accessed via an XMLHTTPRequest. Still not recommended though.

    Reply

  2. Peter, I was able to use this to play with CoffeeScript on Cloud9IDE, which currently doesn’t support compiling CoffeeScript into JavaScript. Thanks!

    Reply

  3. Posted by jarav on 2011/09/26 at 6:35 PM

    Is there any way of including external Coffeescript files along with inline coffeescript to be compiled together into Javascript ? Thanks.

    Reply

  4. [...] Running-Coffeescript-In-Browser [...]

    Reply

  5. Posted by muneeb mukhthar on 2012/02/14 at 7:16 PM

    thats greta !!

    Reply

  6. [...] index.html file is written in JavaScript, you can actually write that in CoffeeScript as well. See this article for more information on [...]

    Reply

  7. I like it when individuals get together and share ideas. Great blog, continue the good work!

    Reply

  8. Posted by richa on 2014/05/01 at 2:55 PM

    I am unable to run the given example

    Reply

    • Note that simply copy-pasting the example above will give you “fancy” quotes, which you might have to replace with normal quotes. Then it worked for me.

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: