CodeJS editor documentation

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

About CodeJS

CodeJS is more than a useful coding tool, it is a collaborative web development platform for front-end, full-stack and, back-end developers, all CodeJS projects are single page applications made of separate JavaScript/CSS/HTML files. Projects are instantly deployed and accessible from a URL, deployed projects are updated every time you save changes. Hosting is free, you can host as many projects as you want within your storage allowance (512mb for free memberships).

CodeJS comes with a useful online code editor, and a complete set of features such as autocomplete, live preview, integrated console, one-click JSHint, advanced search features, public/private collaborations, and a free smart coding assistant that you can use as a copilot to generate functional javascript code from simple human readable prompts.


The smart assistant named PALJS (or PAL for short) is fully developed by the CodeJS team and runs on its own algorithm, PAL is an efficient, free alternative to the "Github Copilot" product, currently charged at around $10 per month. Pal is a simple yet smart program that will help you write cleaner code and debug less, PAL is not an artificial intelligence "AI" and it does not share any similarity, link, or code with chatGPT or any other AI model.


On CodeJS you can easily build and deploy a website, showcase your work with elegant preview layouts, build test cases to learn and debug, collaborate with other developers, find inspiration, and modern website templates. The CodeJS editor lets you easily test snippets of JavaScript/CSS/HTML code on-the-fly, adding optional libraries like jQuery, Vue, Bootstrap and more.


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). Your work and CodeJS projects are accessible from a variety of devices, simply login and start coding.


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, latting 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.

In addition this makes showcasing your work to clients or colleagues much more satisfying and straightforward, allowing them 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. Adaptive code completion uses an automatically generated in-memory database of classes, ids, variable names, and other constructs that project’s code defines or references. The feature speeds up software development by reducing keyboard input and the necessity for name memorization. It also allows for users to refer less frequently to external documentation.


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 simple yet powerful and again it is 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>
JavaScript hint/linter

CodeJS also comes with an integrated JSHint/Linter tool.

JSHint will help you detect potential bugs in your JavaScript code and help you enforce some JavaScript coding conventions. JSHint works by scanning your program's source code and reports about commonly made mistakes and potential bugs.
This will help you not break your computer over a missing semicolon that would have otherwise gone undetected.

To get started with hinting/linting in your CodeJS projects, simply click the lightbulb icon in the top menu bar.

Code beautify for HTML, CSS, & JavaScript

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

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

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 PalJS - The free, non AI coding assistant

PalJS is a coding assistant that takes human readable sentences as input and returns code that should correspond to the requirements expressed in your input query. PalJS is developed by CodeJS and is fully integrated within the code editor, it is also free and available in dozens of different languages.

Currently PalJS only supports JavaScript code generation.


Below are a few examples on how to use PalJS to reduce errors, improve your code logic, and reduce development time.

How to use PalJS

Getting started with PalJS is very simple, you don't even need to get your hands off the keyboard.

To use the PalJS function start a line with the following comment:

//pal

You can then proceed by typing your query just as follow:

//pal fetch function to make a post request

Once you have typed in your PalJS query simply press 'Enter'. The following output should appear in your code:

(async () => {
     const rawResponse = await fetch('https://httpbin.org/post', {
        method: 'POST',
        headers: {
             'Accept': 'application/json',
             'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            a: 1,
            b: 'Textual content'
        })
    });
    const content = await rawResponse.json();
    console.log(content);
})();

Here is another example input query and it's output:

//pal convert timestamp to date + hours

The output of this query should look something like this:

timestamp = 1607110465663
var date = new Date(timestamp);
console.log("Date: " + date.getDate() +
     "/" + (date.getMonth() + 1) +
     "/" + date.getFullYear() +
     " " + date.getHours() +
     ":" + date.getMinutes() +
     ":" + date.getSeconds()
);

PalJS query depth parameter

PalJS comes with a query parameter option to help you further refine it's output.

A query depth parameter will make PalJS return a different output each time it is changed, if not specified the default query parameter is '0'.

Here is an example of the query parameter syntax (hash symbol/pound sign '#' + Number '1'):

#1

There is no limit on the number you can input as the function will keep on returning results for as long as there are some.
The depth parameter must be placed at the end of the query like in the example below:

//pal remove duplicates from an array #1

Now let's have a look at an example output of the same query, but with a different query depth parameter. For the first exmaple no query depth parameter is specified, so it will be '0' by default, as for the second query, it will be using a query depth parameter of '1'.

1st query ===>
//pal remove duplicates from an array
1st query output ===>
const names = ['John', 'Paul', 'George', 'Ringo', 'John'];
let unique = [...new Set(names)];
console.log(unique); // 'John', 'Paul', 'George', 'Ringo'

2nd query ===>
//pal remove duplicates from an array #1
2nd query output ===>
const initialArray = ['a', 'a', 'b', ]
finalArray = Array.from(new Set(initialArray)); // a, b
console.log(finalArray)

