This is where you enter the body of your HTML. Everything that goes between the <body> and </body> tags goes here. JSCoder will provide everything else for you.


This is where you enter your CSS. Everything you would type into a .css file goes here. JSCoder will include this into your HTML header.


This is where you enter all your javascript code. JSCoder includes jQuery and puts your code into the function that jQuery calls when the HTML is finished loading. So declare your variables, define your functions and put all your immediate javascript code here.

! (Options)

This is where all the options for JSCoder go... eventually there will be options.

? (Help)

This is where everything gets documented.

Project Menu

Save Project to Local Storage

Click this when you want to save all your code to local storage. What you save will be loaded into the editors the next time you visit JSCoder. Someday you will be able to save and load projects by name. If you made some changes and you want to go back to your last save then simply click your web browser's Reload button.

Download Project Zip

Click this when you want to download a copy of your current project. JSCoder will Zip the files (index.html, style.css, and main.js) and prompt you to save the Zip to your local computer.

Download Preview HTML

Click this when you want to download a copy of the HTML created for the Preview. This differs than the Zip as the CSS and JS is embedded into the HTML.


Click this when you want JSCoder to generate your HTML file and display it in the preview pane.


Do you need an example to get started? Click the button below to replace the contents of the three editors with a small example. You may want Save or Download your current project before you click the Example button. NOTE: This will not replace your project in local storage unless you click Save after you click the Example button.

Hello World!

body { font-size:16px } #text { font-size:32px; font-weight:bold }
$('#red').click(function(){ $('#text').css('color','red'); }); $('#green').click(function(){ $('#text').css('color','green'); }); $('#blue').click(function(){ $('#text').css('color','blue'); });