Interface Overview

The Teta editor is a single-screen workspace with multiple panels. Each panel serves a specific purpose, and they work together so you can chat, preview, edit visually, and write code without switching tabs or tools.

The top bar is your primary navigation and action strip. From left to right:

Project name — Displays the current project. Click to rename or access project settings.
Device switcher — Toggle the preview between desktop, tablet, and phone viewports. The preview panel resizes to match the selected device width.
Visual editor toggle — Activates the click-to-edit inspector on the preview. When enabled, clicking elements in the preview selects them and opens the properties panel.
Deploy button — One-click deployment to Vercel. Shows build progress and provides the live URL when complete.
Settings — Access project configuration including environment variables, connected services (Supabase, Vercel), and domain settings.

Chat Panel (Left)

The chat panel is your primary interface for communicating with the AI. It occupies the left side of the editor.

Conversation

Messages appear in a scrollable thread. Your prompts are on the right, AI responses on the left. The AI shows its reasoning and the tools it calls — file writes, terminal commands, database operations — so you can follow exactly what it does.

Input Controls

At the bottom of the panel, a text field accepts your prompts. You can:

Type plain text descriptions of what you want built or changed
Attach images as visual references (the AI can interpret mockups, screenshots, and design assets)
Press Enter to send, Shift+Enter for a new line

Tool Approvals

When the AI needs to perform certain actions (writing files, running terminal commands), an approval card appears in the chat. You can approve with Enter or reject with Escape. This gives you control over what the AI changes in your project. Approval mode can be toggled between automatic (approve everything) and supervised (ask for each action) using the mode switcher in the panel.

Multi-Chat Tabs

You can run multiple chat sessions in parallel within the same project. Each tab is an independent conversation with its own context. This is useful for working on different features simultaneously — for example, one chat building a header component while another sets up database tables.

AI Questions

Sometimes the AI needs clarification before proceeding. When this happens, a wizard form appears at the bottom of the chat replacing the text input. You can select from suggested options or type a custom answer. For multi-part questions, the wizard steps through each one individually, shows a summary, then sends your answers back to the AI.

Preview Panel (Center)

The center panel shows a live preview of your running app. This is the actual SvelteKit dev server output rendered in an iframe.

Live Reload

As the AI writes code or you edit files manually, the preview updates automatically via hot module replacement. You see changes within seconds of them being saved.

Device Modes

Use the device switcher in the top bar to view your app at different viewport widths:

Desktop — Full width of the preview panel
Tablet — 768px width
Phone — 375px width

The preview container resizes smoothly, and your app's responsive styles apply just as they would on a real device.

Visual Inspector

When the visual editor is active, hovering over elements in the preview highlights them with a blue outline. Clicking an element selects it, and its CSS properties appear in the properties panel on the right. The inspector works by injecting a lightweight script into the preview iframe that communicates selection data back to the editor.

Code Panel (VS Code)

The code panel embeds a full VS Code instance connected to your cloud sandbox.

File Tree

The left sidebar shows your complete project file structure. You can create, rename, move, and delete files and folders. Common SvelteKit locations include:

src/routes/ — pages and layouts
src/lib/components/ — reusable components
src/lib/server/ — server-only utilities
static/ — images and static files

Editor

Open any file to edit it with full syntax highlighting, IntelliSense, error squiggles, and formatting. The editor supports Svelte, TypeScript, JavaScript, CSS, HTML, JSON, and Markdown.

Integrated Terminal

A terminal at the bottom of the code panel gives you shell access to the sandbox. Use it to:

Install packages with npm install
Run scripts from package.json
Inspect files, check git status, or run any CLI tool
Debug with console.log output

Git Integration

The source control panel tracks changes, lets you stage files, and create commits. Git history is maintained within your sandbox session.

Console Panel (Bottom)

The console panel sits at the bottom of the workspace and provides real-time output from your running services.

Build Logs

Watch Vite build output as files are compiled. Errors and warnings appear here with file paths and line numbers. Click an error to jump to the relevant file in the code editor.

Service Tabs

The console organizes output by service:

Dev server — Vite/SvelteKit dev server output
Build — Production build logs during deployment
Errors — Runtime errors from the application

Each tab filters to its specific log stream so you can focus on what matters.

Properties Panel (Right)

The properties panel appears on the right side when the visual editor is active and an element is selected in the preview.

Spacing

Controls for margin and padding on all four sides. Values can be set in pixels, rem, or percentages. A visual box model diagram shows the current spacing.

Typography

Font family, font size, font weight, line height, letter spacing, text alignment, and text color. Changes apply to the selected element and are written as CSS rules.

Size

Width, height, min-width, min-height, max-width, and max-height. Supports px, rem, %, vh, and vw units.

Fill

Background color picker with hex, RGB, and HSL input. Gradient support for linear and radial gradients.

Border

Border width, style (solid, dashed, dotted), color, and border radius for rounded corners. Per-side control is available.

All property changes are persisted to your project and survive sandbox restarts.

FAQ

Can I customize the panel layout?

The panel layout is currently fixed: chat on the left, preview in the center, code on the right, and console at the bottom. The properties panel appears contextually when the visual editor is active. Panel resizing by dragging dividers is supported, so you can allocate more space to the panels you use most.

Are there keyboard shortcuts?

Yes. The code editor supports all standard VS Code keyboard shortcuts. In the chat panel, Enter sends a message, Shift+Enter adds a new line. For tool approvals, Enter approves and Escape rejects. The AI question wizard supports arrow keys for navigation, number keys (1-4) for quick selection, Tab for custom input, and Escape to dismiss.

Can I use the terminal for anything?

The integrated terminal gives you full shell access to your sandbox environment. You can run any command that works in a standard Linux shell: npm/yarn/pnpm commands, git operations, file manipulation, curl requests, and more. The sandbox has Node.js pre-installed along with common development tools.

Does Teta support dark mode?

Yes. The editor uses a dark theme by default with a dark background (rgb(20,20,20)), dark surface containers, and high-contrast text. The color scheme is designed for extended coding sessions with minimal eye strain.