A responsive CodePen clone built using React. The @uiw/react-codemirror
package is reponsible for building & customising the code editors. The app is divided into two sections, editor & simulator containers. The editor container consists of 3 editors each for HTML, CSS & JS. The simulator is an iframe view, where the code from the editors, compile down to render website inside it.
- Write and edit HTML, CSS, and JavaScript code in a live editor.
- See the live preview of your code output.
- Responsive design for both desktop and mobile devices.
- Theme for the app is inspired by MacOS.
- Editors have 3 toolbar buttons - Reset, Save & Expand/Collapse.
- 🔴 Reset on click, reveals a dropdown, from where the user can clear the editor or reset it to the default template.
- 🟡 Save is used to save the contents of the editors as respective(.html/.css/.js) files.
- 🟢 Expand/Collapse as the name suggests, expands or collapses the editor.
- Contents of the editors are synced to local storage 😮 to prevent data loss on page reload.
- Each Re-render happens every 250ms to efficiently render content instead of re-rendering on each keystroke on the editors.
- Cool animations 🎭 and effects make the user experience awesome.
👉🏼 Clone this repository to your local machine:
git clone https://github.com/chiraag918/codepen-clone.git
👉🏼 Navigate to the project directory:
cd codepen-clone
👉🏼 Install the required dependencies:
npm install
👉🏼 Build using:
npm run build
👉🏼 Start the app using:
npm start
Open your browser and visit http://localhost:3000 to access the CodePen clone.
React JS(UI), @uiw/react-codemirror, sass, npm
For local developments, the application requires NodeJS (version 20.5.0). To make sure this is available on the local machine, try running the following command:
$ node --version
v20.5.0
![Screenshot 2023-08-22 at 9 53 17 PM](https://private-user-images.githubusercontent.com/39455997/262418834-f31711aa-7154-4540-bace-df672cdb469d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNTY1OTMsIm5iZiI6MTcyMDE1NjI5MywicGF0aCI6Ii8zOTQ1NTk5Ny8yNjI0MTg4MzQtZjMxNzExYWEtNzE1NC00NTQwLWJhY2UtZGY2NzJjZGI0NjlkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzA1VDA1MTEzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZjMjk5ZDU5NjNjOWI3ZjkzNjgwYTM1ZmQ1ZTI0NjNkNmJiMTYxMjYzY2FmNzU4ZjY1Njc5MjlhNzliZTYwNGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.4aKLhgGq2MRVWraCFqgWI2sk4qnDeSDDp3AuJvX9nTM)
![Screenshot 2023-08-24 at 4 01 04 AM](https://private-user-images.githubusercontent.com/39455997/262813617-ebf86203-1e0f-4510-aff2-d02a20b9e9f6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNTY1OTMsIm5iZiI6MTcyMDE1NjI5MywicGF0aCI6Ii8zOTQ1NTk5Ny8yNjI4MTM2MTctZWJmODYyMDMtMWUwZi00NTEwLWFmZjItZDAyYTIwYjllOWY2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzA1VDA1MTEzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBkODYwNDFjNDY0NTkzNTkzN2VkMzBiYjZmNDllZTc1MzMxNTUxZTE3Mjc2MGYyYmJlZTQ3ZDI4YTc3ODdlZmMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5DBLVM11RZEn4gm0wAe-dS095Q-UKGjdr5NvEvGWVNY)
Contributions to improve the application are welcome. To contribute, follow these steps:
- Fork the repository on GitHub.
- Create a new branch with a descriptive name for your feature or bug fix.
- Make your changes and commit them with a clear message.
- Push your branch to your forked repository.
- Open a pull request to the main repository, explaining the changes you made.