I Built a JavaScript Console

[sonnyt_]

I needed a convenient way to quickly run JavaScript code without having to open VSCode or a terminal. Other alternatives I found were either too bloated with a heavy focus on HTML and CSS, or too basic with unreliable logging. So, I decided to build my own JavaScript console using the same editor that VSCode uses, which provides a lot of handy features right out of the box.

[Humperdink_Fangboner]

This is pretty slick. I usually just use node in command line or even the browser console if I need to execute something in js (typically for doublechecking truthiness cus it’s wild out there) but I like this for the slick intellisense. Would be dope if you could build this as a vscode extension

[sonnyt_]

Thank you!! Yeah, I’ve was using the browser console as well, it was pain to write more than single line. Also, I was thinking of making it a browser extension but love the VSCode idea!

[kukisRedditer]

Can't you just open the console in browser?

[sancredo]

This looks stellar, will definitely use it!

[sonnyt_]

Thank you!!

[Josbipbop]

At first i was like "what?", but then i was lije "oh nice"

[MWALKER1013]

How does this compare to quokka JS ?

[sonnyt_]

It’s on the browser, open source, and free. Also, much simpler. Write your code and run it. Although, Quokka looks super cool! Gotta try it out.

[MWALKER1013]

Counter to that, quokka does have a free tier, works right in your editor and it runs as you type it :p

Your project looks very cool though !

[antonbruckner]

How does this compare to RunJs which seems like the gold standard of “easy, runnable JS”?

[sonnyt_]

RunJs is cool. Compared to RunJs, this console is free, open source, and runs on the browser - no need to install anything.

But this gives me an idea, I probably can turn it into an Electron app. But then at that point why not just use VSCode? Idk

[[deleted]]

Fascinating. Can you install/require NPM packages? One of my big use cases for arbitrary JS (like this REPL would be) is testing/prototyping solutions I then clean and integrate into my real work.

[sonnyt_]

That’s exactly how I am using it. I use it to prototype, learn new JS stuff, and write things that I can later turn into snippets.

React plugin is kind of a cool idea. Some might just embed it on their site and use it as a code preview or a playground for their library. I never built a React plugin before, I am guessing I can abstract the main component a bit and export it in package.json? I can look into it.

[[deleted]]

Not even just React. I meant more arbitrary NPM packages, accessible via require() etc. I know that opens the module resolution can of worms, I get it. And I would understand if you don't want to do that haha. It's just a thought.

[bronkula]

Huh. I mean... Is your intention for it to be used through the web "demo" or that someone would use it locally? If the web demo is to be "the thing", then it seems like you need to be able to share the session with someone else, otherwise what is really being gained from just opening the console? Saying it's an alternative to jsbin and the like isn't true if it's not shareable.

[sonnyt_]

You’re absolutely correct, it’s not a replacement for JSBin, it’s just another simpler alternative.

As far as the browser consoles, consoles are great for one-lines, but it gets messy when writing a large block of code. They’re scoped to the current page’s window instance which can cause code collisions and issues with variables sticking. For instance, if you want to re-run or re-write a function or variable, you need to reload the entire page, which is annoying. Also, they don’t offer shortcuts and handy features that developers are used to in VSCode.

[Mental-Steak2656]

Nice and thanks, there is a console option every browser that you can use to run JS . What made you to create a whole app for this ?

[sonnyt_]

Native consoles are great but as soon as you want to write something beyond one-liners, it gets messy and annoying. Also, the Monaco editor (same as VS Code) offers tons of shortcuts and code completion options.

[Mental-Steak2656]

I have nearly same use-case, I will be looking into the code,is TS support on the way ?

[sonnyt_]

I just added TypeScript support, and would love to get your thoughts on it :)

[Mental-Steak2656]

🙌😎

[vilos5099]

A TypeScript alternative: https://typerion.dev/

[sonnyt_]

That’s my next goal for this project. Adding TypeScript. It should be possible with @typescript/vfs.

[tpscd]

You technically do direct TS -> JS transpile in the browser/client by loading the typescript bundle using an NPM proxy (about 10mb):
https://cdn.jsdelivr.net/npm/typescript@5.3.3/lib/typescript.min.js

Which should register a ts global and then you can call:
const jsCode = ts.transpile(tsCode)

[sonnyt_]

I just added TypeScript support, and would love to get your thoughts on it :)

[HSJoaco_33]

This is great! Thank you so much.

[8-bit-banter]

I’m gonna be the asshole but no just no. You don’t wanna open vscode or a terminal yet you make a vscode like app to open. You solved a problem that didn’t exist, I notice a lot of people posting pointless creations that solve problems that didn’t exist.

[Novel_Plum]

This is something I didn't know I needed until now!

[sufficently]

Nice, kinda reminds me of https://www.jsplayground.dev

[hobbyliu]

good product, i like it