DEV Community

Cover image for Building jsTinker: A Free Desktop JavaScript Playground (And Why I Built It)
Samuel Boadu
Samuel Boadu

Posted on

Building jsTinker: A Free Desktop JavaScript Playground (And Why I Built It)

#electron #webdev #javascript #typescript

The Problem

Have you ever needed to quickly test a JavaScript snippet but didn't want to:

  • Fire up VS Code and create a new project?
  • Use an online editor that requires internet?
  • Pay for a premium tool like RunJS?

I found myself in this exact situation. I needed a simple, offline way to test code snippets while learning and prototyping. During my search, I stumbled across a Reddit thread titled "Anybody seen this? RunJS. Is there an alternative (besides dev tools), that doesn't cost $$?"

That thread resonated with me. There were clearly others looking for the same thing—a free, offline JavaScript playground. So I decided to build one.

Introducing jsTinker

jsTinker is a free, open-source desktop application that provides an instant JavaScript and TypeScript playground environment. It's built with Electron and Monaco Editor, giving you the power of VS Code's editor in a lightweight, focused tool.

Why jsTinker?

  • ✅ Completely free - No cost, no subscriptions
  • ✅ Offline-first - Works without internet connection
  • ✅ Privacy-focused - Your code stays on your machine
  • ✅ Fast - No network latency, instant execution
  • ✅ Full Node.js access - File system, networking, native modules
  • ✅ No account required - Just download and run

Features

1. Monaco Editor Integration

Powered by the same code editor used in VS Code:

  • Syntax highlighting for JavaScript and TypeScript
  • IntelliSense autocomplete and code suggestions
  • Error detection and inline diagnostics
  • Code formatting and refactoring support

2. Instant Code Execution

  • Auto-run mode: Code executes as you type (enabled by default)
  • Manual execution with Run button or Ctrl+Enter shortcut
  • Real-time console output and error reporting
  • Support for both synchronous and asynchronous code

3. Hybrid Runtime Environment

A unique feature that combines:

  • Node.js APIs: Full access to file system, networking, process, etc.
  • Browser API simulation: Window, document, DOM objects
  • Perfect for both backend and frontend prototyping

4. NPM Package Management

  • Install npm packages directly from within the app
  • No need to set up separate Node.js projects
  • Packages are installed to your user data directory
  • Automatically resolves and loads installed packages

5. Code Snippets Library

  • Save frequently used code snippets
  • Organize and manage your code collection
  • Quick access to your saved snippets
  • Edit and update existing snippets

6. Magic Comments

Display values inline with special comments:

const x = 42; // $x
const arr = [1, 2, 3]; // $arr
Enter fullscreen mode Exit fullscreen mode

7. Auto-Logging

Standalone expressions automatically log to the console—no need to wrap them in console.log():

const result = someFunction();
result; // Automatically logged!
Enter fullscreen mode Exit fullscreen mode

Technical Stack

  • Electron: Desktop application framework
  • Monaco Editor: VS Code's editor engine
  • Node.js: JavaScript runtime for code execution
  • npm: Package management

Installation

Linux (AppImage - Recommended) 

# Download from GitHub Releases
chmod +x jsTinker-1.0.0.AppImage
./jsTinker-1.0.0.AppImage
Enter fullscreen mode Exit fullscreen mode

Linux (.deb Package) 

sudo dpkg -i jstinker_1.0.0_amd64.deb
Enter fullscreen mode Exit fullscreen mode

Windows & macOS

Currently, Windows and macOS builds need to be built from source on their respective platforms:

git clone https://github.com/boadusamuel/jsTinker.git
cd jsTinker
npm install
npm run build
Enter fullscreen mode Exit fullscreen mode

Note: Electron apps require building on each target platform. Linux builds are ready to use, while Windows and macOS users can build from source.

System Requirements

Important: Node.js (version 16 or higher) must be installed on your system for code execution. jsTinker requires Node.js to run user code, as it spawns Node.js processes for execution.

Download Node.js from nodejs.org or install via your system's package manager.

Use Cases

For Developers

  • Quickly test code snippets without creating a new project
  • Experiment with new JavaScript features and APIs
  • Test npm packages before integrating into projects
  • Debug and troubleshoot code logic
  • Prototype features before implementation

For Learners

  • Practice JavaScript and TypeScript syntax
  • Learn by experimenting with live code
  • Understand how Node.js and browser APIs work
  • Test algorithms and data structures
  • Get instant feedback on code execution

For Educators

  • Demonstrate code concepts interactively
  • Create shareable code examples
  • Teach JavaScript/TypeScript with immediate results
  • Showcase npm packages and libraries

Quick Example

Here's a simple example to get you started:

// Welcome to jsTinker!
console.log('Hello, World!');

// Magic comments show values inline
const numbers = [1, 2, 3, 4, 5]; // $numbers

// Auto-logging: expressions are automatically logged
numbers.reduce((sum, n) => sum + n, 0);

// Install npm packages and use them
// const _ = require('lodash');
// console.log(_.chunk(numbers, 2));
Enter fullscreen mode Exit fullscreen mode

Building from Source

If you want to contribute or build for other platforms:

# Clone the repository
git clone https://github.com/boadusamuel/jsTinker.git
cd jsTinker

# Install dependencies
npm install

# Run in development mode
npm start

# Build for production
npm run build
Enter fullscreen mode Exit fullscreen mode

Challenges & Solutions

Challenge 1: Monaco Editor Loading in Production

Monaco Editor's AMD loader initially had issues with Electron's file system. Solution: Load Monaco from local files with proper path resolution and fallbacks.

Challenge 2: Node.js Detection in Packaged Apps

The app needs to find Node.js on the system, which can be tricky when packaged. Solution: Implemented a robust detection system that checks:

  • System PATH
  • Common installation locations
  • NVM paths (for developers using Node Version Manager)

Challenge 3: Code Execution Isolation

Running user code safely while maintaining Node.js and browser API access. Solution: Spawn separate Node.js processes with a hybrid environment that simulates browser APIs.

Future Plans

  • Enhanced magic comment support
  • More TypeScript features
  • Code sharing and export capabilities
  • Additional themes and customization
  • Plugin system for extensibility
  • Windows and macOS pre-built binaries

Contributing

Contributions are welcome! Whether it's:

  • 🐛 Bug reports
  • 💡 Feature suggestions
  • 📝 Documentation improvements
  • 🔧 Code contributions

Feel free to open an issue or submit a pull request on GitHub.

Acknowledgments

  • Built with Electron
  • Uses Monaco Editor (the editor powering VS Code)
  • This project was vibe coded using AI assistance 🤖✨

Try It Out!

If you're a JavaScript or TypeScript developer looking for a free, offline playground, give jsTinker a try:

🔗 GitHub: https://github.com/boadusamuel/jsTinker

I'd love to hear your feedback, feature requests, or see what you build with it!

Tags: #javascript #typescript #electron #opensource #webdev #programming #monaco-editor #desktop-app

Top comments (0)