What is PlayJS?
PlayJS is a browser-based development environment that combines the power of a terminal emulator with a live code playground. It's designed for developers who want to quickly experiment with code, test ideas, and build interactive projects without leaving their browser. With support for JavaScript, HTML, CSS, and Rust/WebAssembly, PlayJS is your complete browser IDE.
Features
- Terminal Emulator: A fully functional terminal powered by xterm.js with command history, custom commands, and a beautiful dark theme with orange accents.
- Code Playground: Write HTML, CSS, JavaScript, and Rust with syntax highlighting using CodeMirror 6. See your changes reflected instantly in the live preview pane.
- Rust/WASM Support: Full support for Rust code with syntax highlighting, ready for WebAssembly compilation and execution in the browser.
- Built-in Calculator: Perform complex mathematical calculations directly in the terminal with support for arithmetic operations, exponentiation, modulo, and calculation history.
- Command Integration: Control your code execution directly from the terminal using
commands like
run preview,save, andload. - LocalStorage Persistence: Your code and command history are automatically saved to your browser's localStorage, so you never lose your work.
- Responsive Design: Works on desktop with a split-pane view and adapts to mobile devices with a tabbed interface.
Available Commands
help Display all available commands and their descriptions.
clear Clear the terminal screen.
echo <text> Print text to the terminal.
date Display the current date and time.
history Show your command history.
run preview Execute the code in the playground and update the preview.
save <name> Save your current code with a custom name.
load <name> Load a previously saved code snippet.
snippets List all your saved code snippets.
rust Compile and execute Rust code from the Rust editor tab using the Rust Playground API.
compile Alias for the rust command - compiles and executes your Rust code.
calc <expression> Perform mathematical calculations. Supports +, -, *, /, ^ (power), % (modulo), and parentheses.
calc memory Display the current calculator memory value (last result).
calc history Show your calculation history with all previous calculations.
calc clear Clear calculator memory and history.
Tech Stack
- Astro: Static site generator for fast, optimized pages
- Svelte: Reactive UI framework for interactive components
- xterm.js: Full-featured terminal emulator for the browser
- CodeMirror 6: Modern code editor with syntax highlighting
- TypeScript: Type-safe development experience
- WebAssembly: High-performance execution of Rust code in the browser