Skip to content

v.0.0.7

Choose a tag to compare

View all tags
@lordofsunshine lordofsunshine released this 05 Sep 15:56
· 117 commits to main since this release
v.0.0.7
146bde8
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.7)

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

✨ 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
  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
  • Monaco Editor
  • JSZip
  • File Saver

License

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

Credits

Created by lordofsunshine

Assets 2
Loading