sandpack

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

Vue3 components that give you the power of editable sandboxes that run in the browser.

The new bundler/runtime powering client-side sandpack sandboxes

Early Alpha: Chat with React Code-Editor and Live-preview using Sandpack by Codesandbox. Vercel ai SDK RSC GenUI

Use sandpack-vue3 in vitepress as directive.

Enhanced File Explorer for Sandpack. Providing immense flexibility to Sandpack's capabilities.

The Playground for Chakra UI

⚡️Design, generate, iterate and live preview Nextjs pages with 🤖 GPT! Would now be considered a v0 clone. Quick hack to generate & serve Next apps quickly in the browser using Next, Prisma, OpenAI & Sandpack

This example shows how you can use Sandpack and firepad-x to build a collbrative text editor.

Use text or image prompts to generate components and apps built with React.

Advanced File Explorer for Sandpack

My personal website and developer blog

https://github.com/codesandbox/sandpack/tree/main/sandpack-react

An AI powered website building tool built using Next JS, React and Tailwind, similar to websites like Lovable. In this the features encompass direct code editing and saving and a robust database convex for forthwith data retrieval and sandpack to render the code and preview in the UI

Stepped, multi-file Sandpack live-code demos for Slidev

Author Sandpack examples in MDX

Frontend for FrameForge built with React 18, TypeScript, and Vite. It provides a workshop-style interface for generating or correcting React components, visualizing results live, reviewing code, navigating between design sessions, and browsing a version history of every code iteration the AI produced.

A React.js playground built using Sandpack and Typescript.

A simple IDE for FrontEnd development

🧛🏻‍♂️ Dark theme for Sandpack