🎉 v.0.1.2

✍ Code Editor with Console

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

Important

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.2 🎉

🚀 Performance Boost & Eye Candy

• We've given our preloader a makeover and added some meta-tags (because who doesn't love a good meta-tag, right?).
• The code editor now moves smoother than a buttered-up penguin on ice.
• Buttons now have a subtle texture on hover, thanks to some box-shadow magic.

💡 Tooltip

• Hover over buttons for tooltips that pop up faster than your cat when you open a can of tuna.
• Sorry, mobile users, no tooltip for you. Your fingers aren't psychic... yet.

🧹 Winter Cleaning for Our Code

• We've Marie Kondo'd our JavaScript and CSS. If it didn't spark joy, it's gone!
• CSS is now neatly organized with comments. It's so tidy, it would make your mom proud.

⏰ Time-Stamped Console Logs

• Console logs now come with timestamps. Because even logs need to know what time it is!

🔗 URL Magic

• Switching files now updates the URL.

🍪 Farewell to Cookies

• We've said goodbye to cookies. It's a sad day for our sweet tooth, but a good day for your privacy.

🐛 Bug Squashing

• Remember that pesky JavaScript code showing up in the Preview window? We've sent it packing to its own corner. Your code is now free from uninvited guests!

So there you have it, folks! Our little code editor is growing up so fast. wipes tear They grow up so quickly, don't they?

---

✨ 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
• Project download functionality
• Fullscreen preview mode
• Responsive design for various screen sizes

---

Mobile Adaptation

Light Theme

---

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)

License

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

Credits

Created and Designed by lordofsunshine 🎨