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

# Code Editor

> Use ChatAndBuild's integrated code editor for development

## Overview

ChatAndBuild includes a full-featured code editor built on CodeMirror, providing syntax highlighting, IntelliSense, and advanced editing features for all major programming languages and frameworks.

## Editor Features

<CardGroup cols={2}>
  <Card title="Syntax Highlighting" icon="code">
    Support for 50+ programming languages with intelligent syntax highlighting and code coloring.
  </Card>

  <Card title="IntelliSense" icon="lightbulb">
    Smart autocomplete, error detection, and inline suggestions powered by language servers.
  </Card>

  <Card title="Multi-File Editing" icon="folder">
    Open and edit multiple files simultaneously with tabbed interface and file tree navigation.
  </Card>

  <Card title="Live Preview" icon="eye">
    Real-time preview of your changes with hot reload for supported frameworks.
  </Card>
</CardGroup>

## Supported Languages

### Frontend Technologies

<AccordionGroup>
  <Accordion title="Web Languages">
    * **HTML**: Full HTML5 support with semantic validation
    * **CSS**: CSS3, SCSS, Sass, Less with autoprefixing
    * **JavaScript**: ES6+, JSX, with modern syntax support
    * **TypeScript**: Full TypeScript support with type checking
  </Accordion>

  <Accordion title="Frameworks & Libraries">
    * **React**: JSX/TSX with component intelligence
    * **Vue**: Vue 3 composition API and template syntax
    * **Angular**: TypeScript with Angular decorators
    * \*\*Next.js: \*\*Full-stack React framework with App Router and API routes
    * **Remix**: Full-stack React framework with server-side rendering

      **... and more**
  </Accordion>
</AccordionGroup>

### Backend Languages

<Tabs>
  <Tab title="JavaScript/Node.js">
    * Node.js runtime support
    * Express.js framework integration
    * NPM package management
    * Environment variable handling
  </Tab>

  <Tab title="Python">
    * Python 3.8+ support
    * Django and Flask frameworks
    * Package management with pip
    * Virtual environment handling
  </Tab>

  <Tab title="Other Languages">
    * **PHP**: Laravel, CodeIgniter support
    * **Go**: Full Go module support
    * **Rust**: Cargo project support
    * **Java**: Maven and Gradle projects

      ... and more
  </Tab>
</Tabs>

## Editor Interface

### Edit Files

Make manual changes directly to your files

<AccordionGroup>
  <Accordion title="To Save" icon="folder-check">
    Click the **Save** button in the top-right corner of the file edit page.
  </Accordion>

  <Accordion title="To Revert the Changes " icon="clock-rotate-left">
    Click the **Reset** button in the top-right corner of the file edit page.
  </Accordion>
</AccordionGroup>

### Viewing File Difference

Review the differences between file versions, with clear highlights of what was added or deleted:

* Go to **Diff** section in the top-left corner of the file edit page.

<Tip>
  You can also check the update status of each file—showing how many lines were added or removed—on the right side of the file name.
</Tip>

## File Management

### Importing Projects

<Steps>
  <Step title="GitHub Import" icon="git">
    Connect your GitHub account and clone repositories directly into the editor.
  </Step>

  <Step title="Import Folder" icon="file-arrow-down">
    Upload project folders from your computer.
  </Step>

  <Step title="Create new" icon="file-circle-plus">
    Start with templates or create empty projects from scratch.
  </Step>
</Steps>

### Export Options

Save your work in multiple formats:

1. Go to **Code** section in the top-left corner of the file edit page and click **Sync & Export.**
2. * **Download ZIP**: Get all project files as a compressed archive
   * **Push to GitHub**: Save directly to a GitHub repository
   * **Sync**: Syncs your project files to a local directory on your computer

## Customization

### <Icon icon="palette" iconType="duotone" size={18} />  Themes

At the start, you can pick a theme you’d like your app to be built with

* **Glassmorphism**: Translucent glass-like effects and modern aesthetics
* **Neumorphism**: Soft, extruded plastic look with subtle shadows
* **Neo-Brutalism**: Raw, bold, and unpolished aesthetic with strong contrasts
* **Vaporwave Aesthetic**: Retro-futuristic 80s-inspired aesthetic with surreal visuals
* **Memphis Design:** Colorful, playful design with geometric patterns
* **Cyberpunk Future**: Futuristic, dystopian style with neon and dark tech vibes

<Note>
  Need help with the integrated terminal? Check out our [Terminal Guide](/docs/workbench/terminal) or learn about [Live Preview](/docs/workbench/preview) features.
</Note>