A modern, flexible browser-based IDE built with React + TypeScript
A complete development environment in your browser — multi-window workspace with resizable panes, tabbed editors, file management, and integrated tools.
Screenshots coming soon — run
npm run devto see the IDE in action.
| Multi-Window Workspace | Multiple browser windows with resizable, split, and floating panes |
| Tabbed Interface | Each pane hosts tabs for editors, terminals, previews, and more |
| File Tree | Full CRUD operations with context menus, drag-and-drop support |
| Integrated Tools | Code editor, shell, console, AI agent, secrets manager, and more |
| Resource Monitoring | Real-time RAM, CPU, and storage usage with color-coded indicators |
| Global Search | Keyboard-driven search (Ctrl+K) across files, content, and tools |
| Layout System | 7 kitty-inspired layouts — Stack, Tall, Fat, Grid, Splits, Horizontal, Vertical |
| Spotlight Page | Project metadata, visibility settings, and share link management |
| Tool | Description |
|---|---|
| Editor | Code viewer with line numbers and syntax display |
| Preview | Live app preview with browser chrome |
| Console | Runtime output with log levels (INFO/WARN/ERROR) |
| Shell | Interactive CLI terminal |
| Secrets | Manage API keys and credentials securely |
| File History | View edit history timeline |
| Multiplayer | See collaborators and their status |
| User Settings | Configure editor and appearance preferences |
| AI Agent | Chat-based AI coding assistant |
- Node.js 18+ and npm 9+
# Clone the repository
git clone https://github.com/ATC-O48/Claude-OpenAI-Code.git
cd Claude-OpenAI-Code
# Install dependencies
npm install
# Start the development server
npm run devnpm run dev # Start Vite dev server
npm run build # Type-check and build for production
npm run preview # Preview production build locally
npm run lint # Run ESLint| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| TypeScript | Type safety |
| Vite | Build tool and dev server |
| Zustand | State management |
| Tailwind CSS v4 | Utility-first styling |
| react-resizable-panels | Split pane layouts |
| Lucide React | Icon library |
src/
├── App.tsx # Main app component
├── main.tsx # Entry point
├── index.css # Global styles (Tailwind + custom)
├── types/
│ └── workspace.ts # TypeScript type definitions
├── stores/
│ └── workspaceStore.ts # Zustand state management
└── components/
├── layout/
│ ├── TopBar.tsx # Window tabs + Run button + Search
│ ├── WorkspaceLayout.tsx # Resizable pane layout renderer
│ ├── PaneView.tsx # Individual pane with tabs
│ └── PaneOptionsMenu.tsx # Options menu for panes
├── filetree/
│ ├── FileTree.tsx # File tree sidebar
│ └── FileContextMenu.tsx # Right-click context menu
├── toolbar/
│ └── ToolsDock.tsx # Bottom tools dock
├── search/
│ └── SearchBar.tsx # Global search modal
├── resources/
│ └── ResourcesPanel.tsx # Resource usage display
├── spotlight/
│ └── SpotlightPage.tsx # Project spotlight/settings
└── tools/
├── ToolRenderer.tsx # Tool routing component
├── EditorTool.tsx # Code editor
├── PreviewTool.tsx # App preview
├── ConsoleTool.tsx # Console output
├── ShellTool.tsx # Shell/terminal
├── SecretsTool.tsx # Secrets manager
├── FileHistoryTool.tsx # File change history
├── MultiplayerTool.tsx # Collaboration panel
├── UserSettingsTool.tsx # User preferences
└── AgentTool.tsx # AI agent chat
The workspace follows a recursive hierarchical structure:
Workspace
└── Window(s)
└── Layout (PaneSplit tree)
├── Pane
│ ├── Tab (Editor)
│ └── Tab (Console)
└── PaneSplit
├── Pane (Preview)
└── Pane (Shell)
State is managed centrally via Zustand store with actions for:
- Window CRUD operations
- Pane splitting, floating, maximizing
- Tab adding, removing, moving between panes
- File tree operations (CRUD + expand/collapse)
- Application state (running, search, spotlight)
- Layout management (7 kitty-inspired layout modes)
For detailed architecture documentation, see the docs/ directory.
| Shortcut | Action |
|---|---|
| Ctrl+K | Open global search |
| Ctrl+Shift+L | Cycle through layout modes |
| Escape | Close search / spotlight / menus |
| Resource | Description |
|---|---|
| Documentation | Architecture docs, design reviews, and guides |
| Design Review | Technical design review |
| Code Mapping | Codebase structure reference |
| Use Cases | Feature use cases and workflows |
| Layout System | Kitty-inspired layout documentation |
| Contributing | Contribution guidelines |
| Security Policy | Vulnerability reporting |
Contributions are welcome! Please read our Contributing Guide for details on:
- Development setup
- Code style guidelines (ESLint, TypeScript)
- Pull request process
- Issue guidelines
# Fork and clone
git clone https://github.com/<your-username>/Claude-OpenAI-Code.git
cd Claude-OpenAI-Code
npm install
# Create a feature branch
git checkout -b feature/your-feature-name
# Make changes, then verify
npm run lint
npm run build
# Commit and push
git commit -m "feat: your feature description"
git push origin feature/your-feature-nameThen open a pull request against main.
This project is licensed under the Boost Software License 1.0.
- Organization: ATC-O48
- Project Link: github.com/ATC-O48/Claude-OpenAI-Code