Skip to main content

​
Overview

Tesslate Studio uses the Monaco Editor (version 4.7.0), the same editor engine that powers Visual Studio Code. This gives you a professional coding experience directly in the browser, with full support for TypeScript, syntax highlighting, IntelliSense, and real-time error detection.

Syntax Highlighting

Full support for TypeScript, JavaScript, JSX, TSX, CSS, HTML, JSON, Python, Go, and more

IntelliSense

Auto-completion, type information, parameter hints, and import suggestions

Error Detection

Real-time TypeScript and syntax error checking as you type

Multi-File Editing

Open multiple files in tabs and switch between them instantly

​
Editor Layout

The code editor sits within the project builder workspace. You can switch between multiple view modes:
The editor takes the primary panel. The file tree appears on the left side, and you can resize the editor to be as wide as you need.
The project builder also includes other view modes (kanban, assets, terminal) that you can switch to at any time. The editor preserves your open tabs and cursor position when you switch views.

​
Opening Files

Click any file in the file tree sidebar to open it in the editor. Files open as tabs at the top of the editor panel.

​
Container-Scoped Files

In multi-container projects, files are scoped to the active container. The file tree shows only the files belonging to the currently selected container. Switch containers using the container selector in the builder toolbar.

​
Editing Files

1

Select a File

Click a file in the tree or use Ctrl/Cmd + P to search.
2

Edit Code

Make changes in the Monaco editor. IntelliSense provides suggestions as you type.
3

Save

Files save when you press Ctrl/Cmd + S. The save operation calls projectsApi.saveFile(slug, filePath, content) to persist the file to the container filesystem.
4

See Changes in Preview

If Hot Module Replacement (HMR) is active, changes appear in the live preview within milliseconds.

​
Keyboard Shortcuts

