MiEditor

MiEditor is a lightweight, web-based code editor that allows users to write HTML, CSS, and JavaScript in separate sections and view live output in an iframe. It’s designed to be minimalistic yet functional, providing a convenient environment for experimenting with web code in real-time.

Features

• Separate code sections for HTML, CSS, and JavaScript.
• Live preview: See instant updates as you type, with the output displayed in an iframe.
• Dark theme with carefully selected colors to enhance readability and reduce eye strain.
• Responsive design, ensuring an optimal user experience across devices of all sizes.

Preview

This is the old look of MiEditor (old version):

Update: This is the updated look of MiEditor (new version):

How to Use

1. Write HTML, CSS, or JavaScript: MiEditor provides separate text areas for HTML, CSS, and JavaScript. Simply enter your code into the respective section.

   • HTML goes into the html section.
   • CSS goes into the css section.
   • JavaScript goes into the js section.

2. See Live Output: As you write your code, the live output will be displayed in the output section on the right-hand side. The output updates automatically, so no need to manually refresh.

3. Preview and Adjust: Adjust the code in each section to see real-time changes reflected immediately in the output iframe. This is particularly useful for debugging or experimenting with web code snippets.

Getting Started

1. Clone the repository to your local machine:

   git clone https://github.com/ms-solly/myeditor.git

2. Open the index.html file in your web browser. If you're using VSCode, simply click on the Go Live button at the bottom-right corner.

   Tip: If you don't have the Live Server extension installed, you can easily get it here: Live Server Extension.

3. Start coding! Modify the code to suit your needs.

How to Contribute

We welcome contributions to MiEditor! Whether it's fixing bugs, adding features, or improving documentation, your help is appreciated. Here's how you can contribute:

1. Fork the repository and create a new branch:

   git checkout -b feature-name

2. Make your changes and ensure everything works as expected.

3. Push the changes to your fork and create a pull request:

   git push origin feature-name

4. Submit a pull request for review.

Found a bug or have suggestions? Feel free to open an issue on the repository page.