https://github.com/jeremiasvillane/codehaven
An online IDE that provides a modern development environment in your browser.
https://github.com/jeremiasvillane/codehaven
drag-and-drop filesystem-api ide indexed-db indexeddb indexeddb-wrapper jszip layout monaco-editor panel primereact react resizable-panels tailwindcss typescript vitejs webcontainers webcontainers-api xterm-js
Last synced: 3 months ago
JSON representation
An online IDE that provides a modern development environment in your browser.
- Host: GitHub
- URL: https://github.com/jeremiasvillane/codehaven
- Owner: JeremiasVillane
- License: mit
- Created: 2025-01-29T23:47:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-13T04:57:26.000Z (about 1 year ago)
- Last Synced: 2025-02-13T05:26:32.853Z (about 1 year ago)
- Topics: drag-and-drop, filesystem-api, ide, indexed-db, indexeddb, indexeddb-wrapper, jszip, layout, monaco-editor, panel, primereact, react, resizable-panels, tailwindcss, typescript, vitejs, webcontainers, webcontainers-api, xterm-js
- Language: TypeScript
- Homepage: https://codehaven-dev.vercel.app
- Size: 551 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CodeHaven
An online IDE that provides a modern development environment in your browser.
## Features
- 🗂️ File Explorer with file/folder management
- 📝 **Monaco**-powered code editor with syntax highlighting and IntelliSense
- ↔️ Dock-based layout with draggable and resizable panels
- 💻 Interactive terminal with command execution
- 🗄️ In-browser server using **WebContainer API**
- 💾 Local file storage with **IndexedDB** persistence
- 📦 Project export/import powered by **JSZip**
- 🔄 Real-time preview with auto-refresh
- 🌙 Light/Dark theme support
- ⚡ Fast and responsive UI powered by **React**
- 📑 Templates for bootstrapping new projects
## Tech Stack
### Frontend
- **React 18** with **TypeScript**
- **PrimeReact UI** components
- **rc-dock** for panel layout
- **Monaco Editor** for advanced code editing
- **xterm.js** for terminal emulation
- **Tailwind CSS** for styling
### Build Tools & Linting
- **Vite** as the development server and bundler
- **PostCSS** for CSS processing
- **ESLint** for code quality and consistency
- **SWC** for fast builds and transforms
## Installation
1. Clone the repository:
```bash
git clone https://github.com/JeremiasVillane/codehaven.git
```
2. Install dependencies:
```bash
pnpm install
```
3. Run the development server:
```bash
pnpm dev
```
4. Open your browser and navigate to `http://localhost:8080`