Skip to content

v.0.0.9

Choose a tag to compare

View all tags
@lordofsunshine lordofsunshine released this 01 Dec 08:19
· 95 commits to main since this release
v.0.0.9
4c7ec63
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 (v.0.0.9)

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

banner

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

  • Updating the Code Editor interface. From header to footer itself! The code editor has now become a little more modern.
  • Mobile adaptation has been improved and fixed.
  • Code optimization. Some unused variables and functions have been removed, which makes the code cleaner and more efficient.
  • Now the code is saved not in localstorage, but in Cookies! They are also pre-encrypted.
  • Now you can switch between the Editor and Preview block! Now the code or preview mode can be viewed and written more conveniently.

✨ 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

Mobile Adaptation

Banner two

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

License

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

Credits

Created by lordofsunshine

Assets 2
Loading