teta.so
Sign in

Code Editor

Teta includes a full VS Code editor running in your browser. It gives you the same editing experience as the desktop version of VS Code, with syntax highlighting, IntelliSense, file navigation, and an integrated terminal. Use it when you need direct control over your code or want to make quick edits without going through the chat.

VS Code in the Browser

The code editor is powered by code-server, which runs a full instance of VS Code in your project sandbox. You get access to the complete editor feature set:

  • Syntax highlighting for Svelte, TypeScript, JavaScript, CSS, HTML, and JSON
  • IntelliSense and autocomplete for TypeScript and JavaScript
  • Multi-cursor editing
  • Find and replace across files
  • Extensions support
  • Keyboard shortcuts (the same ones you use in desktop VS Code)

The editor connects directly to your project sandbox, so every file you see and edit is the same file the AI and preview use. Changes are reflected immediately.

File Tree Navigation

The file explorer panel on the left side shows your complete project structure. Click any file to open it in the editor. You can:

  • Expand and collapse directories
  • Create new files and folders (right-click context menu)
  • Rename and delete files
  • Drag files to rearrange them
  • Open multiple files in tabs

SvelteKit File Structure

Understanding the SvelteKit file structure helps you navigate your project efficiently:

src/
  routes/          # Pages and API endpoints
    +page.svelte   # Home page
    +layout.svelte # Root layout (nav, footer)
    about/
      +page.svelte # /about page
    api/
      contact/
        +server.ts # API endpoint
  lib/
    components/    # Reusable Svelte components
    utils/         # Utility functions
    stores/        # Svelte stores
  app.html         # HTML shell
  app.css          # Global styles
static/            # Static assets (images, fonts)
svelte.config.js   # SvelteKit configuration
vite.config.ts     # Vite configuration
package.json       # Dependencies

Routes define your pages. Each +page.svelte file becomes a URL. A file at src/routes/pricing/+page.svelte creates the /pricing page.

Layouts wrap pages with shared UI. The +layout.svelte in a directory applies to all pages in that directory and its children.

Server files (+page.server.ts, +server.ts) run on the server and handle data loading and API endpoints.

The lib directory holds your shared code: components, utilities, stores, and anything else imported across multiple routes.

Integrated Terminal

The terminal at the bottom of the editor gives you shell access to your project sandbox. Use it for any command-line task:

Package management:

npm install lucide-svelte
npm install -D tailwindcss
bun add zod

Running scripts:

npm run dev
npm run build
npm run check

File operations:

mkdir src/lib/components/ui
cp src/routes/+page.svelte src/routes/about/+page.svelte

Git operations:

git status
git add .
git commit -m "Add pricing page"
git log --oneline

The terminal runs in the same environment as your project, so installed packages and configuration changes take effect immediately.

Editing Svelte Components

Svelte components combine HTML, CSS, and JavaScript in a single file. Here is the typical structure:

<script lang="ts">
  // JavaScript/TypeScript logic
  let count = $state(0);

  function increment() {
    count++;
  }
</script>

<!-- HTML template -->
<button onclick={increment}>
  Clicked {count} times
</button>

<!-- Scoped CSS -->
<style>
  button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background: #0A84FF;
    color: white;
  }
</style>

The code editor provides Svelte-specific features like syntax highlighting for the template syntax, autocomplete for component props, and error detection for common mistakes.

Git Operations

Your project sandbox includes git, so you can track changes and manage versions directly from the terminal:

# See what changed
git diff

# Stage and commit
git add src/routes/+page.svelte
git commit -m "Update homepage hero section"

# Create a feature branch
git checkout -b feature/auth

# View history
git log --oneline -10

The AI also uses git internally to track its changes, so you have a full history of every modification made to your project, whether by you or the AI.

When to Use Each Editor

Each editing mode in Teta has its strengths. Here is when to reach for each one:

Task Best editor
Build a new page or feature Chat editor
Fix a typo or change a string Code editor
Adjust padding or font size Visual editor
Install a package Code editor terminal
Restructure components Chat editor
Debug a runtime error Code editor + terminal
Change a color or background Visual editor
Add database integration Chat editor
Review AI-generated code Code editor
Complex responsive layout Chat editor

A typical workflow moves between all three: use the chat to build structure, the visual editor to polish styles, and the code editor to review, debug, and make precise adjustments.

FAQ

Can I install VS Code extensions?

The code editor supports extensions compatible with code-server. You can install extensions from the extensions panel within the editor. Most popular extensions for web development work out of the box.

Are my terminal commands persistent?

The terminal runs in your project sandbox. Installed packages persist as long as the sandbox is active. Environment variables set in the terminal last for the current session. For persistent environment variables, add them to your project configuration.

Can I use Vim or Emacs keybindings?

Yes. Open VS Code settings (Cmd/Ctrl + Comma) and search for "keyboard" to change the keybinding preset. Vim and Emacs keybinding extensions are available.

Does the code editor sync with chat changes?

Yes. When the AI makes changes through the chat, the files update in the code editor in real time. If you have a file open that the AI modified, you will see the changes appear. Similarly, if you edit a file in the code editor, the AI sees those changes in its next message.

Can I open multiple files side by side?

Yes. Drag a file tab to the side of the editor to create a split view. You can have two or more files open side by side, which is useful when working on a component and its parent page simultaneously.