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

​
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