WizardJS

The Ultimate JavaScript & TypeScript Playground

Open source alternative to RunJS

---

Key Features

Complete Language Support

• Native JavaScript - Full ES2020+ execution
• Official TypeScript - Microsoft transpiler integrated
• Automatic detection of syntax
• Real-time transpilation without configuration

Advanced Customization

• Multiple themes: GitHub Dark, Tomorrow Night Bright
• 5 professional fonts: JetBrains Mono, Fira Code, Consolas, Monaco, Menlo
• Multi-language: English & Spanish
• Persistent configuration in real-time

World-Class Editor

• Monaco Editor (same as VS Code)
• Complete IntelliSense with tooltips and autocompletion
• Advanced syntax highlighting
• Real-time parameter suggestions
• Bracket pair colorization and indentation guides

Intelligent Execution

• Smart auto-run - Only executes complete code
• Security system with timeouts and limits
• Complete sandbox for isolated execution
• Detailed timestamps and log types

User Experience

• Complete file management (New, Open, Save)
• Professional keyboard shortcuts
• Intuitive settings panel
• Responsive and modern interface

Quick Start

Prerequisites

• Node.js (version 18 or higher)
• npm (included with Node.js)
• macOS, Windows, or Linux

Installation

# Clone the repository
git clone https://github.com/FranciscoJBrito/WizardJS.git
cd WizardJS

# Install dependencies
npm install

# Run in development mode
npm run dev

Build

# Create executable for your platform
npm run make

# Package only (without installer)
npm run package

# Clean build files
npm run clean

Immediate Usage

1. Open WizardJS and you'll see the editor ready
2. Write code in JavaScript or TypeScript
3. Automatic execution when code is complete
4. Customize themes, fonts and language in Settings

Keyboard Shortcuts

Action	Shortcut	Description
Execute	⌘R / Ctrl+R	Runs the current code
Save	⌘S / Ctrl+S	Saves the current file
New	⌘N / Ctrl+N	Creates a new file
Open	⌘O / Ctrl+O	Opens an existing file
Clear	⌘K / Ctrl+K	Clears the output
Settings	⌘, / Ctrl+,	Opens the settings panel

Technology Stack

Frontend & UI

• Monaco Editor - VS Code editor integrated
• TypeScript - Main project language
• CSS3 - Modern and responsive styles
• Font Awesome - Professional iconography

Build & Development

• Electron - Cross-platform framework
• Electron Forge - Complete toolchain
• Vite - Ultra-fast build tool
• ESLint - Code linting and quality

Transpilation & Execution

• TypeScript Compiler - Official transpiler
• Monaco TypeScript Worker - IntelliSense
• Sandbox Execution - Secure execution
• Auto-run Intelligence - Complete code detection

Project Structure

wizardjs/
├── src/
│   ├── main.ts          # Electron main process
│   ├── renderer.ts      # Interface logic
│   ├── preload.ts       # Preload script
│   └── index.css        # Application styles
├── index.html           # Main HTML structure
├── package.json         # Dependencies and scripts
└── forge.config.ts      # Electron Forge configuration

Contributing

Contributions are welcome! If you want to contribute:

1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is under the MIT License. See the LICENSE file for more details.

Acknowledgments

• Inspired by RunJS - The commercial playground reference
• Built with Monaco Editor - VS Code editor
• Powered by Electron - Cross-platform framework
• TypeScript - Official transpiler integrated
• Electron Forge - Complete toolchain

---

Do you like WizardJS?

Give the repository a star!

---

Community

Found a bug? → Report an issue

Have an idea? → Start a discussion

Want to contribute? → Contribution guide

Project Status

Made with love by Francisco Brito