https://github.com/s-satyajit/webcodeeditor
A web-based code editor for HTML, CSS, and JavaScript, offering live preview, and syntax highlighting. Perfect for seamless and intuitive web development!
https://github.com/s-satyajit/webcodeeditor
code-editor-online codemirror context-api material-ui opensource react
Last synced: 12 months ago
JSON representation
A web-based code editor for HTML, CSS, and JavaScript, offering live preview, and syntax highlighting. Perfect for seamless and intuitive web development!
- Host: GitHub
- URL: https://github.com/s-satyajit/webcodeeditor
- Owner: s-satyajit
- Created: 2024-11-07T03:03:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-21T19:00:42.000Z (over 1 year ago)
- Last Synced: 2025-04-05T08:54:41.348Z (12 months ago)
- Topics: code-editor-online, codemirror, context-api, material-ui, opensource, react
- Language: JavaScript
- Homepage: https://web-code-editor-sigma.vercel.app
- Size: 101 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WebCodeEditor
WebCodeEditor is an intuitive and powerful web-based code editor that supports HTML, CSS, and JavaScript. Designed to be developer-friendly, it provides an excellent platform for writing, testing, and previewing code right in the browser.
## Features
- **Live Preview**: See your HTML, CSS, and JavaScript changes in real-time.
- **Syntax Highlighting**: Enhanced code readability with syntax highlighting.
- **State Management**: Context API used for managing the state of your code.
- **User-Friendly Interface**: Simple and intuitive interface to boost productivity.
## Getting Started
### Prerequisites
Before you begin, ensure you have met the following requirements:
- Node.js and npm installed
- A web browser (Chrome, Firefox, Safari, etc.)
### Installation
1. Clone the repository to your local machine:
```bash
git clone https://github.com/s-satyajit/WebCodeEditor.git
```
2. Navigate to the project directory:
```bash
cd WebCodeEditor
```
3. Install the dependencies:
```bash
npm install
```
### Running the Application
To start the development server, run:
npm start
Open your browser and navigate to ```http://localhost:3000``` to see the app in action.
### Usage
1. **Login:** Enter your credentials to access the editor.
2. **Edit Code:** Write your HTML, CSS, and JavaScript in the provided editors.
3. **Live Preview:** The result of your code will be displayed in real-time as you type.
4. **Save Your Work:** Ensure to save your progress to avoid data loss.
## Built With
- [React](https://reactjs.org/) - JavaScript library for building user interfaces
- [CodeMirror](https://codemirror.net/) - Versatile text editor implemented in JavaScript
- [Material-UI](https://mui.com/) - A popular React UI framework for building responsive web applications
### Contributing
Contributions are welcome! Follow these steps to contribute:
1. Fork the Project.
2. Create your Feature Branch ```git checkout -b feature/YourFeature```
3. Commit your Changes ```git commit -m 'Add some feature'```
4. Push to the Branch ```git push origin feature/YourFeature```
5. Open a Pull Request.web-based code editor for HTML, CSS, and JavaScript, offering live preview, syntax highlighting, and a stunning, responsive UI. Perfect for seamless and intuitive web development! 🚀✨web-based code editor for HTML, CSS, and JavaScript, offering live preview, syntax highlighting, and a stunning, responsive UI. Perfect for seamless and intuitive web development! 🚀✨
### Contact
You can reach me via the following platforms:
- Linkedin - [Satyajit Samal](https://www.linkedin.com/in/satyajitsamal/)
- X - [satyajitstwt](https://x.com/satyajitstwt)
- Email - [satyajitsamal.workmail@gmail.com](mailto:satyajitsamal.workmail@gmail.com)