Skip to content

v.0.1.4 ➡ January update

Choose a tag to compare

View all tags
@lordofsunshine lordofsunshine released this 23 Jan 16:23
· 59 commits to main since this release
v.0.1.4
92e7e7b
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

✍ Code Editor with Console

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

Banner

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 🌑

  • 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.

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

✨ 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

Mobile Adaptation

Banner two

Commands

Banner three

Light Theme

Banner three

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
  1. Navigate to the project directory:
 cd code-editor-with-console
  1. Install the dependencies using Yarn:
yarn install
  1. Start the development server:
yarn dev
  1. 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

License

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

Credits

Created and Designed by lordofsunshine 🎨

Special thanks: sscefalix ❤

Assets 2
Loading