alpha version

JavaScript, HTML, CSS
REPL & Playground

Quickly test and share your code snippets.
Ideal for learning and prototyping.

Go to the Playground

Get instant feedback as you type

The results of JavaScript expressions are displayed in real time.

TypeScript

TypeScript by default

Because we love TypeScript.
Of course, you can write in plain JavaScript as well.

Import NPM packages with ease

Just type `import smth from 'npm-package'`.
There is no step 2. Types are included.

Tailwind CSS for fast prototyping

We live in modern times, don't we?
Tailwind CSS is enabled by default. IntelliSense included.

Prettier

Prettier for code formatting

Because you shouldn't waste time on formatting while prototyping.

React

JSX/TSX is ready to go

Use React JSX for prototyping dynamic UIs.

See these and even more features in action:

Live feedback

JavaScript expressions are evaluated and their results are displayed in real time instantly. Live feedback gives you tangible productivity boost when prototyping.

You still have the power to debug your code using `` statements, thanks to the source maps, and, of course, you can use your favorite `console.log` just as you like :).

Try it yourself

NPM packages

There's no need to dance around it. Just import NPM packages in the code as you do it normally.., but only skipping the step of installing them.

Package types (if provided) will be automatically available for IntelliSense in the editor.

Try it yourself

Browser environment

No emulation, no limitations. The code is executed in the browser environment, so you have full DOM access, and all the browser APIs available.

Enjoy tinkering with HTML and see the result in the Preview window.

Try it yourself

TypeScript

TypeScript is on board. Monaco editor gives you amazing IntelliSense & code completion out of the box.

Try it yourself

Tailwind CSS

Tailwind CSS is enabled by default. It works as you expect: in TS/TSX, HTML, and CSS. Tailwind CSS IntelliSense (autocomplete, linting, hover previews) works as well.

The Preview window sets the Dark Mode for you, if you use a dark theme in the editor.

Try it yourself

JSX/TSX

You can use React JSX in the code to tinker with dynamic UIs & reactive state.

Try it yourself

Prettier

Format your code using Prettier by pressing ⌘+S.
There's nothing more to say.

Try it yourself

Themes

We all love themes. JSREPL offers some themes to choose from.

The one used here in videos is Monokai.

Security

You can share Repl with anyone. Anyone can share Repl with you. Security is important when you run untrusted code. The code evaluates in a cross-domain iframe, which do not have access to anything sensitive outside the untrusted domain.

For example, if you used your GitHub account to sign in, the code will not have access to it and its session cookies.

Made with by

Aleksei Nagovitsyn

Aleksei Nagovitsyn

Creator of JSREPL.io &
Web software engineer @hyperskill

Buy Me A Coffee
That's it! Looks interesting? Give it a try! For prototyping, for learning, or just for fun.
Go to the Playground