Looking for an Open Source JS Editor with NPM Support?

Hey everyone!

I’m on the hunt for an open-source, browser-based JavaScript editor that supports importing npm packages. The catch is, I need something that I can embed on my site and have full control over, including the editor and the preview window.

I tried CodeSandbox, but it doesn’t give me the level of control I’m looking for.

Anyone know of any good alternatives? Thanks!

4 Likes

Heey Pedroo… Not all the cool npm packages you might use on your computer work directly in a browser editor. It’s because browsers don’t have certain tools, like “fs” for file systems, that some packages rely on.**

Basically, adding npm module support to an editor isn’t as simple as flipping a switch. It’s a bigger question about how the whole system runs. Your computer is the real powerhouse behind running those modules, not the editor itself. Think of it like online coding playgrounds (like repl.it). They offer a great environment, but they have limitations compared to your full computer setup. Do you really want to try to build something as complex as that into your editor?

2 Likes

Hey! You might want to check out Monaco Editor (the editor that powers VS Code). It’s pretty flexible and you can integrate it with npm packages. It’s not a full-blown IDE like CodeSandbox, but it should give you the control you need.

2 Likes

If you’re okay with a little extra setup, Ace Editor is another solid option. It’s super customizable, and with some tweaking, you can get it to work with npm packages. You’ll have to set up the environment yourself though.

1 Like

I’d second Monaco, especially if you’re already familiar with VS Code. It’s not a full IDE out of the box, but it’s really powerful once you dig into the API. Plus, you can embed it pretty easily!

Have you looked into StackBlitz? It’s a bit like CodeSandbox but more lightweight, and you can embed it with quite a bit of customization. Not 100% sure about the level of control, but worth a shot!