fastTinker in action

fastTinker: A Multi-Language Desktop Playground for Rapid Prototyping

Avatar photoByAdil

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.

fastTinker in action

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:

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

Similar Posts