Skip to content

v.0.1.0

Choose a tag to compare

View all tags
@lordofsunshine lordofsunshine released this 05 Dec 16:04
· 90 commits to main since this release
v.0.1.0
2a4ccac
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.1.0)

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

  • Introduced a feature to view your result on a separate website. Now, all changes in your code automatically synchronize with your personal site, allowing you to see the result in full-screen mode.
  • Completed a full transition from local storage (localStorage) to the use of Cookie files for more reliable data preservation.
  • Implemented cosmetic improvements to the interface, including updated icons and minor bug fixes.

✨ 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
  • Ace Builds
  • JSZip
  • JS-Cookie
  • gsap
  • File Saver

License

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

Credits

Created by lordofsunshine

Assets 2
Loading