Build, Preview, and Share code instantly in your browser
Features • Demo • Installation • Usage • Shortcuts • Contact
- Monaco Editor Integration - The same editor that powers VS Code
- Syntax Highlighting - Support for 20+ programming languages
- IntelliSense & Auto-completion - Smart code suggestions
- Multi-cursor Editing - Edit multiple lines simultaneously
- Code Folding & Minimap - Navigate large files with ease
- Multiple Themes - Dark+, Light+, High Contrast
- Real-time Preview - See changes instantly as you type
- Multiple View Modes - Browser, Console, or Split view
- Responsive Testing - Desktop, Laptop, Tablet, Mobile viewports
- Console Output - Capture and display
console.log, errors, and warnings - Open in New Window - Preview your work in a separate tab
- Closable Preview Panel - Focus on code when needed
- Babel Transpilation - Write modern JSX/TSX in the browser
- React 18 - Full support for latest React features
- Hot Reload - Auto-refresh on code changes
- React Templates - Quick-start with pre-built templates
- File Tree Explorer - Organize files and folders
- Create, Rename, Delete - Full file management
- Context Menu - Right-click for quick actions
- Language Detection - Automatic syntax highlighting based on file extension
- Quick Actions - Access any command instantly with
Ctrl+Shift+P - Fuzzy Search - Find commands, files, and settings
- Keyboard Shortcuts - Displayed alongside commands
- ZIP Export - Download your entire project as a ZIP file
- ZIP Import - Import existing projects from ZIP
- Preserve Structure - Maintains folder hierarchy
- Create Commits - Save snapshots of your work
- Commit History - View all previous commits with timestamps
- Checkout - Restore any previous version
- Delete Commits - Remove unwanted snapshots
- Font Size - Adjust editor font size (10-24px)
- Tab Size - Configure indentation (2-8 spaces)
- Word Wrap - Toggle line wrapping
- Minimap - Show/hide code overview
- Auto-refresh - Toggle live preview updates
| Editor View | Split View |
|---|---|
 |
 |
| Command Palette | Git History |
|---|---|
 |
 |
| Category | Technologies |
|---|---|
| Frontend | React 18, TypeScript, Vite |
| Styling | Tailwind CSS, shadcn/ui |
| Editor | Monaco Editor (@monaco-editor/react) |
| State Management | Zustand with Immer |
| Transpilation | Babel Standalone |
| Animations | Framer Motion |
| Icons | Lucide React |
| Search | Fuse.js (Fuzzy Search) |
| Compression | JSZip |
| Backend | Supabase (optional) |
- Node.js >= 18.0.0
- npm or bun package manager
# Clone the repository
git clone https://github.com/Mavdii/code-canvas.git
# Navigate to project directory
cd code-canvas
# Install dependencies
npm install
# or
bun install
# Start development server
npm run dev
# or
bun devThe application will be available at http://localhost:8080
# Create production build
npm run build
# Preview production build
npm run preview- Open the Editor - Navigate to the application in your browser
- Start Coding - Edit the default files or create new ones
- See Live Preview - Watch your changes appear in real-time
- Switch Templates - Click "React Template" for React development
- Create File/Folder - Right-click in the file explorer
- Rename - Right-click → Rename
- Delete - Right-click → Delete
- Open File - Click on any file to open in editor
- Browser Mode - View rendered HTML output
- Console Mode - See JavaScript console output
- Split Mode - View both simultaneously
- Viewport Selection - Test responsive designs
- Close Preview - Click ✕ to close and focus on code
- Go to Source Control tab (Git icon in sidebar)
- Enter a commit message
- Click Create Commit
- Use Checkout to restore previous versions
| Shortcut | Action |
|---|---|
Ctrl + Shift + P |
Open Command Palette |
Ctrl + P |
Quick File Open |
Ctrl + B |
Toggle Sidebar |
Ctrl + S |
Save Changes |
Ctrl + Shift + E |
Show Explorer |
Ctrl + Shift + F |
Show Search |
Ctrl + Shift + G |
Show Source Control |
code-playground/
├── src/
│ ├── components/
│ │ ├── CommandPalette/ # Command palette with fuzzy search
│ │ ├── Editor/ # Monaco editor components
│ │ ├── FileExplorer/ # File tree component
│ │ ├── Git/ # Version control panel
│ │ ├── ImportExport/ # ZIP import/export
│ │ ├── Layout/ # Main layout & sidebar
│ │ ├── Preview/ # Live preview panel
│ │ └── ui/ # shadcn/ui components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities & helpers
│ │ ├── babelTranspiler.ts # JSX/TSX transpilation
│ │ ├── previewBuilder.ts # Preview HTML builder
│ │ ├── projectExport.ts # ZIP export/import
│ │ └── utils.ts # General utilities
│ ├── store/ # Zustand state stores
│ │ ├── editorStore.ts # Editor state
│ │ ├── filesStore.ts # File system state
│ │ └── gitStore.ts # Version control state
│ ├── types/ # TypeScript types
│ └── pages/ # Page components
├── public/ # Static assets
├── index.html # Entry HTML
└── package.json # Dependencies
- Real Terminal - Full bash/shell terminal support
- Collaborative Editing - Real-time multi-user collaboration
- User Authentication - Save projects to cloud
- More Templates - Vue, Svelte, Angular starters
- Package Manager - Install npm packages in browser
- Custom Themes - Create and share editor themes
- Code Sharing - Generate shareable links
- Embeddable - Embed playgrounds in websites
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your 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.
