A modern, feature-rich web-based code editor built with React and Monaco Editor that provides real-time HTML, CSS, and JavaScript editing with live preview capabilities.
- Real-time Code Editing: Write HTML, CSS, and JavaScript with instant live preview
- Monaco Editor Integration: Professional-grade code editor with syntax highlighting
- Live Preview: See your code changes reflected immediately in the output panel
- Multi-language Support: HTML, CSS, and JavaScript with proper syntax highlighting
- Multiple Themes: 5 custom themes including Dark, Light, Catppuccin, Solarized, and Solarized Dark
- Responsive Layout: Adaptive design that works seamlessly on desktop and mobile devices
- Flexible Layout Options: Toggle between horizontal and vertical editor layouts
- Mobile-First Design: Tabbed interface for mobile devices with touch-friendly controls
- Local Storage: Automatic saving of code and preferences using custom React hooks
- Session Persistence: Your code and settings are preserved across browser sessions
- Manual Save: One-click save functionality with visual feedback
- Emmet Support: Built-in Emmet abbreviations for faster HTML/CSS development
- Code Formatting: Automatic formatting on paste and type
- Custom Scrollbars: Styled scrollbars for better visual consistency
- Editor Resizing: Expandable editor panels for focused coding
- React 19.1.0 - Modern React with latest features
- Monaco Editor - Professional code editor (same as VS Code)
- Vite - Fast build tool and development server
- Emmet - Code abbreviation support
- ESLint - Code linting and quality assurance
- Custom Hooks - Reusable state management with localStorage
- Responsive Design - Mobile-first approach with CSS Grid and Flexbox
The editor adapts to different screen sizes:
- Desktop: Multi-panel layout with side-by-side editors
- Mobile: Tabbed interface for optimal touch interaction
- Flexible Layouts: Toggle between horizontal and vertical arrangements
-
Clone the repository
git clone https://github.com/yourusername/codefine.git cd codefine -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to localhost:3000 (or the port specified)
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
The editor includes 5 custom themes:
- My Dark Theme - Modern dark interface
- My Light Theme - Clean light interface
- Catppuccin - Popular color scheme
- Solarized Light - Easy on the eyes
- Solarized Dark - Dark variant of Solarized
src/
├── components/
│ ├── editor.jsx # Monaco Editor wrapper
│ └── nav.jsx # Navigation and controls
├── hooks/
│ └── uselocalStorage.js # Custom localStorage hook
├── App.jsx # Main application component
└── main.jsx # Application entry point
Themes are defined in the handleBeforeMount function in App.jsx. Each theme includes:
- Color schemes for syntax highlighting
- Editor background and foreground colors
- Scrollbar styling
- Line number colors
The editor uses Monaco Editor's built-in language support. Additional languages can be added by:
- Importing language support from Monaco
- Adding language options to the editor components
- Updating the UI to include new language tabs
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
⭐ Star this repository if you found it helpful!