✍ Code Editor with Console

A versatile and interactive code editor built with Vue.js, featuring live preview, console output, and theme customization.

Caution

We are currently redesigning the entire code editor to enhance your experience. Please note that your saved code will not be transferred to the new version. Make sure you have backed up your code before proceeding.

Note

Our website is available by domain ( code-editor.pro ), if the site is unavailable for the first domain, then ( click )

---

🌑 What's New: 0.1.4 (2) 🌑

Part 1

• Instead of auto-updating the code, which often produced many errors during coding, we've implemented a Run button that displays your results and code changes when clicked.
• Our editor has undergone a redesign, including rearrangement of elements and updated animations. The style and design are changing, and I'm trying to keep them updated as well. =)
• The code editor is now fully compatible with mobile devices. Due to the expanded functionality of the editor, we had to create a special menu with all the functions so that you can write code even from your phone!
• Various minor elements have been added to the site. Errors in the editor have been fixed, such as incorrect code formatting.

Part 2

• Checks and error handling were added, and the design of popup cards was updated. There are no longer any Dropdowns in the code editor. Animations were updated.
• Now the code editor AUTOMATICALLY detects the file encoding.
• Now when downloading the project as a zip archive, there will first be a folder containing your files inside.
• A new feature has been added to the code editor - auto-save when! You can enable this feature through our Terminal, using the editor autosave command.
• Correction of errors and omissions.

We are also preparing for the File Creation feature. We are already trying to implement it, but it will take more time and effort, so we've released this seemingly small update, which is quite significant for the future of the code editor. For example, in the address bar, the value /?file=script.js now includes the full file name with its format. :D

Warning

Please, in order for the update to fully initialize, please clear the Cookies in the editor, first making sure that you have saved your previous code.

---

✨ Features

• Real-time HTML, CSS, and JavaScript editing
• Instant preview of your code
• Built-in console for JavaScript output and error logging
• Theme customization (Light, Dark, and System)
• File management system
• Commands
• Project download functionality
• Fullscreen preview mode
• Responsive design for various screen sizes.

---

Installation

To set up the project locally, follow these steps:

1. Clone the repository:

git clone https://github.com/lordofsunshine/Code-Editor-with-Console.git

2. Navigate to the project directory:

 cd code-editor-with-console

3. Install the dependencies using Yarn:

yarn install

4. Start the development server:

yarn dev

5. Open your browser and visit http://localhost:5173 to see the app running.

Usage

• Edit HTML, CSS, and JavaScript code in their respective tabs
• See live updates in the preview pane
• Toggle the console to view JavaScript output and errors
• Change themes using the theme dropdown in the header
• Upload existing HTML, CSS, or JavaScript files using the upload button
• Download your project as a zip file using the download button
• Use the fullscreen button to view your preview in fullscreen mode

Dependencies

• Vue.js
• Ace Editor
• JSZip
• File Saver
• GSAP (GreenSock Animation Platform)
• Canvas Confetti

---

Mobile Adaptation

Commands

Light Theme

License

This project is open source and available under the MIT License.

Credits

Created and Designed by lordofsunshine 🎨
Special thanks: sscefalix ❤