This content originally appeared on DEV Community and was authored by Shubham Tiwari
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 - 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
08:22
MicroFrontend - React | Solid | Vue
Shubham Tiwari ・ Jan 9 '24
15:48
Codium | AI Assistant for DEVs
Shubham Tiwari ・ Jan 4 '24
This content originally appeared on DEV Community and was authored by Shubham Tiwari
Shubham Tiwari | Sciencx (2025-02-20T08:19:06+00:00) Easiest Way to Run JavaScript, HTML & CSS in One Place. Retrieved from https://www.scien.cx/2025/02/20/easiest-way-to-run-javascript-html-css-in-one-place/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.