{"_id":"@abhiarvension/codestudio-ide","_rev":"3-cc172e5b87f3a6f902aa8ffa97e0d230","name":"@abhiarvension/codestudio-ide","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@abhiarvension/codestudio-ide","version":"1.0.0","keywords":["code-editor","ide","monaco-editor","react","vite","material-ui","browser-ide","code-sandbox","online-editor","javascript","python","syntax-highlighting","file-system","virtual-fs"],"author":{"name":"AbhiArvension"},"license":"MIT","_id":"@abhiarvension/codestudio-ide@1.0.0","maintainers":[{"name":"abhiarvension","email":"abhiasok@rocketmail.com"}],"homepage":"https://github.com/AbhiArvension/codestudio-ide#readme","bugs":{"url":"https://github.com/AbhiArvension/codestudio-ide/issues"},"dist":{"shasum":"1edd87a1124bb02daa5e253355f4d5ee61601d12","tarball":"https://registry.npmjs.org/@abhiarvension/codestudio-ide/-/codestudio-ide-1.0.0.tgz","fileCount":7,"integrity":"sha512-X27n8/vyfxavMgw1n14nrdqjS8RwAvHle/+gYKoacRZRZff0rqArzS6IjgaGEKgveHecItQEWEgG5+SHtXOGVA==","signatures":[{"sig":"MEUCIQDvrBQj6Wfi5kzkeGsaf6ZHc1x/vdsSdYtXpH+vepvfhgIgbra+j09ZKLnh6owDqmAVacQzkNsmM0wrWwW05wuivE8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":572577},"main":"./dist/index.html","type":"module","gitHead":"6d181984149b34e57ae3bfe9cbd52e9bea9a86ed","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"abhiarvension","email":"abhiasok@rocketmail.com"},"repository":{"url":"git+https://github.com/AbhiArvension/codestudio-ide.git","type":"git"},"_npmVersion":"11.5.2","description":"Browser-based VS Code-like IDE with Monaco Editor, React, and Material-UI. Features virtual file system, dark/light themes, and project export.","directories":{},"_nodeVersion":"23.3.0","dependencies":{"jszip":"^3.10.1","react":"^19.1.1","react-dom":"^19.1.1","@mui/material":"^7.3.4","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.4","@monaco-editor/react":"^4.7.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","eslint":"^9.36.0","globals":"^16.4.0","postcss":"^8.5.6","@eslint/js":"^9.36.0","tailwindcss":"^4.1.16","@types/react":"^19.1.16","autoprefixer":"^10.4.21","@types/react-dom":"^19.1.9","@tailwindcss/postcss":"^4.1.16","@vitejs/plugin-react":"^5.0.4","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.22"},"_npmOperationalInternal":{"tmp":"tmp/codestudio-ide_1.0.0_1761735430759_0.0580225096248721","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@abhiarvension/codestudio-ide","version":"1.0.1","keywords":["code-editor","ide","monaco-editor","react","vite","material-ui","browser-ide","code-sandbox","online-editor","javascript","python","syntax-highlighting","file-system","virtual-fs"],"author":{"name":"AbhiArvension"},"license":"MIT","_id":"@abhiarvension/codestudio-ide@1.0.1","maintainers":[{"name":"abhiarvension","email":"abhiasok@rocketmail.com"}],"homepage":"https://github.com/AbhiArvension/codestudio-ide#readme","bugs":{"url":"https://github.com/AbhiArvension/codestudio-ide/issues"},"dist":{"shasum":"e083ef7a42dafee3c7b0b9461aa8933ae484ed43","tarball":"https://registry.npmjs.org/@abhiarvension/codestudio-ide/-/codestudio-ide-1.0.1.tgz","fileCount":7,"integrity":"sha512-ZMcd9xm0mysv+PVDqUYqg1syjdoh+7xrA7dpHYQpKcVNf7btPyzcE3YeJ6/0vczgi5HBcjrY4RKrljHphCzlNQ==","signatures":[{"sig":"MEUCIGTPhnG5T+Aq3MpMdKQmXl3uPO0PFrxrVaCOzwys32SiAiEAxz9qenz8r4W4KBvghP8kYXkOToudPNZaMsEnCvW3dfg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":572577},"main":"./dist/index.html","type":"module","gitHead":"05d83e3a90fe444e86bdb1d85c07e934254fafe5","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"abhiarvension","email":"abhiasok@rocketmail.com"},"repository":{"url":"git+https://github.com/AbhiArvension/codestudio-ide.git","type":"git"},"_npmVersion":"11.5.2","description":"Browser-based VS Code-like IDE with Monaco Editor, React, and Material-UI. Features virtual file system, dark/light themes, and project export.","directories":{},"_nodeVersion":"23.3.0","dependencies":{"jszip":"^3.10.1","react":"^19.1.1","react-dom":"^19.1.1","@mui/material":"^7.3.4","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.4","@monaco-editor/react":"^4.7.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","eslint":"^9.36.0","globals":"^16.4.0","postcss":"^8.5.6","@eslint/js":"^9.36.0","tailwindcss":"^4.1.16","@types/react":"^19.1.16","autoprefixer":"^10.4.21","@types/react-dom":"^19.1.9","@tailwindcss/postcss":"^4.1.16","@vitejs/plugin-react":"^5.0.4","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.22"},"_npmOperationalInternal":{"tmp":"tmp/codestudio-ide_1.0.1_1761739489986_0.03911013812638675","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@abhiarvension/codestudio-ide","version":"1.0.2","description":"Browser-based VS Code-like IDE with Monaco Editor, React, and Material-UI. Features virtual file system, dark/light themes, and project export.","type":"module","main":"./dist/index.html","keywords":["code-editor","ide","monaco-editor","react","vite","material-ui","browser-ide","code-sandbox","online-editor","javascript","python","syntax-highlighting","file-system","virtual-fs"],"author":{"name":"AbhiArvension"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/AbhiArvension/codestudio-ide.git"},"bugs":{"url":"https://github.com/AbhiArvension/codestudio-ide/issues"},"homepage":"https://github.com/AbhiArvension/codestudio-ide#readme","scripts":{"dev":"vite","build":"vite build","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run build"},"dependencies":{"@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@monaco-editor/react":"^4.7.0","@mui/icons-material":"^7.3.4","@mui/material":"^7.3.4","jszip":"^3.10.1","react":"^19.1.1","react-dom":"^19.1.1"},"devDependencies":{"@eslint/js":"^9.36.0","@tailwindcss/postcss":"^4.1.16","@types/react":"^19.1.16","@types/react-dom":"^19.1.9","@vitejs/plugin-react":"^5.0.4","autoprefixer":"^10.4.21","eslint":"^9.36.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.22","globals":"^16.4.0","postcss":"^8.5.6","tailwindcss":"^4.1.16","vite":"^7.1.7"},"_id":"@abhiarvension/codestudio-ide@1.0.2","gitHead":"732fbc67dc3975fdd66918ecd721ed5f86bb665a","_nodeVersion":"23.3.0","_npmVersion":"11.5.2","dist":{"integrity":"sha512-2N/Q1D3Vmu+jYXwOpiUeGlAppYwGZo3jeqyhi9dXxHBANQGF0MPwZUBE3VytVL0D2SzieZaofXrzVkQIKNavrg==","shasum":"6ff371c77fa2bea1b4576b947844aeb757d59088","tarball":"https://registry.npmjs.org/@abhiarvension/codestudio-ide/-/codestudio-ide-1.0.2.tgz","fileCount":7,"unpackedSize":572577,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDFp2Vl1qsSslrhOTq8FRgGIaKBbnaV6fnb36KwTu7Y+gIhALCul5P9GSm8iN2mrEPWLg/FIkTcTTe/+4JKnWWwLYlz"}]},"_npmUser":{"name":"abhiarvension","email":"abhiasok@rocketmail.com"},"directories":{},"maintainers":[{"name":"abhiarvension","email":"abhiasok@rocketmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/codestudio-ide_1.0.2_1761740048701_0.08284480796619831"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-29T10:57:10.656Z","modified":"2025-10-29T12:14:09.151Z","1.0.0":"2025-10-29T10:57:10.982Z","1.0.1":"2025-10-29T12:04:50.219Z","1.0.2":"2025-10-29T12:14:08.955Z"},"bugs":{"url":"https://github.com/AbhiArvension/codestudio-ide/issues"},"author":{"name":"AbhiArvension"},"license":"MIT","homepage":"https://github.com/AbhiArvension/codestudio-ide#readme","keywords":["code-editor","ide","monaco-editor","react","vite","material-ui","browser-ide","code-sandbox","online-editor","javascript","python","syntax-highlighting","file-system","virtual-fs"],"repository":{"type":"git","url":"git+https://github.com/AbhiArvension/codestudio-ide.git"},"description":"Browser-based VS Code-like IDE with Monaco Editor, React, and Material-UI. Features virtual file system, dark/light themes, and project export.","maintainers":[{"name":"abhiarvension","email":"abhiasok@rocketmail.com"}],"readme":"# CodeStudio IDE\n\nA modern, browser-based VS Code-like IDE built with React.js for JavaScript and Python development. Features a complete file system, Monaco editor, and Material-UI design.\n\n![License](https://img.shields.io/badge/license-MIT-blue.svg)\n![React](https://img.shields.io/badge/react-18.3.1-blue.svg)\n![Vite](https://img.shields.io/badge/vite-6.0.5-purple.svg)\n\n## 🚀 Features\n\n### Core Functionality\n- **📁 Project Management**: Create new projects or upload existing folders\n- **📝 File Operations**: Create, edit, delete files and folders anywhere in the tree\n- **💾 Auto-save Warning**: Browser warns before closing with unsaved changes\n- **📦 Project Export**: Download entire project as ZIP file\n- **📄 Individual File Download**: Download any file separately\n\n### Code Editor\n- **Monaco Editor**: Same powerful editor used in VS Code\n- **Syntax Highlighting**: Support for 30+ languages (JS, TS, Python, Java, C++, Go, Rust, etc.)\n- **Code Folding**: Collapse/expand code sections\n- **IntelliSense**: Auto-completion and suggestions\n- **Multi-file Tabs**: Open multiple files with modified indicators\n- **Line Numbers & Minimap**: Professional coding environment\n\n### File Explorer\n- **Tree View**: Hierarchical folder structure\n- **Context Menu**: Right-click or three-dot menu for file operations\n- **Auto-expand**: Root folder opens automatically\n- **Visual Indicators**: Icons for files and folders\n- **Nested Creation**: Create files/folders at any level\n\n### User Interface\n- **🌓 Dark/Light Mode**: Toggle between themes\n- **Material-UI**: Modern, professional design\n- **Responsive Layout**: Adapts to different screen sizes\n- **Status Bar**: Quick access to theme and project info\n- **Clean Design**: Inspired by VS Code's interface\n\n### Virtual File System\n- **In-Memory Storage**: Create projects without server\n- **Browser Compatibility**: Works in all modern browsers\n- **Fallback Mode**: Uses standard File API for universal support\n- **No Backend Required**: Purely client-side application\n\n## 🛠️ Technology Stack\n\n- **Frontend Framework**: React 18.3.1\n- **Build Tool**: Vite 6.0.5\n- **UI Library**: Material-UI (MUI) 6.2.0\n- **Code Editor**: Monaco Editor (VS Code's editor)\n- **File Compression**: JSZip\n- **Styling**: Emotion CSS-in-JS\n- **Icons**: Material Icons\n\n## 📦 Installation\n\n### Prerequisites\n- Node.js 18+ and npm\n\n### Setup\n\n\\`\\`\\`bash\n# Clone the repository\ngit clone https://github.com/AbhiArvension/code-editor.git\ncd code-editor\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n\\`\\`\\`\n\nThe app will be available at \\`http://localhost:5173/\\`\n\n## 🎯 Usage\n\n### Creating a New Project\n1. Click \"Project\" dropdown in the top bar\n2. Select \"Create New Project\"\n3. Enter a project name\n4. Start creating files and folders\n\n### Uploading an Existing Project\n1. Click \"Project\" → \"Upload Project\"\n2. Select a folder from your computer\n3. All files will be loaded into the editor\n\n### File Operations\n- **Create File**: Hover over folder → Click ⋮ → \"New File\"\n- **Create Folder**: Hover over folder → Click ⋮ → \"New Folder\"\n- **Delete**: Hover over item → Click ⋮ → \"Delete\"\n- **Edit**: Click on any file to open it in the editor\n\n### Downloading Work\n- **Single File**: Click \"Download File\" in top bar (when file is open)\n- **Entire Project**: Click \"Download Project\" to get a ZIP file\n\n## ✅ Advantages\n\n### 1. **Zero Setup Required**\n- No installation needed\n- No server configuration\n- Works entirely in the browser\n- Perfect for quick prototyping\n\n### 2. **Cross-Platform**\n- Works on Windows, Mac, Linux\n- Mobile browser support\n- No OS-specific issues\n- Consistent experience everywhere\n\n### 3. **Universal Browser Support**\n- Chrome, Firefox, Safari, Edge\n- Fallback mode for older browsers\n- No File System Access API required\n- Works even on restricted systems\n\n### 4. **Educational Value**\n- Great for teaching programming\n- Safe sandbox environment\n- No risk of breaking system files\n- Perfect for coding bootcamps\n\n### 5. **Privacy & Security**\n- All data stays in your browser\n- No server uploads\n- No tracking or analytics\n- Complete offline functionality\n\n### 6. **Professional Features**\n- Monaco editor (industry standard)\n- VS Code-like interface\n- Syntax highlighting for 30+ languages\n- Code folding and IntelliSense\n\n### 7. **Project Portability**\n- Export projects as ZIP\n- Share via download\n- Import on any device\n- No cloud dependencies\n\n### 8. **Resource Efficient**\n- Lightweight application\n- No backend infrastructure\n- Low bandwidth usage\n- Fast load times\n\n### 9. **Development Speed**\n- Quick iterations\n- Hot module replacement\n- Instant file operations\n- No compilation delays\n\n### 10. **Customizable**\n- Open source codebase\n- Easy to modify\n- Add new features\n- Extend functionality\n\n## ⚠️ Disadvantages\n\n### 1. **Limited File System Access**\n- Cannot directly save to disk (browser limitation)\n- Must download files manually\n- No automatic sync with local filesystem\n- File System Access API only in Chrome/Edge\n\n### 2. **No Backend Integration**\n- Cannot run server-side code\n- No database connections\n- No API calls to backend services\n- Purely frontend application\n\n### 3. **No Code Execution**\n- Cannot run JavaScript/Python code\n- No terminal or console execution\n- Cannot test code directly\n- Need external tools to run programs\n\n### 4. **Memory Limitations**\n- Browser memory constraints\n- Large projects may cause slowdowns\n- Limited to ~50-100 files recommended\n- No pagination for huge projects\n\n### 5. **No Version Control**\n- No built-in Git integration\n- Cannot commit/push changes\n- No branching or merging\n- Manual project versioning only\n\n### 6. **Storage Persistence**\n- Files lost on page refresh (unless downloaded)\n- No automatic save to browser storage\n- Must download before closing\n- No cloud backup\n\n### 7. **Limited Collaboration**\n- No real-time collaboration\n- Cannot share live editing sessions\n- No multi-user support\n- Single-user only\n\n### 8. **No Debugging Tools**\n- No breakpoints\n- No step-through debugging\n- No variable inspection\n- Limited error reporting\n\n### 9. **Performance on Large Files**\n- Monaco editor struggles with 10,000+ line files\n- No file chunking\n- Full file loads into memory\n- May freeze on very large files\n\n### 10. **No Package Management**\n- Cannot install npm packages\n- No dependency resolution\n- No package.json execution\n- Manual library inclusion only\n\n### 11. **Browser Tab Dependency**\n- Closing tab loses unsaved work (with warning)\n- Cannot run in background\n- Refresh resets everything\n- No persistent workspace\n\n### 12. **Limited Language Support**\n- Syntax highlighting only\n- No language servers\n- No advanced refactoring\n- No auto-imports\n\n## 🎯 Ideal Use Cases\n\n### ✅ Best For:\n- **Learning & Education**: Teaching programming basics\n- **Quick Prototyping**: Testing small code snippets\n- **Code Sharing**: Creating shareable code examples\n- **Interviews**: Coding challenges and assessments\n- **Demos**: Showcasing code to others\n- **Restricted Environments**: Systems without admin rights\n- **Lightweight Editing**: Small projects and scripts\n\n### ❌ Not Recommended For:\n- **Production Applications**: Use real VS Code or WebStorm\n- **Large Codebases**: 1000+ files\n- **Team Development**: No collaboration features\n- **Backend Development**: Cannot run server code\n- **Full-Stack Projects**: No terminal or execution\n- **Long-Term Projects**: No persistent storage\n\n## 🔄 Comparison with Alternatives\n\n| Feature | CodeStudio IDE | VS Code | CodeSandbox | StackBlitz |\n|---------|---------------|---------|-------------|------------|\n| Browser-Based | ✅ | ❌ | ✅ | ✅ |\n| Offline | ✅ | ✅ | ❌ | ⚠️ |\n| No Installation | ✅ | ❌ | ✅ | ✅ |\n| Code Execution | ❌ | ✅ | ✅ | ✅ |\n| Version Control | ❌ | ✅ | ✅ | ✅ |\n| Free | ✅ | ✅ | ⚠️ | ⚠️ |\n| File System | ⚠️ | ✅ | ❌ | ❌ |\n| Privacy | ✅ | ✅ | ⚠️ | ⚠️ |\n| Customizable | ✅ | ✅ | ❌ | ❌ |\n\n## 🤝 Contributing\n\nContributions are welcome! Here's how you can help:\n\n1. **Fork the repository**\n2. **Create a feature branch**: \\`git checkout -b feature/amazing-feature\\`\n3. **Commit changes**: \\`git commit -m 'Add amazing feature'\\`\n4. **Push to branch**: \\`git push origin feature/amazing-feature\\`\n5. **Open a Pull Request**\n\n## 📝 License\n\nMIT License - feel free to use this project for personal or commercial purposes.\n\n## 🙏 Acknowledgments\n\n- **Monaco Editor**: Microsoft's excellent code editor\n- **Material-UI**: Beautiful React components\n- **Vite**: Lightning-fast build tool\n- **React**: The amazing UI library\n- **VS Code**: Design inspiration\n\n---\n\n**Note**: This is an educational project and not intended to replace professional IDEs for production development.\n","readmeFilename":"README.md"}