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 startOpen 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
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.