teta.so
Sign in

Quickstart

Go from zero to a deployed SvelteKit app in under 5 minutes. This guide walks you through every step.

Prerequisites

All you need is a browser and an internet connection. Teta runs entirely in the cloud — no local installations, no CLI tools, no environment setup.

Step 1: Sign Up

Go to teta.so and create an account. You can sign up with email or use Google/GitHub OAuth. Verification is instant.

Step 2: Create a New Project

From the dashboard, click New Project. Give your project a name (for example, "coffee-shop") and select SvelteKit as the framework. Click Create.

Teta provisions a cloud sandbox for your project. This is an isolated environment with Node.js, a file system, and network access. The default SvelteKit template is installed and the dev server starts automatically.

Step 3: Wait for the Sandbox

The sandbox takes 10-30 seconds to provision. You will see a loading indicator in the preview panel. Once ready, the preview panel shows the default SvelteKit welcome page and the chat panel becomes active.

Step 4: Describe Your App in Chat

Click the chat input at the bottom of the left panel and type a prompt. Be specific about what you want. For example:

Build a landing page for a coffee shop called "Brewed Awakening". Include a hero section with a large background image and headline, a menu section showing 6 drinks with prices in a grid, and a contact section with address, hours, and a simple contact form.

Press Enter or click Send. The AI reads your prompt, plans the changes, and starts writing code. You can watch the progress in real time:

  • The chat panel shows the AI's reasoning and the tools it uses (file writes, terminal commands, etc.)
  • The preview panel updates live as files are saved
  • The console panel shows build logs if you want to see what is happening under the hood

This step typically takes 30-90 seconds depending on the complexity of your request.

Step 5: Review the Result

Once the AI finishes, your app is live in the preview panel. Scroll through it. Click around. Check that the layout, content, and styling match what you asked for.

If something is off, send a follow-up message in chat. For example:

Make the hero section taller and change the background color to dark brown. Also add a "Order Now" button below the headline.

The AI applies the changes incrementally. You do not need to repeat your full prompt — it remembers the conversation context.

Step 6: Tweak with the Visual Editor

Click the Visual Editor toggle in the top toolbar (or use the inspector icon in the preview panel). Now click any element in the preview — a heading, a button, a section. A properties panel appears on the right with controls for:

  • Spacing — margin and padding
  • Typography — font family, size, weight, line height, color
  • Size — width, height, max-width
  • Fill — background color, gradients
  • Border — width, radius, color

Adjust values and see changes instantly. This is the fastest way to fine-tune design details without writing CSS or prompting the AI.

Step 7: Open the Code Editor

Click the Code tab to open the built-in VS Code editor. You will see the full project file tree on the left. Open any file to edit it directly. Key locations:

  • src/routes/+page.svelte — your main page
  • src/lib/ — shared components
  • static/ — images and static assets
  • package.json — dependencies

You can also open the integrated terminal to run commands like npm install, check build output, or interact with git.

Step 8: Deploy to Production

When you are satisfied with your app, click the Deploy button in the top menu bar. Teta builds your project for production and deploys it to Vercel. You will get a live URL (e.g., your-project.vercel.app) within a minute.

From the settings, you can:

  • Connect a custom domain
  • Set environment variables for production
  • Configure build settings

Your app is now live on the internet.

What to Do Next

FAQ

How long does it take for the sandbox to provision?

A new sandbox typically provisions in 10-30 seconds. This includes setting up the isolated environment, installing the SvelteKit template, and starting the development server. Subsequent sessions reconnect to your existing sandbox faster.

Can I import an existing codebase into Teta?

Currently, Teta creates new SvelteKit projects from a template. You can paste code into files using the code editor, or ask the AI to recreate specific components from your existing project by describing them in chat. Direct repository import is on the roadmap.

What happens if I close my browser?

Your project is saved in the cloud. When you return to teta.so and open your project, the sandbox reconnects and your files, chat history, and configuration are all preserved. The dev server restarts automatically.

Is there a free tier?

Yes. You can sign up and create projects for free. The free tier includes sandbox access, chat editor usage, and preview capabilities. Paid plans provide additional sandbox hours, priority AI responses, deployment features, and custom domain support. Visit teta.so for current plan details.