🚀 Online Code Editor

A beautiful and modern web-based code editor built with Nuxt 3, Tailwind CSS, and Monaco Editor. Write HTML, CSS, and JavaScript with live preview and code persistence.

✨ Features

• 🎨 Modern UI: Beautiful gradient-based dark theme with smooth animations
• 💻 Monaco Editor: Full-featured code editor with syntax highlighting, IntelliSense, and code formatting
• 👁️ Live Preview: Real-time preview of your HTML, CSS, and JavaScript code
• 💾 Auto-save: Automatic saving to localStorage every 30 seconds
• 🔄 Code Persistence: Your code is preserved between sessions
• 🎯 Split View: Side-by-side editor and preview panels
• 📱 Responsive: Works on desktop and tablet devices
• ⚡ Fast: Optimized with Vite for lightning-fast development

🛠️ Tech Stack

• Nuxt 3 - The Intuitive Vue Framework
• Tailwind CSS - A utility-first CSS framework
• Monaco Editor - The code editor that powers VS Code
• Vue 3 - The Progressive JavaScript Framework

🚀 Getting Started

Prerequisites

• Node.js 18.x or higher
• npm or yarn

Installation

1. Clone the repository:

git clone <your-repo-url>
cd code-editor

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:3000

📖 Usage

1. Select a Language Tab: Choose between HTML, CSS, or JavaScript tabs at the top of the editor
2. Write Code: Use the Monaco editor with full IntelliSense support
3. Live Preview: See your changes instantly in the preview panel on the right
4. Save Code: Click the "Save" button or wait for auto-save (every 30 seconds)
5. Run Code: Click "Run" to refresh the preview with your latest changes
6. Reset: Click "Reset" to clear all code and start fresh

🎨 Features in Detail

Monaco Editor Integration

• Full VS Code editor experience in the browser
• Syntax highlighting for HTML, CSS, and JavaScript
• IntelliSense and auto-completion
• Code formatting on paste and type
• Bracket pair colorization
• Minimap for quick navigation

Live Preview

• Sandboxed iframe for safe code execution
• Real-time rendering of HTML, CSS, and JavaScript
• Error handling to prevent preview crashes
• Console error capture and logging

Code Persistence

• Automatic saving to browser's localStorage
• Code persists across browser sessions
• Manual save option with visual feedback
• Last saved timestamp display

🏗️ Project Structure

code-editor/
├── app.vue                 # Main app component
├── components/
│   ├── CodeEditor.vue      # Main editor interface
│   ├── MonacoEditor.vue    # Monaco editor wrapper
│   ├── Preview.vue         # Live preview component
│   ├── IconHtml.vue        # HTML tab icon
│   ├── IconCss.vue         # CSS tab icon
│   └── IconJs.vue          # JavaScript tab icon
├── assets/
│   └── css/
│       └── main.css        # Global styles and Tailwind
├── public/                 # Static assets
├── nuxt.config.ts          # Nuxt configuration
├── tailwind.config.js      # Tailwind configuration
└── package.json            # Project dependencies

🎯 Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Generate static site
npm run generate

🎨 Customization

Changing the Theme

Edit tailwind.config.js to customize colors and theme:

theme: {
  extend: {
    colors: {
      // Add your custom colors
    }
  }
}

Modifying Editor Settings

Edit MonacoEditor.vue to customize editor options:

monaco.editor.create(editorContainer.value, {
  fontSize: 14,
  theme: 'vs-dark',
  // Add more options
})

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Monaco Editor - Microsoft's amazing code editor
• Nuxt 3 - For the excellent Vue framework
• Tailwind CSS - For the utility-first CSS framework

📧 Contact

For questions or feedback, please open an issue on GitHub.

---

Made with ❤️ using Nuxt 3, Tailwind CSS, and Monaco Editor