Online CoffeeScript Compiler

Compile CoffeeScript 2 to JavaScript online and run it instantly: see the generated JavaScript and the console output side by side.

CoffeeScript 2.7 · Runs in your browser, so your code never reaches our servers.
main.coffeeCoffeeScript
Output

            
        

    

    

        Ctrl/⌘ + Enter to run

    




More online compilers: PythonJavaScriptTypeScriptPHPRubyLuaSQLCC++RPrologSchemeClojure




    

        

            

                
How to use the online CoffeeScript compiler


    
  
  1. Write or paste CoffeeScript into the editor. Reset example restores the starter code with functions, a comprehension and a small class hierarchy.
    2. 
  
  2. Press Run or use Ctrl + Enter (⌘ + Enter on a Mac).
    3. 
  
  3. The official CoffeeScript compiler turns your code into JavaScript. If there is a syntax error, the message shows its line and column, and nothing runs.
    4. 
  
  4. If compilation succeeds, the JavaScript runs in your browser's JavaScript engine. console.log output appears in the Output panel, with objects and arrays pretty-printed as JSON. Open Generated JavaScript under the output to see the compiled code.
    5. 
  
  5. Choose a time limit of 5, 15 or 60 seconds, or press Stop to end a run early.
    6. 



Use Copy or main.coffee to save your source. The layout button switches between side-by-side and stacked panes.


Compiling and running both happen in a Web Worker in your browser, and your code is never sent to a server. The editor auto-saves your last code in your browser, separately for each compiler.



About CoffeeScript 2


CoffeeScript is a small language that compiles to JavaScript. Its syntax is inspired by Ruby and Python: indentation instead of braces, optional parentheses, -> for functions and implicit returns. Several of its ideas, such as arrow functions, classes, destructuring and string interpolation, later became standard JavaScript.


This page uses CoffeeScript 2.7 in bare mode, so the output is not wrapped in an extra function. CoffeeScript 2 generates modern ES2015+ code. Its classes become JavaScript classes, => becomes an arrow function, and any function that contains await becomes an async function.



What's supported


    
  
  • The full CoffeeScript 2 language: classes with extends and super, @ shorthand, string interpolation with "#{...}", ranges like [1..5], destructuring, splats, the existential operator ?, and async/await.
    • 
  
  • Standard JavaScript built-ins such as Math, JSON, Array methods and Promise.
    • 



Limitations:


    
  
  • No DOM: the code runs in a worker, so document and window are unavailable.
    • 
  
  • No require, import or npm packages, and no Node.js APIs.
    • 
  
  • No input box. Define your test data in the code.
    • 




Worked example: comprehensions and @


evens = (n for n in [1..10] when n % 2 is 0)
console.log evens                    # [2, 4, 6, 8, 10]

class Basket
  constructor: (@owner) ->
    @items = []
  addAll: (list) ->
    list.forEach (item) => @items.push item
    this

basket = new Basket('Ada').addAll ['tea', 'milk']
console.log "#{basket.owner} has #{basket.items.length} items"


(@owner) in the constructor stores the argument as this.owner. The callback uses =>, so @items still refers to the basket. With a thin arrow -> it would refer to something else and the call would fail. Open Generated JavaScript to see how the comprehension becomes a loop and the class becomes an ES class.



Common pitfalls


    
  
  • Whitespace is significant. Indentation defines blocks, so a misaligned line changes the meaning or fails to compile.
    • 
  
  • Implicit returns. A function returns the value of its last expression. A loop at the end of a function collects its results into an array. Add an explicit return if you do not want that.
    • 
  
  • in vs of. for x in array loops over values, while for key, value of object loops over properties. This is the reverse of what a JavaScript developer might expect.
    • 
  
  • Comprehensions need parentheses when you assign or print them. Without them, evens = n for n in list assigns each item to evens in turn, so you end up with the last item instead of an array.
    • 
  
  • No var or let. Assigning to a name that already exists in an outer scope updates that variable instead of creating a new one.
    • 
  
  • is, isnt, and, or and not are aliases, and == compiles to the strict ===.
    • 




CoffeeScript or TypeScript today?


For new projects, most teams pick TypeScript or modern JavaScript, because they offer static types and wider editor and library support. CoffeeScript is still useful for maintaining existing codebases, such as older Ruby on Rails applications, and for quick, concise scripts. When you migrate, the generated JavaScript is a good starting point. Tidy it with the JavaScript formatter, or try the result in the online TypeScript compiler.



Frequently asked questions


Can I convert CoffeeScript to JavaScript here?


Yes. Run your code, open Generated JavaScript and copy the output. It is produced by the official CoffeeScript 2.7 compiler in bare mode.


Why does my function return an array I did not expect?


Because of implicit returns. If a loop is the last expression in a function, its results are collected and returned. End the function with return or another value to avoid this.


Where can I run the JavaScript directly?


Use the online JavaScript compiler, or browse all online compilers.


            

        

        
    




    


    

    
    

    

        

            
 Copied to clipboard