https://github.com/hari7261/codecanvas
A sleek and responsive web-based code editor supporting JavaScript and Markdown, featuring dark mode, file management, and real-time editing. Perfect for developers looking for a lightweight, modern coding experience!
https://github.com/hari7261/codecanvas
codecanvas css fullstack hari7261 html js project-repository reactjs text-editor wordpad
Last synced: 3 months ago
JSON representation
A sleek and responsive web-based code editor supporting JavaScript and Markdown, featuring dark mode, file management, and real-time editing. Perfect for developers looking for a lightweight, modern coding experience!
- Host: GitHub
- URL: https://github.com/hari7261/codecanvas
- Owner: hari7261
- Created: 2024-12-13T06:09:58.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-13T06:14:13.000Z (7 months ago)
- Last Synced: 2025-02-08T23:24:00.141Z (5 months ago)
- Topics: codecanvas, css, fullstack, hari7261, html, js, project-repository, reactjs, text-editor, wordpad
- Language: TypeScript
- Homepage: https://text-code-canvas.vercel.app
- Size: 180 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 CodeCanvas
**CodeCanvas** is a modern, responsive, and user-friendly code editor built with React, TailwindCSS, and CodeMirror. Designed to support JavaScript and Markdown, it offers a sleek and intuitive interface with dark mode and file management functionalities. This project is ideal for developers seeking a lightweight and customizable coding experience directly in their browser.
## ✨ Features
| Feature | Description |
|------------------------|-----------------------------------------------------------------------------|
| 📱 **Responsive Design** | Fully responsive layout for a seamless experience on desktop, tablet, and mobile devices. |
| 🌗 **Dark Mode** | Toggle between light and dark themes for optimal comfort and usability. |
| 💻 **Language Support** | Easily switch between JavaScript and Markdown editing modes. |
| 📁 **File Operations** | Import, export, and save files locally for streamlined file management. |
| ⌨️ **Keyboard Shortcuts**| Save your work quickly with `Ctrl/Cmd + S`. |
| 🛠️ **Elegant Toolbar** | Classic, accessible toolbar with intuitive buttons for core actions. |
## 🌐 Demo
Check out the live demo of CodeCanvas [here](#) (Add your deployment link).
## 🔧 Technologies Used
- **React**: For building the user interface components.
- **TailwindCSS**: For responsive and modern styling.
- **CodeMirror**: For a powerful, extensible code editor.
- **Lucide Icons**: For clean and lightweight icons in the toolbar.
## 🚀 Installation
Follow these steps to get started with CodeCanvas:
1. Clone the repository:
```bash
git clone https://github.com/your-username/codecanvas.git
```
2. Navigate to the project directory:
```bash
cd codecanvas
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
5. Open your browser and navigate to `http://localhost:3000` to view the application.
## 📝 Usage
1. Use the **Toolbar** at the top of the editor to:
- 🌐 Switch between JavaScript and Markdown modes.
- 🌗 Toggle between light and dark themes.
- 💾 Save your work locally with a single click.
- 📤 Import and 📥 export files seamlessly.
2. Start coding in the editor area. Your changes will automatically update in real-time.
## 📂 Folder Structure
The project has the following structure:
```
codecanvas/
├── src/
│ ├── components/
│ │ ├── Editor.tsx # Editor component
│ │ ├── Toolbar.tsx # Toolbar component
│ ├── App.tsx # Main app component
│ ├── index.tsx # Entry point
│ └── styles/ # TailwindCSS configuration
├── public/ # Public assets
├── package.json # Project dependencies
└── README.md # Project documentation
```
## 📂 File Management
| Action | Description |
|---------------|---------------------------------------------|
| 💾 **Save** | Click the save button or use `Ctrl/Cmd + S` to store your work in the browser’s local storage. |
| 📤 **Export** | Download your code as a `.js` or `.md` file. |
| 📥 **Import** | Upload `.js`, `.md`, or `.txt` files to edit directly in the browser. |
## ⌨️ Key Commands
- **Save**: `Ctrl/Cmd + S` to quickly save your code.
- **Import File**: Use the file upload button in the toolbar.
- **Export File**: Use the download button to export your work.
## 📜 License
This project is licensed under the [MIT License](LICENSE). You are free to use, modify, and distribute this software as per the license terms.
---
🚀 **Enjoy using CodeCanvas!** If you have any questions or issues, feel free to reach out.