v.0.0.8

Code Editor with Console (v.0.0.8)

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

Important

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

---

v.0.0.8

• Ace Editor is now responsible for performing the functions of the code editor. The last editor contained a lot of bugs, and I decided that the editor needed to be changed.
• Several elements that were not displayed correctly in the theme have been fixed.

✨ Features

• Live HTML, CSS, and JavaScript editing
• Real-time preview of your code
• Built-in console for JavaScript output and error logging
• Theme customization (Light, Dark, and System)
• File management system
• Code 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

License

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

Credits

Created by lordofsunshine