Get Started with ClearlyJS

What is ClearlyJS?

ClearlyJS is a simple and open source JavaScript library, made for making small-scale apps in no time - and without learning a new language! ClearlyJS uses the latest JavaScript features (Such as JSX), combined with the legacy HTML and Vanilla JS to make the best of both worlds. ClearlyJS contains functions for DOM elements, URLs, cookies, XML elements and more, and even has tools and add-ins to help you build stable and fast apps!

Make your first ClearlyJS app

ClearlyJS lets you write your page in multiple ways - or to do it in your way!

The ClearlyJS syntax is similar to React - so if you're moving from or to React, It'll be an easy move!

1. Import ClearlyJS

To start using ClearlyJS, open a new HTML page and add this line as the first line of your head tag:

index.html

<script src="https://cdn.jsdelivr.net/gh/negevvo/ClearlyJS@main/ClearlyJS/clearly.js"></script>

It is recommended to use ClearlyDebug:

index.html

<script src="https://cdn.jsdelivr.net/gh/negevvo/ClearlyJS@main/ClearlyJS/clearly.js"></script>
<script src="https://cdn.jsdelivr.net/gh/negevvo/ClearlyJS@main/ClearlyJS/clearlyDebug.js" defer></script>

That's it! your project is now connected to ClearlyJS!

Another way to import ClearlyJS

You can also import ClearlyJS directly from your JavaScript files - just type:

index.js

import clrly from 'https://cdn.jsdelivr.net/gh/negevvo/ClearlyJS@main/ClearlyJS/clearly.js'

Important: This method will only work if you import your JavaScript file as a module:

index.html

<script src="index.js" type="module"></script>

This method to import ClearlyJS will be available soon

2. Optional: Set-up Babel and JSX

JSX lets you write HTML code - and use it in React and in ClearlyJS! JSX files need to be compiled by a JavaScript compiler named Babel in order to use them.

Download NodeJs and npm here

After downloading, go to your terminal and type:

npm install @babel/cli @babel/core @babel/plugin-transform-react-jsx

(this will download Babel and the React JSX plugin)

That's it!

Compile a .jsx file

On Windows

You can use an automated tool to start compiling faster:

Download the zip file below, extract it and drag the .bat file to your project's folder and run it. you'll be asked to specify the folder with the jsx files and the output folder. Closing the window will stop the compilation. You can edit the batch file to match your needs.

909B

compile-jsx.zip

archive

On any other OS (including Windows ;)

First, extract the zip file below and put the .babelrc file in your project.

220B

babelrc.zip

archive

Open your terminal and type:

npx babel JSX-FILE-OR-FOLDER --watch --out-dir OUTPUT-FOLDER --out-file-extension .js --ignore "$folder/**/*.js"

(replace the JSX-FILE-OR-FOLDER and OUTPUT-FOLDER parameters with your directories)

Closing the terminal window will stop the compilation.

3. Hello World

We'll now make a simple Hello World app.

Start a new project with two files: index.html and index.js (or index.jsx).

In the index.html file - we'll import ClearlyJS then import our script as defer:

index.html

<script src="https://cdn.jsdelivr.net/gh/negevvo/ClearlyJS@main/ClearlyJS/clearly.js"></script>
<script src="index.js" defer></script> <!-- Remember that if you use JSX, you need to import the compiled js file! -->

In the index.js we'll write:

index.js

index.js

clrly.new("h1", {innerHTML: "Hello World!"}) // the first parameter is the element's type, then the element's attributes

index.jsx

index.jsx

<h1>Hello World!</h1>

Try running the HTML file.