Skip to content

Real-time web app for editing HTML, CSS, and JavaScript code with live preview and customizable background colors for code editors.

Notifications You must be signed in to change notification settings

Rishabh6306/Dynamic-Code-Previewer-With-React

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Code Editor Website

This is a simple web application that allows you to edit and run HTML, CSS, and JavaScript code in real-time with a live preview. You can also change the background color of each code editor to customize your coding environment.

Getting Started

Follow the instructions below to get the project up and running on your local machine.

Prerequisites

Make sure you have the following software installed on your computer:

  • Node.js
  • npm (Node Package Manager)

Installation

``

  1. Clone the repository to your local machine: git clone https://github.com/your-username/code-editor-website.git

  2. Change into the project directory: cd code-editor-website

  3. Install the dependencies: 'npm install'

  4. To start the development server and launch the application in your default web browser, run: npm start

The application should now be accessible at http://localhost:3000.

Features

  • Edit HTML, CSS, and JavaScript code in separate code editor boxes.
  • Customize the background color of each code editor.
  • See the live preview of your code output on the right side of the screen.
  • Run the code to see the changes instantly in the live preview.

How to Use

  1. Edit the HTML, CSS, and JavaScript code in their respective code editor boxes on the left side.
  2. To change the background color of any code editor, click on the "Background Color Picker" icon for that code editor, choose your preferred color from the color picker, and see the changes immediately.
  3. Click on the "Run" button to execute the JavaScript code and see the live preview of your code on the right side of the screen.
  4. To clear the output area, click on the "Clear" button.

Contributing

If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request. Contributions are always welcome!

Demo

[Link to live demo of the project]

Contact

If you have any questions or would like to connect, you can reach out to me on LinkedIn:

LinkedIn Profile

Feel free to send me a message or connect with me!

About

Real-time web app for editing HTML, CSS, and JavaScript code with live preview and customizable background colors for code editors.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published