As you can see from the example above, PalJS will return two different outputs that ultimately achieve the same result.

Please note that it may be worth running a query with the same query depth parameter multiple times, as it may at times return a different output even though neither the query nor the parameter were changed.

Supported PalJS languages

PalJS currently supports human readable query input in the following languages:

  • Afrikaans
  • Albanian
  • Amharic
  • Arabic
  • Armenian
  • Assamese
  • Aymara
  • Azerbaijani
  • Bambara
  • Basque
  • Belarusian
  • Bengali
  • Bhojpuri
  • Bosnian
  • Bulgarian
  • Catalan
  • Cebuano
  • Chinese (Simplified)
  • Chinese (Traditional)v
  • Corsican
  • Croatian
  • Czech
  • Danish
  • Dhivehi
  • Dogri
  • Dutch
  • English
  • Esperanto
  • Estonian
  • Ewe
  • Filipino (Tagalog)
  • Finnish
  • French
  • Frisian
  • Galician
  • Georgian
  • German
  • Greek
  • Guarani
  • Gujarati
  • Haitian Creole
  • Hausa
  • Hawaiian
  • Hebrew
  • Hindi
  • Hmong
  • Hungarian
  • Icelandic
  • Igbo
  • Ilocano
  • Indonesian
  • Irish
  • Italian
  • Japanese
  • Javanese
  • Kannada
  • Kazakh
  • Khmer
  • Kinyarwanda
  • Konkani
  • Korean
  • Krio
  • Kurdish
  • Kurdish (Sorani)
  • Kyrgyz
  • Lao
  • Latin
  • Latvian
  • Lingala
  • Lithuanian
  • Luganda
  • Luxembourgish
  • Macedonian
  • Maithili
  • Malagasy
  • Malay
  • Malayalam
  • Maltese
  • Maori
  • Marathi
  • Meiteilon (Manipuri)
  • Mizo
  • Mongolian
  • Myanmar (Burmese)
  • Nepali
  • Norwegian
  • Nyanja (Chichewa)
  • Odia (Oriya)
  • Oromo
  • Pashto
  • Persian
  • Polish
  • Portuguese (Portugal, Brazil)
  • Punjabi
  • Quechua
  • Romanian
  • Russian
  • Samoan
  • Sanskrit
  • Scots Gaelic
  • Sepedi
  • Serbian
  • Sesotho
  • Shona
  • Sindhi
  • Sinhala (Sinhalese)
  • Slovak
  • Slovenian
  • Somali
  • Spanish
  • Sundanese
  • Swahili
  • Swedish
  • Tagalog (Filipino)
  • Tajik
  • Tamil
  • Tatar
  • Telugu
  • Thai
  • Tigrinya
  • Tsonga
  • Turkish
  • Turkmen
  • Twi (Akan)
  • Ukrainian
  • Urdu
  • Uyghur
  • Uzbek
  • Vietnamese
  • Welsh
  • Xhosa
  • Yiddish
  • Yoruba
  • Zulu
Auto translation

Not only you can write your query in any of the above languages, but alos PalJs also comes with a very useful auto translation feature.

The PalJS output often comes with helpful comments that help you understand the code, these comments are automatically translated the the language you used to input your query.

Below are a couple of example to further illustrate the auto translation feature.

Query in Arabic ===>
//بال نظيف مصفوفة
Query output with Arabic translation of the comments ===>
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// كما هو الحال مع معظم الترميز ، هناك عدة طرق يمكنك من خلالها فعل أي شيء
// انظر أيهما يعمل بشكل أفضل مع السيناريو الخاص بك
// اضبط المصفوفة لتساوي مصفوفة فارغة
array = [];
// يمكنك استخدام Array Constructor
array = new Array()
// نظرًا لأن المصفوفة هي في الواقع كائن ، يمكنك أيضًا استخدام Object.assign ()
array = Object.assign(array, [])
// اضبط طول المصفوفة على 0
array.length = 0;
// باستخدام لصق ، يبدأ من الفهرس 0
array.splice(0, array.length);
array.map(() => array.pop());
array.map(() => array.shift());

Query in Chinese===>
//pal 清除阵列
Query output with Chinese translation of the comments ===>
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 与大多数编码一样，您可以通过多种方式做任何事情
// 查看最适合您的场景的那个
// 设置数组为空数组
array = [];
// 你可以使用数组构造函数
array = new Array()
// 因为数组实际上是一个对象，所以您也可以使用 Object.assign()
array = Object.assign(array, [])
// 设置数组的长度为0
array.length = 0;
// 使用拼接，从索引 0 开始
array.splice(0, array.length);
array.map(() => array.pop());
array.map(() => array.shift());

This is a newly implemented feature so please be patient while we try to make it more efficient.

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

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.