There are many code playgrounds on the internet, but very few of them support NPM packages. And if they do, they are either paid or huge. That’s why I decided to create NPM Playground.

Launch NPM Playground

NPM Package Support

You can import NPM packages using import, but not require.

import $ from "jquery";

$("body").css("background-color", "#FF0");

Multiple File Support

NPM Playground supports multiple files that can be linked using ECMAScript import / export. But be careful – you must exclude these extensions:

  • .js
  • .jsx
  • .ts
  • .tsx

So if there is a file called counter.tsx, the import must be "./counter":

index.tsx

import Counter from "./counter";

/// ....

counter.jsx

export default function Counter({count}) {
	return <h1>Counter: {count}</h1>;
}

Archivace projektu

Project was archived in favor of PlayGist. That means it won’t receive updates, but it will still be available on GitHub.