Docs
Codi Sandbox
UI Guide

Get started with Codi Sandbox

Header

The header contains three fixed buttons:

  1. Package Manager: Allows you to add libraries to the sandbox

  2. History: Shows all your sandboxes

  3. 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:

  1. 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

  1. 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:

  1. Framework Selection: First dropdown for selecting frameworks (e.g., React in the image)

  2. Styling Selection: Second dropdown for choosing styling options (e.g., Tailwind in the image)

  3. Model Selection: Dropdown for choosing the AI model (e.g., Claude 3.5 Sonnet in the image)

  4. 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.