Easiest Way to Run JavaScript | Scribbler.live

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(`<p style="background:linear-gradient(90deg, violet, purple);color:#ffffff;width:fit-content; padding: 10px 36px;border-radius:20px">Hello</p>`)

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 - [e-mail]

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Button Component with CVA and Tailwind

Shubham Tiwari ・ Feb 12 '24

#nextjs #react #webdev #typescript

08:22

MicroFrontend - React | Solid | Vue

Shubham Tiwari ・ Jan 9 '24

#tutorial #webdev #beginners #learning

15:48

Codium | AI Assistant for DEVs

Shubham Tiwari ・ Jan 4 '24

#vscode #learning #tutorial #beginners

05:25

Zustand - A beginners guides

Shubham Tiwari ・ Nov 21 '23

#webdev #tutorial #react #javascript