Monaco Editor Playground

A web-based code playground featuring the Monaco Editor, allowing you to write and preview HTML, CSS, and JavaScript in real time.

Features

• Tabbed Monaco Editors: Write HTML, CSS, and JS in separate Monaco Editor instances.
• Preview: See your code rendered in an iframe beside the editor.
• Theme Toggle: Switch between dark and light themes. The UI and editor update together.
• Copy Code: Copy the full HTML output (including your CSS and JS) with one click or Alt+C.
• Run in New Window: Open your code in a new browser window for a larger preview.

Usage

1. Write Code:
   Use the HTML, CSS, and JS tabs to write your code.

2. Preview:
   Click Run or press Alt+Enter to update the preview.

3. Copy:
   Click Copy or press Alt+C to copy the full HTML output.

4. Theme:
   Click Dark/Light to toggle the theme.

5. New Window:
   Click Run in a new window to open your code in a separate browser window.

Keyboard Shortcuts

• Run: Alt+Enter
• Copy: Alt+C

Dependencies

• Monaco Editor