ShortcutAction
Ctrl/Cmd + SSave current file
Ctrl/Cmd + PQuick file open
Ctrl/Cmd + WClose current tab
Ctrl/Cmd + Shift + FSearch across all files
ShortcutAction
Ctrl/Cmd + ZUndo
Ctrl/Cmd + Shift + ZRedo
Ctrl/Cmd + FFind in file
Ctrl/Cmd + HFind and replace
Ctrl/Cmd + DSelect next occurrence
Alt + Up/DownMove line up/down
Alt + Shift + Up/DownCopy line up/down
ShortcutAction
Ctrl/Cmd + /Toggle line comment
Ctrl/Cmd + ]Indent line
Ctrl/Cmd + [Outdent line
Alt + Shift + FFormat document
F2Rename symbol
Ctrl/Cmd + .Quick fix suggestions
Tesslate Studio has over 50 keyboard shortcuts registered through a centralized keyboard registry. Press ? at any time to open the keyboard shortcuts modal for the full list, or press Cmd/Ctrl + K to open the command palette.

​
IntelliSense Features

​
Auto-Completion

As you type, Monaco provides contextual suggestions:
  • Variable and function names from the current scope
  • Import suggestions for modules and packages
  • Property access on objects and components
  • CSS class names and property values
Press Tab or Enter to accept a suggestion. Use the arrow keys to navigate the suggestion list.

​
Type Information

Hover over any symbol to see its type definition and documentation:
  • Function signatures with parameter types
  • Variable types and values
  • Component prop interfaces
  • Module exports

​
Parameter Hints

When you type a function call, Monaco shows the expected parameters:
  • Parameter names and types
  • Optional vs. required parameters
  • Default values where applicable

​
Import Suggestions

Monaco can automatically add missing import statements:
  • Type a component or function name that is not imported
  • Accept the auto-import suggestion
  • The import statement is added at the top of the file

​
Error Detection

The editor provides real-time error feedback:
IndicatorMeaning
Red squiggly underlineSyntax error or type error
Yellow squiggly underlineWarning (unused variable, implicit any, etc.)
Lightbulb iconQuick fix available (click or press Ctrl/Cmd + .)
TypeScript errors appear in real time as you type. This helps catch issues before they reach the dev server or the live preview.

​
File Tree

The file tree shows your project’s directory structure:
  • Expand/Collapse: Click the arrow icons to navigate folders
  • Select a file: Click to open in the editor
  • Context menu: Right-click for options (create, rename, delete)
  • Search/Filter: Filter the tree by typing a filename

​
File Operations

Right-click a folder in the file tree and select New File or New Folder. AI agents also create files automatically when generating code.

​
Excluded Directories

The file tree hides certain directories by default to reduce clutter:
  • node_modules/ (dependency tree)
  • .git/ (version control internals)
  • dist/ and build/ (build output)

​
Working with Multiple Files

​
Tab Management

Open files appear as tabs at the top of the editor:
  • Open: Click a file in the tree to add a tab
  • Switch: Click a tab or use Ctrl/Cmd + Tab
  • Close: Click the X on a tab or press Ctrl/Cmd + W
  • Close Others: Right-click a tab and select Close Others
  • Close All: Right-click and select Close All

​
File Events

When a file changes (from the editor, AI agent, or external process), Tesslate’s file event system (fileEvents) broadcasts the update. This keeps the file tree, open tabs, and live preview in sync.

​
AI-Generated Code

When an AI agent creates or modifies files through the chat interface:
1

Agent Writes Code

The agent uses the write_file or edit_file tool to create or modify files in your project.
2

File Opens Automatically

The editor navigates to the affected file and opens it in a new tab (or switches to an existing tab).
3

Changes Highlighted

Newly generated or modified lines are briefly highlighted so you can see exactly what changed.
4

Review

Read through the changes. The file is already saved to the container filesystem.
5

Edit if Needed

Make manual adjustments directly in the editor. The live preview updates as you save.
Always review AI-generated code before deploying to production. AI agents can produce functional but imperfect code. Check for edge cases, security issues, and alignment with your project’s conventions.

​
Editor Configuration

Customize your editing experience through the editor settings:
  • Font size (adjustable range)
  • Font family (monospace fonts like Fira Code, Consolas, JetBrains Mono)
  • Line height
  • Minimap toggle (the code overview on the right edge)
The editor follows Tesslate’s global theme (dark or light mode). Toggle between themes using your user preferences or the theme switcher.
  • Tab size (2 or 4 spaces)
  • Word wrap on/off
  • Bracket matching
  • Auto-closing brackets and quotes

​
Troubleshooting

Cause: Browser memory pressure or a heavy file loaded in the editor.What to try:
  • Close unused tabs to free memory
  • Refresh the browser page
  • Check the browser console for JavaScript errors
  • Disable browser extensions that might interfere
Cause: Network issue or container not running.What to try:
  • Check your internet connection
  • Verify the container status (should be “running”)
  • Try pressing Ctrl/Cmd + S to trigger a manual save
  • Check the browser console for API errors
Cause: TypeScript language service has not initialized yet, or the file type is not recognized.What to try:
  • Wait a few seconds after opening the project (the TypeScript service needs time to index)
  • Verify the file has a .ts or .tsx extension
  • Check that package.json and tsconfig.json are valid
  • Restart the dev server from project settings

​
Best Practices

Review AI Changes

Always read through generated code. Understand what was created, test the functionality, and refine as needed.

Keep Files Focused

One component per file. Use logical folder structures. Keep files at a manageable size for both you and the AI agents.

Use TypeScript

TypeScript catches errors at edit time, improves IntelliSense accuracy, and makes refactoring safer. The editor’s strongest features rely on type information.

Learn the Shortcuts

Invest time in learning keyboard shortcuts. They dramatically speed up navigation and editing. Press ? to see all available shortcuts.

​
Next Steps

Live Preview

See your changes in real time as you edit

Chat Interface

Use AI agents to generate and modify code

Git Integration

Commit and push your changes to a remote repository

Understanding Projects

Learn about project structure and multi-container support