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

[MyrinNew]

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👇👇

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











More...