Samuel Boadu

Posted on Nov 11

fastTinker: A Multi-Language Desktop Playground for Rapid Prototyping

#javascript #php #playground #prototyping

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

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:

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']
  }
};

Implement the execution handler in src/main.js
Add to the language selector in index.html
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

DEV Community