Get started with Codi Sandbox
Header
The header contains three fixed buttons:
-
Package Manager: Allows you to add libraries to the sandbox
-
History: Shows all your sandboxes
-
New Sandbox: Creates a new sandbox environment
When generating content, a dropdown appears for selecting versions within a sandbox.
Main Area
The main area of the Sandbox is divided into two halves:
- Editor Half:
- Contains file tabs at the top (e.g., "App.js" in the image)
- Shows the file content section below the tabs
- Any changes made in the editor are rendered immediately
- Preview Half: - Displays the rendered or preview element of the files - In the image, it shows "Hello world" as the output of the code
Generator Card
The generator card at the bottom has some specific features:
-
Framework Selection: First dropdown for selecting frameworks (e.g., React in the image)
-
Styling Selection: Second dropdown for choosing styling options (e.g., Tailwind in the image)
-
Model Selection: Dropdown for choosing the AI model (e.g., Claude 3.5 Sonnet in the image)
-
Input Area: Text field for entering prompts or instructions
Additional Features
- The UI supports syntax highlighting in the editor, as seen with the colored code in the App.js file.
- The preview updates in real-time as code changes, providing immediate feedback.
- The layout is designed for side-by-side coding and preview, enhancing the development experience.
This Sandbox UI is designed to provide a seamless experience for coding, previewing, and generating content using AI assistance, all within a single interface.