Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/projects-docs/pages/learn/repositories/_meta.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"migration-guide": "Migration Guide",
"overview": "Overview",
"getting-started": "Getting Started",
"devtools": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,14 @@ title: Collaborate and Share
description:
---

import { Callout } from 'nextra-theme-docs'

# Collaborate & Share

<Callout type="warning">
**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces.
</Callout>

At CodeSandbox, we believe that collaborating on code should be as easy as possible.

As we evolve our platform, we keep expanding how you can collaborate with others when coding.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { Callout } from 'nextra-theme-docs'

# Import a repository

<Callout type="warning">
**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces.
</Callout>

If you haven't already imported a repository, you can do so by navigating to the [Recent page](https://codesandbox.io/dashboard/recent) in the dashboard and clicking `+ Repository`.

If you have already granted GH OAuth permissions, you will see a list of GitHub organizations that you are a part of.
Expand Down
140 changes: 140 additions & 0 deletions packages/projects-docs/pages/learn/repositories/migration-guide.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
---
title: Migration Guide
description: How to migrate from CodeSandbox Repositories to GitHub Codespaces.
---

import { Callout } from 'nextra-theme-docs'

# Migration guide: CodeSandbox Repos to GitHub Codespaces

<Callout type="warning">
CodeSandbox Repositories will no longer accept new imports starting **April 1, 2026**. Full support for repositories will end on **July 1, 2026**. We recommend migrating to GitHub Codespaces before these dates.
</Callout>

This guide walks you through moving your development workflow from CodeSandbox Repositories to GitHub Codespaces. The transition should take about 30 minutes for most projects.

If you need help at any point, reach out to [support@codesandbox.io](mailto:support@codesandbox.io).

## Vocabulary mapping

Before you start, here's how CodeSandbox concepts translate to Codespaces.

| CodeSandbox | Codespaces | Difference |
| --- | --- | --- |
| Sandbox | Codespace | A Sandbox is the branch. A Codespace is an instance of a branch. |
| Forking a Sandbox | Creating a branch | In Codespaces, you create a git branch first, then launch a container for it. |
| VM Snapshot | Prebuilds | CodeSandbox saves memory state. Codespaces pre-installs dependencies so you start fast. |
| `.codesandbox/tasks.json` | `.devcontainer/devcontainer.json` | CodeSandbox uses a dedicated tasks file. Codespaces uses `postCreateCommand` or `postAttachCommand`. |

## Transitioning the "instant" workflow

### What you're used to (CodeSandbox)

In CodeSandbox Repositories, you visit the main branch and the VM is already running with your tasks (like `npm start`) pre-executed. If you want to make changes, you click "Branch," which clones the running VM state into a new branch and URL instantly.

### The new way (GitHub Codespaces)

**From the browser:**

1. Navigate to your repo on GitHub.
2. Create a new branch.
3. Click **Code** and then **Create Codespace on [branch]** for the full VM.

**From VS Code desktop:**

1. Open VS Code locally.
2. Use the GitHub Codespaces extension to create or connect to environments directly.

## Step-by-step: starting a feature

### Step 1: Set up Prebuilds (Prerequisite)

To replicate the "instant" feel of CodeSandbox where you don't wait for `npm install`, enable Prebuilds in your GitHub repo settings. This tells GitHub to run your setup scripts every time code is pushed, so the container is ready when you open it.

1. Go to your repository on GitHub.
2. Navigate to **Settings** > **Codespaces**.
3. Under **Prebuild configuration**, click **Set up prebuild**.
4. Select the branch and region, then save.

### Step 2: Create a branch and Codespace

In CodeSandbox, you "Forked" to branch. In the new workflow:

1. Go to the GitHub repository.
2. Create a new branch (e.g., `feat/new-ui`).
3. Click **Code** > **Codespaces** > **+**.

### Step 3: Move tasks to `.devcontainer/devcontainer.json`

Since you no longer have a `.codesandbox/tasks.json`, move those commands into the `.devcontainer/devcontainer.json` lifecycle hooks.

**Where your commands go:**

| CodeSandbox (`.codesandbox/tasks.json`) | Codespaces (`.devcontainer/devcontainer.json`) |
| --- | --- |
| `setupTasks` | `"postCreateCommand": "npm install"` |
| `runTasks` | `"postAttachCommand": "npm start"` |

**Example `.devcontainer/devcontainer.json`:**

```json
{
"name": "My Project",
"image": "mcr.microsoft.com/devcontainers/javascript-node:20",
"postCreateCommand": "npm install",
"postAttachCommand": "npm start",
"forwardPorts": [3000]
}
```

<Callout emoji="⭐">
**Note:** Use `postAttachCommand` (not `postStartCommand`) for tasks that should run each time you connect to the Codespace. This ensures your dev server starts automatically when you open the environment.
</Callout>

Place this file at `.devcontainer/devcontainer.json` in your repository root.

### Step 4: Connect from VS Code desktop

The Codespaces extension is built into VS Code:

1. Open VS Code locally.
2. Click the **Remote Explorer** icon (bottom-left green icon or sidebar).
3. Select **GitHub Codespaces**.
4. Your environment will be listed. Click to connect.

<Callout emoji="⚠️">
**Important:** A branch must already exist on GitHub before you can connect Codespaces to it. If you don't see your branch, create it first—either locally and push it to GitHub, or create it directly on GitHub.
</Callout>

## Key differences to know

### Persistence

In CodeSandbox, every change is "live." In Codespaces, your work is saved in the cloud VM, but you still need to **commit and push** for others to see changes in the repository.

### Secrets and environment variables

Move your sandbox environment variables to GitHub Codespaces Secrets:

1. Go to GitHub **Settings** > **Codespaces** > **Secrets**.
2. Click **New secret**.
3. Add your key-value pairs and select which repositories can access them.

### Collaboration

CodeSandbox is "live" by default with real-time multiplayer. For Codespaces, use the **Live Share** extension within your Codespace to collaborate in real-time:

1. Install the Live Share extension (it may already be included).
2. Click **Live Share** in the bottom status bar.
3. Share the generated link with collaborators.

## Timeline

| Date | What happens |
| --- | --- |
| **April 1, 2026** | New repository imports are disabled. Existing repositories continue to work. |
| **July 1, 2026** | Full support for CodeSandbox Repositories ends. |

## Need help?

If you run into issues during migration or have questions about your specific setup, contact us at [support@codesandbox.io](mailto:support@codesandbox.io).
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { Callout } from 'nextra-theme-docs'

# Open Source Collaboration

<Callout type="warning">
**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces.
</Callout>

Working with your favorite open-source repositories is easier with CodeSandbox. Whether you are just checking out a repository, testing out an idea or formally proposing a feature, CodeSandbox can eliminate tedious steps in your process and get you working on your ideas faster.

## Viewing open-source repositories
Expand Down
4 changes: 4 additions & 0 deletions packages/projects-docs/pages/learn/repositories/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ import { Callout } from 'nextra-theme-docs'

# CodeSandbox Repositories

<Callout type="warning">
**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces.
</Callout>

CodeSandbox allows you to instantly spin up a cloud development environment for any branch in your GitHub repository. It has a focus on speed and collaboration and allows you to create a workspace to be experienced by multiple people at the same time.

## Tailored for your project
Expand Down
4 changes: 4 additions & 0 deletions packages/projects-docs/pages/learn/repositories/review.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { Callout } from 'nextra-theme-docs'

# Using CodeSandbox for PR reviews

<Callout type="warning">
**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces.
</Callout>

<Callout>
PR Reviews are currently only available for GitHub repositories.
</Callout>
Expand Down
Loading