Skip to main content

​
What is a Project?

A project in Tesslate Studio is a complete web application with its own codebase, development server, and AI chat history. Each project contains:
  • Source Code: React/TypeScript files, components, and assets
  • Development Server: Live preview environment
  • Chat History: Conversations with AI agents
  • Configuration: Project settings and preferences
  • Git Integration: Optional GitHub connection

​
Project Structure

Every project follows a standard structure: 
my-project/
├── src/
│   ├── App.tsx          # Main application component
│   ├── main.tsx         # Entry point
│   ├── components/      # React components
│   ├── styles/          # CSS and styling
│   └── assets/          # Images and static files
├── public/              # Public assets
├── package.json         # Dependencies
├── vite.config.ts       # Vite configuration
└── tsconfig.json        # TypeScript configuration

​
Project Types

Template

Blank React + Vite starter template

GitHub Import

Import existing GitHub repository

Base

Pre-built template with features

​
Multi-Container Projects

Tesslate Studio supports monorepo-style projects with multiple containers:

Frontend Container

React/Vite application serving the UI

Backend Container

FastAPI, Express, or Go API server

Database Container

PostgreSQL, MongoDB, or Redis

Custom Services

Worker processes, cron jobs, etc.

​
Container Dependencies

Define how containers connect to each other: 
Frontend (React) ──→ Backend (FastAPI) ──→ Database (PostgreSQL)
The architecture visualization shows these connections in a React Flow diagram.

​
Adding Containers

  1. Open the Architecture panel in your project
  2. Click Add Container
  3. Choose container type (frontend, backend, database)
  4. Configure the container settings
  5. Define connections to other containers
Multi-container projects share a common network, allowing containers to communicate via service names (e.g., http://backend:8000).

​
Project Lifecycle

1

Creation

Create project from template, GitHub, or base
2

Development

Build features using AI agents and code editor
3

Iteration

Refine and improve through AI chat
4

Deployment

Export code or deploy to production

​
Project Management

​
Viewing Projects

All your projects appear on the Dashboard:
  • Grid View: Visual cards with previews
  • Project Status: Idea, Build, or Launch phase
  • Quick Actions: Open, delete, or fork

​
Opening a Project

Click any project card to enter the workspace with:
  • Code editor
  • Live preview
  • Chat interface
  • File browser
  • Settings panel

​
Deleting Projects

Deleting a project is permanent and cannot be undone. All code, chat history, and settings will be lost.
To delete a project:
  1. Hover over the project card
  2. Click the trash icon
  3. Confirm deletion

​
Project Settings

Access project settings by clicking the gear icon in the project workspace:
  • Normal: Single browser view
  • Browser Tabs: Multiple tab support
  • View server status
  • Restart dev container
  • Check server URL
  • Project name and description
  • Status (Idea/Build/Launch)
  • Project icon

​
Development Server

Each project has its own development server:
  • Auto-Start: Starts when you open the project
  • Hot Reload: Instant updates when files change
  • Unique URL: {project-slug}.studio.localhost
  • Health Monitoring: Automatic reconnection
The development server typically takes 10-30 seconds to start initially.

​
Working with Files

​
File Operations

  • Create: AI agents auto-create files
  • Edit: Use Monaco code editor
  • Save: Auto-save or manual save
  • Delete: Remove unused files

​
File Types Supported

  • React Components: .tsx, .jsx
  • TypeScript: .ts
  • Styles: .css, .scss
  • Config: .json, .js
  • Assets: Images, fonts, etc.

​
Best Practices

  • Group related components in folders
  • Use clear, descriptive file names
  • Keep components focused and small
  • Commit to GitHub periodically
  • Download backups of important versions
  • Test before major changes
  • Name projects clearly
  • Use meaningful component names
  • Document complex logic

​
Next Steps

Create Your First Project

Step-by-step project creation guide

Code Editor Guide

Learn to use the code editor

Live Preview

Understanding the live preview

GitHub Integration

Connect and commit to GitHub