https://github.com/tanishraj/online_code_editor

A HTML + CSS + Javascript online code editor using react.
https://github.com/tanishraj/online_code_editor

Last synced: 14 days ago
JSON representation

A HTML + CSS + Javascript online code editor using react.

• Host: GitHub
• URL: https://github.com/tanishraj/online_code_editor
• Owner: tanishraj
• Created: 2024-05-17T23:38:30.000Z (8 months ago)
• Default Branch: develop
• Last Pushed: 2024-05-30T18:37:46.000Z (8 months ago)
• Last Synced: 2024-05-31T18:42:45.108Z (8 months ago)
• Language: JavaScript
• Size: 7.68 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Online Code Editor

This is an online code editor built with React, Chakra UI, and the Monaco Editor. It allows users to write, edit, and execute code in various programming languages directly in their web browser.

## Demo

![Online Code Editor Demo](./src/assets/screenshot.gif)

## Features

- **Code Editor**: A powerful code editor powered by the Monaco Editor, providing a rich editing experience with syntax highlighting, code folding, and other advanced features.

- **Language Support**: Support for multiple programming languages, including JavaScript, Python, Java, C++, and more.

- **Real-Time Execution**: Execute code directly in the browser and see the output in real-time.

- **Code Formatting**: Automatically format code with a single click, following best coding practices and conventions.

- **File Management**: Create, open, save, and manage code files within the editor.

- **Responsive Design**: The editor is fully responsive and works seamlessly across different devices and screen sizes.

## Packages Used

- **React**: A JavaScript library for building user interfaces.

- **Chakra UI**: A simple, modular, and accessible component library for React.

- **Monaco Editor**: A code editor component for React, powered by the Monaco Editor from Microsoft.

- **Axios**: A popular library for making HTTP requests from the browser.

- **Framer Motion**: A production-ready motion library for React.

## Installation

1. Clone the repository: `git clone https://github.com/username/online-code-editor.git`

2. Navigate to the project directory: `cd online-code-editor`

3. Install dependencies: `npm install`

## Usage

1. Start the development server: `npm run dev`

2. Open your web browser and navigate to `http://localhost:5173`

3. Start coding in the editor!

## Contributing

Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.

## License

This project is licensed under the [MIT License](LICENSE).