├── .codesandbox └── tasks.json ├── .devcontainer ├── Dockerfile └── devcontainer.json ├── .gitignore ├── .npmrc ├── README.md ├── package.json ├── packages └── projects-docs │ ├── .gitignore │ ├── README.md │ ├── components │ ├── Logo.js │ └── templates.tsx │ ├── jsconfig.json │ ├── license.md │ ├── next-env.d.ts │ ├── next-sitemap.config.js │ ├── next.config.js │ ├── package.json │ ├── pages │ ├── _app.js │ ├── _document.js │ ├── _meta.json │ ├── faq.mdx │ ├── learn │ │ ├── _meta.json │ │ ├── access │ │ │ ├── _meta.json │ │ │ ├── organizations.mdx │ │ │ ├── permissions.mdx │ │ │ └── workspace.mdx │ │ ├── ai │ │ │ ├── _meta.json │ │ │ ├── codeium.mdx │ │ │ └── getting-started.mdx │ │ ├── browser-sandboxes │ │ │ ├── _meta.json │ │ │ ├── cli-api.mdx │ │ │ ├── custom-npm-registry.mdx │ │ │ ├── drafts.mdx │ │ │ ├── embedding.mdx │ │ │ ├── faq.mdx │ │ │ ├── overview.mdx │ │ │ └── templates.mdx │ │ ├── ci.mdx │ │ ├── credit-usage │ │ │ ├── _meta.json │ │ │ ├── controlling-usage.mdx │ │ │ ├── credits.mdx │ │ │ └── monitoring-usage.mdx │ │ ├── editors │ │ │ ├── _meta.json │ │ │ ├── desktop-interface.mdx │ │ │ ├── desktop-setup.mdx │ │ │ ├── overview.mdx │ │ │ ├── settings.mdx │ │ │ ├── shortcuts.mdx │ │ │ └── web-interface.mdx │ │ ├── environment │ │ │ ├── _meta.json │ │ │ ├── branch-protection.mdx │ │ │ ├── devcontainers.mdx │ │ │ ├── docker.mdx │ │ │ ├── preview-urls.mdx │ │ │ ├── secrets.mdx │ │ │ └── vm.mdx │ │ ├── explore.mdx │ │ ├── guides │ │ │ └── _meta.json │ │ ├── images │ │ │ ├── GH-App-integration.jpg │ │ │ ├── GH-App-standalone.jpg │ │ │ ├── GH-App-status.jpg │ │ │ ├── IMG_01E76C8C3559-1.jpg │ │ │ ├── IMG_06B9DA1CEE3E-1.jpg │ │ │ ├── IMG_070AC9EEC709-1.jpg │ │ │ ├── IMG_121E87650748-1.jpg │ │ │ ├── IMG_2A7CB6774307-1.jpg │ │ │ ├── IMG_39B8D00B6ED4-1.jpg │ │ │ ├── IMG_5D27020B787A-1.jpg │ │ │ ├── IMG_5EA5205DF3C1-1.jpg │ │ │ ├── IMG_63ED253F97BD-1.jpg │ │ │ ├── IMG_747C51FFF44D-1.jpg │ │ │ ├── IMG_8449EA73EA2F-1.jpg │ │ │ ├── IMG_864A490E2444-1.jpg │ │ │ ├── IMG_8DC7B9BC87A2-1.jpg │ │ │ ├── IMG_93AE5A32AFB9-1.jpg │ │ │ ├── IMG_951B710AAE83-1.jpg │ │ │ ├── IMG_9A52F33CC285-1.jpg │ │ │ ├── IMG_A1198FD49BCB-1.jpg │ │ │ ├── IMG_CA6F9D87591E-1.jpg │ │ │ ├── IMG_CE0C6EE7C6E4-1.jpg │ │ │ ├── ai-permissions.jpg │ │ │ ├── boxy-avatar.jpg │ │ │ ├── boxy-chat-overview.jpg │ │ │ ├── boxy-command-palette.jpg │ │ │ ├── boxy-overview.jpg │ │ │ ├── boxy-permission.jpg │ │ │ ├── boxy-toolbar.jpg │ │ │ ├── change-vm-editor.jpg │ │ │ ├── codeium-example.png │ │ │ ├── command-cover.jpg │ │ │ ├── command-vscode.jpg │ │ │ ├── configuration.jpg │ │ │ ├── contribution-branch.jpg │ │ │ ├── convert-devbox-to-repo.jpg │ │ │ ├── convert-sandbox-from-ai.png │ │ │ ├── convert-sandbox-to-devbox.jpg │ │ │ ├── convert-sandbox-to-repo.jpg │ │ │ ├── cover-projects.jpg │ │ │ ├── cover-sandbox2.jpg │ │ │ ├── cover-vscode.jpg │ │ │ ├── create-contribution-branch.jpg │ │ │ ├── create-pr.jpg │ │ │ ├── create-wizard.jpg │ │ │ ├── custom-npm-registry.jpg │ │ │ ├── custom-registry-infra.jpg │ │ │ ├── dashboard-cloud-template.jpg │ │ │ ├── dashboard-create.png │ │ │ ├── dashboard-devbox-modal.png │ │ │ ├── dashboard-import-repo.png │ │ │ ├── dashboard-import-template.png │ │ │ ├── dashboard-new.jpg │ │ │ ├── dashboard-private.jpg │ │ │ ├── dashboard-user-settings.jpg │ │ │ ├── deployment-sidebar-1.jpg │ │ │ ├── deployment-sidebar.jpg │ │ │ ├── devbox-info-pane.png │ │ │ ├── devbox-template-menu.png │ │ │ ├── devbox-template-modal.png │ │ │ ├── devtools-cover-preview.jpg │ │ │ ├── devtools-cover-tasks.jpg │ │ │ ├── devtools-cover-terminal.jpg │ │ │ ├── devtools-terminalcolab.jpg │ │ │ ├── devtools.jpg │ │ │ ├── editor-branch-share.jpg │ │ │ ├── editor-settings-env.png │ │ │ ├── editor-settings-repo.png │ │ │ ├── editor-settings.png │ │ │ ├── embed-cloud-sandbox.jpg │ │ │ ├── embed-sandbox-vs-code-web.jpg │ │ │ ├── embed-vs-code-web.jpg │ │ │ ├── env-var-menu-link.jpg │ │ │ ├── env-var-menu.jpg │ │ │ ├── env-var-menu.png │ │ │ ├── env-var-modal.jpg │ │ │ ├── env-var-modal.png │ │ │ ├── env-var-pallette.jpg │ │ │ ├── env-var.png │ │ │ ├── file-upload.jpg │ │ │ ├── first-project.jpg │ │ │ ├── fork-repo-from-editor.jpg │ │ │ ├── getting-openvscode.jpg │ │ │ ├── git-panel-commit.jpg │ │ │ ├── git-panel.png │ │ │ ├── github-apps.jpg │ │ │ ├── github-permissions.jpg │ │ │ ├── github-sidebar.jpg │ │ │ ├── hibernate-vm.jpg │ │ │ ├── iOS-iPad.jpg │ │ │ ├── import-flow.jpg │ │ │ ├── import-repo-new.jpg │ │ │ ├── interactive-readme-config.jpg │ │ │ ├── interactive-readme-play.jpg │ │ │ ├── interactive-readme-syntax.jpg │ │ │ ├── ios-3d-layer-inspector.jpg │ │ │ ├── ios-browser-console.jpg │ │ │ ├── ios-dev-env.jpg │ │ │ ├── ios-editor.jpg │ │ │ ├── ios-file-browser.jpg │ │ │ ├── ios-find-replace.jpg │ │ │ ├── ios-git-client.jpg │ │ │ ├── ios-import-repo.jpg │ │ │ ├── ios-local-sandboxes.jpg │ │ │ ├── ios-new-local-sandbox.jpg │ │ │ ├── ios-new-sandbox.jpg │ │ │ ├── ios-node-browser.jpg │ │ │ ├── ios-package-json.jpg │ │ │ ├── ios-preview.jpg │ │ │ ├── ios-sandboxes.jpg │ │ │ ├── ios-scripts.jpg │ │ │ ├── ios-settings.jpg │ │ │ ├── ios-source-code-viewer.jpg │ │ │ ├── ios-terminal.jpg │ │ │ ├── jest-details.jpg │ │ │ ├── jest-error-overview.jpg │ │ │ ├── jest-squiggles.jpg │ │ │ ├── jest-tests.jpg │ │ │ ├── live-classroom-1.jpg │ │ │ ├── live-classroom.jpg │ │ │ ├── live-live.jpg │ │ │ ├── live-live.png │ │ │ ├── live-screenshot.jpg │ │ │ ├── live-sessions.jpg │ │ │ ├── live-sidebar.jpg │ │ │ ├── npm-registry.jpg │ │ │ ├── org-account-graph.png │ │ │ ├── org-create.png │ │ │ ├── org-domain-add.png │ │ │ ├── org-domain-join-ws.png │ │ │ ├── org-edit.png │ │ │ ├── org-name.png │ │ │ ├── overview-editor.jpg │ │ │ ├── overview-header.jpg │ │ │ ├── overview-sidebar.jpg │ │ │ ├── overview-web.jpg │ │ │ ├── permissions.png │ │ │ ├── pr-extension.jpg │ │ │ ├── pr-panel.png │ │ │ ├── pre-purchase-seats-pro-page.png │ │ │ ├── pre-purchase-seats-team-settings.png │ │ │ ├── preferences-apply.jpg │ │ │ ├── preferences-create.jpg │ │ │ ├── preferences-import.jpg │ │ │ ├── preview-utilities.jpg │ │ │ ├── private-sandbox.png │ │ │ ├── repo-change-workspace.jpg │ │ │ ├── repo-import-url-step-1.jpg │ │ │ ├── repo-import-url-step-2.jpg │ │ │ ├── repositories-upload-input.png │ │ │ ├── review-approve.png │ │ │ ├── review-comment-with-mention.png │ │ │ ├── review-message.png │ │ │ ├── review-plus-btn.png │ │ │ ├── review-screen.png │ │ │ ├── review-start.png │ │ │ ├── sandbox-beta-preferences.png │ │ │ ├── sandbox-console.png │ │ │ ├── sandbox-dependency-picker.png │ │ │ ├── sandbox-editor.png │ │ │ ├── sandbox-embed.png │ │ │ ├── sandbox-info-pane.png │ │ │ ├── sandbox-modal.png │ │ │ ├── sandbox-private.jpg │ │ │ ├── sandbox-template-menu.png │ │ │ ├── sandbox-template-modal.png │ │ │ ├── sandbox-terminal-upgrade.png │ │ │ ├── secrets-1.jpg │ │ │ ├── secrets-2.jpg │ │ │ ├── secrets-5.jpg │ │ │ ├── setup-button.png │ │ │ ├── setup-devtool.png │ │ │ ├── setup-step-1-2.png │ │ │ ├── setup-step-1.png │ │ │ ├── setup-step-2.png │ │ │ ├── setup-step-3.png │ │ │ ├── setup-step-4.png │ │ │ ├── share-button.jpg │ │ │ ├── show-tests.jpg │ │ │ ├── storage-management-users.jpg │ │ │ ├── storage-management.jpg │ │ │ ├── subscribe-prepurchase.png │ │ │ ├── teams-go-to-sandboxes.jpg │ │ │ ├── teams-list.jpg │ │ │ ├── teams-new.png │ │ │ ├── template-1.jpg │ │ │ ├── template-2.gif │ │ │ ├── template-3.gif │ │ │ ├── template-4.jpg │ │ │ ├── template-6.jpg │ │ │ ├── template-folder-menu.png │ │ │ ├── templates │ │ │ │ ├── 1.gif │ │ │ │ ├── 1.jpg │ │ │ │ ├── 2.gif │ │ │ │ ├── 3.gif │ │ │ │ ├── 4.gif │ │ │ │ ├── 4.jpg │ │ │ │ ├── 5.gif │ │ │ │ ├── 6.gif │ │ │ │ ├── 6.jpg │ │ │ │ ├── 7.gif │ │ │ │ ├── 8.gif │ │ │ │ └── 9.gif │ │ │ ├── terminal-delete.jpg │ │ │ ├── terminal.jpg │ │ │ ├── themes.jpg │ │ │ ├── toggle.png │ │ │ ├── ui-configuration.jpg │ │ │ ├── ununcommited_changes.png │ │ │ ├── upload.jpg │ │ │ ├── vm-rule.png │ │ │ ├── vm-settings.png │ │ │ ├── vm-usage.png │ │ │ ├── vs-code-insiders-open.jpg │ │ │ ├── vscode-desktop-control-panel.png │ │ │ ├── vscode-desktop-dashboard.png │ │ │ ├── vscode-desktop-devtools.png │ │ │ ├── vscode-desktop-open.png │ │ │ ├── vscode-desktop-participants.png │ │ │ ├── vscode-desktop.png │ │ │ ├── vscode-devtools.jpg │ │ │ ├── vscode-insiders-command-palette.jpg │ │ │ ├── vscode-open.jpg │ │ │ ├── vscode-participants.jpg │ │ │ ├── vscode-projects.jpg │ │ │ ├── vscode-trust.jpg │ │ │ ├── vscode-web-devtools.png │ │ │ ├── vscode-web-overview.png │ │ │ ├── vscode-web-ports.png │ │ │ ├── vscode-web-shared-terminal.png │ │ │ ├── vscode-web-tasks.png │ │ │ ├── workspace-create-team.png │ │ │ ├── workspace-create.jpg │ │ │ ├── workspace-invite-members.png │ │ │ ├── workspace-my-contributions.png │ │ │ ├── workspace-overview.jpg │ │ │ ├── workspace-personal-team.png │ │ │ ├── workspace-selector-newteam.png │ │ │ ├── workspace-selector.png │ │ │ ├── workspace-start-trial.png │ │ │ ├── workspace-team-settings-btn.png │ │ │ ├── workspace-team-settings-free.png │ │ │ └── workspace-team-settings.png │ │ ├── index.mdx │ │ ├── integrations │ │ │ ├── _meta.json │ │ │ ├── github-app.mdx │ │ │ ├── storybook.mdx │ │ │ └── tailscale.mdx │ │ ├── legacy-sandboxes │ │ │ ├── _meta.json │ │ │ ├── configuration.mdx │ │ │ ├── deployment.mdx │ │ │ ├── embedding.mdx │ │ │ ├── file-upload.mdx │ │ │ ├── live-sessions.mdx │ │ │ ├── overview.mdx │ │ │ ├── preferences.mdx │ │ │ └── test.mdx │ │ ├── plans │ │ │ ├── _meta.json │ │ │ ├── codesandbox-friends.mdx │ │ │ ├── education-plans.mdx │ │ │ ├── pricing-faq.mdx │ │ │ ├── subscriptions.mdx │ │ │ └── usage-based-billing.mdx │ │ ├── repositories │ │ │ ├── _meta.json │ │ │ ├── collaborate-share.mdx │ │ │ ├── getting-started │ │ │ │ ├── _meta.json │ │ │ │ ├── branching.mdx │ │ │ │ ├── configure-vscode.mdx │ │ │ │ ├── environment-setup.mdx │ │ │ │ ├── gha-previews.mdx │ │ │ │ ├── git-workflow.mdx │ │ │ │ ├── repo-import.mdx │ │ │ │ └── troubleshooting.mdx │ │ │ ├── open-source.mdx │ │ │ ├── overview.mdx │ │ │ └── review.mdx │ │ └── vm-sandboxes │ │ │ ├── _meta.json │ │ │ ├── devtools.mdx │ │ │ ├── embedding.mdx │ │ │ ├── interactive-readme.mdx │ │ │ ├── live-sessions.mdx │ │ │ ├── overview.mdx │ │ │ ├── preview.mdx │ │ │ ├── secrets.mdx │ │ │ ├── synced-templates.mdx │ │ │ ├── task.mdx │ │ │ ├── templates.mdx │ │ │ ├── terminal.mdx │ │ │ ├── upload.mdx │ │ │ └── your-first-sandbox.mdx │ ├── sdk │ │ ├── _meta.json │ │ ├── browser-previews.mdx │ │ ├── browser.mdx │ │ ├── commands.mdx │ │ ├── create-resume.mdx │ │ ├── create-session.mdx │ │ ├── docker.mdx │ │ ├── faq.mdx │ │ ├── filesystem.mdx │ │ ├── fork.mdx │ │ ├── git.mdx │ │ ├── hibernate.mdx │ │ ├── hosts.mdx │ │ ├── index.mdx │ │ ├── interpreters.mdx │ │ ├── lifecycle.mdx │ │ ├── persistence.mdx │ │ ├── ports.mdx │ │ ├── preview-api-access.mdx │ │ ├── pricing.mdx │ │ ├── restart-shutdown.mdx │ │ ├── sandbox-privacy.mdx │ │ ├── setup.mdx │ │ ├── shells.mdx │ │ ├── specs.mdx │ │ ├── tasks.mdx │ │ ├── template-library.mdx │ │ ├── templates.mdx │ │ ├── terminals.mdx │ │ ├── update-sandbox.mdx │ │ └── use-cases.mdx │ └── tutorial │ │ ├── _meta.json │ │ ├── cli-tool.mdx │ │ ├── convert-browser-sandbox-cloud.mdx │ │ ├── getting-started-with-dev-containers.mdx │ │ ├── getting-started-with-docker.mdx │ │ ├── getting-started-with-php.mdx │ │ └── getting-started-with-python.mdx │ ├── postcss.config.js │ ├── public │ ├── command-runscript.mp4 │ ├── convert-from-sidebar.png │ ├── convert-from-terminal.png │ ├── dashboard-import-github.png │ ├── devtools-management.mp4 │ ├── docker-compose-notification.png │ ├── docker-notification.png │ ├── docker-terminal.png │ ├── introduction-gitflow.mp4 │ ├── introduction-ios.mp4 │ ├── introduction-vscode.mp4 │ ├── ios-dashboard.png │ ├── ios-gh-import.png │ ├── ios-layout.png │ ├── ios-navigation.png │ ├── ios-new-sandbox.png │ ├── ios-sidebar.png │ ├── og-image.jpg │ ├── overview-resize.mp4 │ ├── php-dockerfile.png │ ├── python-dockerfile.png │ ├── repo-branching.mp4 │ ├── repositories-upload-dnd.mp4 │ ├── settings-envvars.mp4_opt.mp4 │ ├── sitemap-0.xml │ ├── sitemap.xml │ ├── snapshot-builder.mp4 │ └── team-creation.png │ ├── styles.css │ ├── tailwind.config.js │ ├── theme.config.js │ ├── tsconfig.json │ └── utils │ ├── cookieConsentConfig.js │ ├── cookieConsentTheme.css │ └── useInitAnalytics.js ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── readme-assets └── docs-screenshot-github.jpg ├── shared-components ├── Hero.js ├── Hero.module.css ├── Tabs.js ├── Tabs.module.css ├── Video.js ├── contants.js └── package.json └── tsconfig.json /.codesandbox/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "setupTasks": [ 3 | { 4 | "name": "Install Dependencies", 5 | "command": "pnpm install" 6 | } 7 | ], 8 | "tasks": { 9 | "dev:projects": { 10 | "name": "Dev Projects", 11 | "command": "pnpm dev:projects", 12 | "runAtStart": true, 13 | "preview": { 14 | "port": 3000, 15 | "prLink": "devtool" 16 | } 17 | }, 18 | "test:projects": { 19 | "name": "Lint Text Project", 20 | "command": "pnpm test:projects" 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.devcontainer/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:20-bullseye 2 | RUN npm i -g pnpm@~8.7.4 -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CodeSandbox Applications", 3 | "build": { 4 | "context": ".", 5 | "dockerfile": "./Dockerfile" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | .DS_Store 4 | yarn-error.log 5 | .yalc 6 | yalc.lock 7 | 8 | public/*.st 9 | public/*.toml 10 | public/.nextra 11 | .vercel 12 | dist 13 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true 2 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CodeSandbox Documentation 2 | 3 | ![CodeSandbox Documentation](/readme-assets/docs-screenshot-github.jpg?raw=true "CodeSandbox Documentation") 4 | 5 | This repository is hosting all product documentation pages of CodeSandbox. 6 | 7 | - iOS Documentation 8 | - CodeSandbox Documentation 9 | - CodeSandbox Projects Documentation 10 | - VS Code Documentation 11 | 12 | ## About this repository 13 | 14 | The Project is leveraging [Nextra](https://nextra.vercel.app/), which explains a lot of how the individual projects run. So we recommend checking it out to get a good understanding of the structure of this repository. 15 | 16 | The individual documentations can be found in the 17 | - `packages` 18 | folder. 19 | 20 | If you want to contribute, you can do so with one click: 21 | 22 | [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/codesandbox/docs) 23 | 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs-sites", 3 | "private": true, 4 | "version": "1.1.0", 5 | "description": "Monorepo with documentation websites", 6 | "workspaces": [ 7 | "packages/*" 8 | ], 9 | "scripts": { 10 | "dev:projects": "pnpm --filter projects-docs dev", 11 | "test:projects": "pnpm --filter projects-docs test-docs" 12 | }, 13 | "dependencies": { 14 | "@radix-ui/react-tabs": "^1.0.4", 15 | "react-intersection-observer": "^9.5.2" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/projects-docs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | .DS_Store 4 | yarn-error.log 5 | .yalc 6 | yalc.lock 7 | 8 | public/*.st 9 | public/*.toml 10 | public/.nextra 11 | .vercel 12 | -------------------------------------------------------------------------------- /packages/projects-docs/README.md: -------------------------------------------------------------------------------- 1 | # [CodeSandbox Docs](https://codesandbox.io/docs/learn/introduction) 2 | 3 | The official documentation for CodeSandbox. 4 | 5 | The project uses [pnpm](https://pnpm.io), [Nextra](https://nextra.vercel.app) and deploys via [Vercel](https://vercel.com). 6 | 7 | ## Contributing 8 | 9 | You open the project in [CodeSandbox](https://codesandbox.io/p/github/codesandbox/docs) to explore and contribute. 10 | -------------------------------------------------------------------------------- /packages/projects-docs/components/templates.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | const TEMPLATES_URL = 4 | "https://raw.githubusercontent.com/codesandbox/sandbox-templates/refs/heads/main/templates.json"; 5 | 6 | export const Templates = () => { 7 | const [templates, setTemplates] = useState([]); 8 | const [copiedId, setCopiedId] = useState(null); 9 | 10 | useEffect(() => { 11 | const fetchTemplates = async () => { 12 | const templates = await fetch(TEMPLATES_URL).then((res) => res.json()); 13 | setTemplates(templates); 14 | }; 15 | fetchTemplates(); 16 | }, []); 17 | console.log(templates); 18 | 19 | const handleCopyClick = async (id: string) => { 20 | await navigator.clipboard.writeText(id); 21 | setCopiedId(id); 22 | setTimeout(() => setCopiedId(null), 2000); 23 | }; 24 | 25 | return ( 26 |
27 | {templates.map((template) => ( 28 |
29 | {`${template.title} 34 |
35 |
36 | 37 | {template.title} 38 | 39 | 45 |
46 | {template.description && ( 47 | 48 | {template.description} 49 | 50 | )} 51 |
52 |
53 | ))} 54 |
55 | ); 56 | }; 57 | -------------------------------------------------------------------------------- /packages/projects-docs/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "." 4 | } 5 | } -------------------------------------------------------------------------------- /packages/projects-docs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/projects-docs/next-sitemap.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next-sitemap').IConfig} */ 2 | const config = { 3 | siteUrl: "https://codesandbox.io/docs/", 4 | generateRobotsTxt: false, 5 | sitemapSize: 7000, 6 | changefreq: "weekly", 7 | 8 | transform: async (config, path) => { 9 | return { 10 | loc: path.replace(".en-US", ""), 11 | changefreq: config.changefreq, 12 | priority: config.priority, 13 | lastmod: config.autoLastmod ? new Date().toISOString() : undefined, 14 | alternateRefs: config.alternateRefs ?? [], 15 | }; 16 | }, 17 | }; 18 | 19 | module.exports = config; 20 | -------------------------------------------------------------------------------- /packages/projects-docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "projects-docs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "next", 8 | "debug": "NODE_OPTIONS='--inspect' next", 9 | "start": "next start", 10 | "build": "next build && next-sitemap", 11 | "test-docs": "alex pages/**/" 12 | }, 13 | "dependencies": { 14 | "@next/env": "^14.0.0", 15 | "alex": "^11.0.0", 16 | "amplitude-js": "^8.21.9", 17 | "next": "^13.5.6", 18 | "next-sitemap": "^3.1.55", 19 | "nextra": "^2.13.2", 20 | "nextra-theme-docs": "^2.13.2", 21 | "react": "^18.2.0", 22 | "react-dom": "^18.2.0", 23 | "vanilla-cookieconsent": "3.0.0" 24 | }, 25 | "devDependencies": { 26 | "autoprefixer": "^10.4.16", 27 | "markdown-table": "^3.0.4", 28 | "postcss": "^8.4.31", 29 | "tailwindcss": "^3.3.5", 30 | "typescript": "5.7.2" 31 | }, 32 | "prettier": { 33 | "embeddedLanguageFormatting": "off", 34 | "htmlWhitespaceSensitivity": "strict" 35 | }, 36 | "alex": { 37 | "noBinary": true, 38 | "profanitySureness": 1 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/_app.js: -------------------------------------------------------------------------------- 1 | import "../styles.css"; 2 | import amplitude from "amplitude-js"; 3 | import { useRouter } from "next/router"; 4 | import { useEffect, useState } from "react"; 5 | import { useInitAnalytics } from "../utils/useInitAnalytics"; 6 | import "vanilla-cookieconsent/dist/cookieconsent.css"; 7 | import "../utils/cookieConsentTheme.css"; 8 | 9 | export default function Nextra({ Component, pageProps }) { 10 | const getLayout = Component.getLayout || ((page) => page); 11 | const router = useRouter(); 12 | 13 | useInitAnalytics(process.env.NEXT_PUBLIC_AMPLITUDE); 14 | 15 | const isBrowser = typeof window !== "undefined"; 16 | const [initialRouteTracked, setInitialRouteTracked] = useState(false); 17 | 18 | useEffect(() => { 19 | if (isBrowser && !initialRouteTracked) { 20 | const event = "pageview"; 21 | const eventProperties = { 22 | source: "docs", 23 | path: router.asPath, 24 | }; 25 | amplitude.getInstance().logEvent(event, eventProperties); 26 | setInitialRouteTracked(true); 27 | } 28 | }, [router]); 29 | 30 | useEffect(() => { 31 | // Track page views 32 | const handleRouteChange = (path) => { 33 | const event = "pageview"; 34 | const eventProperties = { 35 | source: "docs", 36 | path: path, 37 | }; 38 | amplitude.getInstance().logEvent(event, eventProperties); 39 | }; 40 | 41 | router.events.on("routeChangeComplete", handleRouteChange); 42 | 43 | return () => { 44 | router.events.off("routeChangeComplete", handleRouteChange); 45 | }; 46 | }, []); 47 | 48 | return getLayout(); 49 | } 50 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/_document.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Document, { Html, Head, Main, NextScript } from "next/document"; 3 | 4 | class MyDocument extends Document { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | ); 22 | } 23 | } 24 | 25 | export default MyDocument; 26 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "learn": { 3 | "title": "Editor", 4 | "type": "page" 5 | }, 6 | "sdk": { 7 | "title": "SDK", 8 | "type": "page" 9 | }, 10 | "tutorial": { 11 | "title": "Tutorial", 12 | "type": "page", 13 | "display": "hidden" 14 | }, 15 | "faq": { 16 | "title": "FAQ", 17 | "type": "page", 18 | "display": "hidden" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "index": "Introduction", 3 | "guides": "Getting Started", 4 | "editors": "Editors", 5 | "sdk": { 6 | "title": "SDK", 7 | "href": "/sdk/" 8 | }, 9 | "-- cloud-development": { 10 | "type": "separator", 11 | "title": "Cloud Development" 12 | }, 13 | "repositories": "Repositories", 14 | "vm-sandboxes": "VM Sandboxes", 15 | "ai": "AI", 16 | "environment": "Environment", 17 | "integrations": "Integrations", 18 | "-- browser-development": { 19 | "type": "separator", 20 | "title": "Browser Development" 21 | }, 22 | "browser-sandboxes": "Browser Sandboxes", 23 | "legacy-sandboxes": "Legacy Sandboxes", 24 | "-- Plans": { 25 | "type": "separator", 26 | "title": "Plans & Billing" 27 | }, 28 | "plans": "Plans", 29 | "credit-usage": "Credits & Usage", 30 | "access": "Access", 31 | "-- more": { 32 | "type": "separator", 33 | "title": "More" 34 | }, 35 | "ci": "CodeSandbox CI", 36 | "explore": "Discover Page", 37 | "tutorials": { 38 | "title": "Tutorials", 39 | "href": "/tutorial/getting-started-with-dev-containers" 40 | }, 41 | "faq": { 42 | "title": "FAQ", 43 | "href": "/faq" 44 | } 45 | } -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/access/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "organizations": "Organizations", 3 | "workspace": "Workspaces", 4 | "permissions": "User permissions" 5 | } 6 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/ai/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "codeium": "Codeium", 3 | "getting-started": "Getting Started" 4 | } 5 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/ai/codeium.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Codeium code auto-complete 3 | description: Introduction to the AI-powered code generator 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Codeium code autocomplete 9 | 10 | Codeium is an incredible AI-powered developer toolkit. Their code completion tool provides single and multi-line code generation with multiple suggestions to choose from. It supports 70+ programming languages, so it’s a perfect fit with our VM Sandboxes, which can also run any type of project. 11 | 12 | ![Codeium example](../images/codeium-example.png) 13 | 14 | ## Getting started 15 | 16 | Codeium code completion is now available for free to every CodeSandbox user on [VM Sandboxes](https://codesandbox.io/d/), [Sandboxes](https://codesandbox.io/s/) and [repositories](https://codesandbox.io/dashboard/recent?import_repo=true) 17 | 18 | If you have your AI settings enabled, you will get AI autocomplete working in your code immediately. 19 | Note that we enable AI permission toggles by default on free workspaces. If you do not have have access to Codeium, visit the [workspace portal](https://codesandbox.io/t/permissions) and enable the AI settings 20 | 21 | ## Settings and configuration 22 | 23 | In the workspace settings, you will see an option to turn on AI for VM Sandboxes and Repositories in the workspace. 24 | If you want to override these settings for a particular Repository or VM Sandbox, you can open the editor, navigate to _Settings > Editor_ and turn off the AI option. This will deactivate AI for all users accessing the VM Sandbox or repo. 25 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/ai/getting-started.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting Started 3 | description: Instructions for getting started with AI 4 | --- 5 | 6 | # Getting Started 7 | 8 | All CodeSandbox AI tools are available to Free and Pro users. To enable these features, admins need to grant permissions in the [workspace settings](https://codesandbox.io/t/permissions). 9 | 10 | ![AI Permissions](../images/ai-permissions.jpg) 11 | 12 | Once you grant AI permissions, you are accepting Codeium's terms and conditions. 13 | You can read more about their terms of service on the [Codeium website](https://codeium.com/terms-of-service-individual). 14 | 15 | Here is a short list of their security & privacy policies: 16 | 17 | - Opt-out for code snippet telemetry. 18 | - Never train generative models on private code. 19 | - SOC 2 compliance. 20 | - No training on non-permissively licensed code. 21 | 22 | ## Running AI 23 | 24 | Once permissions have been granted, you need to restart the VMs for the changes to take effect. You can do this by selecting `Restart Branch` in the main menu. If you are in a VM Sandbox, the option will read `Restart Sandbox`. 25 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/browser-sandboxes/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "overview": "Overview", 3 | "drafts": "Drafts", 4 | "templates": "Templates", 5 | "cli-api": "CLI & API", 6 | "embedding": "Embedding", 7 | "custom-npm-registry": "Custom NPM Registry", 8 | "synced-templates": { 9 | "title": "Synced Templates", 10 | "href": "/learn/vm-sandboxes/synced-templates" 11 | }, 12 | "upload": { 13 | "title": "Upload static files", 14 | "href": "/learn/vm-sandboxes/upload" 15 | }, 16 | "faq": "FAQ" 17 | } 18 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/browser-sandboxes/drafts.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Drafts 3 | description: How CodeSandbox personal Sandbox drafts work. 4 | --- 5 | 6 | # Drafts 7 | 8 | Workspace members have access to a personal Sandbox drafts section in every workspace to which they belong. Drafts are intended to provide a space to test ideas before sharing them with the workspace. 9 | 10 | Drafts are the default location for all newly created Sandboxes. A location for a new Sandbox can be selected on creation or any time after the Sandbox has been created. 11 | 12 | Drafts inherit the default privacy specified in the workspace settings. By default, Sandboxes are created as public. However, if the workspace settings restrict the creation of public Sandboxes, drafts will be created as private. 13 | 14 | The drafts folder displays Sandboxes created by you, they can be shared with others according to their privacy setting. If you want the Sandbox to be easily discoverable by other workspace members, it is recommended to move the Sandbox out of drafts. 15 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/browser-sandboxes/embedding.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Embedding 3 | authors: ['CompuIves'] 4 | description: Embed a sandbox in docs, blog posts, Medium, and other websites. 5 | --- 6 | 7 | import { Callout } from 'nextra-theme-docs' 8 | import Video from '../../../../../shared-components/Video' 9 | 10 | # Embedding 11 | 12 | ## What is an Embed? 13 | 14 | An embed lets you include a running sandbox in your documentation, blog post, or 15 | website. 16 | 17 | ### Embedding Sandboxes 18 | 19 | Sandbox embeds enhance the learning and reading experience for anyone by providing a practical, interactive, and hassle-free way to explore and experiment with code examples. In addition, embeds allow users to interact with code examples directly from an article or blog post, from where users can directly run, modify, and experiment with the code in a live environment. Also, embeds can be a great solution if you want to show examples of applications. 20 | 21 | 22 | Embeds for Sandboxes are currently in beta. 23 | 24 | 25 | ## Generate an Embed URL 26 | 27 | You can generate a URL to embed by clicking the `Share` button inside the editor of a Sandbox and then clicking on 'Copy embed code'. 28 | 29 | This will give you HTML code with an iFrame that you can paste into your content. 30 | 31 | ![VM Sandbox Embed](../images/embed-sandbox-vs-code-web.jpg) 32 | 33 | ## Example Embed 34 | 35 | Below is an example of the iFrame to embed a React sandbox: 36 | 37 | ```html 38 | 50 | ``` 51 | 52 | This code outputs the following embed: 53 | 54 | 66 | 67 | ## Limitations 68 | 69 | As Sandbox embeds are in beta, some more advanced options are currently unavailable. 70 | 71 | Notably, the embed viewer cannot change the sandbox before forking it, so inline editing is not currently supported on these embeds. 72 | 73 | Additionally, Sandbox embeds still lack some of the customization options available in legacy sandbox embeds. 74 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/browser-sandboxes/faq.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: FAQ 3 | authors: ['necoline'] 4 | description: Answers to frequently asked questions. 5 | --- 6 | # Frequently Asked Questions 7 | 8 | ### Where can I find live sessions? 9 | [Live sessions](/learn/vm-sandboxes/live-sessions) are available in VM Sandboxes. If you're currently using a Browser Sandbox but wish to start a live session, you need to [convert it](/tutorial/convert-browser-sandbox-cloud) to a VM Sandbox first. 10 | 11 | ### What should I do if I need more space for file uploads? 12 | Converting your Sandbox or repository will provide you with more storage for your files. 13 | 14 | ### How does the CLI work with binary files? 15 | When you deploy a Sandbox using the CLI we automatically detect the binary files 16 | and upload them to the CodeSandbox Storage Management after getting 17 | confirmation. 18 | 19 | ### What happened to deployments? 20 | Vercel deployments are still supported through CLI commands, but there is no longer an interface in Sandboxes to support deployments. If you find this to be an important feature, you can [request it](https://www.codesandbox.community/c/feature-requests/) in our community platform. 21 | 22 | ### Where can I find the tests tab? 23 | We made the decision to remove the built in tests from browser Sandboxes. We unfortunately never found a way to make them work as consistently as we would have liked. 24 | 25 | If your project requires tests, we recommend using a VM Sandbox. They allow you to build and run your own tests within your project as needed. 26 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/credit-usage/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "credits": "Credits", 3 | "monitoring-usage": "Monitoring usage", 4 | "controlling-usage": "Controlling usage" 5 | } 6 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/credit-usage/credits.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Credits 3 | description: Learn more about how CodeSandbox uses credits for usage-based billing. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Credits 9 | 10 | Credits serve as the unit of measurement for VM runtime. They simplify understanding and managing the costs of running your VM Sandboxes and Repositories. One credit equates to a specific amount of resources used per hour, which ensures clarity and transparency in your billing. 11 | 12 | | VM size | Credits / hour | Cost / hour | CPU | RAM | 13 | | ------- | -------------- | ----------- | -------- | ------ | 14 | | Pico | 5 credits | $0.0743 | 2 cores | 1 GB | 15 | | Nano | 10 credits | $0.1486 | 2 cores | 4 GB | 16 | | Micro | 20 credits | $0.2972 | 4 cores | 8 GB | 17 | | Small | 40 credits | $0.5944 | 8 cores | 16 GB | 18 | | Medium | 80 credits | $1.1888 | 16 cores | 32 GB | 19 | | Large | 160 credits | $2.3776 | 32 cores | 64 GB | 20 | | XLarge | 320 credits | $4.7552 | 64 cores | 128 GB | 21 | 22 | 23 | Sandboxes do not run on VMs, so any time spent on a Sandbox will not count toward your credit spend. 24 | 25 | 26 | ## Types of credits 27 | 28 | ### Subscription credits 29 | 30 | Subscription credits are allocated monthly credits per workspace according to the subscription plan. A workspace on the free plan gets 400 credits per month. The Pro plan has a base of 1000 credits a month, but more can be purchased with credit add-ons. 31 | 32 | 33 | Unused credits do not roll over month-to-month. 34 | 35 | 36 | ### On-demand credits 37 | 38 | Once subscription credits have been used, VM usage will begin running on on-demand credits. These credits will be tracked and billed at the end of the billing cycle. 39 | On-demand credits are not subject to discount and are billed at a standard $0.1486 per hour. 40 | 41 | To prevent unexpected bills due to unusually high on-demand credit usage, every Pro workspace is required to set a [spending limit](/learn/credit-usage/controlling-usage#spending-limit). 42 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/credit-usage/monitoring-usage.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Monitoring VM Usage 3 | description: How to have visibility over how VMs are being used in your CodeSandbox workspace. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Monitoring usage 9 | 10 | VM usage is reported in the workspace portal under the [virtual machine usage tab](https://codesandbox.io/t/usage). 11 | In this view, you can find information about the workspace credit spend during the current cycle as well as logs from each session. 12 | 13 | ![VM Rule](../images/vm-usage.png) 14 | 15 | ## Understanding VM starts and stops 16 | 17 | There are two different ways to wake up a VM: 18 | - Through user interaction, such as spinning up a repository branch in the editor. 19 | - Through automated jobs like making an HTTP wake-up call to start up a preview. 20 | 21 | These job-related starts usually add up to a few minutes of VM time in a billing cycle. They are accounted for in the VM usage logs in the workspace portal. 22 | 23 | CodeSandbox automatically uses hibernation timeouts to conserve VM use. If a VM has not had any interactivity for 30 minutes, it will hibernate until woken up again. 24 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/editors/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "overview": "Overview", 3 | "web-interface": "Web interface", 4 | "desktop-interface": "Desktop interface", 5 | "desktop-setup": "Desktop setup", 6 | "shortcuts": "Keybindings", 7 | "settings": "Settings" 8 | } 9 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/editors/web-interface.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Web Interface 3 | description: Introduction to a customized version of VS Code for the web with built-in CodeSandbox features. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # VS Code for the web 9 | 10 | ![vs code web layout](../images/vscode-web-overview.png) 11 | 12 | The activity bar holds all the tools for managing your developer experience. The web editor will always contain the standard VS Code tools, namely the File explorer, Search, Source Control, Run and Debug and the Extension marketplace. 13 | 14 | The web editor also comes with a CodeSandbox Devtool extension which provides access to all the unique Code Sandbox features. 15 | 16 | In the Terminal panel, you can see all the running tasks, private terminals, and shared terminals (shared terminals are managed by CodeSandbox). 17 | 18 | While the layout is entirely customizable, the standard layout opens previews, and support tools like documentation and setup tools in the right editor panel. 19 | 20 | ## Tasks, Terminals and Previews 21 | 22 | Preview ports, Tasks and shared terminals are controlled through the devtool extension in the sidebar. 23 | 24 | ![CodeSandbox DevTools](../images/devtools.jpg) 25 | 26 | **Tasks** 27 | 28 | Tasks set in the `tasks.json` file will be listed in the Devtool extension. Here you can see all the tasks, run, stop or restart the tasks. 29 | 30 | **Previews** 31 | 32 | Tasks that spin up previews will be accessible in a port listed under `Previews` 33 | 34 | You can also see the list of ports in the terminal panel under `Ports` 35 | 36 | ![Ports](../images/vscode-web-ports.png) 37 | 38 | **Terminals** 39 | 40 | There are three types of terminals: 41 | 42 | 1. Native terminal: This is managed by VS Code when you open a terminal. It is a private terminal to you that others don’t see. 43 | 44 | 2. Tasks: These are run by Pitcher, an internal CodeSandbox service. The output of a task is streamed to a terminal window and displayed as a VS Code task so it is easily distinguishable from a terminal. 45 | 46 | ![Tasks](../images/vscode-web-tasks.png) 47 | 48 | 3. Shared terminal: In the sidebar, you can open a shared terminal. This terminal is managed by Pitcher, allowing others to see it. 49 | 50 | ![shared terminals](../images/vscode-web-shared-terminal.png) 51 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/environment/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "vm": "VM Config & Persistence", 3 | "devcontainers": "Dev Containers", 4 | "docker": { "display": "hidden" }, 5 | "secrets": "Environment Variables", 6 | "branch-protection": "Branch Protection", 7 | "preview-urls": "Preview URLs" 8 | } 9 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/environment/branch-protection.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Branch Protection 3 | description: Change the protected status of your CodeSandbox projects. 4 | --- 5 | import { Callout } from 'nextra-theme-docs' 6 | 7 | # Branch Protection 8 | 9 | You can toggle the branch protection status for your projects in CodeSandbox. This works for both VM Sandboxes and repositories. 10 | 11 | ![Toggle setting](../images/toggle.png) 12 | 13 | The `main` branch of a project is protected by default to prevent unauthorized or accidental changes. However, you might want to change this setting if you want to commit directly to `main`, namely if you're working as a solo developer or on a smaller project. 14 | 15 | To change this setting for your project, take the following steps: 16 | 17 | 1. Open your project in the web editor 18 | 2. Select the menu on the top left 19 | 3. Select `Project Settings` and click on `Repository` 20 | 4. Toggle on or off 21 | 22 | 23 | 24 | If you unprotect your main branch, you would need to commit any changes to be able to toggle the protection on again. 25 | 26 | 27 | ![Toggle setting](../images/ununcommited_changes.png) 28 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/explore.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Discover Page 3 | authors: ['CompuIves'] 4 | description: 5 | The Discover page highlights interesting sandboxes created by the community. 6 | Find out how to get picked or become a curator. 7 | --- 8 | 9 | # Discover Page 10 | 11 | CodeSandbox features a [Discover page](https://codesandbox.io/discover). This page highlights some of the interesting Sandboxes created by members of the CodeSandbox community. 12 | 13 | It also includes a powerful search option, which allows you to find all the public Sandboxes created by other CodeSandbox users. 14 | 15 | ## Which Sandboxes get picked? 16 | 17 | The CodeSandbox team picks Sandboxes based on their content and/or appearance. This includes those with interesting logic or approach and those that just look cool. 18 | 19 | ## How can I get picked? 20 | 21 | We review Sandboxes submitted to us by users via email, but the best way to get our attention is to tweet about it and tag [@codesandbox](https://x.com/codesandbox). -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/guides/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "setting-up-repository": { 3 | "title": "Getting started with Repositories", 4 | "href": "/learn/repositories/getting-started/repo-import" 5 | }, 6 | "your-first-sandbox": { 7 | "title": "Getting started with VM Sandboxes", 8 | "href": "/learn/vm-sandboxes/your-first-sandbox" 9 | }, 10 | "setting-up-vscode": { 11 | "title": "Getting started with VS Code Desktop", 12 | "href": "/learn/editors/desktop-setup" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/GH-App-integration.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/GH-App-integration.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/GH-App-standalone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/GH-App-standalone.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/GH-App-status.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/GH-App-status.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_01E76C8C3559-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_01E76C8C3559-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_06B9DA1CEE3E-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_06B9DA1CEE3E-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_070AC9EEC709-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_070AC9EEC709-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_121E87650748-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_121E87650748-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_2A7CB6774307-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_2A7CB6774307-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_39B8D00B6ED4-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_39B8D00B6ED4-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_5D27020B787A-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_5D27020B787A-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_5EA5205DF3C1-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_5EA5205DF3C1-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_63ED253F97BD-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_63ED253F97BD-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_747C51FFF44D-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_747C51FFF44D-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_8449EA73EA2F-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_8449EA73EA2F-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_864A490E2444-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_864A490E2444-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_8DC7B9BC87A2-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_8DC7B9BC87A2-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_93AE5A32AFB9-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_93AE5A32AFB9-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_951B710AAE83-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_951B710AAE83-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_9A52F33CC285-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_9A52F33CC285-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_A1198FD49BCB-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_A1198FD49BCB-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_CA6F9D87591E-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_CA6F9D87591E-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/IMG_CE0C6EE7C6E4-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/IMG_CE0C6EE7C6E4-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ai-permissions.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ai-permissions.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/boxy-avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/boxy-avatar.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/boxy-chat-overview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/boxy-chat-overview.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/boxy-command-palette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/boxy-command-palette.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/boxy-overview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/boxy-overview.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/boxy-permission.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/boxy-permission.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/boxy-toolbar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/boxy-toolbar.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/change-vm-editor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/change-vm-editor.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/codeium-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/codeium-example.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/command-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/command-cover.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/command-vscode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/command-vscode.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/configuration.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/configuration.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/contribution-branch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/contribution-branch.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/convert-devbox-to-repo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/convert-devbox-to-repo.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/convert-sandbox-from-ai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/convert-sandbox-from-ai.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/convert-sandbox-to-devbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/convert-sandbox-to-devbox.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/convert-sandbox-to-repo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/convert-sandbox-to-repo.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/cover-projects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/cover-projects.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/cover-sandbox2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/cover-sandbox2.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/cover-vscode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/cover-vscode.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/create-contribution-branch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/create-contribution-branch.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/create-pr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/create-pr.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/create-wizard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/create-wizard.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/custom-npm-registry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/custom-npm-registry.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/custom-registry-infra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/custom-registry-infra.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/dashboard-cloud-template.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/dashboard-cloud-template.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/dashboard-create.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/dashboard-create.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/dashboard-devbox-modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/dashboard-devbox-modal.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/dashboard-import-repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/dashboard-import-repo.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/dashboard-import-template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/dashboard-import-template.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/dashboard-new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/dashboard-new.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/dashboard-private.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/dashboard-private.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/dashboard-user-settings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/dashboard-user-settings.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/deployment-sidebar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/deployment-sidebar-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/deployment-sidebar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/deployment-sidebar.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/devbox-info-pane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/devbox-info-pane.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/devbox-template-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/devbox-template-menu.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/devbox-template-modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/devbox-template-modal.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/devtools-cover-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/devtools-cover-preview.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/devtools-cover-tasks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/devtools-cover-tasks.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/devtools-cover-terminal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/devtools-cover-terminal.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/devtools-terminalcolab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/devtools-terminalcolab.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/devtools.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/devtools.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/editor-branch-share.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/editor-branch-share.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/editor-settings-env.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/editor-settings-env.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/editor-settings-repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/editor-settings-repo.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/editor-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/editor-settings.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/embed-cloud-sandbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/embed-cloud-sandbox.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/embed-sandbox-vs-code-web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/embed-sandbox-vs-code-web.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/embed-vs-code-web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/embed-vs-code-web.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/env-var-menu-link.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/env-var-menu-link.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/env-var-menu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/env-var-menu.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/env-var-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/env-var-menu.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/env-var-modal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/env-var-modal.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/env-var-modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/env-var-modal.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/env-var-pallette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/env-var-pallette.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/env-var.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/env-var.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/file-upload.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/file-upload.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/first-project.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/first-project.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/fork-repo-from-editor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/fork-repo-from-editor.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/getting-openvscode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/getting-openvscode.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/git-panel-commit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/git-panel-commit.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/git-panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/git-panel.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/github-apps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/github-apps.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/github-permissions.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/github-permissions.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/github-sidebar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/github-sidebar.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/hibernate-vm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/hibernate-vm.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/iOS-iPad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/iOS-iPad.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/import-flow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/import-flow.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/import-repo-new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/import-repo-new.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/interactive-readme-config.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/interactive-readme-config.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/interactive-readme-play.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/interactive-readme-play.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/interactive-readme-syntax.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/interactive-readme-syntax.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-3d-layer-inspector.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-3d-layer-inspector.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-browser-console.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-browser-console.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-dev-env.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-dev-env.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-editor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-editor.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-file-browser.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-file-browser.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-find-replace.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-find-replace.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-git-client.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-git-client.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-import-repo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-import-repo.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-local-sandboxes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-local-sandboxes.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-new-local-sandbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-new-local-sandbox.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-new-sandbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-new-sandbox.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-node-browser.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-node-browser.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-package-json.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-package-json.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-preview.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-sandboxes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-sandboxes.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-scripts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-scripts.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-settings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-settings.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-source-code-viewer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-source-code-viewer.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ios-terminal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ios-terminal.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/jest-details.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/jest-details.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/jest-error-overview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/jest-error-overview.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/jest-squiggles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/jest-squiggles.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/jest-tests.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/jest-tests.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/live-classroom-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/live-classroom-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/live-classroom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/live-classroom.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/live-live.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/live-live.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/live-live.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/live-live.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/live-screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/live-screenshot.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/live-sessions.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/live-sessions.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/live-sidebar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/live-sidebar.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/npm-registry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/npm-registry.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/org-account-graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/org-account-graph.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/org-create.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/org-create.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/org-domain-add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/org-domain-add.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/org-domain-join-ws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/org-domain-join-ws.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/org-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/org-edit.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/org-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/org-name.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/overview-editor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/overview-editor.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/overview-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/overview-header.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/overview-sidebar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/overview-sidebar.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/overview-web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/overview-web.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/permissions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/permissions.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/pr-extension.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/pr-extension.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/pr-panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/pr-panel.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/pre-purchase-seats-pro-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/pre-purchase-seats-pro-page.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/pre-purchase-seats-team-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/pre-purchase-seats-team-settings.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/preferences-apply.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/preferences-apply.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/preferences-create.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/preferences-create.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/preferences-import.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/preferences-import.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/preview-utilities.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/preview-utilities.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/private-sandbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/private-sandbox.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/repo-change-workspace.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/repo-change-workspace.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/repo-import-url-step-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/repo-import-url-step-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/repo-import-url-step-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/repo-import-url-step-2.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/repositories-upload-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/repositories-upload-input.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/review-approve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/review-approve.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/review-comment-with-mention.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/review-comment-with-mention.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/review-message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/review-message.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/review-plus-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/review-plus-btn.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/review-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/review-screen.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/review-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/review-start.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-beta-preferences.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-beta-preferences.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-console.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-dependency-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-dependency-picker.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-editor.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-embed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-embed.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-info-pane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-info-pane.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-modal.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-private.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-private.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-template-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-template-menu.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-template-modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-template-modal.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/sandbox-terminal-upgrade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/sandbox-terminal-upgrade.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/secrets-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/secrets-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/secrets-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/secrets-2.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/secrets-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/secrets-5.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/setup-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/setup-button.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/setup-devtool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/setup-devtool.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/setup-step-1-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/setup-step-1-2.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/setup-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/setup-step-1.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/setup-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/setup-step-2.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/setup-step-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/setup-step-3.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/setup-step-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/setup-step-4.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/share-button.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/share-button.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/show-tests.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/show-tests.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/storage-management-users.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/storage-management-users.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/storage-management.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/storage-management.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/subscribe-prepurchase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/subscribe-prepurchase.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/teams-go-to-sandboxes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/teams-go-to-sandboxes.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/teams-list.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/teams-list.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/teams-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/teams-new.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/template-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/template-1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/template-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/template-2.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/template-3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/template-3.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/template-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/template-4.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/template-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/template-6.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/template-folder-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/template-folder-menu.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/1.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/1.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/2.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/3.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/4.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/4.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/5.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/6.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/6.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/7.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/8.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/templates/9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/templates/9.gif -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/terminal-delete.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/terminal-delete.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/terminal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/terminal.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/themes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/themes.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/toggle.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ui-configuration.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ui-configuration.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/ununcommited_changes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/ununcommited_changes.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/upload.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/upload.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vm-rule.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vm-rule.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vm-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vm-settings.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vm-usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vm-usage.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vs-code-insiders-open.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vs-code-insiders-open.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-desktop-control-panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-desktop-control-panel.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-desktop-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-desktop-dashboard.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-desktop-devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-desktop-devtools.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-desktop-open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-desktop-open.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-desktop-participants.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-desktop-participants.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-desktop.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-devtools.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-devtools.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-insiders-command-palette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-insiders-command-palette.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-open.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-open.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-participants.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-participants.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-projects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-projects.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-trust.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-trust.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-web-devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-web-devtools.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-web-overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-web-overview.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-web-ports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-web-ports.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-web-shared-terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-web-shared-terminal.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/vscode-web-tasks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/vscode-web-tasks.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-create-team.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-create-team.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-create.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-create.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-invite-members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-invite-members.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-my-contributions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-my-contributions.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-overview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-overview.jpg -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-personal-team.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-personal-team.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-selector-newteam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-selector-newteam.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-selector.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-start-trial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-start-trial.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-team-settings-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-team-settings-btn.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-team-settings-free.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-team-settings-free.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/images/workspace-team-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/pages/learn/images/workspace-team-settings.png -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Overview 3 | description: Learn how CodeSandbox works and the different types of projects you can create and develop. 4 | --- 5 | 6 | import Hero from "../../../../shared-components/Hero.js" 7 | import { Callout } from 'nextra-theme-docs' 8 | import { Tabs, WrapContent } from '../../../../shared-components/Tabs' 9 | 10 | Instant dev environments.} 12 | /> 13 | 14 | ![](./images/cover-projects.jpg) 15 | 16 | CodeSandbox provides instant development environments that get you up and running quickly and keep you in flow. 17 | 18 | We provide dozens of templates to start from or the option to import your own repository or Sandbox. 19 | 20 | The code can run on either the browser or in a virutal machine (VM). 21 | 22 | ## VM Sandboxes 23 | 24 | VM Sandboxes are powerful and versatile. Offering support for a wide range of languages and frameworks, they're built to scale as your project grows. Learn more about VM Sandboxes and VM runtimes on the [VM Sandboxes](/learn/vm-sandboxes/overview) page. 25 | 26 | To use CodeSandbox for cloud development with a strong GitHub integration, we recommend using [Repositories](/learn/repositories/overview). 27 | 28 | ## Browser Sandboxes 29 | 30 | Browser Sandboxes are ideal for prototyping and sharing code snippets. 31 | When using Browser Sandboxes, your code is evaluated and run in our built-in execution environment. These client environments run entirely inside your browser and will continue to bundle your code even when you lose your connection to our servers. 32 | 33 | Browser Sandboxes each have their own bundler attached to them, which is configured to support a specific framework and emulate their official CLI tools. They are not one-to-one implementations and thus do not support advanced configurations like custom webpack configurations or ejecting. However, they are designed to mirror the default behavior of the framework. 34 | 35 | ## Editors 36 | 37 | Both VM & Browser Sandboxes run on a version of VS Code for the web. You can learn more about the editor on the [Editors](/learn/editors/overview) page. 38 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/integrations/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "github-app": "GitHub App", 3 | "storybook": "Storybook", 4 | "tailscale": "Tailscale" 5 | } 6 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/legacy-sandboxes/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "overview": "Overview", 3 | "configuration": "Configuration", 4 | "deployment": "Deployment", 5 | "embedding": "Embedding", 6 | "secrets": "Secrets", 7 | "file-upload": "File Upload", 8 | "test": "Tests", 9 | "preferences": "Preferences" 10 | } 11 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/legacy-sandboxes/deployment.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying your Sandbox 3 | authors: ['arthurdenner', 'CompuIves'] 4 | description: Deploy your app to production from CodeSandbox 5 | --- 6 | 7 | import { Callout } from 'nextra-theme-docs' 8 | 9 | # Deployment Options 10 | 11 | **Note: Currently only available for Browser Sandboxes** 12 | 13 | 14 | It's possible to deploy your app directly from CodeSandbox through one of our 15 | integrated services. To deploy your app, you need to own the sandbox. 16 | 17 | ![Deployment Sidebar](../images/deployment-sidebar.jpg) 18 | 19 | ## Vercel 20 | 21 | To deploy to [Vercel](https://vercel.com), access the Preferences menu and 22 | select the Integrations tab, then log into your Vercel account. 23 | 24 | ### Deploying 25 | 26 | Go to any of your sandboxes, click on the Deployment menu, which is the rocket 27 | icon in left-hand activity bar in the editor. Select "Vercel". You'll need to 28 | sign in to [Vercel](https://vercel.com) when you're deploying for the first 29 | time. After you've signed in, you will be able to click "Deploy with Vercel". It 30 | will deploy the sandbox and give you a URL. 31 | 32 | ### More Features 33 | 34 | You can see an overview of all deployments you've made previously. Use this 35 | overview to delete your previous deploys or to visit the website. 36 | 37 | ## Netlify 38 | 39 | With [Netlify](https://netlify.com) you don't even need to connect to your 40 | account. This means you can create deployments to share and use even if you 41 | don't have a [Netlify](https://netlify.com) account. 42 | 43 | Not all templates on CodeSandbox support [Netlify](https://netlify.com) 44 | deployments. It's hidden as an option where it's not supported, but the 45 | following templates do: 46 | 47 | - React 48 | - Vue 49 | - Preact 50 | - Nuxt 51 | - Parcel 52 | - Static 53 | - CxJS 54 | - Styleguidist 55 | - Typescript Variants of React and Parcel 56 | - Gatsby 57 | 58 | ### Deploying 59 | 60 | Go to any of your sandboxes that are supported, click on the Deployment menu 61 | (the rocket icon in the activity bar in the editor) and click on 62 | "[Netlify](https://netlify.com)". Click the "Deploy" button to start a new 63 | deploy. As the sandbox builds, you can view the logs of the build to see if 64 | something went wrong. When the build finishes, you'll get a link to the deployed 65 | site. You can also claim the site to add it to your Netlify dashboard. 66 | 67 | ### More Features 68 | 69 | You don't need to sign in, so if you want to add a sandbox deployment to your 70 | account you need to click the "Claim Site" button and the deployed sandbox will 71 | be added to your Netlify account. -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/legacy-sandboxes/file-upload.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: File Upload 3 | description: 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | import Video from '../../../../../shared-components/Video' 8 | 9 | # File Upload 10 | 11 | ## Uploading Static Files 12 | 13 | It's sometimes desired to have either images or big files in a sandbox. We allow 14 | you to upload these within CodeSandbox. As a 15 | [patron](https://codesandbox.io/patron) you are allowed to upload a maximum of 16 | 500MB, otherwise you are able to upload 20MB. Remember that all uploaded files 17 | are public, regardless of the privacy of the sandbox 18 | 19 |
20 | ### Ways to upload 21 | There are two ways to upload files: by using a wizard or by drag and dropping 22 | the files in a folder in CodeSandbox. The wizard can be opened by clicking on 23 | the upload icon in the Files tab. 24 | 25 | ![Upload Wizard](../images/upload.jpg) 26 | 27 | Dragging and dropping the files in the Files tab works as well. 28 | 29 |
30 | ### Storage Management 31 | 32 | You can use an uploaded file in multiple sandboxes at the same time. For this 33 | reason we have a separate 'Storage Management' that allows you to see which 34 | files you have uploaded. You can find the manager in your user menu. 35 | 36 | ![Storage Management in User Menu](../images/storage-management-users.jpg?v2) 37 | 38 | You are able to view your storage usage with the option to either open uploaded 39 | files, add uploaded files to the opened sandbox or to delete an uploaded file. 40 | 41 | ![Storage Management](../images/storage-management.jpg) 42 | 43 |
44 | ### CLI Integration 45 | 46 | When you deploy a sandbox using the CLI we automatically detect the binary files 47 | and upload them to the CodeSandbox Storage Management after getting 48 | confirmation. -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/legacy-sandboxes/live-sessions.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Collaborate and Share 3 | description: 4 | --- 5 | 6 | # Live Sessions 7 | 8 | ## What is Live? 9 | All browser sandboxes on CodeSandbox are live, meaning you can share your sandbox with 10 | others for real time collaboration on code. You can simultaneously create, 11 | delete, edit and move files and code with others in a sandbox, as well as chat 12 | about your changes. It's like Google Docs, but for coding. 13 | 14 | ![Live mode](../images/live-screenshot.jpg?v1) 15 |
16 | 17 | ### Going Live 18 | All browser sandboxes are collaborative by default. You can invite contributors to join the 19 | sandbox using the `Share` button at the top right of the editor. 20 | 21 | Browser Sandboxes also allow you to make your sandbox "Live" to the entire world, including users that you haven't directly invited to contribute on a sandbox. 22 | 23 | Whenever Live mode is activated from the _Live_ tab on the activity bar, you get a Live URL to share with other CodeSandbox users so that they can immediately join you to collaborate live. 24 | 25 | Live editors can only make edits to the sandbox while they are in the 26 | session, they cannot do this when just viewing the sandbox. 27 | 28 | Invited editors can simultaneously edit, create, rename and update files and 29 | code, as well as add and remove dependencies. You can also see in real time 30 | the files that other collaborators are looking at and any code that they select. 31 | 32 | ![Going Live](../images/live-live.jpg) 33 |
34 | 35 | ### Classroom Mode 36 | Classroom Mode is a specific mode of Live Sessions that allows you to define who can edit the sandbox. This is especially 37 | useful when working with large groups. You will only see the cursors of the 38 | users that have an 'editor' role. 39 | 40 | You can enable Classroom Mode from the Live Mode drop-down menu. 41 | 42 | ![Classroom mode](../images/live-classroom.jpg) 43 | 44 | You can give someone editor rights by pressing the '+' icon next to their name, 45 | or make them a viewer by clicking the '-' icon next to their name. -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/legacy-sandboxes/overview.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Overview 3 | description: About legacy sandboxes 4 | --- 5 | 6 | # Legacy Sandboxes 7 | 8 | As of Nov 20, 2023, the Sandbox editor was replaced with a new unified editor experience that blends seamlessly into the VM Sandbox experience. Legacy sandboxes will be supported during the beta era of the new editor (until the end of 2023). 9 | 10 | If for any reason, you want to go back to the old editor, you may do so by turning off the "Beta editor" feature through your user settings. 11 | 12 | ![user settings](../images/sandbox-beta-preferences.png) -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/legacy-sandboxes/preferences.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Preferences Profiles 3 | authors: ['CompuIves'] 4 | description: 5 | Share your CodeSandbox and editor preferences across multiple devices. 6 | --- 7 | 8 | # Preferences Profiles 9 | 10 | Preferences Profiles allow you to save a snapshot of your current CodeSandbox and editor 11 | preferences as a profile, which you can then apply to re-use them when you’re on another 12 | device. 13 | 14 | ## How to create a new Preference Profile 15 | 16 | To save a snapshot of your current preferences you can open 17 | `Preferences` located in the menu at the top right of your 18 | screen. 19 | 20 | From there navigate to `Preferences Profiles` and you will see a button saying 21 | `Create new profile`: 22 | 23 | ![Create a Profile](../images/preferences-create.jpg) 24 | 25 | By clicking it we will save your preferences to the cloud so that they can be 26 | retrieved later and applied when on another computer. 27 | 28 | ## Applying your preferences on another device 29 | 30 | After creating your first profile you will get an updated interface that will 31 | have a list of your profiles. 32 | 33 | From here you can apply all your preferences using the `Apply` button on the menu: 34 | 35 | ![Apply Profile](../images/preferences-apply.jpg) 36 | 37 | This will apply all the preferences and ask you to reload 38 | the page to see them in action. 39 | 40 | ## Can I download a profile to my computer? 41 | 42 | Yes, you can create a new Profile and download it, this will give 43 | you a JSON file you can then import on another computer using the 44 | `Import existing profile` button. 45 | 46 | ![Import a Profile](../images/preferences-import.jpg) 47 | 48 | After this is done you are also welcome to remove this profile and it will still 49 | be applied. 50 | 51 | You can use this to have several CodeSandbox profiles. 52 | 53 | ## Can I have more than one Profile? 54 | 55 | Right now we only support one profile on the cloud but 56 | this will change in the future. -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/legacy-sandboxes/test.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tests 3 | authors: ['CompuIves', 'christianalfoni'] 4 | description: CodeSandbox has a native integration with a test runner. 5 | --- 6 | 7 | 8 | # Tests 9 | 10 | ## How do Browser Sandboxes run tests? 11 | 12 | CodeSandbox uses [Jest](https://jestjs.io) library to run the tests directly in 13 | the browser. That means you can write tests, but adding additional plugins is 14 | not possible in the Client Sandbox experience. 15 | 16 |
17 | ## How to write tests in the CodeSandbox Browser Sandboxes 18 | 19 | In [Legacy sandboxes](/learn/legacy-sandboxes/overview) you can run Jest tests by creating 20 | files that end with `.test.js`, `.spec.js`, `.test.ts(x)` and `.spec.js(x)`. We 21 | will automatically detect these test files and show the results in the Tests 22 | tab. 23 | 24 | Note: In Container sandboxes you can still use Jest (or 25 | whichever test framework you want), but we don't auto-detect these and you'd 26 | need to set it up yourself as you would locally. 27 | 28 | ![Test Bottom](../images/jest-tests.jpg) 29 | 30 | The left side of the test view is an overview of all test files. The right side 31 | shows the details of a file when you select it. You can decide re-run tests 32 | manually by clicking on the Play icon. We automatically watch for file changes, 33 | but you can disable this by clicking on the 'Refresh' icon on the left side. 34 | 35 | ![Test Details](../images/jest-details.jpg) 36 | 37 |
38 | ## Test Failures 39 | 40 | We show failed tests in two ways: in the test overview and in the code editor 41 | itself. 42 | 43 | A failed test looks like this in the Test View: 44 | 45 | ![Test Error](../images/jest-error-overview.jpg) 46 | 47 | And will also show squiggles in the editor: 48 | 49 | ![Test Squiggles](../images/jest-squiggles.jpg?v2) 50 | 51 |
52 | ## Example 53 | 54 | Here's a failing Jest test running in a sandbox: 55 | 56 | https://codesandbox.io/s/n9m2w9q8x0?view=preview 57 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/plans/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "usage-based-billing": "Usage-based Billing", 3 | "subscriptions": "Subscriptions", 4 | "codesandbox-friends": "CodeSandbox Friends", 5 | "education-plans": "Education Plans", 6 | "pricing-faq": "FAQ" 7 | } 8 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/plans/usage-based-billing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Usage-based Billing 3 | description: Learn more about our usage-based billing system and how VM credits work. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Usage-based Billing 9 | 10 | Our usage-based billing system is designed to provide a flexible and cost-effective approach to managing your workspace and using our VM Sandboxes and Repositories. It's based on a credit system, where credits translate virtual machine (VM) runtime per hour into precise costs. 11 | 12 | ## Key components 13 | 14 | ### Virtual Machines 15 | 16 | Our VM Sandboxes and Repositories run on VMs, which allow you to develop, review and preview your software projects. As such, VMs are the backbone of our usage measurement. 17 | 18 | ### Credits 19 | 20 | Credits serve as the unit of measurement for VM runtime. They simplify understanding and managing the costs of running your VM Sandboxes and Repositories. One credit equates to a specific amount of resources used per hour, which ensures clarity and transparency in your billing. 21 | More details can be found on the [Credits](/learn/credit-usage/credits) page. 22 | 23 | ### Storage 24 | 25 | Each subscription tier has a specific storage limit. The storage refers to the VM disk space limit of _each_ VM Sandbox or Repository branch running in that workspace. 26 | For example, the Free tier includes 20 GB of storage. So, every VM Sandbox or Repository branch running on a VM will have 20 GB of storage. 27 | If the storage included in your subscription tier isn't enough, you can upgrade to a higher tier of Pro. 28 | 29 | Further details on how usage-based billing is used in our pricing can be found on the [Subscriptions](/learn/plans/subscriptions) page. 30 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/repositories/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "overview": "Overview", 3 | "getting-started": "Getting Started", 4 | "devtools": { 5 | "title": "DevTools", 6 | "href": "/learn/vm-sandboxes/devtools" 7 | }, 8 | "preview": { 9 | "title": "Preview", 10 | "href": "/learn/vm-sandboxes/preview" 11 | }, 12 | "task": { 13 | "title": "Tasks", 14 | "href": "/learn/vm-sandboxes/task" 15 | }, 16 | "terminal": { 17 | "title": "Terminal", 18 | "href": "/learn/vm-sandboxes/terminal" 19 | }, 20 | "interactive-readme": { 21 | "title": "Interactive Readme", 22 | "href": "/learn/vm-sandboxes/interactive-readme" 23 | }, 24 | "secrets": { 25 | "title": "Secrets", 26 | "href": "/learn/environment/secrets" 27 | }, 28 | "upload": { 29 | "title": "File Upload", 30 | "href": "/learn/vm-sandboxes/upload" 31 | }, 32 | "review": "PR Reviews", 33 | "open-source": "Open Source Collaboration", 34 | "collaborate-share": "Collaborate & Share" 35 | } 36 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/repositories/collaborate-share.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Collaborate and Share 3 | description: 4 | --- 5 | 6 | # Collaborate & Share 7 | 8 | At CodeSandbox, we believe that collaborating on code should be as easy as possible. 9 | 10 | As we evolve our platform, we keep expanding how you can collaborate with others when coding. 11 | 12 | ## Repositories & VM Sandboxes 13 | 14 | CodeSandbox Repositories and VM Sandboxes were built to facilitate collaboration. 15 | 16 | Every branch you run on CodeSandbox gets its own live [development environment](/learn/environment/vm), which is fully collaborative by default. This means **you just have to share the URL of that branch to collaborate with others**. 17 | 18 | When an Editor joins the branch you're on, you can follow their avatar through the code and do live pair programming. Terminals are also collaborative, allowing you to see the commands executed by other people working in your branch. 19 | 20 | This makes CodeSandbox Repositories the perfect tool to develop full-stack apps with your team, as you can grant access to all projects and branches or share specific branches with more granular permissions. 21 | 22 | ### Sharing specific branches 23 | 24 | 1. Open the branch you wish to share in the **Editor**. 25 | 2. In the top right corner, click on **`Share`** . 26 | 3. Copy the URL to share your workspace. 27 | 28 | ![Share a Repository](../images/editor-branch-share.jpg) 29 | 30 | ### Working in teams 31 | 32 | For more information on managing and creating teams, go to the [Team](/learn/teams/permissions) page. 33 | 34 | ### Working on other IDEs 35 | 36 | Collaboration works on our VS Code Desktop in a very similar fashion. Simply find the branch that you want to work on together, share the URL, and build together live. 37 | 38 | ### VM Sandboxes 39 | 40 | Collaborating on VM Sandboxes is almost identical to what we described above for Repositories. The main difference is the fact that VM Sandboxes are an isolated instance that's not connected to GitHub, so there's no concept of a "branch". 41 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/repositories/getting-started/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "repo-import": "Importing a repo", 3 | "branching": "Branching", 4 | "environment-setup": "Environment setup", 5 | "git-workflow": "Git workflow", 6 | "gha-previews": "PR configuration", 7 | "configure-vscode": "VS Code configuration", 8 | "troubleshooting": "Troubleshooting" 9 | } 10 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/repositories/getting-started/branching.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Understanding the branching workflow 3 | description: Learn about how branching works 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | 9 | # Repository & workflow setup 10 | 11 | ## Branching flow 12 | 13 | CodeSandbox has an opinionated flow when it comes to working with repositories, and you can see hints of this in the editor. 14 | 15 | As soon as you enter the editor, you will see the current branch name in the header. Every branch has its own VM and is available through a unique URL. For example, if two people visit the URL for the `main` branch, they will be able to see each other's cursor, terminals and DevTools. 16 | 17 | URLs for branches are predictable. So, if you want to open a specific branch, you can update the URL with the new branch name, and we'll import & create an environment for that branch automatically. 18 | 19 | On CodeSandbox, the `main` branch is protected by default. This means that it's read-only and will sync automatically with the branch on GitHub when new commits come in. 20 | 21 | To write some code, you have three options: 22 | 1. (Recommended) Just start typing some code - we will create a new branch for you using seamless branching! 23 | 2. Click the “Branch” button in the header. 24 | 3. [Toggle protection off](/learn/environment/branch-protection) for the `main` branch. 25 | 26 | When we create the new branch, we create a clone of the `main` VM and switch it to the new branch. This new VM is an _exact_ copy of the original VM, down to the memory contents. Because of this, processes like dev servers are already started in the cloned VM. 27 | 28 | Tip: you can start a Postgres database on the `main` branch, seed some data in it, and then every new branch created from `main` will have that data available. 29 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/repositories/getting-started/configure-vscode.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Configuring VS Code 3 | description: Learn about how to configure VS Code to work for you 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | ## VS Code Configuration 9 | 10 | CodeSandbox supports opening branches in [VS Code Desktop](https://marketplace.visualstudio.com/items?itemName=CodeSandbox-io.codesandbox-projects). When you open the branch inside VS Code, you will have access to your own extensions, keybindings and themes. 11 | 12 | VS Code Desktop also has live collaboration. This means that you'll be able to work together with someone who has the same branch open inside the web editor. 13 | 14 | If you want to configure default VS Code extensions to be installed for your repository, you can create a new file called `.vscode/recommendations.json`. 15 | 16 | This is an example of how this file could look like: 17 | 18 | ```json 19 | { 20 | "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"] 21 | } 22 | ``` 23 | 24 | When someone opens this VM in VS Code, we'll make sure that the extensions are preinstalled. 25 | 26 | If you want to have some personal extensions available in any CodeSandbox branch, you can update your own VS Code settings to reflect this. In your VS Code settings (we recommend opening the JSON version by clicking on the File icon in the top left), you can add these settings, for example, to automatically install these extensions when connecting to a VM: 27 | 28 | ```json 29 | "remote.SSH.defaultExtensions": [ 30 | "esbenp.prettier-vscode", 31 | "dbaeumer.vscode-eslint", 32 | "GitHub.vscode-pull-request-github", 33 | "GitHub.copilot", 34 | "eamodio.gitlens" 35 | ] 36 | ``` 37 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/repositories/getting-started/gha-previews.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Setting up deployment previews 3 | description: Create preview links in GH PRs 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Deployment Previews & GitHub App 9 | 10 | Now that you've configured your repository to work in CodeSandbox, we highly recommend that you also configure deployment previews. 11 | 12 | With deployment previews, CodeSandbox automatically adds a link to every PR you open, allowing anyone with access to the repo to open the PR on a preloaded development environment running in CodeSandbox. This is great for reviewing changes, testing the application, or quickly making changes to a PR. 13 | 14 | To enable deployment previews, you need to install the CodeSandbox GitHub App. You can do this by opening the command palette (⌘/Ctrl + Shift + P) and selecting “Install GitHub App”. 15 | 16 | After you've gone through the install steps, you should automatically get deployments for new PRs with a link to both the preview (if configured through tasks) and the development environment! 17 | 18 | There are more advantages to using the CodeSandbox GitHub App, like automatic dashboard syncing. You can learn more about this under [GitHub App](/learn/integrations/github-app). -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/repositories/getting-started/repo-import.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Importing a repository 3 | description: This guide is the first step to get started with CodeSandbox for your repo. It's a walk-through with a bunch of tips and tricks on how to get the most out of CodeSandbox! 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Import a repository 9 | 10 | 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`. 11 | 12 | If you have already granted GH OAuth permissions, you will see a list of GitHub organizations that you are a part of. 13 | Select the organization containing the repository that you want to import and select the desired repo. If you don't see your repository, you may need to insert the GitHub URL into the input field (e.g. “codesandbox/test-sandbox”). 14 | 15 | ![CodeSandbox Import Repo](../../images/import-repo-new.jpg) 16 | 17 | OAuth permissions allow CodeSandbox to list the repositories you have access to as well as permissions to execute git actions that allow the editor to stay up-to-date as you code. 18 | 19 | The first time you import a repo can take a while. During the first time setup, we clone the repository into the VM and set up the folders for the project. However, after this setup, we will create a [memory snapshot](/learn/environment/vm#memory-snapshotting) of the VM, which will ensure that all the following VM loads (& clones!) will be fast. 20 | 21 | At this stage, you will have the main branch of your repository imported into CodeSandbox. But before we dive into the environment setup, let's use the next chapter to look at how we handle branching. 22 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/repositories/getting-started/troubleshooting.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Troubleshooting 3 | description: Answers to common setup questions 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Troubleshooting 9 | 10 | ## **Permission errors while importing a project** 11 | 12 | - Verify your team's permission to open CodeSandbox Repositories. 13 | 14 | - Verify your **repository permissions on GitHub**. 15 | You need to have `write` permission on GitHub to be able to import the project. Repositories where you only have `read` access can only be forked. 16 | 17 | - Verify your **GitHub permissions**. 18 | CodeSandbox requires full git access to be able to import and commit. If you face any authentication errors, follow the steps listed below to reset your GitHub permissions. 19 | 20 | ## **Resetting GitHub permissions** 21 | 22 | 1. Go to the **[Dashboard](https://codesandbox.io/dashboard)**. 23 | 24 | 1. Click on your avatar at the top right of the screen. 25 | 26 | 1. Click on **User Settings**. 27 | 28 | ![Preferences Dropdown Menu Point on CodeSandbox Dashboard](../../images/dashboard-user-settings.jpg) 29 | 30 | 4. Go to **Integrations**. 31 | 32 | 5. **Sign out from GitHub and sign in again** to reconnect your GitHub account. 33 | 34 | #### **Invalid authorization code on Firefox and Safari** 35 | 36 | Safari and Firefox block popups by default. Please make sure you give the domain permission (through the browser settings) or refresh the page after you opened the popup and try again. -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/repositories/review.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: PR Reviews 3 | description: Learn how to improve the process of PR reviews in CodeSandbox. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Using CodeSandbox for PR reviews 9 | 10 | 11 | PR Reviews are currently only available for GitHub repositories. 12 | 13 | 14 | CodeSandbox is the perfect place to review pull requests. By opening the branch from the GitHub PR in CodeSandbox, you will see the code changes, code preview and conversations all in one place. 15 | 16 | Reviews on CodeSandbox are powered by the [GitHub Pull Requests extension](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github). It doesn't matter if you start a review in GitHub and finish it in CodeSandbox–all comments will be reflected in both GitHub and CodeSandbox. 17 | 18 | ![PR extension](../images/pr-extension.jpg) 19 | 20 | ## Getting started 21 | 22 | To review a GitHub PR in CodeSandbox, you must ensure you have granted the required permissions. You can check this status by clicking the "Accounts" icon at the bottom of the left sidebar. 23 | 24 | We highly recommend that a repository admin installs the [CodeSandbox GitHub App](/learn/integrations/github-app). Once that is installed, you will see a comment in your GitHub PRs with links to open the branch and the preview. 25 | 26 | ## How it works 27 | 28 | You can find all the details about how the extension works on its [official page](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github). 29 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/vm-sandboxes/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "overview": "Overview", 3 | "your-first-sandbox": "Getting Started", 4 | "embedding": "Embedding", 5 | "secrets": { 6 | "title": "Secrets", 7 | "href": "/learn/environment/secrets" 8 | }, 9 | "templates": "Templates", 10 | "synced-templates": "Synced Templates", 11 | "live-sessions": "Live Sessions" 12 | } 13 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/vm-sandboxes/devtools.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: DevTools 3 | description: Learn how CodeSandbox DevTools work and how they can be useful to boost your productivity. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # DevTools 9 | 10 | The CodeSandbox DevTools panel aggregates a series of tools that allow you to work faster and more efficiently. Among these tools, you will find Previews, Tasks and Shared Terminals. 11 | 12 | ![CodeSandbox DevTools](../images/devtools.jpg) 13 | 14 | ## Previews 15 | Any [previews](./preview) associated with your project, namely those spun up by tasks, will be accessible in a port listed under `Previews` in the DevTools tab. Each preview will show a tag next to it to identify its associated task, or show `Unconfigured` if no task is tied to it. 16 | 17 | Clicking on a listed preview will open it on the right side of the editor. 18 | 19 | 20 | You can also see the list of ports in the terminal panel under the `Ports` tab at the bottom of the editor. 21 | 22 | 23 | ## Tasks 24 | 25 | [Tasks](./task) set in the `tasks.json` file will be listed in the DevTools tab. This lists all the configured tasks and allow you to run, stop or restart them. Any tasks that are running will display a `Running...` tag next to them. 26 | 27 | ## Shared Terminals 28 | Any active shared terminals will be listed under `Shared Terminals` in the DevTools tab. These are a specific type of [terminal](./terminal) that is managed by Pitcher, which means that other users with access to the project can see them. 29 | 30 | From this tab, you can also create new shared terminals, which will open in the Terminal tab at the bottom of the editor. -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/vm-sandboxes/interactive-readme.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Interactive Readme 3 | description: Create an interactive readme with CodeSandbox. 4 | --- 5 | 6 | # Interactive Readme 7 | 8 | CodeSandbox supports running [tasks](/learn/repositories/task) directly from Markdown. 9 | 10 | ![CodeSandbox Preview](../images/interactive-readme-config.jpg) 11 | 12 | To configure the interactive Readme: 13 | 1. Define a task using the [configuration file](/learn/repositories/task). Use the same shell command used in the `tasks.json` file in the markdown code block. 14 | 15 | ![CodeSandbox Code](../images/interactive-readme-syntax.jpg) 16 | 17 | 2. If there is a match, CodeSandbox will render a play icon next to the command in the interactive view. 18 | 19 | ![CodeSandbox Play](../images/interactive-readme-play.jpg) 20 | 21 | Interactive tasks can be run by any user with read access to your project. 22 | 23 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/vm-sandboxes/live-sessions.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Live Sessions 3 | authors: ['filipelima18', 'JamesACS', "danilowoz"] 4 | description: 5 | Learn how to start and control a live session in CodeSandbox VM Sandboxes. 6 | --- 7 | 8 | import { Callout } from 'nextra-theme-docs' 9 | 10 | # Live Sessions 11 | 12 | ## What are live sessions? 13 | 14 | Live sessions enable the creation of a temporary open session in a VM Sandbox, which allows you to invite any user with a CodeSandbox account to join the VM Sandbox and collaborate live. A live session can include unlimited users. 15 | 16 | The key difference between live sessions and the default live collaboration of VM Sandboxes is that live sessions don't require invited users to be part of the workspace to which the VM Sandbox belongs. 17 | 18 | As such, live sessions are especially useful for: 19 | - Education: hosting a coding lesson in the classroom or online. 20 | - Hackathons: building something live with an assorted group of collaborators. 21 | - Coding interviews: inviting a candidate for a live coding exercise during recruitment. 22 | 23 | ![Live session](../images/live-sessions.jpg) 24 | 25 | ## Permissions 26 | 27 | The VM Sandbox creator can control access to the live session in two ways. 28 | 29 | **Granular permission levels**: the permission level of each invited user can be changed between "Read-only" or "Editor". 30 | 31 | **Default permission**: there's also the option to define the default permission level applied to all users who join the session. If the default level is changed mid-session, it will only apply to users who join after that last change. 32 | 33 | ## Starting a live session 34 | 35 | Live sessions can be started from any VM Sandbox following these steps: 36 | 1. Click _Share_ on the top right of the editor. 37 | 2. (Optional) Change the desired default permission level if needed. 38 | 3. Click on _Go live_. 39 | 4. Copy and share the provided live session URL with others. 40 | 5. Run the live session and remember to click _Stop session_ when it ends. -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/vm-sandboxes/secrets.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Secrets 3 | authors: ['SaraVieira', 'Obinna'] 4 | description: 5 | CodeSandbox allows you to store secrets so you don't share your keys 6 | --- 7 | 8 | import { Callout } from 'nextra-theme-docs' 9 | 10 | # Secrets 11 | 12 | ## What are secrets? 13 | 14 | Secrets are used to hide sensitive information in your application that you 15 | don't want the world to see, like passwords and API keys. 16 | 17 | They're implemented in CodeSandbox using environment variables. 18 | 19 | 20 | When it comes to browser sandboxes, secrets are not transferred between forks and **can only be used in container browser sandboxes**. 21 | 22 | 23 | We're phasing out container sandboxes for VM Sandboxes. We recommend that you read the [documentation](/learn/environment/secrets) on how to apply secrets to VM Sandboxes. 24 | 25 | 26 | ## Adding secrets 27 | 28 | You can add secrets in a container sandbox from the Server Control Panel. Before 29 | adding any, it should look like this: 30 | 31 | ![No Secrets](../images/secrets-1.jpg) 32 | 33 | Let's say you want to add a Google Maps API key. You can do it like so: 34 | 35 | ![Map Secrets](../images/secrets-2.jpg) 36 | 37 | Pro tip: It's good practice to name your secrets all in uppercase. 38 | 39 | After clicking the "Add Secret" button the secret is added, the sandbox is 40 | restarted, and you can see the list of all your secrets above the form. 41 | 42 | Secrets are environment variables, meaning they are defined on `process.env`. In 43 | the example above, we can read the API key from 44 | `process.env.GOOGLE_MAPS_API_KEY`. See the example below, showing how to access 45 | secrets in your server-side code (though obviously, you wouldn't want to share a 46 | secret like this, it just illustrates how to access them). 47 | 48 | https://codesandbox.io/s/broken-resonance-35lyl?codemirror=1&fontsize=14&hidenavigation=1&theme=dark 49 | 50 | ## Editing secrets 51 | 52 | You can edit and remove existing secrets. Click on the pencil to edit the name 53 | and value of your secret. 54 | 55 | Once saved, this will take effect automatically, restarting your sandbox to make 56 | sure we use the new value. 57 | 58 | To delete, you can click on the `x` icon. This will also restart your sandbox. -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/vm-sandboxes/terminal.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Terminal 3 | description: Use a terminal right from CodeSandbox, just like your local terminal. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Terminal 9 | 10 | ![CodeSandbox Repositories Terminal](../images/terminal.jpg) 11 | 12 | One of the benefits of working on VM Sandboxes and repositories is the ability to use terminals without ever leaving the web editor. Terminals run inside CodeSandbox VMs and behave like your local terminals, accepting any commands you are used to running, such as: 13 | - git operations 14 | - bash scripts 15 | - package-management commands 16 | - start servers 17 | 18 | You can find all terminals listed at the right of the "Tasks and Terminals" panel, shown at the bottom of the editor. When you click a listed terminal, it will automatically open the _TERMINAL_ tab at the bottom of the editor, where you can run commands. 19 | 20 | CodeSandbox provides three different types of terminals: 21 | 22 | - **Native terminals**: These are the 'standard' type of terminal that you would usually find in a code editor like VS Code Desktop. These terminals are private to you, so other collaborators will not see any commands you run there. Native terminals are managed by VS Code Web. 23 | - **Task terminals**: When you run a [Task](./task), it will run on a dedicated task terminal. Typically, you can identify these task terminals because they will be named according to the name of the corresponding task (e.g., `dev`). Task terminals are managed by Pitcher, an internal CodeSandbox service. 24 | - **Shared terminals**: These terminals are identical in functionality to native terminals, with the main difference that they can be seen by other collaborators. They can be especially useful when someone on your team encounters errors or has a hard time fixing a problem—you can quickly jump in and instantly understand what is going on. Shared terminals can only be created and opened from the _Shared Terminals_ section of the [DevTools](./devtools) panel, which shows a list of all active shared terminals. Shared terminals are managed by Pitcher, an internal CodeSandbox service. 25 | 26 | ## Managing terminals 27 | You can add and remove terminals using the options at the right of the "Tasks and Terminals" panel, shown at the bottom of the editor. 28 | 29 | ![CodeSandbox Repositories Terminal](../images/terminal-delete.jpg) 30 | 31 | 32 | If you need to run commands that depend on sudo/root access, check out our [tutorial](/tutorial/getting-started-with-docker) about using Docker. 33 | 34 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/vm-sandboxes/upload.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Upload static files 3 | description: Learn how you can upload static files to your Sandboxes. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | --- 9 | 10 | # Upload static files 11 | 12 | You can upload static files (images, documents, videos, etc.) to your projects in CodeSandbox. To use this feature, drag the desired files from your computer and drop them into the file explorer on the sidebar. The files will then be automatically uploaded. 13 | 14 | Alternatively, you can use the icons shown at the right of the _WORKSPACE_ heading (top of the file explorer), right-click the file explorer, or press `$mod+alt+F` to open the file input. 15 | 16 | ![Sidebar upload](../images/file-upload.jpg) 17 | 18 | ## Upload limits 19 | 20 | CodeSandbox file upload limits vary depending on the runtime and plan. 21 | 22 | For Sandboxes, the limits are: 23 | 24 | - 50 MB total storage per user with a Free account. 25 | - 1000 MB total storage per user with a Pro account. 26 | 27 | 28 | The limits for Sandboxes are not specific to each Sandbox; they are shared across all Sandboxes created by the same user. 29 | 30 | 31 | You can check your current Sandbox storage usage from your [Dashboard](https://codesandbox.io/dashboard/) by clicking your user avatar at the top right and then "Storage". 32 | 33 | For VM Sandboxes and repositories, the limits are: 34 | 35 | - 20 GB total storage per VM Sandbox or repository branch for all workspaces. 36 | 37 | You can check your VM Sandbox storage usage by clicking the CodeSandbox icon at the top left of the editor and then "Virtual machine". This will open a new DevTool displaying the current VM usage, including storage. 38 | 39 | ![Sidebar upload](../images/change-vm-editor.jpg) 40 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/learn/vm-sandboxes/your-first-sandbox.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Set up your first VM Sandbox 3 | description: Learn how to take your first steps with CodeSandbox VM Sandboxes. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Getting Started with VM Sandboxes 9 | 10 | CodeSandbox provides two development environments that are ideal for prototyping and rapid web development: [VM Sandboxes](/learn/vm-sandboxes/overview) and [Browser Sandboxes](/learn/browser-sandboxes/templates). 11 | 12 | For the majority of cases, we recommend starting your project as a VM Sandbox (previously known as "Devbox"), as they provide a faster experience with several unique features, since they run in our microVM infrastructure. You can find more about the differences of these two experiences on the [VM Sandbox Docs](/learn/vm-sandbox/overview). 13 | 14 | This guide specifically focuses on VM Sandboxes. 15 | 16 | ## Creating a VM Sandbox 17 | 18 | One of the best things about our VM Sandboxes is that there are dozens of official templates you can use to start coding. 19 | 20 | To get started, [open the `Create` Modal](https://codesandbox.io/d/) and browse through our selection of VM Sandbox Templates. 21 | 22 | ![new modal](../images/dashboard-devbox-modal.png) 23 | 24 | The **`Create`** modal shows you collections of templates you can use as a base for your project. By default, "Featured templates" are shown first, a list that includes both the templates most recently used in your workspace and some of our most popular VM Sandbox templates. You can also navigate the other tabs on the left of the modal for different collections of templates, or use the search at the top left. 25 | 26 | Templates are automatically forked when you select them, so you can edit 27 | and begin creating your own sandbox. 28 | 29 | ## Growing a VM Sandbox into a Repository 30 | 31 | When your prototype grows into a full project, you may want to add version control through git, to make updates and collaboration easier to manage. 32 | 33 | CodeSandbox is specifically built to enable you to grow your project as big as you need. 34 | 35 | You can scale your VM Sandbox into a Repository by navigating to the git menu on the left sidebar and clicking _Create Repository_. 36 | 37 | ![Scaling a VM Sandbox into a repository](../images/convert-devbox-to-repo.jpg) 38 | 39 | ## Programmatically creating VM Sandboxes 40 | 41 | If you want to use our API to create VM Sandboxes, refer to our [Define API](/learn/browser-sandboxes/cli-api#define-api) documentation and be sure to add an additional `environment: "server"` parameter to the request body. -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "index": "Introduction", 3 | "use-cases": "Use Cases", 4 | "playground": { 5 | "href": "https://wkyxcw-5173.csb.app/", 6 | "title": "Example Playground" 7 | }, 8 | "faq": "FAQ", 9 | "pricing": "Pricing", 10 | "-- guides": { 11 | "type": "separator", 12 | "title": "Guides" 13 | }, 14 | "templates": "Templates", 15 | "browser": "Browser", 16 | "browser-previews": "Previews", 17 | "shells": "Shells", 18 | "docker": "Docker & Docker Compose", 19 | "-- privacy-security": { 20 | "type": "separator", 21 | "title": "Privacy & Security" 22 | }, 23 | "sandbox-privacy": "Sandbox Privacy", 24 | "preview-api-access": "Preview API Access", 25 | "-- sandboxes": { 26 | "type": "separator", 27 | "title": "Sandboxes" 28 | }, 29 | "lifecycle": "Lifecycle", 30 | "create-resume": "Create & Resume", 31 | "hibernate": "Hibernate", 32 | "fork": "Fork", 33 | "restart-shutdown": "Restart & Shutdown", 34 | "specs": "VM Specs", 35 | "persistence": "Persistence", 36 | "update-sandbox": "Update Sandbox", 37 | "-- sessions": { 38 | "type": "separator", 39 | "title": "Sessions" 40 | }, 41 | "create-session": "Create Session", 42 | "filesystem": "File System", 43 | "terminals": "Terminals", 44 | "commands": "Commands", 45 | "interpreters": "Interpreters", 46 | "ports": "Ports", 47 | "hosts": "Hosts", 48 | "tasks": "Tasks", 49 | "setup": "Setup", 50 | "git": "Git", 51 | 52 | "-- resources": { 53 | "type": "separator", 54 | "title": "Resources" 55 | }, 56 | "template-library": "Template Library", 57 | "contact": { 58 | "title": "Contact Us", 59 | "href": "https://codesandbox.io/support#form", 60 | "newWindow": true 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/commands.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Commands 3 | description: Learn how the CodeSandbox SDK's commands work. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Commands 9 | 10 | The Commands API allows you to run commands in your sandbox. A command is also a shell, but unlike a terminal it will clean itself up after the command is executed. 11 | 12 | ## API 13 | 14 | The Commands API is available under `sandbox.commands`. 15 | 16 | ### Running Commands 17 | 18 | ```ts 19 | const sandbox = await sdk.sandboxes.create() 20 | const session = await sandbox.connect() 21 | 22 | // Run until completion, also supports an array of commands 23 | const output = await session.commands.run("npm install"); 24 | 25 | console.log(output) 26 | 27 | // Listen to changes 28 | const cmd = await session.commands.runBackground("npm install", { 29 | name: 'my command' 30 | }); 31 | 32 | cmd.command // "npm install" 33 | cmd.name // "my command" 34 | 35 | // Open the command to get its current output. Required to get output events. 36 | const output = await cmd.open() 37 | 38 | const disposer = cmd.onOutput((output) => { 39 | console.log(output) 40 | }) 41 | 42 | const finalOutput = await cmd.waitUntilComplete() 43 | 44 | // Run it again 45 | await cmd.restart() 46 | ``` 47 | 48 | ## Long running commands 49 | 50 | Some commands take longer to run, like starting a server. In this case you can use the `waitForPort` method to wait for the port to open: 51 | 52 | ```ts 53 | const sandbox = await sdk.sandboxes.create() 54 | const session = await sandbox.connect() 55 | 56 | // Run a long running command 57 | const command = session.commands.runBackground("npx -y serve ."); 58 | 59 | // Wait for the port to open 60 | const portInfo = await session.ports.waitForPort(3000); 61 | 62 | // You will need to manually kill it 63 | command.kill() 64 | 65 | // Or you can also restart a command that is already running 66 | command.restart() 67 | ``` 68 | 69 | 70 | For long running commands you should evaluate using [tasks](/sdk/tasks.mdx). 71 | 72 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/docker.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Docker & Dev Containers 3 | description: Learn how to configure your sandbox environment using Dev Containers. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Dev Containers 9 | 10 | CodeSandbox natively supports the [Dev Containers specification](https://containers.dev/), allowing you to customize your sandbox, install system-level dependencies, and run additional services. 11 | 12 | ## Configuration 13 | 14 | To configure your sandbox environment, create a `.devcontainer/devcontainer.json` file inside the root of the sandbox: 15 | 16 | ```json 17 | { 18 | "name": "Node.js", 19 | "image": "mcr.microsoft.com/devcontainers/javascript-node:18", 20 | "features": { 21 | "ghcr.io/devcontainers/features/python:1": {} 22 | } 23 | } 24 | ``` 25 | 26 | In this example, we're installing Node v18 as base, with Python on top using Dev Container Features. 27 | 28 | Alternatively, you can use a `Dockerfile` to build the Docker image when the sandbox boots: 29 | 30 | ```json 31 | { 32 | "name": "Node.js", 33 | "build": { 34 | "dockerfile": "./Dockerfile" 35 | } 36 | } 37 | ``` 38 | 39 | ### Using Dev Containers in the SDK 40 | 41 | When creating a sandbox, all shells will automatically run inside the Docker container specified in the Dev Container configuration. 42 | 43 | ```ts 44 | const sandbox = await sdk.sandboxes.create({ 45 | template: "node" // Template with Dev Container configuration 46 | }); 47 | 48 | await sandbox.commands.run("node --version"); 49 | ``` 50 | 51 | Since we use memory snapshots, the Docker container will already be running when you run your shell. 52 | 53 | ## Docker Compose 54 | 55 | You can run additional services using Docker Compose by adding a `docker-compose.yml` configuration to your Dev Container: 56 | 57 | ```json 58 | { 59 | "name": "Full Stack App", 60 | "dockerComposeFile": "docker-compose.yml", 61 | "service": "app", 62 | "workspaceFolder": "/workspace" 63 | } 64 | ``` 65 | 66 | With a corresponding `docker-compose.yml`: 67 | 68 | ```yaml 69 | services: 70 | app: 71 | image: mcr.microsoft.com/devcontainers/javascript-node:18 72 | command: sleep infinity 73 | 74 | db: 75 | image: postgres:14 76 | ports: 77 | - 5432:5432 78 | environment: 79 | POSTGRES_PASSWORD: password 80 | ``` 81 | 82 | 83 | We will automatically start all services defined in your Docker Compose configuration when the Sandbox starts. 84 | 85 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/fork.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Fork 3 | description: Learn how forking snapshots work in the CodeSandbox SDK. 4 | --- 5 | 6 | # Fork 7 | 8 | When you hibernate a sandbox, we create and save a snapshot of the underlying Firecracker VM. 9 | 10 | If you call `sdk.sandboxes.resume(id)` or a network request is made to the Sandbox, we restore the snapshot. Allowing you to continue from exactly where you left off. 11 | 12 | As we already have a snapshot, we can also use it to create a fork of your project in a new Sandbox. So you can create multiple instances without having to do all the set up work every time. 13 | 14 | ```ts 15 | import { CodeSandbox } from '@codesandbox/sdk' 16 | const sdk = new CodeSandbox(); 17 | 18 | const sandbox = await sdk.sandboxes.create(); 19 | const session = await sandbox.connect() 20 | 21 | // Run anything on the sandbox 22 | await session.shells.run('echo test > test.txt'); 23 | 24 | const sandbox2 = await sdk.sandboxes.fork(sandbox.id); 25 | 26 | // Now we have two sandboxes that have the same fs & memory state! 27 | ``` 28 | 29 | You can use this to add support for checkpoint/restore functionality, or A/B test different agent iterations. At CodeSandbox we use this to enable users to quickly fork shared Sandboxes to their own account. 30 | 31 | ## Manually Creating a Memory Snapshot 32 | 33 | You can manually create a memory snapshot by calling `sandbox.hibernate()`: 34 | 35 | ```ts 36 | import { CodeSandbox } from '@codesandbox/sdk' 37 | const sdk = new CodeSandbox(); 38 | 39 | const sandbox = await sdk.sandboxes.create(); 40 | 41 | // Do work 42 | 43 | await sdk.sandboxes.hibernate(sandbox.id); 44 | ``` 45 | 46 | Creating a memory snapshot can take between 3-10 seconds. Resuming from a memory snapshot takes between 0.5-2 seconds. 47 | 48 | ## Live snapshots 49 | 50 | If a Sandbox is already running we can still fork its exact current state. This has a small overhead of about 0.5 seconds. 51 | 52 | ## Learn More 53 | 54 | We have written a couple blog posts about how memory snapshots work under the hood: 55 | 56 | - [How we clone a running VM in 2 seconds](https://codesandbox.io/blog/how-we-clone-a-running-vm-in-2-seconds) 57 | - [Cloning microVMs by sharing memory through userfaultfd](https://codesandbox.io/blog/cloning-microvms-using-userfaultfd) 58 | - [How we scale our microVM infrastructure using low-latency memory decompression](https://codesandbox.io/blog/how-we-scale-our-microvm-infrastructure-using-low-latency-memory-decompression) 59 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/git.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Git 3 | description: Learn how to use git in CodeSandbox SDK. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Git 9 | 10 | When passing `git` information to the session, the session will be able to perform git commands. This can be done in a terminal, running commands programmatically or using the `git` API. The API is designed to make git more accessible for the common use cases. 11 | 12 | ## API 13 | 14 | The Git API is available under `sandbox.git`. 15 | 16 | ### Status 17 | 18 | Get the current status of the branch. You can also listen to status changes. 19 | 20 | ```ts 21 | const sandbox = await sdk.sandboxes.create() 22 | const session = await sandbox.connect({ 23 | id: 'some-user-reference, 24 | git: { 25 | accessToken: 'classic_github_token', 26 | email: 'foo@bar.com', 27 | name: 'Foo Bar' 28 | } 29 | }) 30 | 31 | const status = await session.git.status() 32 | 33 | console.log(status) 34 | 35 | const disposer = session.git.onStatus((status) => { 36 | console.log(status) 37 | }) 38 | 39 | // Stop listening 40 | disposer() 41 | ``` 42 | 43 | ### Commit 44 | 45 | Commit the current changes to the branch. This will do a `git add .` as well. 46 | 47 | ```ts 48 | const sandbox = await sdk.sandboxes.create() 49 | const session = await sandbox.connect({ 50 | id: 'some-user-reference, 51 | git: { 52 | accessToken: 'classic_github_token', 53 | email: 'foo@bar.com', 54 | name: 'Foo Bar' 55 | } 56 | }) 57 | 58 | await session.git.commit("Some message") 59 | ``` 60 | 61 | ### Push 62 | 63 | Push the current branch to the remote, this ensures the upstream is set. 64 | 65 | ```ts 66 | const sandbox = await sdk.sandboxes.create() 67 | const session = await sandbox.connect({ 68 | id: 'some-user-reference, 69 | git: { 70 | accessToken: 'classic_github_token', 71 | email: 'foo@bar.com', 72 | name: 'Foo Bar' 73 | } 74 | }) 75 | 76 | await session.git.push() 77 | ``` 78 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/hibernate.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hibernate 3 | description: Learn how to hibernate sandboxes with the CodeSandbox SDK. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Hibernate 9 | 10 | By default all Sandboxes hibernate automatically, but you can choose to explicitly hibernate as well. This will save the memory state of the sandbox, so it will resume from the same state when you start it again. 11 | 12 | ```ts 13 | const sandbox = await sdk.sandboxes.resume('sandbox-id') 14 | 15 | await sdk.sandboxes.hibernate(sandbox.id); 16 | ``` 17 | 18 | When creating or restarting a sandbox, you can also set a hibernation timeout between 1 minute and 24 hours. By default this timeout is 5 minutes for free users, and 30 minutes for paid users. 19 | 20 | ```ts 21 | import { CodeSandbox } from '@codesandbox/sdk' 22 | const sdk = new CodeSandbox(); 23 | 24 | const sandbox = await sdk.sandboxes.create({ 25 | type: 'template', 26 | hibernationTimeoutSeconds: 60 * 60 * 1 // 1 hour 27 | }); 28 | ``` 29 | 30 | When you set a hibernation timeout, the sandbox will hibernate after the specified period of inactivity (no calls from the SDK). While the SDK remains connected, we recommend either explicitly hibernating the sandbox or disconnecting from it when you're done using it. Resuming only takes a few seconds, so you can be aggressive with hibernation to conserve resources. 31 | 32 | 33 | If you resume a Sandbox while it's entering hibernation, it will finish creating the snapshot before resuming. This does mean that there can be some inconsistency in resume times if you try to restart your Sandboxes too soon after telling them to hibernate. 34 | 35 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/hosts.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hosts 3 | description: Learn how you can interact with hosts in your sandbox. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Hosts 9 | 10 | Hosts are the services exposed by your Sandbox. They all have their own hostname which includes the port. The `sandbox.hosts` API will allow you to access these your Sandbox hosts securily using signed urls, headers or cookies. 11 | 12 | ```ts 13 | const sandbox = await sdk.sandboxes.create() 14 | const hostToken = await sandbox.hosts.createToken() 15 | const session = await sandbox.connect({ 16 | id: 'some-user-reference', 17 | hostToken 18 | }) 19 | 20 | // Will give you a URL to access the service on port 5173 with a signed token 21 | const url = session.hosts.getUrl(5173) 22 | 23 | // If you rather want to access passing headers 24 | const headers = session.hosts.getHeaders() 25 | 26 | console.log(url) 27 | ``` 28 | 29 | 30 | By default all Sandboxes are unlisted, but you need to use host tokens to access private Sandboxes. With public or unlisted Sandboxes the host tokens are not necessary, but you can still `getUrl` to generate a url for the relevant port. 31 | 32 | 33 | ## Persisting Host Tokens 34 | 35 | It is recommended that host tokens are persisted and provided to sessions. By default it is likely enough to generate a host token when you create the Sandbox, which can be used on any session and will never expire. But you can generate host tokens per session id or even temporary ones for specific sessions, maybe sharing a preview. 36 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: CodeSandbox SDK 3 | description: Learn how CodeSandbox SDK works and the different types of projects you can create and develop. 4 | --- 5 | 6 | import Hero from "../../../../shared-components/Hero.js"; 7 | import { Callout } from 'nextra-theme-docs' 8 | 9 | 13 | 14 | CodeSandbox SDK enables you to quickly create and run isolated sandboxes securely. 15 | The SDK can be used to run concurrent VMs to support multiple use cases such as browser editors, AI agents, code interpretation and [more](/sdk/use-cases.mdx) 16 | 17 | ## Getting Started 18 | 19 | 1. Create or log into your [CodeSandbox account](https://codesandbox.io/signin) 20 | 21 | 2. Next create an API key at [https://codesandbox.io/t/api](https://codesandbox.io/t/api), and enable all scopes. 22 | 23 | 3. Install the SDK: 24 | 25 | ```bash 26 | npm install @codesandbox/sdk 27 | ``` 28 | 29 | Your first interaction: 30 | 31 | ```js 32 | import { CodeSandbox } from "@codesandbox/sdk"; 33 | 34 | const sdk = new CodeSandbox(process.env.CSB_API_KEY!); 35 | 36 | const sandbox = await sdk.sandboxes.create(); 37 | 38 | const session = await sandbox.connect(); 39 | 40 | const output = await session.commands.run("echo 'Hello World'"); 41 | 42 | console.log(output) // Hello World 43 | ``` 44 | 45 | ## How it works 46 | 47 | The SDK can spin up a sandbox by cloning a template in under 3 seconds. Inside this VM you have a full development environment. 48 | 49 | Under the hood, the SDK uses CodeSandbox's microVM infrastructure to spin up sandboxes. The environment supports: 50 | 51 | 1. Resume/clone VMs in under 1 second 52 | 2. VM FS persistence (with `git` version control) 53 | 3. Environment customization using Docker & Docker Compose (Dev Containers) 54 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/interpreters.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Interpreters 3 | description: Learn how the CodeSandbox SDK's interpreters work. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Interpreters 9 | 10 | The Interpreter API allows you to run code in different programming languages in your sandbox. 11 | 12 | ## API 13 | 14 | The Interpreter API is available under `sandbox.interpreters`. 15 | 16 | ### Running Code 17 | 18 | The Interpreter API includes built-in support for running code in different programming languages: 19 | 20 | ```ts 21 | const sandbox = await sdk.sandboxes.create() 22 | const session = await sandbox.connect() 23 | 24 | // Run JavaScript code 25 | const jsResult = await session.interpreters.javascript("'Hello from Node.js!'"); 26 | 27 | // Run Python code 28 | const pythonResult = await session.interpreters.python("'Hello from Python!'"); 29 | ``` 30 | 31 | These interpreters will automatically return the last expression as output, but you can print values to the console at any point for multiple outputs. 32 | 33 | 34 | Note that the interpreters will not resolve until the interpretation resolves. We are open to changing this behavior if you have any feedback or suggestions! Or you can always wield your own by using commands. 35 | 36 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/lifecycle.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sandbox Lifecycle 3 | description: Learn how the lifecycle of sandboxes works. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Sandbox Lifecycle 9 | 10 | By default a Sandbox will be created from a template. A template is a memory/fs snapshot of a Sandbox, meaning it will be a direct continuation of the template. If the template was running a dev server, that dev server is running when the Sandbox is created. 11 | 12 | When you create, resume or restart a Sandbox you can access its `bootupType`. This value indicates how the Sandbox was started. 13 | 14 | - **FORK**: The Sandbox was created from a template. This happens when you call `create` successfully. 15 | - **RUNNING**: The Sandbox was already running. This happens when you call `resume` and the Sandbox was already running. 16 | - **RESUME**: The Sandbox was resumed from hibernation. This happens when you call `resume` and the Sandbox was hibernated. 17 | - **CLEAN**: The Sandbox was created or resumed from scratch. This happens when you call `create` or `resume` and the Sandbox was not running and was missing a snapshot. This can happen if the Sandbox was shut down, restarted, the snapshot was expired (old snapshot) or if something went wrong. 18 | 19 | ## Managing CLEAN bootups 20 | 21 | Whenever we boot a sandbox from scratch, we'll: 22 | 23 | 1. Start the Firecracker VM 24 | 2. Create a default user (called `pitcher-host`) 25 | 3. (optional) Build the Docker image specified in the `.devcontainer/devcontainer.json` file 26 | 4. Start the Docker container 27 | 5. Mount the `/project/sandbox` directory as a volume inside the Docker container 28 | 29 | You will be able to connect to the Sandbox during this process and track its progress. 30 | 31 | ```ts 32 | const sandbox = await sdk.sandboxes.create() 33 | 34 | const setupSteps = sandbox.setup.getSteps() 35 | 36 | for (const step of setupSteps) { 37 | console.log(`Step: ${step.name}`); 38 | console.log(`Command: ${step.command}`); 39 | console.log(`Status: ${step.status}`); 40 | 41 | const output = await step.open() 42 | 43 | output.onOutput((output) => { 44 | console.log(output) 45 | }) 46 | 47 | await step.waitUntilComplete() 48 | } 49 | ``` 50 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/persistence.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Persistence 3 | description: Learn how the persistence of sandboxes works. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Persistence 9 | 10 | Sandboxes have three states of persistence: 11 | 12 | - **Memory**: The sandbox has a memory snapshot and will be restored from memory when started. This takes 1-2 seconds. 13 | - **Disk**: The sandbox has a disk snapshot, but needs to boot from scratch. This takes 5-20 seconds. 14 | - **Archived**: The sandbox has no disk, and will be recreated from our archive storage. This takes 20-60 seconds. 15 | 16 | If dormant, a sandbox will retain a memory snapshot for 7 days, a disk snapshot for 2 weeks, and an archive for undetermined time (so far in the last 4 years, we've never deleted an archive). 17 | 18 | ## Memory 19 | 20 | Whenever a sandbox is hibernated, we keep a memory snapshot of the underlying Firecracker VM. When you start that sandbox, or if any network request is made to the sandbox. We restore the memory snapshot and you can continue from where you left off (this takes 0.5-2 seconds). 21 | 22 | Memory snapshots are kept for a week (this can be longer depending on your plan, and disk pressure). Afterwards, they'll be deleted. If the sandbox is used (either resumed or forked), the timer will reset and the memory snapshot will be kept. 23 | 24 | ## Disk 25 | 26 | Sandboxes have two layers of disk persistence: 27 | 28 | - `/persisted`: contains our archive of the sandbox. If you start a sandbox after a year of inactivity, the `/persisted` directory will still be there. Because of this, it's smaller than the `/project/sandbox` directory. 29 | 30 | 31 | We keep a `.git` directory in `/persisted` to track the filesystem of the sandbox, which we regularly commit to. 32 | 33 | 34 | - `/project/sandbox`: this is the working directory of the sandbox. All files saved in this directory will be persisted between reboots. If the sandbox is not started for more than two weeks (or longer, again depending on your plan and disk pressure), we'll commit all files of `/project/sandbox` to `/persisted` and delete the disk. If the persisting of those files fails, we won't delete the disk to ensure your data is not lost. 35 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/ports.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ports 3 | description: Learn how you can interact with ports in your sandbox. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Ports 9 | 10 | The Ports API allows you to monitor and interact with HTTP ports in your sandbox. This is particularly useful when working with development servers or any other services that need to listen on specific ports. 11 | 12 | Whenever a port is opened within a sandbox, we'll automatically expose it under `https://-.csb.app`. 13 | 14 | 15 | If the sandbox is private you need to use the [host tokens](./hosts). 16 | 17 | 18 | We automatically resume a sandbox whenever a port is accessed while the sandbox is hibernated. 19 | 20 | ## API 21 | 22 | The Ports API is available under `sandbox.ports`. It provides methods for monitoring port activity. 23 | 24 | ### Monitoring Ports 25 | 26 | You can listen for ports being opened and closed in your sandbox: 27 | 28 | ```ts 29 | const sandbox = await sdk.sandboxes.create() 30 | const session = await sandbox.connect() 31 | 32 | // Listen for ports being opened 33 | const listener1 = session.ports.onDidPortOpen((portInfo) => { 34 | console.log(`Port ${portInfo.port} opened`); 35 | console.log(`URL: ${session.hosts.getUrl(portInfo.port)}`); 36 | }); 37 | 38 | // Listen for ports being closed 39 | const listener2 = session.ports.onDidPortClose((port) => { 40 | console.log(`Port ${port} closed`); 41 | }); 42 | 43 | // Remove listeners when done 44 | listener1.dispose(); 45 | listener2.dispose(); 46 | ``` 47 | 48 | ### Getting Port Information 49 | 50 | You can get information about currently opened ports: 51 | 52 | ```ts 53 | const sandbox = await sdk.sandboxes.create() 54 | const session = await sandbox.connect() 55 | 56 | // Get all opened ports 57 | const openPorts = session.ports.getAll(); 58 | for (const port of openPorts) { 59 | console.log(`Port ${port.port} is open at ${port.host}`); 60 | } 61 | ``` 62 | 63 | ### Waiting for Ports 64 | 65 | When starting services, you often need to wait for a port to become available: 66 | 67 | ```ts 68 | const sandbox = await sdk.sandboxes.create() 69 | const session = await sandbox.connect() 70 | 71 | // Start a development server 72 | const command = session.commands.runBackground("npm run dev"); 73 | 74 | // Wait for the dev server port to open 75 | const portInfo = await session.ports.waitForPort(3000); 76 | console.log(`Dev server is ready at: ${portInfo.host}`); 77 | ``` 78 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/preview-api-access.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Preview API Access 3 | description: Learn about preview API access in CodeSandbox SDK. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Preview API Access 9 | 10 | But if you are using the [Browser Preview API](./browser-previews), you will need to set up your allowed preview hosts. These are the hosts where you will be mounting the iframe, for example `localhost:5173` or `company-domain.com`. Configuring these hosts using the SDK CLI. The hosts are stored on your workspace and applies to all your Sandboxes. 11 | 12 | ```bash 13 | $ csb preview-hosts list 14 | 15 | $ csb preview-hosts add :host 16 | 17 | $ csb preview-hosts remove :host 18 | 19 | $ csb preview-hosts clear 20 | ``` 21 | 22 | The `:host` is a JavaScript RegEx. So you can set your host as: `"my-project-.*-.*.vercel.app"` for example (Note the quotes). 23 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/restart-shutdown.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Restart & Shutdown 3 | description: Learn how to restart and shutdown sandboxes with the CodeSandbox SDK. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Restart & Shutdown 9 | 10 | ## Restart 11 | 12 | Restarting a Sandbox won't use a snapshot and will start from scratch. It will install and build its configured resources (including your files in `/project/sandbox`) and also run with the latest version of the agent. 13 | 14 | ```ts 15 | let sandbox = await sdk.sandboxes.resume('sandbox-id') 16 | 17 | sandbox = await sdk.sandboxes.restart(sandbox.id); 18 | ``` 19 | 20 | 21 | Note that when restarting you get a new reference to the Sandbox. You will need to create a new session from that new reference. 22 | 23 | 24 | ## Shutdown 25 | 26 | You can also shutdown a sandbox without creating a memory snapshot. Once shut down the Sandbox will need to boot from a clean state (but your files in `/project/sandbox` will be preserved). 27 | 28 | ```ts 29 | const sandbox = await sdk.sandboxes.resume('sandbox-id') 30 | 31 | await sdk.sandboxes.shutdown(sandbox.id); 32 | ``` 33 | 34 | Generally you should shutdown a sandbox if you want to come back to your project in a fresh instance. 35 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/setup.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Setup 3 | description: Learn how the CodeSandbox SDK's setup work. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Setup 9 | 10 | Setup tasks are configured in your project's `.codesandbox/tasks.json` file. This file defines both setup tasks that run when the sandbox starts, and regular tasks that can be run on-demand. 11 | 12 | Setup tasks run in order when initializing your sandbox. They're typically used for installation and preparation steps: 13 | 14 | ```json 15 | { 16 | "setupTasks": [ 17 | { 18 | "name": "Install Dependencies", 19 | "command": "pnpm install" 20 | }, 21 | { 22 | "name": "Copy Environment File", 23 | "command": "cp .env.example .env" 24 | }, 25 | "pnpm run build" // Short form for { "name": "pnpm run build", "command": "pnpm run build" } 26 | ] 27 | } 28 | ``` 29 | 30 | ## API 31 | 32 | Setup tasks run automatically when a sandbox starts. They typically handle installation of dependencies and initial builds. You can monitor and control setup tasks using the Setup API: 33 | 34 | ```ts 35 | const sandbox = await sdk.sandboxes.create() 36 | const session = await sandbox.connect() 37 | 38 | console.log(`Setup status: ${session.setup.status}`); 39 | 40 | // Wait for the whole thing to complete 41 | await session.setup.waitUntilComplete() 42 | 43 | // Or handle each step 44 | const steps = await session.setup.getSteps() 45 | 46 | for (const step of steps) { 47 | console.log(`Step: ${step.name}`); 48 | console.log(`Command: ${step.command}`); 49 | console.log(`Status: ${step.status}`); 50 | 51 | const output = await step.open() 52 | 53 | output.onOutput((output) => { 54 | console.log(output) 55 | }) 56 | 57 | await step.waitUntilComplete() 58 | } 59 | ``` 60 | 61 | ## Setup Tasks vs Docker Build: When to Use Which? 62 | 63 | Setup tasks are used for any preparation work needed in the `/project/sandbox` directory, such as: 64 | 65 | - Installing dependencies 66 | - Building assets 67 | - Running initial compilations 68 | 69 | Docker build, on the other hand, should be used for: 70 | 71 | - Setting up the container environment 72 | - Installing system-level dependencies 73 | - Configuring global tools 74 | 75 | This separation exists because the `/project/sandbox` directory is only available after the container starts. 76 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/specs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: VM Specs 3 | description: You can start sandboxes with custom VM specs, or even change the VM specs of a running sandbox. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # VM Specs 9 | 10 | Whenever you start a sandbox, you can specify which VM specs to use. This allows you to customize the VM to your needs. We also allow you to change the VM specs of a running sandbox on the fly, 11 | without reboot. This is useful if you want to scale up or down your sandbox dynamically based on workload needs. 12 | 13 | 14 | SDK Sandbox VMTier parameters can be used to create/update environments up to **Small (8 Cores/16GB RAM) specs**. If higher tiers are specified only the core count will increase unless you create a custom [template](https://codesandbox.io/docs/sdk/templates) using our CLI. 15 | 16 | 17 | ## Specifying VM Specs when starting your Sandbox 18 | 19 | You can start a sandbox with a specific VM tier by passing the `vmTier` option to the `sandbox.create` method: 20 | 21 | ```ts 22 | import { CodeSandbox, VMTier } from "@codesandbox/sdk"; 23 | 24 | const sdk = new CodeSandbox(); 25 | const sandbox = await sdk.sandboxes.create({ 26 | source: 'template', 27 | vmTier: VMTier.Small 28 | }); 29 | ``` 30 | 31 | You can also approximate the VM size: 32 | 33 | ```ts 34 | const sandbox = await sdk.sandboxes.create({ 35 | source: 'template', 36 | vmTier: VMTier.fromSpecs({ cpu: 4, memGiB: 8 }), 37 | }); 38 | ``` 39 | 40 | This will pick the smallest VM tier that can fit the specs you provided. 41 | 42 | ## Changing VM Specs 43 | 44 | You can change the VM specs of a running sandbox by calling the `sandbox.updateTier` method: 45 | 46 | ```ts 47 | const sandbox = await sdk.sandboxes.resume('some-id') 48 | 49 | await sandbox.updateTier(VMTier.Medium); 50 | ``` 51 | 52 | This will change the VM specs of the sandbox dynamically, without rebooting. 53 | 54 | 55 | Be careful when scaling down the VM specs of a running sandbox. If you scale down the VM too much, it might not have enough resources to run your tasks and will slow to a crawl. 56 | 57 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/template-library.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Template Library 3 | description: Explore some CodeSandbox SDK templates to help you bootstrap your next project. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | import { Templates } from '../../components/templates' 8 | 9 | # SDK Templates 10 | 11 | All sandboxes created by the CodeSandbox SDK are created from a template. Even if you don't pass an argument to `sdk.sandboxes.create`, we will fork the "Universal" template to create a new sandbox for you. 12 | 13 | Technically we are forking a snapshot, a hibernated Sandbox. This concept of forking is part of the core foundation of CodeSandbox. It allows you to create a Sandbox that contains all your necessary dependencies, files, or even running servers and then clone it as many times as you would like to create new sandboxes. 14 | 15 | ## Starting from a Template 16 | 17 | You can start from a template by passing the template id to the `sdk.sandboxes.create` method. 18 | 19 | ```ts 20 | const sandbox = await sdk.sandboxes.create({ 21 | source: 'template', 22 | id: 'some-template-id' 23 | }) 24 | ``` 25 | 26 | ## Official Templates 27 | 28 | Below are the official templates on CodeSandbox that you can start experimenting with. You can click on the id on the right to copy the id to your clipboard and use it in your sandbox. Click on the title to open the template in the CodeSandbox editor to inspect it: 29 | 30 | 31 | Want to create your own template? Check out the [Templates](/sdk/templates) guide to learn how to create one from your own files using a CLI. 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/terminals.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Terminals 3 | description: Learn how the CodeSandbox SDK's terminals work. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Terminals 9 | 10 | A terminal is a shell process which you can write to, listen to and is often combined with xTerm in the browser to allow users to get a full terminal experience. 11 | 12 | The Terminals API allows you to create, manage and interact with terminal processes in your sandbox. 13 | 14 | ## API 15 | 16 | The Terminals API is available under `sandbox.terminals`. 17 | 18 | ### Creating Terminals 19 | 20 | You can create an interactive terminal that allows you to write, run commands and receive output: 21 | 22 | ```ts 23 | const sandbox = await sdk.sandboxes.create() 24 | const session = await sandbox.connect() 25 | 26 | // Create a new terminal (bash is default) 27 | const terminal = session.terminals.create() 28 | 29 | // Open the terminal to get its current output. Required to get output events. 30 | const output = await terminal.open(); 31 | 32 | // Listen to terminal output 33 | const onOutputDisposer = terminal.onOutput((output) => { 34 | console.log(output); 35 | }); 36 | 37 | // Run commands 38 | await terminal.run("echo 'Hello, world!'"); 39 | 40 | // Kill the terminal when done 41 | await terminal.kill(); 42 | 43 | // Dispose the listener when done 44 | onOutputDisposer.dispose(); 45 | ``` 46 | 47 | 48 | Typically you want terminals to live beyond the immediate session of the user. Use the `session.terminals.getAll()` method to retrieve any existing terminals. 49 | 50 | 51 | ### Browser Terminal 52 | 53 | The terminal API is often combined with [xTerm](https://www.npmjs.com/package/@xterm/xterm) to allow users to get a full terminal experience. In combination with [local-echo](https://github.com/wavesoft/local-echo) you can give your users an excellent terminal experience in the browser. 54 | 55 | ```ts 56 | import { connectToSandbox } from "@codesandbox/sdk/browser"; 57 | import { Terminal } from '@xterm/xterm' 58 | 59 | const sandbox = await connectToSandbox({ 60 | session: initialSessionFromServer, 61 | getSession: (id) => fetchJson(`/api/sandboxes/${id}`)), 62 | }) 63 | const terminal = await sandbox.terminals.create() 64 | const xterm = new Terminal() 65 | 66 | xterm.open(document.getElementById('terminal')) 67 | 68 | // Open to get current output and subscribe to output events 69 | const output = await terminal.open(); 70 | 71 | xterm.write(output) 72 | 73 | terminal.onOutput((output) => { 74 | xterm.write(output) 75 | }); 76 | 77 | xterm.onData((data) => { 78 | terminal.write(data) 79 | }) 80 | ``` 81 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/update-sandbox.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Update Sandbox 3 | description: Learn how to keep Sandboxes up to date with the CodeSandbox SDK. 4 | --- 5 | 6 | import { Callout } from 'nextra-theme-docs' 7 | 8 | # Update Sandbox 9 | 10 | You can update your Sandbox after creation. 11 | 12 | ```ts 13 | import { VMTier } from '@codesandbox/sdk' 14 | 15 | const sandbox = await sdk.sandboxes.resume('sandbox-id') 16 | 17 | // You can hot swap the VM tier 18 | await sandbox.updateTier(VMTier.Micro) 19 | await sandbox.updateHibernationTimeout(60) 20 | ``` 21 | 22 | 23 | You can not update the `ipcountry` of a created Sandbox. This is because the IP country is set when the Sandbox is created and is used to determine the region the Sandbox is running in. 24 | 25 | 26 | ## Update Agent 27 | 28 | Every Sandbox has an agent running on it. This agent is the what allows you to interact with the Sandbox environment. 29 | 30 | When a new version of the agent is published, existing sandboxes will need to restart before they get new version. 31 | 32 | You can check if the current sandbox is up to date using `isUpToDate()` 33 | 34 | ```ts 35 | const sandbox = await sdk.sandboxes.resume('sandbox-id') 36 | 37 | if (!sandbox.isUpToDate) { 38 | await sdk.sandboxes.restart(sandbox.id) 39 | } 40 | ``` 41 | 42 | It is up to you to decide what the best user experience will be for your use case. At CodeSandbox we would show a notification when the agent was out of date and the user could choose when to update. 43 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/sdk/use-cases.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Use Cases 3 | description: Learn the main use cases for CodeSandbox SDK and get inspired to build the next big thing. 4 | --- 5 | 6 | # Use Cases 7 | 8 | CodeSandbox SDK has been designed to help you build and launch any projects that require: 9 | 10 | - An isolated code interpreter. 11 | - Running multiple development environments at scale. 12 | - Access to a sandboxed environment. 13 | 14 | There are hundreds of use cases that can benefit from these three features. Below are some of the most interesting ones we've come across so far: 15 | 16 | ## AI Agents 17 | 18 | Agentic workflows are a fast-emerging use case that benefit immensely from CodeSandbox SDK. 19 | 20 | Using the SDK, You can give each agent a sandbox to resolve user prompts, or you can create autonomous agents running on sandboxes. 21 | 22 | Doing this ensures they are securely isolated from your system, while still allowing them to interact with each other as required. 23 | 24 | You can also run multiple agents in parallel, if you want to avoid interaction entirely. 25 | 26 | Using the forking mechanism, you can also A/B test different agents. 27 | 28 | ## Development environments 29 | 30 | You can use the SDK to programmatically provision a sandbox for anybody who needs an environment to code. Allowing you to run multiple development environments in parallel without them interfering with each other, all accessible through the browser. 31 | 32 | With the SDK, you can essentially create your own CodeSandbox for your team/company/school! 33 | 34 | ## Code Interpretation 35 | 36 | CodeSandbox SDK allows programmatically spinning up sandboxes (VMs) to execute code in. Providing an ideal environment to interpret code, for both for simple and complex tasks. 37 | 38 | As these sandboxes exist in total isolation, you can run untrusted code without worrying about it affecting your system. 39 | 40 | Many early adopters, such as Blackbox AI, are leveraging the power of CodeSandbox SDK to bring code interpretation capabilities to their generative AI applications. We highly recommend following the [guide by Together AI](https://docs.together.ai/docs/code-execution) to get CodeSandbox SDK running seamlessly with any of the leading open-source LLMs. 41 | 42 | ## CI/CD 43 | 44 | With the SDK, you can set up your own CI/CD implementation to run tests inside a sandbox and hibernate the sandbox when the tests are done. With our snapshotting technology, you can quickly pick up where you left off if you start the sandbox again to re-run your tests or evaluate the results. 45 | 46 | You can also use the SDK to create 1 sandbox that runs your CI/CD preparation, and then clone it multiple times to run your tests in parallel. 47 | -------------------------------------------------------------------------------- /packages/projects-docs/pages/tutorial/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "getting-started-with-dev-containers": "Getting started with Dev Containers", 3 | "cli-tool": "Install CLI tools and global modules", 4 | "getting-started-with-python": "Getting started with Python", 5 | "getting-started-with-php": "Getting started with PHP", 6 | "convert-browser-sandbox-cloud": "Convert Browser Sandboxes into VM Sandboxes" 7 | } 8 | -------------------------------------------------------------------------------- /packages/projects-docs/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /packages/projects-docs/public/command-runscript.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/command-runscript.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/convert-from-sidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/convert-from-sidebar.png -------------------------------------------------------------------------------- /packages/projects-docs/public/convert-from-terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/convert-from-terminal.png -------------------------------------------------------------------------------- /packages/projects-docs/public/dashboard-import-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/dashboard-import-github.png -------------------------------------------------------------------------------- /packages/projects-docs/public/devtools-management.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/devtools-management.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/docker-compose-notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/docker-compose-notification.png -------------------------------------------------------------------------------- /packages/projects-docs/public/docker-notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/docker-notification.png -------------------------------------------------------------------------------- /packages/projects-docs/public/docker-terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/docker-terminal.png -------------------------------------------------------------------------------- /packages/projects-docs/public/introduction-gitflow.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/introduction-gitflow.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/introduction-ios.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/introduction-ios.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/introduction-vscode.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/introduction-vscode.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/ios-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/ios-dashboard.png -------------------------------------------------------------------------------- /packages/projects-docs/public/ios-gh-import.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/ios-gh-import.png -------------------------------------------------------------------------------- /packages/projects-docs/public/ios-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/ios-layout.png -------------------------------------------------------------------------------- /packages/projects-docs/public/ios-navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/ios-navigation.png -------------------------------------------------------------------------------- /packages/projects-docs/public/ios-new-sandbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/ios-new-sandbox.png -------------------------------------------------------------------------------- /packages/projects-docs/public/ios-sidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/ios-sidebar.png -------------------------------------------------------------------------------- /packages/projects-docs/public/og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/og-image.jpg -------------------------------------------------------------------------------- /packages/projects-docs/public/overview-resize.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/overview-resize.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/php-dockerfile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/php-dockerfile.png -------------------------------------------------------------------------------- /packages/projects-docs/public/python-dockerfile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/python-dockerfile.png -------------------------------------------------------------------------------- /packages/projects-docs/public/repo-branching.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/repo-branching.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/repositories-upload-dnd.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/repositories-upload-dnd.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/settings-envvars.mp4_opt.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/settings-envvars.mp4_opt.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | https://codesandbox.io/docs/sitemap-0.xml 4 | -------------------------------------------------------------------------------- /packages/projects-docs/public/snapshot-builder.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/snapshot-builder.mp4 -------------------------------------------------------------------------------- /packages/projects-docs/public/team-creation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/packages/projects-docs/public/team-creation.png -------------------------------------------------------------------------------- /packages/projects-docs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./components/**/*.js", 4 | "./pages/**/*.md", 5 | "./pages/**/*.mdx", 6 | "./theme.config.js", 7 | "./styles.css", 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /packages/projects-docs/theme.config.js: -------------------------------------------------------------------------------- 1 | import Logo from "./components/Logo"; 2 | import { useConfig } from "nextra-theme-docs"; 3 | 4 | const OG_IMAGE_URL = "https://codesandbox.io/docs/projects/og-image.jpg"; 5 | 6 | export default { 7 | project: {}, 8 | 9 | footer: { component: null }, 10 | feedback: { content: null }, 11 | 12 | editLink: { 13 | text: "Edit this page on CodeSandbox →", 14 | component: ({ children, className, filePath }) => ( 15 | 19 | {children} 20 | 21 | ), 22 | }, 23 | 24 | sidebar: { 25 | titleComponent({ title, type }) { 26 | if (type === "separator") { 27 | return {title}; 28 | } 29 | return <>{title}; 30 | }, 31 | defaultMenuCollapseLevel: 1, 32 | toggleButton: true, 33 | }, 34 | gitTimestamp: null, 35 | useNextSeoProps() { 36 | return { 37 | titleTemplate: "%s – CodeSandbox", 38 | }; 39 | }, 40 | head() { 41 | const { frontMatter } = useConfig(); 42 | 43 | return ( 44 | <> 45 | {/* Favicons, meta */} 46 | 47 | 54 | 61 | 62 | 63 | 64 | 72 | 73 | 74 | ); 75 | }, 76 | logo: () => , 77 | }; 78 | -------------------------------------------------------------------------------- /packages/projects-docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": [ 4 | "dom", 5 | "dom.iterable", 6 | "esnext" 7 | ], 8 | "allowJs": true, 9 | "skipLibCheck": true, 10 | "strict": false, 11 | "noEmit": true, 12 | "incremental": true, 13 | "esModuleInterop": true, 14 | "module": "esnext", 15 | "moduleResolution": "node", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "jsx": "preserve" 19 | }, 20 | "include": [ 21 | "next-env.d.ts", 22 | "**/*.ts", 23 | "**/*.tsx" 24 | ], 25 | "exclude": [ 26 | "node_modules" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /packages/projects-docs/utils/cookieConsentTheme.css: -------------------------------------------------------------------------------- 1 | #cc-main { 2 | color-scheme: dark; 3 | font-family: Inter; 4 | 5 | --cc-bg: #333; 6 | --cc-primary-color: #fff; 7 | --cc-secondary-color: #ccc; 8 | 9 | --cc-separator-border-color: #525252; 10 | 11 | --cc-btn-primary-bg: #eaff96; 12 | --cc-btn-primary-color: #000; 13 | --cc-btn-primary-border-color: #eaff96; 14 | --cc-btn-primary-hover-bg: #f5ffcb; 15 | --cc-btn-primary-hover-color: #000; 16 | --cc-btn-primary-hover-border-color: #eaff96; 17 | 18 | --cc-btn-secondary-bg: #333; 19 | --cc-btn-secondary-color: #e5e5e5; 20 | --cc-btn-secondary-border-color: #525252; 21 | --cc-btn-secondary-hover-bg: #ffffff1a; 22 | --cc-btn-secondary-hover-color: #e5e5e5; 23 | --cc-btn-secondary-hover-border-color: #525252; 24 | 25 | --cc-cookie-category-block-bg: #333; 26 | --cc-cookie-category-block-border: #525252; 27 | --cc-cookie-category-block-hover-bg: #ffffff1a; 28 | --cc-cookie-category-block-hover-border: #525252; 29 | --cc-cookie-category-expanded-block-hover-bg: #525252; 30 | 31 | --cc-toggle-on-bg: var(--cc-btn-primary-bg); 32 | --cc-toggle-off-bg: #525252; 33 | --cc-toggle-on-knob-bg: var(--cc-btn-primary-color); 34 | --cc-toggle-off-knob-bg: #fff; 35 | --cc-toggle-readonly-bg: #525252; 36 | --cc-toggle-readonly-knob-bg: #adadad; 37 | 38 | --cc-btn-border-radius: 4px; 39 | } 40 | 41 | #cc-main .cm__body { 42 | padding-top: 4px; 43 | } 44 | 45 | #cc-main .pm__btn, 46 | #cc-main .cm__btn { 47 | font-size: 1em; 48 | font-weight: 400; 49 | } 50 | 51 | #cc-main .cm__btn-group, 52 | #cc-main .pm__btn-group { 53 | gap: 8px; 54 | } 55 | -------------------------------------------------------------------------------- /packages/projects-docs/utils/useInitAnalytics.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import amplitude from "amplitude-js"; 3 | import * as CookieConsent from "vanilla-cookieconsent"; 4 | import { cookieConsentConfig } from "./cookieConsentConfig"; 5 | 6 | export const useInitAnalytics = (amplitudeApiKey) => { 7 | const [analyticsInitialized, setAnalyticsInitialized] = useState(false); 8 | 9 | const initAnalytics = () => { 10 | if (!amplitudeApiKey || analyticsInitialized) { 11 | return; 12 | } 13 | 14 | amplitude.init(amplitudeApiKey, null, { 15 | includeReferrer: true, 16 | saveEvents: true, 17 | includeUtm: true, 18 | saveParamsReferrerOncePerSession: false, 19 | }); 20 | 21 | setAnalyticsInitialized(true); 22 | }; 23 | 24 | const handleCookieConsent = (cookie) => { 25 | const allowAnalytics = cookie?.categories?.includes("analytical") || false; 26 | if (allowAnalytics && !analyticsInitialized) { 27 | initAnalytics(); 28 | } 29 | 30 | amplitude.getInstance().setOptOut(!allowAnalytics); 31 | }; 32 | 33 | useEffect(() => { 34 | if (process.env.NODE_ENV !== "production" || window.self !== window.top) { 35 | return; 36 | } 37 | 38 | CookieConsent.run({ 39 | onFirstConsent: ({ cookie }) => { 40 | handleCookieConsent(cookie); 41 | }, 42 | onChange: ({ cookie }) => { 43 | handleCookieConsent(cookie); 44 | }, 45 | ...cookieConsentConfig, 46 | }); 47 | 48 | const cookieConsent = CookieConsent.getCookie(); 49 | handleCookieConsent(cookieConsent); 50 | }, []); 51 | }; 52 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | # all packages in direct subdirs of packages/ 3 | - 'packages/*' -------------------------------------------------------------------------------- /readme-assets/docs-screenshot-github.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codesandbox/docs/350b9f10198b8b67b5b504712911c95fd0f3f7f6/readme-assets/docs-screenshot-github.jpg -------------------------------------------------------------------------------- /shared-components/Hero.js: -------------------------------------------------------------------------------- 1 | import styles from "./Hero.module.css"; 2 | 3 | export default function Hero({ title, subtitle }) { 4 | return ( 5 |
6 |

{title}

7 |

{subtitle}

8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /shared-components/Hero.module.css: -------------------------------------------------------------------------------- 1 | .title { 2 | font-size: clamp(3.2rem, 6vw, 5rem) !important; 3 | } 4 | 5 | .subtitle { 6 | font-weight: 500; 7 | margin-top: 2rem !important; 8 | margin-bottom: 3rem !important; 9 | font-size: clamp(1.2rem, 3vw, 1.7rem) !important; 10 | line-height: 130% !important; 11 | max-width: 45rem !important; 12 | opacity: 0.8 !important; 13 | } 14 | -------------------------------------------------------------------------------- /shared-components/Tabs.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | width: 100%; 5 | padding: 2rem 0 1rem 0; 6 | } 7 | 8 | .tabList { 9 | flex-shrink: 0; 10 | display: flex; 11 | border-bottom: 2px solid var(--neutral-dark-medium); 12 | } 13 | 14 | html[class~="dark"] .tabList { 15 | border-color: var(--neutral-dark-medium); 16 | } 17 | 18 | html[class~="dark"] .tabTrigger:not([data-state="active"]):hover { 19 | border-bottom: 2px solid var(--neutral-dark-opacity); 20 | } 21 | 22 | html[class~="light"] .tabList { 23 | border-color: var(--neutral-light-high); 24 | } 25 | 26 | html[class~="light"] .tabTrigger:not([data-state="active"]):hover { 27 | border-bottom: 2px solid var(--neutral-light-opacity); 28 | } 29 | 30 | .tabTrigger[data-state="active"] { 31 | border-bottom: 2px solid var(--color-highlight); 32 | } 33 | 34 | .tabTrigger { 35 | all: unset; 36 | padding: 10px 15px; 37 | margin: 0 20px 0 0; 38 | line-height: 1; 39 | user-select: none; 40 | font-weight: 600; 41 | margin-bottom: -2px; 42 | border-bottom: 2px solid transparent; 43 | cursor: pointer; 44 | transition: border-color 125ms ease-out, color 125ms ease-out; 45 | } 46 | 47 | @media (max-width: 640px) { 48 | .tabTrigger { 49 | padding: 10px 5px; 50 | } 51 | } 52 | 53 | .tabContent { 54 | padding: 1rem 0 0 0; 55 | } 56 | 57 | .tabContent > h1:first-child, 58 | .tabContent > h2:first-child, 59 | .tabContent > h3:first-child, 60 | .tabContent > h4:first-child, 61 | .tabContent > ul:first-child, 62 | .tabContent > ol:first-child { 63 | margin-top: 1rem; 64 | } 65 | -------------------------------------------------------------------------------- /shared-components/Video.js: -------------------------------------------------------------------------------- 1 | import { useRef, useCallback, useEffect } from "react"; 2 | import { useInView } from "react-intersection-observer"; 3 | import "intersection-observer"; 4 | 5 | export default ({ src, caption, ratio, autoPlay = true, playsInline = true, controls = false }) => { 6 | const [inViewRef, inView] = useInView({ 7 | threshold: 1, 8 | }); 9 | const videoRef = useRef(); 10 | 11 | const setRefs = useCallback( 12 | (node) => { 13 | // Ref's from useRef needs to have the node assigned to `current` 14 | videoRef.current = node; 15 | // Callback refs, like the one from `useInView`, is a function that takes the node as an argument 16 | inViewRef(node); 17 | 18 | if (node) { 19 | node.addEventListener("click", function () { 20 | if (this.paused) { 21 | this.play(); 22 | } else { 23 | this.pause(); 24 | } 25 | }); 26 | } 27 | }, 28 | [inViewRef] 29 | ); 30 | 31 | useEffect(() => { 32 | if (!videoRef || !videoRef.current) { 33 | return; 34 | } 35 | 36 | if (inView) { 37 | videoRef.current.play(); 38 | } else { 39 | videoRef.current.pause(); 40 | } 41 | }, [inView]); 42 | 43 | return ( 44 |
45 | 56 | {caption && ( 57 |
58 | {caption} 59 |
60 | )} 61 |
62 | ); 63 | }; 64 | -------------------------------------------------------------------------------- /shared-components/contants.js: -------------------------------------------------------------------------------- 1 | export const SANDBOX_DOCS_URL = "https://codesandbox.io/docs"; 2 | export const PROJECTS_DOCS_URL = "https://codesandbox.io/docs/projects"; 3 | export const VSCODE_DOCS_URL = "https://codesandbox.io/docs/vscode"; 4 | export const IOS_DOCS_URL = "https://codesandbox.io/docs/ios"; 5 | -------------------------------------------------------------------------------- /shared-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shared-components", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "author": "", 9 | "license": "ISC" 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react" 4 | } 5 | } --------------------------------------------------------------------------------