A desktop JavaScript and TypeScript playground for rapid prototyping, experimentation, and learning

jsTinker is a powerful desktop application that provides an instant JavaScript and TypeScript playground environment. Write and execute code with immediate results, experiment with npm packages, and prototype ideas without leaving your desktop.

jsTinker is a desktop code playground and prototyping tool that combines the best of both worlds: Node.js backend capabilities and browser API access. Whether you're learning JavaScript, testing algorithms, prototyping features, or experimenting with npm packages, jsTinker provides a seamless coding experience right on your desktop.

Perfect for:

• 🚀 Rapid prototyping and experimentation
• 📚 Learning JavaScript and TypeScript
• 🧪 Testing code snippets and algorithms
• 📦 Trying out npm packages
• 🐛 Debugging and troubleshooting code
• 💡 Building proof-of-concepts

Keywords: JavaScript playground, TypeScript playground, desktop JavaScript editor, code playground app, Node.js playground, JavaScript scratchpad, code experimentation tool, JavaScript prototyping tool

• 🔵 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

• ⚡ Instant Execution: Run JavaScript and TypeScript code with immediate results

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

• 🌐 Hybrid Runtime Environment:

  • Full Node.js API access (file system, networking, process, etc.)
  • Browser API simulation (window, document, DOM)
  • Perfect for both backend and frontend prototyping

• 📦 NPM Package Management:

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

• 💾 Code Snippets Library:

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

• 🎨 Modern UI:

  • Two-pane layout: editor on left, output on right
  • Dark theme optimized for coding
  • Resizable panels for comfortable workflow
  • Multiple tabs for working on different files

• ✨ Advanced Features:

  • Magic comments for inline value display (// $variable)
  • Auto-logging of expressions (no need for console.log)
  • TypeScript support with real-time compilation
  • Customizable settings and preferences

• Node.js (v16 or higher)
• npm
• Linux, Windows, or macOS (depending on your target platform)

1. Clone or download this repository

2. Install dependencies:

   npm install

3. Run the application:

   npm start

jsTinker supports building for multiple platforms. The build configuration has been updated to include Windows and macOS targets. To build for a specific platform:

On Linux:

npm run build

This will create an AppImage and a .deb package in the dist/ directory.

On Windows:

npm run build

This will create an .exe installer (NSIS) and a portable .exe in the dist/ directory.

On macOS:

npm run build

This will create a .dmg installer and a .zip archive in the dist/ directory.

Note: You need to build on each platform to create packages for that platform. Cross-compilation is possible but requires additional setup.

• Click the Run button (▶) in the activity bar
• Or press Ctrl+Enter (or Cmd+Enter on Mac)

1. Open the Settings panel (click the gear icon)
2. Scroll to "NPM Packages" section
3. Click "Install Package"
4. Enter the package name (e.g., lodash)
5. The package will be installed to your user data directory

After installation, you can use the package in your code:

const _ = require('lodash');
const numbers = [1, 2, 3, 4, 5];
console.log(_.chunk(numbers, 2)); // [[1, 2], [3, 4], [5]]

1. Write your code
2. Click the Snippets button in the activity bar
3. Click "New Snippet"
4. Enter a name and save

To load a snippet, click the snippet name in the snippets panel.

Access settings by clicking the gear icon. Configure:

• General: Auto-run, line wrap, vim keys, autocomplete, etc.
• Build: TypeScript, JSX, and various JavaScript proposals
• Advanced: Expression results, loop protection, etc.

Use magic comments to display values inline:

const x = 42; // $x
const arr = [1, 2, 3]; // $arr

Note: Full magic comment evaluation is a work in progress.

jsTinker/
├── src/
│   ├── main.js          # Electron main process
│   └── preload.js       # Preload script for secure IPC
├── scripts/
│   └── renderer.js      # Renderer process (UI logic)
├── styles/
│   └── main.css         # Application styles
├── index.html           # Main HTML file
├── package.json         # Project configuration
└── README.md            # This file

• Electron: Desktop application framework
• Monaco Editor: Code editor (same as VS Code)
• Node.js: JavaScript runtime
• npm: Package management

To run in development mode with DevTools:

npm run dev

• Magic comments evaluation is basic
• TypeScript compilation happens via Monaco Editor's language service only
• Some advanced features may be added in future updates

• 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

• 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

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

jsTinker is designed as a desktop alternative to online JavaScript playgrounds, providing:

• ✅ Offline-first: Works without internet connection
• ✅ Privacy: Your code stays on your machine
• ✅ Performance: Fast execution, no network latency
• ✅ Full Node.js: Access to file system, native modules, and more
• ✅ Desktop Integration: Native desktop app experience
• ✅ No Account Required: No sign-up or login needed

Main interface showing the code editor and output panel

Example of code execution with auto-run enabled

Managing and organizing code snippets

Settings panel with customization options

• Operating System: Any modern Linux distribution (Ubuntu, Debian, Fedora, etc.)
• Node.js: Version 16 or higher must be installed on your system
  • jsTinker requires Node.js to execute user code
  • Install from nodejs.org or your distribution's package manager
  • If using nvm, ensure Node.js is accessible in your PATH
• RAM: 4GB minimum (8GB recommended)
• Disk Space: 200MB for installation

• Operating System: Windows 10 or later
• Node.js: Version 16 or higher must be installed on your system
• RAM: 4GB minimum (8GB recommended)
• Disk Space: 200MB for installation

• Operating System: macOS 10.13 or later
• Node.js: Version 16 or higher must be installed on your system
• RAM: 4GB minimum (8GB recommended)
• Disk Space: 200MB for installation

Option 1: AppImage (Recommended)

1. Download the latest jsTinker-*.AppImage from the Releases page

2. Make it executable:

   chmod +x jsTinker-*.AppImage

3. Run it:

   ./jsTinker-*.AppImage

   Or double-click it in your file manager (if AppImage integration is enabled).

Option 2: .deb Package (Ubuntu/Debian)

1. Download the .deb file from the Releases page
2. Install using:

   sudo dpkg -i jstinker_*.deb

3. Launch from your applications menu or run jstinker in terminal

Note: AppImage requires Node.js to be installed on your system for code execution. See System Requirements below.

Windows builds are not yet available. To build for Windows:

1. Clone this repository on a Windows machine
2. Run npm install and npm run build
3. The .exe installer will be in the dist/ directory

macOS builds are not yet available. To build for macOS:

1. Clone this repository on a macOS machine
2. Run npm install and npm run build
3. The .dmg installer will be in the dist/ directory

Note: Cross-platform builds require building on each target platform. Linux builds (AppImage and .deb) are available in releases, while Windows and macOS builds need to be built on their respective platforms.

See the Installation section above for development setup.

• Enhanced magic comment support
• More TypeScript features
• Code sharing and export capabilities
• Additional themes and customization
• Plugin system for extensibility

• Ensure Node.js is properly installed
• Check that npm packages are correctly installed
• Review error messages in the output panel

• Verify Monaco Editor dependencies are installed
• Check browser console for errors
• Try reinstalling dependencies: npm install

• Check internet connection
• Verify package name is correct
• Ensure sufficient disk space

MIT License - Feel free to use, modify, and distribute.

Contributions are welcome! Feel free to:

• 🐛 Report bugs and issues
• 💡 Suggest new features
• 📝 Improve documentation
• 🔧 Submit pull requests

• Built with Electron
• Uses Monaco Editor (the editor powering VS Code)
• Inspired by the need for a desktop JavaScript playground
• This project was vibe coded using AI assistance 🤖✨

• CodePen - Online HTML/CSS/JS playground
• JSFiddle - Online JavaScript playground
• Node.js REPL - Command-line Node.js interface
• Quokka - VS Code extension for live code execution

javascript typescript playground code-editor prototyping nodejs desktop-app electron monaco-editor developer-tools coding programming javascript-learning typescript-learning npm code-snippets rapid-prototyping