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:
- Tag your coffeescript with the type “text/coffeescript”
- 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 testtitle>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”> 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”> script>
head>
<body>
<h1 id=”header” style=”color:white”>CoffeeScript is alive!h1>
body>
html>
<head>
<title>In-Browser testtitle>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”> 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”> script>
head>
<body>
<h1 id=”header” style=”color:white”>CoffeeScript is alive!h1>
body>
html>
And the corresponding output:
The Cut Worm Forgives the Plow 
Posted by Jeremy Ashkenas on 2010/09/27 at 11:31 PM
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.
Posted by PandaWood on 2010/09/28 at 6:54 AM
Thanks, I’ve updated the post to reflect that.
Posted by Aden Watts (@adenwatts) on 2011/09/17 at 8:53 AM
Peter, I was able to use this to play with CoffeeScript on Cloud9IDE, which currently doesn’t support compiling CoffeeScript into JavaScript. Thanks!
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.
Posted by PandaWood on 2011/09/26 at 10:10 PM
Hi Jarav,
In my rubyann project, I use external as well as inline coffeescript, see here: https://github.com/PandaWood/rubyann/blob/master/demo.html
I remember there were some quirks in the way coffeescript controlled execution order, but these have apparently been fixed – https://github.com/jashkenas/coffee-script/pull/1277
Posted by Setup CoffeeScript in your local browser | !!"Adam Tal" on 2012/01/20 at 12:41 AM
[…] Running-Coffeescript-In-Browser […]
Posted by muneeb mukhthar on 2012/02/14 at 7:16 PM
thats greta !!
Posted by Working with JQuery, AJAX, CoffeeScript and Node.js | Giant Flying Saucer on 2012/07/17 at 4:23 AM
[…] index.html file is written in JavaScript, you can actually write that in CoffeeScript as well. See this article for more information on […]
Posted by free super wifi and techno prescott r l coffee! on 2014/04/16 at 12:16 PM
I like it when individuals get together and share ideas. Great blog, continue the good work!
Posted by richa on 2014/05/01 at 2:55 PM
I am unable to run the given example
Posted by freebatjko on 2014/06/25 at 12:40 AM
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.
Posted by timkay on 2016/12/19 at 4:32 PM
Something wrong with the latest tagged version. A previous version can be found here: https://cdn.rawgit.com/jashkenas/coffeescript/1.11.1/extras/coffee-script.js
Posted by timkay on 2016/12/19 at 4:33 PM
Use this link instead of the raw/master/extras/… link