CodeJS editor documentation

Learn about how CodeJS works, the main editor features, and how you can use it to write better code.

About CodeJS

Hey there! Let us introduce you to CodeJS, your new favorite place to code on the web. It's a friendly code editor that makes writing HTML, CSS, and JavaScript feel like a breeze. We've packed it with helpful features like autocomplete and zen coding to speed up your workflow, plus a handy beautifier to keep your code looking clean and tidy. Watch your creations come to life with instant preview, debug with the built-in console, and when you're done, simply download everything as a single HTML file – super convenient, right?

The best part? We've brought together some amazing AI helpers (Gemini 1.5 Pro, Claude 3.5 Sonnet, and GPT-4) that you can chat with while you code. They're pretty smart – they understand your code, remember your conversations, and you can switch between them anytime without losing track of what you're working on. Whether you're learning, experimenting, or building something awesome, CodeJS is here to make your coding journey more enjoyable!


CodeJS is completely free and open source! We believe great tools should be accessible to everyone, so you can start coding right away – no sign-ups, no accounts, no hassle. Just open your browser and start typing. Our source code is available on GitHub, which means you can peek under the hood, suggest improvements, or even contribute to making CodeJS even better.


CodeJS is a cloud based service, there is no need to install software or worry about compatibility issues and updates, the editor runs in the browser, it has been tested on and is compatible with the recent releases of (Firefox, Brave, Google Chrome, Edge, Opera, Safari, Librewolf, DuckDuckGo Browser, Firefox focus).


The editor is also responsive and mobile optimized, it can be used on mobile, desktop, tablet, tall vertical screens, wide horizontal screens, or smart tv.
CodeJS is in active development, frequently updating with improvements, and bug fixes.
Current Version 1.0.0

Supported languages

Currently the CodeJS editor provides full support for the following languages:

  • HTML
  • CSS
  • JavaScript

Actively working on expanding support for additional coding languages.

Live result preview

Live result preview allows for instant updates upon changing your code. Whether it be html, css or, JavaScript changes, the results are instantly updated in the preview iframe, letting you visualize your design changes saving you valuable time and efforts.

Furthurmore if the 'Autorun JS' option is enabled, your JavaScript code will run automatically whenever a change happens. Note that JS will run after a time interval (2 seconds by default), this interval can be changed in the editor settings.

Responsive preview

The editor's responsive preview option allows you to quickly visualize your designs and webpages in tablet, samrtphone and, desktop mode. No need for complex manipulations to resize your window or open devtools.

This makes previewing your work much more satisfying and straightforward, allowing you to smoothly toggle between views in a simple click.

Code autocompletion

A smart code completion system designed to save you valuable time and typing efforts by considerably reducing keystrokes. Autocomplete is available for HTML/CSS/JS.


You can use autocomplete on CodeJS like you would on any other IDE or JavaScript playground.


Autocomplete features are enabled by default, you can change this is the editor’s settings.

Adaptive code completion

This feature is again designed to save you time and effort when coding. Adaptive code completion will automatically pick up html elements classes and Id and add them to your autocomplete suggestions, the same applies to css and JS variables. Here is an example of how it works assuming you add the following code to in your project's html:

<button class="some_example_class" id="some_example_id"> Click here </button>

Using the example above, the adaptive code completion feature would automatically add the following to the your autocomplete suggestions:

  • some_example_class
  • some_example_id

Another example, this time using CSS variables:

:root {
   --href-blue: #1e90ff;
   --bg-white: #ffffff;
}

Using the example above, the adaptive code completion feature would automatically add the following to the your autocomplete suggestions:

  • --href-blue
  • --bg-white

Emmet abbreviation - Zen coding

CodeJS also comes with a basic Emmet abbreviation feature, this is sometimes referred to 'as Zen coding'. Emmet bbreviations are optimised for, HTML generation, and make writing tedious markup code a breeze. Please note that this feature is also being developed from scratch and is currently being improved, this being said here are a few examples of how you can use Emmet abbreviations on CodeJS.


The line below

div.exampleClass#exampleId

Will give you the following output

<div class="exampleClass" id="exampleId"></div>
Code beautify for HTML, CSS, & JavaScript

Another useful CodeJS feature called code beautify will help you keep your code structre clean and readable without too many efforts.

Avoiding manual formatting will save you time and make your code more readable.

Currently the Code Beautify tool supports the following languages:

  • HTML
  • CSS
  • JavaScript

All you need to beautify and format your code is to click on the code icon located in the top of the menu bar, this will automatically beautify the contents of the currently selected code tab.

About Ask AI - The free, AI Coding Assistant

CodeJS comes with a unique AI collaboration feature that lets you chat with three powerful AI models – Gemini 1.5 Pro, Claude 3.5 Sonnet, and GPT-4 – right inside your code editor. What makes it special is that each AI assistant understands both your code and your ongoing conversation, making their help more relevant and personalized. You can freely switch between different AI models while they maintain the full context of your project and previous discussions. Whether you need help debugging, want suggestions for improvements, or are looking for coding guidance, it's like having three smart coding buddies ready to help!

To start chatting with Ask AI, just click on the Light Bulb icon located on the editor's page.

Editor customization

Learn how to customize the CodeJS editor and what options are available.

You can get to the editor customization options by clicking on the settings icon located in the top menubar of the editor's page.

Code highlight themes

You can change code highlight theme by choosing one from the editor settings window.

The following themes are currently available

  • Tomorrow
  • Okaidia
  • Morning
  • Eleven-Dark
  • Solarized
  • Atom-Dark
  • Base16-Light
  • CB
  • Coldark-Cold
  • Coldark-Dark
  • Coil
  • Dracula
  • Dracula-Old
  • Duotone-Dark
  • Duotone-Earth
  • VSC-Dark
  • And much more ...
Change code font

You also have the option to choose a code font from those available in the CodeJS editor.

The following fonts are already available:

Editor layout

The editor's layout is fully responsive and should adapt to whatever screen size you are working on.

If however you would like to remove all padding between the editor's elements in order to maximize the size of your editing and preview elements you can simply toggle the 'Borderless Editor windows' option in editor settings.