Easiest Way to Run JavaScript, HTML & CSS in One Place

Hello my frontend developer friends, today i will be discussing one of the best tools i have found on the web - scribbler.live, a JavaScript Notebook, Online Compiler & Editor. Let's dive in Let's start with javascript itself, i mean who won't love javascript? Every web developer saviour, protector and supporter is javascript. So, there should be an easy way to run javascript easily without much manual configuration, right?. That is why, we have 8scribbler.live* to help you run the javascript and leave the configuration and everything to scribbler.live Features Open and free, so no login is required. Easy to use, could be run without npm, node or pnpm. Works on any modern browser and responsive for mobile devices. Can load third party libraries without any manual installation. Support HTML, CSS and Markdown as well. Has github integration, it means we can push and pull from github directly. Use cases Run code snippets of javascript individually. Run test cases for your code snippets. Could test APIs, UI and do unit tests, share test cases and results with anyone on the internet. Train AI/ML models with tensorflow and brain.js libraries. Perform scientific computations with math and scientific libraries. Run UI related snippets using HTML and CSS. and much more... Example notebooks Printing a result using show method scrib.show("Scribller is awesome!!") If-else conditional function superHero(human){ if(human === "clark"){ scrib.show("Superman") } else { scrib.show("Batman") } } superHero("bruce") // Batman Rendering HTML and CSS scrib.show(`Hello`) Plotting a graph let id=range(1,10,0.01).map(Math.sin).plot(); API Testing async function testAPI(apiUrl) { try { // Make HTTP GET request to the API endpoint const response = await fetch(apiUrl); // Parse JSON response const userData = await response.json(); // Validate response data if (response.ok) { scrib.show('User data:', userData); } else { scrib.show('Error:', userData.error); } } catch (error) { scrib.show('Error fetching user data:', error); } } // Call the function to test the user API. Use your own API here const apiUrl = 'https://jsonplaceholder.typicode.com/users'; // Example API endpoint URL testAPI(apiUrl); That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website. You can contact me on - Instagram - https://www.instagram.com/supremacism__shubh/ LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/ Email - shubhmtiwri00@gmail.com You can help me with some donation at the link below Thank you

Feb 20, 2025 - 09:28

Easiest Way to Run JavaScript, HTML & CSS in One Place

Hello my frontend developer friends, today i will be discussing one of the best tools i have found on the web - scribbler.live, a JavaScript Notebook, Online Compiler & Editor.

Let's dive in

Let's start with javascript itself, i mean who won't love javascript?
Every web developer saviour, protector and supporter is javascript. So, there should be an easy way to run javascript easily without much manual configuration, right?. That is why, we have 8scribbler.live* to help you run the javascript and leave the configuration and everything to scribbler.live

Features

Open and free, so no login is required.
Easy to use, could be run without npm, node or pnpm.
Works on any modern browser and responsive for mobile devices.
Can load third party libraries without any manual installation.
Support HTML, CSS and Markdown as well.
Has github integration, it means we can push and pull from github directly.

Use cases

Run code snippets of javascript individually.
Run test cases for your code snippets.
Could test APIs, UI and do unit tests, share test cases and results with anyone on the internet.
Train AI/ML models with tensorflow and brain.js libraries.
Perform scientific computations with math and scientific libraries.
Run UI related snippets using HTML and CSS. and much more...

Example notebooks

Printing a result using show method

scrib.show("Scribller is awesome!!")

If-else conditional

function superHero(human){
  if(human === "clark"){
    scrib.show("Superman")
  }
  else {
    scrib.show("Batman")
  }
}
superHero("bruce") // Batman

Rendering HTML and CSS

scrib.show(`Hello`)

Plotting a graph

let id=range(1,10,0.01).map(Math.sin).plot();

API Testing

async function testAPI(apiUrl) {
    try {
        // Make HTTP GET request to the API endpoint
        const response = await fetch(apiUrl);

        // Parse JSON response
        const userData = await response.json();

        // Validate response data
        if (response.ok) {
            scrib.show('User data:', userData);
        } else {
            scrib.show('Error:', userData.error);
        }
    } catch (error) {
        scrib.show('Error fetching user data:', error);
    }
}

// Call the function to test the user API. Use your own API here
const apiUrl = 'https://jsonplaceholder.typicode.com/users'; // Example API endpoint URL
testAPI(apiUrl);

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you