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:

<title>In-Browser test</title>
<script type=”text/javascript” src=”;> </script>
<script type=”text/coffeescript”>
-> $(#header).css background-color, green
<script type=”text/javascript” src=”;> </script>
<h1 id=”header” style=”color:white”>CoffeeScript is alive!</h1>

And the corresponding output:
About these ads

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


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


  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.


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


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

    thats greta !!


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


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


Leave a Reply

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

You are commenting using your 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


Get every new post delivered to your Inbox.

%d bloggers like this: