Have you ever found yourself switching between different tools just to test a quick JavaScript snippet, then a PHP script, and back to TypeScript? I’ve been there, and that frustration led me to build fastTinker — a unified desktop playground that lets you switch between multiple programming languages seamlessly, all in one beautiful Electron app.

The Problem

As developers, we often need to:

• Quickly test code snippets without setting up a full project
• Experiment with different languages in the same workflow
• Prototype ideas rapidly without the overhead of project scaffolding
• Learn new languages with immediate feedback

Most existing tools are either language-specific or require a browser, which isn’t ideal for testing backend code or using language-specific package managers. I wanted something that combined the power of desktop applications with the flexibility of online playgrounds.

Enter fastTinker

fastTinker is an Electron-based desktop application that provides a unified coding environment for multiple programming languages. Currently supporting JavaScript/TypeScript and PHP, with an architecture designed to easily add more languages in the future.

Key Features

🚀 Multi-Language Support

Switch between JavaScript/TypeScript and PHP with a simple dropdown selector. Each language gets its own:

• Syntax highlighting
• Package manager (NPM for JS/TS, Composer for PHP)
• Runtime environment
• Default snippets

📦 Language-Specific Package Management

No more switching between terminals or tools. Install packages directly from the app:

JavaScript/TypeScript:

// Install packages via Settings > NPM Packages
const axios = require('axios');
const data = await axios.get('https://api.example.com/data');
console.log(data);

PHP:

<?php
// Install packages via Settings > Composer Packages
require_once 'vendor/autoload.php';
// Use your installed packages here

🎨 Monaco Editor Integration

Powered by the same editor that runs VS Code, you get:

• Full IntelliSense and autocomplete
• Syntax highlighting
• Error detection
• Code formatting
• Multiple tabs support

✨ Magic Comments

Inspect variable values inline while coding:

const data = { name: "fastTinker", version: "1.0.0" };
const count = 42; // $data, $count

When you run the code, the values appear inline in the output, making debugging and exploration much easier.

⚡ Auto-Run Mode

Enable auto-run to execute code as you type (with a debounce). Perfect for:

• Learning and experimentation
• Real-time feedback
• Prototyping ideas

💾 Snippets Management

Save and organize your code snippets by language. Each snippet is automatically tagged with the correct file extension and organized by language.

Architecture & Technical Implementation

fastTinker is built with Electron and uses a modular architecture that makes adding new languages straightforward.

Project Structure

fastTinker/
├── src/
│   ├── main.js          # Electron main process with multi-language execution
│   └── preload.js       # Preload script for secure IPC
├── scripts/
│   └── renderer.js      # Renderer process (UI logic with language switching)
├── styles/
│   └── main.css         # Application styles
└── index.html           # Main HTML file with language selector

Language Routing

The core of fastTinker is its language-aware execution system. IPC handlers route execution based on the selected language:

ipcMain.handle('execute-code', async (event, code, userDataPath, magicComments = [], language) => {
if (language === 'php') {
return executePHPCode(code, userDataPath, magicComments);
} else { // Default to javascript/typescript
return executeJSCode(code, userDataPath, magicComments);
}
});

Adding New Languages

The architecture is designed for extensibility. To add a new language, you need to:

1. Update the LANGUAGES configuration in src/main.js:

const LANGUAGES = {
javascript: {
id: 'javascript',
name: 'JavaScript/TypeScript',
defaultExtension: '.js',
monacoLanguage: 'javascript',
packageManager: 'npm',
extensions: ['.js', '.ts']
},
php: {
id: 'php',
name: 'PHP',
defaultExtension: '.php',
monacoLanguage: 'php',
packageManager: 'composer',
extensions: ['.php']
},
// Add your language here
python: {
id: 'python',
name: 'Python',
defaultExtension: '.py',
monacoLanguage: 'python',
packageManager: 'pip',
extensions: ['.py']
}
};

1. Implement the execution handler in src/main.js
2. Add to the language selector in index.html
3. Update default content in scripts/renderer.js

Getting Started

Installation

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

# Install dependencies
npm install

# Run in development mode
npm start

Building for Distribution

# Build for your platform
npm run build

# Outputs will be in the dist/ directory
# - Linux: .AppImage and .deb
# - Windows: .exe and portable
# - macOS: .dmg and .zip

Usage Examples

JavaScript/TypeScript Example

// Welcome to fastTinker!
// This is a JavaScript/TypeScript playground

console.log('Hello, World!');

// Try using magic comments to see values inline:
const x = 42; // $x
const y = [1, 2, 3]; // $y

// You have access to both Node.js and browser APIs
console.log('Node.js version:', process.version);

// Install NPM packages from the terminal or use require() to try loading them

PHP Example

<?php
// Welcome to fastTinker!
// This is a PHP playground

echo "Hello, World!\n";

// Try using magic comments to see values inline:
$x = 42; // $x
$y = [1, 2, 3]; // $y

// PHP version information
echo "PHP version: " . PHP_VERSION . "\n";

Why I Built This

I started with two separate projects:

• jsTinker - for JavaScript/TypeScript
• phpTinker - for PHP

Both were great on their own, but I found myself switching between them frequently. Instead of maintaining two separate codebases, I decided to merge them into a unified tool that could handle multiple languages with a clean, extensible architecture.

Roadmap

• [ ] Support for Python, Ruby, and Go
• [ ] Enhanced magic comment features
• [ ] Code sharing and export capabilities
• [ ] Plugin system for community extensions
• [ ] Theme customization
• [ ] Collaborative editing features

Contributing

Contributions are welcome! Whether you want to:

• 🐛 Report bugs
• 💡 Suggest features
• 🔧 Add support for new languages
• 📝 Improve documentation

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

Tech Stack

• Electron - Desktop application framework
• Monaco Editor - VS Code’s editor component
• Node.js - Runtime for JavaScript/TypeScript execution
• PHP CLI - Runtime for PHP execution
• NPM & Composer - Package management

Conclusion

fastTinker bridges the gap between language-specific playgrounds and full IDEs. It’s perfect for rapid prototyping, learning new languages, and experimenting with code without the overhead of project setup.

If you’re a developer who works with multiple languages or just wants a better way to test code snippets, give fastTinker a try. I’d love to hear your feedback and see what you build with it!

GitHub Repository: boadusamuel/fastTinker

---

Tags: javascript typescript php electron desktop-app playground prototyping monaco-editor developer-tools coding programming