Skip to main content

​
Creating Your First Project

Tesslate Studio offers three ways to create projects:

Template

Start with a blank React + Vite template

GitHub

Import an existing GitHub repository

Base

Use a pre-built template with features

​
Method 1: From Template

Perfect for starting from scratch:
1

Click Create Project

From the Dashboard, click Create New Project
2

Select Template

Choose Template as your source
3

Name Your Project

Enter a project name (e.g., “My Landing Page”)
4

Choose Status

Select project phase:
  • Idea: Planning stage
  • Build: Active development
  • Launch: Production ready
5

Create

Click Create Project and wait for initialization
Template projects come with a basic React + Vite setup ready to customize.

​
What You Get

The template includes:
  • React 18 with TypeScript
  • Vite for fast development
  • Basic App.tsx component
  • Tailwind CSS configured
  • Hot module replacement
  • Development server

​
Method 2: From GitHub

Import existing repositories:
1

Connect GitHub

If not connected, click Connect GitHub and authorize
2

Select GitHub Source

Choose GitHub as your project source
3

Choose Repository

Select from your GitHub repositories
  • Browse your repos
  • Search by name
  • Filter by organization
4

Configure Import

Set project name and status
5

Import

Click Import and wait for cloning
Imported projects must be compatible with Tesslate Studio’s container environment (Node.js, React, Vue, etc.)

​
Supported Project Types

  • Create React App
  • Vite + React
  • Next.js (static)
  • React + TypeScript

​
Method 3: From Base

Start with pre-built templates:
1

Install a Base

First, install a base from the Marketplace
2

Create from Base

Click Create New Project → Base
3

Select Base

Choose from your installed bases in the library
4

Name Project

Give your project a unique name
5

Initialize

Project creates with all base files and structure
  • SaaS Landing: Hero, features, pricing, CTA
  • Portfolio: Showcase work with beautiful design
  • Marketing: Product launch ready template
  • Startup: Comprehensive startup homepage
  • Admin Dashboard: User management, analytics
  • Analytics: Data visualization and charts
  • E-commerce Admin: Order and product management
  • Storefront: Product catalog and cart
  • Marketplace: Multi-vendor platform
  • Subscription: Recurring billing flows

​
After Creation

Once your project is created:
1

Wait for Container

Development server initializes (10-30 seconds)
2

Project Opens

Automatically enters project workspace
3

Preview Loads

Live preview shows your application
4

Start Building

Use AI agents to add features

​
Project Initialization

​
What Happens Behind the Scenes

Container Creation

  • Isolated Docker container spins up
  • Node.js environment configured
  • Dependencies installed

Development Server

  • Vite dev server starts
  • Hot reload enabled
  • Unique URL assigned

File System

  • Project files copied
  • Git initialized
  • Structure organized

Preview Ready

  • Application builds
  • Preview iframe loads
  • Ready for development

​
Troubleshooting

Problem: Project stuck on “Initializing…”Solutions:
  • Wait up to 60 seconds (first time can be slow)
  • Check your internet connection
  • Refresh the page
  • Contact support if stuck after 2 minutes
Problem: Repository import errorSolutions:
  • Ensure repo is public or you have access
  • Check repo has package.json
  • Verify project type is supported
  • Re-authorize GitHub connection
Problem: Blank preview windowSolutions:
  • Check browser console for errors
  • Wait for build to complete
  • Restart development server in settings
  • Check if port is blocked

​
Best Practices

Choose Right Source

  • Template: For new projects from scratch
  • GitHub: For existing code
  • Base: For quick starts with features

Name Clearly

  • Use descriptive names
  • Avoid special characters
  • Keep it short and memorable
  • Include project type if helpful

Set Correct Status

  • Idea: Still planning features
  • Build: Actively developing
  • Launch: Ready for production

Plan Before Building

  • Know your tech stack
  • List key features
  • Choose appropriate base
  • Prepare GitHub repo if importing

​
Next Steps

Using AI Agents

Start building features with AI

Code Editor

Learn to use the code editor

Live Preview

Understanding the preview window

Chat Interface

Chatting with AI agents