Skip to main content

​
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

Syntax Highlighting

Support for 50+ programming languages with intelligent syntax highlighting and code coloring.

IntelliSense

Smart autocomplete, error detection, and inline suggestions powered by language servers.

Multi-File Editing

Open and edit multiple files simultaneously with tabbed interface and file tree navigation.

Live Preview

Real-time preview of your changes with hot reload for supported frameworks.

​
Supported Languages

​
Frontend Technologies

  • 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
  • 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

​
Backend Languages

  • Node.js runtime support
  • Express.js framework integration
  • NPM package management
  • Environment variable handling

​
Editor Interface

​
Edit Files

Make manual changes directly to your files
Click the Save button in the top-right corner of the file edit page.
Click the Reset button in the top-right corner of the file edit page.

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

​
File Management

​
Importing Projects

GitHub Import

Connect your GitHub account and clone repositories directly into the editor.

Import Folder

Upload project folders from your computer.

Create new

Start with templates or create empty projects from scratch.

​
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.
    • 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

​
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
Need help with the integrated terminal? Check out our Terminal Guide or learn about Live Preview features.