Skip to main content

​
Overview

Tesslate Studio uses the Monaco Editor (the same editor that powers VS Code) for a professional coding experience.

Syntax Highlighting

Full TypeScript, JavaScript, CSS, and HTML support

IntelliSense

Auto-completion and smart suggestions

Error Detection

Real-time TypeScript and linting errors

Multi-File

Work with multiple files simultaneously

​
Editor Layout

The code editor appears in the left panel of the project workspace: 
┌─────────────────┬─────────────────┐
│  File Tree      │  Live Preview   │
│  ├── src/       │                 │
│  │   └── ...    │                 │
│  └── public/    │                 │
│                 │                 │
│  Code Editor    │                 │
│  [Your code]    │                 │
│                 │                 │
│  Chat Panel     │                 │
└─────────────────┴─────────────────┘

​
Opening Files

  • File Tree
  • AI Generated
  • Click any file in the file tree
  • File opens in editor
  • Multiple files shown as tabs

​
Editing Files

​
Basic Operations

1

Select File

Click file in tree or use Ctrl/Cmd + P
2

Edit Code

Make changes in the Monaco editor
3

Auto-Save

Changes save automatically
4

See Preview

Preview updates instantly with HMR

​
Keyboard Shortcuts

  • Ctrl/Cmd + S: Manual save
  • Ctrl/Cmd + P: Quick file open
  • Ctrl/Cmd + W: Close current tab
  • Ctrl/Cmd + Shift + F: Search across files
  • Ctrl/Cmd + Z: Undo
  • Ctrl/Cmd + Shift + Z: Redo
  • Ctrl/Cmd + F: Find in file
  • Ctrl/Cmd + H: Find and replace
  • Ctrl/Cmd + D: Select next occurrence
  • Alt + Up/Down: Move line up/down
  • Ctrl/Cmd + /: Toggle comment
  • Ctrl/Cmd + ]: Indent
  • Ctrl/Cmd + [: Outdent
  • Alt + Shift + F: Format document
  • F2: Rename symbol

​
Editor Features

​
IntelliSense

Get smart code completions:

Auto-Complete

  • Type to see suggestions
  • Tab or Enter to accept
  • Arrow keys to navigate

Type Information

  • Hover over code
  • See type definitions
  • View documentation

Import Suggestions

  • Auto-import components
  • Suggest missing imports
  • Organize imports

Parameter Hints

  • See function signatures
  • View parameter types
  • Get usage examples

​
Error Detection

Real-time error checking:
  • Red Squiggles: Syntax errors
  • Yellow Squiggles: Warnings
  • Hover: See error details
  • Quick Fix: Click lightbulb for fixes
TypeScript errors appear in real-time as you type, helping catch issues before runtime.

​
Code Formatting

Keep code clean and consistent:
  1. Auto-Format: Ctrl/Cmd + Shift + F
  2. Format on Save: Enabled by default
  3. Prettier Integration: Built-in formatting
  4. Customizable: Adjust in settings

​
File Tree

The file tree shows your project structure:
  • Expand/Collapse
  • File Operations
  • Search
  • Click arrows to expand folders
  • Double-click folder name
  • See full project structure

​
File Icons

Different icons for file types:
  • 📄 TypeScript (.ts, .tsx)
  • 🎨 Styles (.css, .scss)
  • ⚙️ Config (.json, .config.js)
  • 📦 Package files
  • 📁 Folders

​
Working with Multiple Files

​
Tabs

Manage open files with tabs:
  • Open Multiple: Click files to open tabs
  • Switch Tabs: Click tab or Ctrl/Cmd + Tab
  • Close Tab: Click X or Ctrl/Cmd + W
  • Close Others: Right-click → Close Others
  • Close All: Right-click → Close All

​
Split View

Coming soon:
  • Side-by-side editing
  • Compare files
  • Reference while coding

​
AI-Generated Code

When AI agents create or modify code:
1

AI Creates File

Agent generates new file or edits existing
2

Auto-Opens

File automatically opens in editor
3

Changes Highlighted

New/modified code briefly highlighted
4

Review

Review changes before proceeding
5

Edit if Needed

Make manual adjustments
Always review AI-generated code before using in production. AI can make mistakes.

​
Editor Settings

Customize your editing experience:
  • Font size (12-24px)
  • Font family (Fira Code, Consolas, etc.)
  • Line height
  • Minimap on/off
  • VS Code Dark (default)
  • VS Code Light
  • High contrast themes
  • Custom themes
  • Auto-save delay
  • Format on save
  • Tab size (2 or 4 spaces)
  • Word wrap

​
Best Practices

Review AI Changes

  • Always check generated code
  • Understand what changed
  • Test functionality
  • Make refinements

Keep Files Focused

  • One component per file
  • Logical file organization
  • Clear naming conventions
  • Reasonable file sizes

Use TypeScript

  • Catch errors early
  • Better auto-completion
  • Self-documenting code
  • Easier refactoring

Format Regularly

  • Use auto-format
  • Consistent code style
  • Easier to read
  • Better diffs

​
Troubleshooting

Problem: Editor frozen or laggySolutions:
  • Refresh the browser
  • Close unused tabs
  • Check browser console for errors
  • Disable browser extensions
Problem: Changes not persistingSolutions:
  • Check file permissions
  • Ensure file isn’t read-only
  • Try manual save (Ctrl/Cmd + S)
  • Refresh and try again
Problem: Auto-complete not workingSolutions:
  • Wait for TypeScript to initialize
  • Check file has .ts or .tsx extension
  • Ensure package.json is valid
  • Restart development server

​
Next Steps

Live Preview

See your changes in real-time

Chat Interface

Use AI to generate code

GitHub Integration

Commit and push changes

Using Agents

Let AI write code for you