DEV Community: Samuel Boadu

fastTinker: A Multi-Language Desktop Playground for Rapid Prototyping

Samuel Boadu — Tue, 11 Nov 2025 10:47:41 +0000

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

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

Samuel Boadu — Mon, 03 Nov 2025 18:34:59 +0000

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

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

7. Auto-Logging

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

const result = someFunction();
result; // Automatically logged!

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

Linux (.deb Package)

sudo dpkg -i jstinker_1.0.0_amd64.deb

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

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));

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

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

Free Dashboard Template for Laravel React Development

Samuel Boadu — Mon, 27 Nov 2023 11:02:33 +0000

About LaraReact Dashboard Template

LaraReact Dashboard Template is a cutting-edge Laravel Inertia and React-based web application template inspired by Sakai PrimeReact. Designed for crafting modern dashboards, it offers a robust foundation with features like:

Laravel-based backend
Inertia.js for seamless SPA development
React for dynamic user interfaces
PrimeReact UI components for a polished look
Sakai-react Free React Admin Template CSS
Vite for a rapid development experience

Perfect for Laravel developers seeking a head start with a template incorporating these technologies.

AppConfig: Tailor the Dashboard to Your Needs

The AppConfig component in LaraReact provides a user-friendly interface to configure layout settings. Tailor the dashboard to your preferences with options like scale, menu type, input style, ripple effect, and a variety of themes.

Usage: Accessing AppConfig on the Dashboard

Navigate to the Dashboard: Go to the dashboard section of your LaraReact application.
Locate AppConfig Button: Look for the configuration button represented by a cog icon, usually positioned in the right-center of the screen.
Click AppConfig Button: Open the configuration sidebar.
Adjust Configuration Options: Explore and modify options like scale, menu type, input style, ripple effect, and themes.
Preview Changes: Visualize real-time changes as you adjust the configuration options.
Apply Theme: For theme changes, click on the theme button of your choice to apply the selected theme and color scheme to the entire application.
Close AppConfig Sidebar: After configuring the settings, close the AppConfig sidebar by clicking outside or using the provided close button.

Themes: Choose Your Look

LaraReact offers a variety of themes categorized by design systems. Choose from options like Bootstrap, Material Design, Tailwind, Fluent UI, and more. Each theme provides a unique look and feel to suit your project.

Integration and Setup

For detailed setup instructions and configuration steps, please refer to the LaraReact GitHub repository. Clone the project and follow the guidelines to get started with LaraReact.

Contribution

LaraReact is an open-source project, and contributions are welcome. If you encounter any issues or have suggestions, please submit an issue on GitHub.

Conclusion

LaraReact empowers Laravel developers with a feature-rich dashboard template that combines the strengths of Laravel, Inertia.js, React, and PrimeReact. The AppConfig component allows easy customization, ensuring your dashboard aligns perfectly with your project requirements. Explore the themes, fine-tune the settings, and kickstart your development journey with LaraReact.

Your contributions and feedback are valuable as LaraReact continues to evolve. Feel free to contribute on GitHub and share your experiences with the LaraReact community.

Do you find it DIFFICULT to take regular breaks behind your laptop?

Samuel Boadu — Wed, 22 Nov 2023 13:58:19 +0000

In today's fast-paced, hyperconnected world, it's easy to get caught up in the whirlwind of work, spending hours glued to our computers without taking a proper break. This relentless focus can lead to burnout, fatigue, and decreased productivity. Fortunately, there are tools and techniques available to help us break free from this cycle and prioritize our well-being.

Workrave: A Tool for Healthier Work Habits:

Workrave is a free and open-source software designed to promote healthier work habits by reminding users to take breaks at regular intervals. Here's how it can assist workers in maintaining a balanced work routine:

Customizable Break Reminders:
Workrave allows users to customize break reminders based on their preferences. Whether it's a micro-break for stretching every few minutes or a longer break every hour, users can tailor the reminders to suit their work style.

Micro-breaks and Rest Breaks:
The software encourages both micro-breaks, which are short pauses to stretch or relax for a few seconds, and rest breaks, which are more extended breaks to step away from the computer. This approach helps in preventing both physical and mental fatigue.

Exercises:
Workrave includes exercises specifically designed to reduce strain. These exercises guide users through body movements and focus changes to alleviate strain caused by prolonged screen time.

