CodeSandbox product screens examples

CodeSandbox

Sign-in screen where the user authenticates with GitHub, Google, or Apple to access their projects.

• Sign In

CodeSandbox

Create modal where the user selects a starter framework like React, Vanilla, or Vue to begin a new project.

• Add & Create
• Templates

CodeSandbox

Creation modal where the user is prompted to sign in to import a repository from GitHub.

• Sign In
• Import & Export

CodeSandbox

Create modal where the user can browse cloud templates like React, Node.js, and Astro, but is prompted to sign in before forking.

• Sign In
• Browse

CodeSandbox

Create modal where the user searches for or selects a starting template like React, Node.js, or Vue to initialize a new project.

• Add & Create
• Templates

CodeSandbox

Code editor where the user is searching for a new project template but receives zero results in the creation modal.

• Empty State
• Search

CodeSandbox

Code editor where the user writes React code in a browser-based IDE, views a live preview, and manages project files and dependencies.

• Code Editor
• Media Editor

CodeSandbox

Code editor interface with a prominent modal overlay prompting the user to sign in via GitHub, Google, or Apple to continue building projects.

• Sign In
• Code Editor

CodeSandbox

Code editor view where the user is prompted to confirm the permanent deletion of a package.json file via a modal dialog.

• Confirmation
• Delete

CodeSandbox

Code editor interface where an anonymous user can edit React code files, manage dependencies, and view external resources.

• Code Editor
• Files

CodeSandbox

Code editor interface where an anonymous user can write React code, manage dependencies, and view a live browser preview.

• Code Editor
• Sign Up

CodeSandbox

Web-based code editor where an anonymous user is viewing a React project with a live mobile preview and has opened a popover prompting them to upgrade to Pro to change privacy settings.

• Code Editor
• Media Editor