> ## Documentation Index
> Fetch the complete documentation index at: https://shivamgoyal.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Sandbox/Editing Environment

> CodeNull's powerful code editing environment with integrated live preview

# Sandbox/Editing Environment

The Sandbox/Editing Environment is the core workspace where you'll build and edit your web application's code. It combines a powerful code editor with a live preview system, allowing you to see your changes in real-time.

## Integrated Development Environment

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/sandbox-environment.png" alt="CodeNull Sandbox Environment" />
</Frame>

The environment is divided into two main sections:

1. **Code Editor** - Where you write and edit your code
2. **Live Preview** - Where you see the results instantly

## Code Editor Features

The CodeNull editor is powered by Monaco (the same engine behind VS Code) and includes:

### Intelligent Code Assistance

<CardGroup cols={2}>
  <Card title="Syntax Highlighting" icon="highlighter">
    Language-aware coloring for HTML, CSS, JavaScript, TypeScript, and JSX
  </Card>

  <Card title="IntelliSense" icon="lightbulb">
    Smart code completion based on imported libraries and component structure
  </Card>

  <Card title="Error Detection" icon="bug">
    Real-time error checking and linting with helpful error messages
  </Card>

  <Card title="Code Formatting" icon="align-center">
    Automatic formatting according to best practices (Prettier integration)
  </Card>
</CardGroup>

## Live Preview

The integrated Live Preview panel allows you to see your application as you build it:

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/live-preview.png" alt="Live Preview Feature" />
</Frame>

### Key Features

* **Real-time Updates**: Changes appear in the preview as you type
* **Device Emulation**: Test your UI on various screen sizes (mobile, tablet, desktop)
* **Interactive Testing**: Click, type, and interact with your application in the preview
* **Console Access**: View console logs and debug information
* **Network Monitoring**: Track API calls and resource loading
* **Performance Metrics**: Monitor rendering times and memory usage

## File Management

The environment includes a comprehensive file management system:

<AccordionGroup>
  <Accordion title="Project Explorer">
    * Tree view of all project files
    * Create, rename, and delete files
    * Organize files into folders
    * Drag and drop file organization
  </Accordion>

  <Accordion title="Version Control">
    * Integrated Git support
    * Commit changes
    * Branch management
    * Merge conflict resolution
    * Change history visualization
  </Accordion>
</AccordionGroup>

## Code Execution & Build Process

The Sandbox Environment handles all aspects of code execution through a sophisticated in-browser compiler system:

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/code-compilation-process.png" alt="In-browser Compilation Process" />
</Frame>

### Code Generation and Compilation Process

When you work in the CodeNull environment, code is often generated after:

* Confirming website details and pages in the chat interface
* Making calls to the chat-completion API
* Using the AI assistant to generate components

This generated code is then processed through our in-browser compiler, which goes through three major stages:

<Steps>
  <Step title="JSX/TSX Transformation">
    The compiler converts JSX/TSX code into executable JavaScript using esbuild, a fast JavaScript bundler and minifier. JSX (JavaScript XML) and TSX (TypeScript XML) are extensions of JavaScript and TypeScript that allow developers to write HTML-like syntax within their JavaScript code. Since browsers cannot execute JSX/TSX directly, esbuild converts it into standard JavaScript that the browser can understand.
  </Step>

  <Step title="HTML Template Integration">
    The generated JavaScript code is embedded into a predefined HTML template. This template contains everything the application needs to function properly, including libraries, stylesheets, and other assets. The HTML template serves as the container where the dynamic JavaScript code is inserted, ensuring proper loading and organization of each element.
  </Step>

  <Step title="Sandbox Execution">
    The complete code (HTML, JavaScript, and all dependencies) is injected into an iframe or sandbox environment. This ensures the compiled code runs in a controlled, isolated context that cannot conflict with other parts of the application or website. This isolation allows for testing directly within the browser with smooth execution and display of the compiled code.
  </Step>
</Steps>

This entire process happens automatically and nearly instantaneously as you type or when code is generated, providing a seamless development experience.

### Additional Build Processes

Beyond the core compilation, the system also handles:

* **Code Analysis**: Your code is analyzed for errors and optimization opportunities
* **Dependency Resolution**: External libraries and components are automatically imported
* **Asset Processing**: Images, fonts, and other assets are optimized and loaded
* **CSS Processing**: Styles are processed, including Tailwind CSS utilities

## Split View Options

Customize your workspace with flexible split views:

* **Vertical Split**: Editor and preview side by side
* **Horizontal Split**: Editor above and preview below
* **Editor Focus**: Maximize the editor for complex coding
* **Preview Focus**: Maximize the preview for detailed testing
* **Multi-File**: Work with multiple files in split panes

## Terminal Access

For advanced operations, the environment includes an integrated terminal:

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/integrated-terminal.png" alt="Integrated Terminal" />
</Frame>

The terminal gives you direct access to:

* Node.js commands
* Package management (npm, yarn)
* Build processes
* Git operations
* File system operations

## Debug Tools

The environment includes comprehensive debugging capabilities:

<CardGroup cols={2}>
  <Card title="Breakpoints" icon="hand">
    Pause execution at specific lines
  </Card>

  <Card title="Variable Inspection" icon="glasses">
    Examine variable values during execution
  </Card>

  <Card title="Call Stack" icon="layer-group">
    Trace the execution path
  </Card>

  <Card title="Performance Profiling" icon="tachometer-alt">
    Identify performance bottlenecks
  </Card>
</CardGroup>

## Integration with AI Features

The editing environment works seamlessly with CodeNull's AI capabilities:

* **Code Generation**: Insert AI-generated code directly into the editor
* **Code Explanation**: Get explanations of selected code blocks
* **Refactoring Suggestions**: Receive AI recommendations for code improvements
* **Problem Solving**: Get help debugging issues from the AI assistant

## Next Steps

* Learn how to use the [AI Chatbot Interface](/frontend-dashboard/chatbot) to accelerate your development
* Explore [Component Toolbox](/frontend-dashboard/toolbox) to access pre-built UI components
* Set up [Collaboration Features](/frontend-dashboard/collaboration) to work with your team