CodeSandbox Cheat Sheet

📋 Copy All Commands 📄 Generate PDF

Overview

CodeSandbox is a cloud-based development environment that enables instant web development in the browser. It provides a complete IDE experience with support for modern frameworks, real-time collaboration, and seamless deployment capabilities.

⚠️ Note: Free tier available with limitations. Pro plans offer additional features like private sandboxes, custom domains, and advanced collaboration tools.

Getting Started

Account Creation

# Sign up options:
# - GitHub account (recommended)
# - Google account
# - Email registration

# Visit: https://codesandbox.io
# Click "Sign In" and choose authentication method

Creating Sandboxes

# Quick start templates:
# - React
# - Vue
# - Angular
# - Vanilla JavaScript
# - Node.js
# - Next.js
# - Nuxt.js
# - Svelte
# - Gatsby

Template Selection

// Popular starter templates:
// React: https://codesandbox.io/s/new
// Vue: https://codesandbox.io/s/vue
// Angular: https://codesandbox.io/s/angular
// Vanilla: https://codesandbox.io/s/vanilla

// Create from GitHub repository:
// https://codesandbox.io/s/github/username/repository

Interface Overview

Editor Layout

# Left Panel:
# - File Explorer
# - Dependencies
# - GitHub integration
# - Deployment settings

# Center Panel:
# - Code Editor
# - Multiple tabs support
# - Syntax highlighting
# - IntelliSense

# Right Panel:
# - Live Preview
# - Console
# - Tests
# - Problems

Keyboard Shortcuts

# File Operations
Ctrl+N          # New file
Ctrl+S          # Save (auto-save enabled)
Ctrl+O          # Open file
Ctrl+Shift+P    # Command palette

# Editor Operations
Ctrl+F          # Find
Ctrl+H          # Find and replace
Ctrl+G          # Go to line
Ctrl+/          # Toggle comment

