​
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

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

Syntax Highlighting

Language-aware coloring for HTML, CSS, JavaScript, TypeScript, and JSX

IntelliSense

Smart code completion based on imported libraries and component structure

Error Detection

Real-time error checking and linting with helpful error messages

Code Formatting

Automatic formatting according to best practices (Prettier integration)

​
Live Preview

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

​
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:

​
Code Execution & Build Process

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

​
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:

1

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.

2

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.

3

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.

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:

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:

Breakpoints

Pause execution at specific lines

Variable Inspection

Examine variable values during execution

Call Stack

Trace the execution path

Performance Profiling

Identify performance bottlenecks

​
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