CodePenClone

CodePenClone is a web-based code editor built with React, Tailwind CSS, and Ace Editor, allowing users to write and preview HTML, CSS, and JavaScript code in real-time.

https://github.com/user-attachments/assets/9bba76bc-fbbe-4370-be48-8720c90aa3c2

Screenshot:

Features

• Multi-Language Support

: Write and preview HTML, CSS, and JavaScript code simultaneously.

• Real-time Preview: See the output of your code update in real-time.
• Resizable Output Window: Resize the output window to view the results comfortably.
• Easy to Use: Simple interface for writing and testing code.

Installation

1. Clone the repository:

git clone https://github.com/DeadpoolX7/CodePen.git

2. Navigate to project directory

cd Quotopia

3. Install dependencies:

npm install

4. Start the server

npm run dev

Improvements that can be done:-

• Add support for additional programming languages.
• Implement user authentication to save and share code snippets.
• Add themes and customization options for the code editor.
• Adjusting iframe height feature to see complete output.