# Navigation
Ctrl+P          # Quick file open
Ctrl+Shift+E    # Toggle explorer
Ctrl+`          # Toggle terminal

Project Management

File Operations

# Create new file:
# Right-click in explorer > New File
# Or use + button in file explorer

# Create folder:
# Right-click in explorer > New Folder

# Upload files:
# Drag and drop files into explorer
# Or right-click > Upload Files

# Delete files:
# Right-click file > Delete
# Or select file and press Delete key

Dependency Management

// Add dependencies via package.json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "axios": "^1.4.0",
    "styled-components": "^6.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "typescript": "^5.0.0"
  }
}

Adding Dependencies

# Method 1: Dependencies panel
# Click "Add Dependency" button
# Search for package name
# Click to install

# Method 2: Import statement
# Type import statement in code
# CodeSandbox auto-detects and installs

# Method 3: Package.json
# Manually edit package.json
# Dependencies install automatically

Framework-Specific Features

React Development

// Hot reloading enabled by default
import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;

Vue.js Development

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Updated!';
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b883;
}
</style>

Node.js Backend

// server.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());

app.get('/', (req, res) => {
  res.json({ message: 'Hello from CodeSandbox!' });
});

app.post('/api/data', (req, res) => {
  const { data } = req.body;
  res.json({ received: data, timestamp: new Date() });
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Collaboration Features

Real-time Collaboration

# Share sandbox:
# 1. Click "Share" button
# 2. Copy share URL
# 3. Send to collaborators

# Live collaboration:
# Multiple users can edit simultaneously
# See cursors and selections in real-time
# Chat functionality available

Permissions Management

# Permission levels:
# - View only: Can view but not edit
# - Edit: Can edit files and dependencies
# - Admin: Full control including settings

# Set permissions:
# Share dialog > Advanced > Set permissions

Comments and Reviews

# Add comments:
# Select code > Right-click > Add Comment
# Comments appear in sidebar
# Resolve comments when addressed

# Code reviews:
# Share sandbox for review
# Use comments for feedback
# Track changes and discussions

Development Tools

Console and Debugging

# Browser Console:
# Available in preview panel
# Shows console.log output
# Displays errors and warnings

# Network tab:
# Monitor API requests
# View request/response details
# Debug network issues

Testing Integration

// Jest testing example
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

// Run tests:
// Tests tab in right panel
// Automatic test discovery
// Real-time test results

Environment Variables

# Create .env file in root:
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your_api_key_here

# Access in code:
const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;

Advanced Features

Custom Templates

# Create custom template:
# 1. Build your sandbox
# 2. Click "..." menu
# 3. Select "Create Template"
# 4. Configure template settings
# 5. Publish for team use

GitHub Integration

# Import from GitHub:
# New Sandbox > Import from GitHub
# Enter repository URL
# Select branch
# Sandbox created automatically

# Export to GitHub:
# Sandbox menu > Export to GitHub
# Create new repository
# Push changes to GitHub

Deployment Options

# Netlify deployment:
# Deployment tab > Netlify
# Connect account
# Deploy with one click

# Vercel deployment:
# Deployment tab > Vercel
# Automatic deployments
# Custom domain support

# GitHub Pages:
# Export to GitHub first
# Enable GitHub Pages
# Automatic deployment

Container Environments

Docker Support

# Dockerfile example
FROM node:16-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
EXPOSE 3000

CMD ["npm", "start"]

Custom Environment

# .codesandbox/tasks.json
{
  "setupTasks": [
    {
      "name": "Install Dependencies",
      "command": "npm install"
    }
  ],
  "tasks": {
    "dev": {
      "name": "Development Server",
      "command": "npm run dev",
      "runAtStart": true
    },
    "build": {
      "name": "Build Project",
      "command": "npm run build"
    }
  }
}

API and Integrations

CodeSandbox API

// Embed sandbox in website
<iframe
  src="https://codesandbox.io/embed/react-new?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="React Sandbox"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

Embed Options

<!-- Customizable embed parameters -->
<iframe
  src="https://codesandbox.io/embed/sandbox-id?
    fontsize=14&
    hidenavigation=1&
    theme=dark&
    view=editor&
    module=/src/App.js&
    hidedevtools=1"
  style="width:100%; height:500px;"
></iframe>

REST API

# Get sandbox information
curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://codesandbox.io/api/v1/sandboxes/sandbox-id

# Create sandbox
curl -X POST \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"files": {...}, "template": "react"}' \
  https://codesandbox.io/api/v1/sandboxes

Performance Optimization

Build Optimization

// webpack.config.js customization
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

Bundle Analysis

# Analyze bundle size:
# 1. Build project
# 2. Check bundle analyzer in preview
# 3. Identify large dependencies
# 4. Optimize imports and dependencies

Caching Strategies

# Service worker for caching:
# PWA template includes service worker
# Automatic caching of static assets
# Offline functionality support

Team Management

Team Workspaces

# Create team workspace:
# Account settings > Teams
# Create new team
# Invite team members
# Manage permissions

Shared Templates

# Team templates:
# Create standardized templates
# Share across team members
# Enforce coding standards
# Consistent project structure

Usage Analytics

# Team analytics:
# View team sandbox usage
# Track collaboration metrics
# Monitor resource consumption
# Analyze productivity trends

Pricing and Limits

Free Tier

# Free plan includes:
# - Unlimited public sandboxes
# - 3 private sandboxes
# - Basic collaboration features
# - Community support

Pro Plan ($9/month)

# Pro features:
# - Unlimited private sandboxes
# - Advanced collaboration
# - Custom domains
# - Priority support
# - Team management

Team Plan ($15/user/month)

# Team features:
# - Team workspaces
# - Advanced permissions
# - Shared templates
# - Usage analytics
# - SSO integration

Troubleshooting

Common Issues

# Sandbox not loading:
# 1. Check browser compatibility
# 2. Disable ad blockers
# 3. Clear browser cache
# 4. Try incognito mode

# Dependencies not installing:
# 1. Check package.json syntax
# 2. Verify package names
# 3. Try manual refresh
# 4. Check network connection

Performance Issues

# Slow sandbox performance:
# 1. Reduce bundle size
# 2. Optimize dependencies
# 3. Use code splitting
# 4. Enable production mode

# Memory issues:
# 1. Close unused tabs
# 2. Restart sandbox
# 3. Optimize code
# 4. Check for memory leaks

Debug Information

# Browser developer tools:
# F12 to open dev tools
# Check console for errors
# Monitor network requests
# Analyze performance

# CodeSandbox logs:
# Console tab in preview
# Check for build errors
# Review dependency issues
# Monitor runtime errors

Best Practices

Project Organization

# File structure best practices:
src/
  components/
    common/
    pages/
  utils/
  hooks/
  services/
  styles/
  tests/
public/
  assets/
  images/

Code Quality

# Use linting and formatting:
# ESLint for code quality
# Prettier for formatting
# TypeScript for type safety
# Husky for git hooks

Collaboration Guidelines

# Team collaboration tips:
# - Use descriptive commit messages
# - Comment complex code sections
# - Follow consistent naming conventions
# - Regular code reviews
# - Document API changes

Resources

Documentation

• CodeSandbox Documentation
• API Reference
• Embedding Guide

Community

• CodeSandbox Discord
• GitHub Repository
• Community Forum

Templates and Examples

• Official Templates
• Community Sandboxes
• Tutorial Examples