Statistics and Reporting:
Workrave provides valuable insights into users' work habits by collecting statistics on mouse and keyboard usage. Users can review these statistics to gain a better understanding of their work patterns and make informed decisions about optimizing their routines.

Conclusion:

In the era of remote work and digital collaboration, prioritizing the well-being of workers is essential. Workrave serves as a valuable ally in promoting a balanced work routine by incorporating regular breaks, preventing burnout, and addressing health concerns associated with prolonged computer use. As we strive for productivity, let's not forget the importance of taking breaks—our bodies and minds will thank us for it in the long run.

So, why not take a moment, install Workrave, and embark on a journey towards a healthier and more sustainable work routine? Your well-being is an investment that pays dividends in both personal and professional aspects of life.

EXCEPTION (CLASS .... NOT FOUND) while DEBUGGING

Samuel Boadu — Fri, 25 Nov 2022 17:07:55 +0000

The art of debugging is very important as it could save you lot of time and headaches. Tools used

Laravel
Visual Studio Code(VSCode)
Xdebug
PHP Debug extension for Visual Studio Code (Debug support for PHP with Xdebug)
Xdebug helper(Browser Extension)

Am going to skip the installation of this tools as once you encounter the "Class not found exception" then you have passed the installation stage.

After installing PHP debug extension and accessing its launch.json file from .vscode directory. You will see 3 different settings in configurations which you must take note of base on the name.

Without the use of imported Classes in your debugging script you are likely not to experience any issues with any of these configurations. eg. using name: Launch currently open script

For Laravel application the entry point is the index.php file which is inside the public folder. These file loads all the required files to handle request from the browser. So when we use the browser extension debug helper together with our break points we wont' have the exception: "Class .... not Found"

The Solution
Change the debug configurations option name to Listen for Xdebug

And enable debugger helper extension in the browser.

After enabling the debug helper extension and refreshing the page again we see that the page keeps loading and never stops because our first break point has been hit awaiting our next action

We can see that our $user variable is not initialized yet from the VARIABLES SECTION.

When we click on continue to the next break point, we now see the $user variable being initialize which we can now inspect.

Congratulations!!!!. Class not found exception during debugging in laravel is sorted. Let me know what you think as sharing helps us learn better.

Laravel Query nested JSON Column without case sensitivity

Samuel Boadu — Fri, 21 Oct 2022 18:34:22 +0000

Have you ever tried running a search in a nested JSON column inside a database with laravel where() method and it didn't work the way you expected it to due to case sensitivity(Example 1).

Example 1.

But Same query works when the case match(Example 2)

Example 2

To overcome this challenge I came up with this modification which allowed searching with whatever case return matching results(Example 3 and 4).

Example 3

Example 4

Hope this helps anyone who might face this challenge. Please Let me know if there are better ways to achieve this. Your contributions and criticism are welcome. Thank you for reading this far..... and just in case you need a package to handle the query for you in a laravel project then you can just run

composer require boadusamuel/search-nested-json-column

or read on the package at boadusamuel/search-nested-json-column

Laravel Tinker - SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: No address associated with hostname

Samuel Boadu — Wed, 12 May 2021 10:52:38 +0000

Read some good reviews on laravel tinker, a phpstorm plugin which I wanted to try out. I installed the plugin on my phpstorm editor and was ready to start tinkering. Was using Laradock which I had configuration for apache2, mysql, workspace and phpmyadmin. All was running well until I decided to experiment with laravel tinker.

This was the setup for mysql database connection in the .env file.

Laravel tinker could not resolve the host name -

Illuminate\Database\QueryException with message 'SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: No address associated with hostname.

After long hours of reading and searching online for a solution I couldn't get the help I needed. I later had suggestion from a senior colleague to use the IP adrress of mysql docker container. I did try and this time around the error changed to

Illuminate\Database\QueryException with message 'SQLSTATE[HY000] [2002] Connection timed out

Making progress at least. I then inspected the mysql docker container networks by using the command :
docker inspect [container id]

Had a long list of information on the container but the focus was on the Networks properties of the NetworkSettings.

I then changed the IPAddress to the Gateway which is equally an IP but directs traffic locally. Lo and Behold Laravel tinker was up and running.....

Hope this article helps someone who might find him or herself in similar situation. Comments and corrections are welcome as we all learn by building each other up.