CINXE.COM
CodeSandbox SSE Discontinued
<!DOCTYPE html> <html> <head> <title>CodeSandbox SSE Discontinued</title> <meta charset="UTF-8" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" /> <style> :root { --title: #000; --body: #373737; --bg: #fff; --link: #653ffd; } @media (prefers-color-scheme: dark) { :root { --title: #e5e5e5; --body: #808080; --bg: #0f0e0e; --link: #edffa5; } } html { margin: 0; overflow: hidden; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: "Inter", sans-serif; background-color: var(--bg); color: var(--body); line-height: 1.25rem; } ul { margin: 0; } #app { position: relative; height: 100vh; width: 100vw; display: flex; align-items: center; } @keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0px); } } .container { margin: 0 auto; line-height: 1.4; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; animation: enter 0.8s ease-in-out forwards; } h1 { color: var(--title); font-size: 1.5rem; line-height: 2.625rem; margin: 0; } p { margin: 0; } a { position: relative; color: var(--link); white-space: nowrap; text-decoration: none; } a:before { content: ""; position: absolute; width: 100%; height: 1px; background: currentColor; top: 100%; left: 0; pointer-events: none; transform-origin: 100% 50%; transform: scale3d(0, 1, 1); transition: transform 0.3s; } a:hover::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); } a > span { font-size: 0.75rem; } </style> </head> <body> <div id="app"> <div class="container"> <h1>SSE has been discontinued</h1> <p> Our Container Sandbox (SSE) experience has been replaced with <a href="https://codesandbox.io/docs/learn/devboxes/overview" target="_blank" >Devboxes</a >. </p> <div> <span>Devboxes allow you to</span> <ul> <li>edit in both VS Code and our web editor</li> <li>run live sessions</li> <li>use custom Docker images using Dev Containers</li> <li>change VM specs on the fly</li> </ul> </div> <a href="https://codesandbox.io/p/redirect-to-project-editor/ln0mi" >Open Container Sandbox as a Devbox <span>↗</span></a > </div> </div> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8e70d7b2cc00400e',t:'MTczMjM2MTU4Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>