https://github.com/deadpoolx7/codepen
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/deadpoolx7/codepen
Last synced: over 1 year ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/deadpoolx7/codepen
- Owner: DeadpoolX7
- License: mit
- Created: 2024-03-22T09:56:36.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-29T06:59:07.000Z (over 1 year ago)
- Last Synced: 2025-01-29T07:28:09.416Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 149 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
.png)
## 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:
```bash
git clone https://github.com/DeadpoolX7/CodePen.git
```
### 2. Navigate to project directory
```bash
cd Quotopia
```
### 3. Install dependencies:
```bash
npm install
```
### 4. Start the server
``` bash
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.