Skip to main content

​
What is Live Preview?

The Live Preview shows your running application inside an iframe embedded in the Tesslate Studio workspace. Every change you make in the code editor or through an AI agent appears in the preview within milliseconds, thanks to Hot Module Replacement (HMR). The preview is not a simulation. It is your actual application running inside a real container, accessed through a reverse proxy that routes traffic to the correct dev server.

Hot Module Replacement

Changed modules are swapped in place without a full page reload. Component state is preserved.

Real-Time Updates

See changes as you type in the editor or as AI agents generate code

Fully Interactive

Click, scroll, navigate, fill out forms, and interact with your app exactly like a real user

Container-Powered

Your app runs in a real Docker or Kubernetes container, not a sandbox

​
How the Preview Works

The preview is an iframe that loads a URL pointing to your project’s dev server. The URL is generated differently depending on the deployment mode:
Tesslate uses Traefik as a reverse proxy. Each container gets a unique URL based on the project slug and container name:
{project-slug}-{container-name}.localhost
For example, if your project slug is my-app-k3x8n2 and the container is named frontend, the preview URL would be:
my-app-k3x8n2-frontend.localhost
Traefik routing is configured through labels in the dynamically generated docker-compose.yml file.

​
Multi-Container Previews

In multi-container projects, you can preview different containers independently. The architecture graph includes BrowserPreview nodes that you can connect to specific containers. Each BrowserPreview stores its own URL path state, so you can have the frontend preview showing the login page while a second preview shows the API documentation.

​
Preview Modes

Single browser view showing one container’s output. This is the default mode and works best for most development tasks. The preview responds to HMR updates from the connected container.

​
Browser Controls

The preview panel includes a toolbar with browser-like controls:
Navigate through the page history, just like a browser’s back and forward buttons. Useful for testing client-side routing.
Force a full page reload. Use this when HMR fails to pick up a change, or when you need to clear client-side state.
Opens the preview URL in a real browser tab. This lets you use browser DevTools for debugging, test in a different browser, or share the URL with someone on your network.
Displays the current route. You can copy the full preview URL or manually enter a path to deep-link to a specific page.

​
Hot Module Replacement (HMR)

​
How It Works

HMR is a development feature provided by Vite (or your project’s bundler) that updates the browser without a full page reload.
1

Code Changes

You edit a file in the editor, or an AI agent writes to the filesystem.
2

Dev Server Detects Change

The Vite dev server (or equivalent) watches the filesystem and detects the modified file.
3

Module Replacement

Only the changed module is recompiled and sent to the browser via WebSocket.
4

State Preserved

React component state, form inputs, and scroll position remain intact. Only the changed component re-renders.
5

Preview Updates

The change appears in the preview within milliseconds.

​
What Triggers HMR

  • Component changes: Editing React, Vue, or Svelte components
  • Style updates: Modifying CSS, SCSS, or Tailwind classes
  • Asset changes: Updating images, fonts, or other static files
  • Configuration changes: Some config updates (these may require a full reload)
HMR is much faster than full page reloads because it only replaces the changed modules. This makes the edit-preview cycle nearly instant, which is especially valuable when iterating with AI agents.

​
When HMR Falls Back to Full Reload

Some changes cannot be hot-replaced and trigger a full page reload:
  • Changes to the entry file (main.tsx)
  • Modifications to vite.config.ts or tsconfig.json
  • Adding or removing dependencies (requires a server restart)
  • Syntax errors that prevent the module from compiling

​
Responsive Design Testing

The preview panel can be resized to test different screen widths:
Full-width preview showing the desktop layout. Drag the panel edge to adjust the width.
For more precise testing, open the preview in a new browser tab and use your browser’s built-in responsive design tools (for example, Chrome DevTools Device Mode).

​
Interacting with the Preview

The preview is fully interactive:

​
User Interactions

  • Click buttons and links
  • Fill out forms and submit them
  • Scroll through content
  • Navigate between routes
  • Trigger hover states and animations

​
Form Testing

  • Type in input fields
  • Test form validation
  • Submit forms and verify responses
  • Test file upload components

​
Using Browser DevTools

  • Open the preview in a new tab
  • Press F12 to open DevTools
  • Inspect elements and computed styles
  • Monitor network requests
  • Debug JavaScript with breakpoints
  • Profile performance

​
Development Server Health

The preview depends on a healthy dev server. The UI shows the container status:

Running (Green)

Server is healthy. Preview is active and receiving updates.

Starting (Yellow)

Server is booting up. Wait for initialization to complete.

Failed (Red)

Server crashed or failed to start. Check logs or restart from settings.

Needs Setup (Orange)

Health check timed out. Use the “Ask Agent to start it” button for agent-assisted startup.

​
Server Controls

From the project settings panel:
  • Restart Container: Stop and restart a specific container’s dev server
  • Restart All: Stop and restart all containers in the project
  • View Status: See the current status of each container
  • Port Info: Check which port the dev server is listening on

​
Port Resolution

The preview URL includes the correct port for each container. Tesslate determines the port using the effective_port property:
  1. internal_port (set from TESSLATE.md or framework detection)
  2. port (the mapped/exposed port)
  3. 3000 (fallback default)
At container startup, the orchestrator also checks for a TESSLATE.md file that can override the port at runtime.

​
Troubleshooting

Cause: Dev server has not started yet, or the container is not running.What to try:
  • Wait 30 to 60 seconds for initial startup
  • Check the container status indicator
  • Restart the dev server from project settings
  • Open the preview URL in a new tab and check the browser console
  • For non-Node.js projects, try the “Ask Agent to start it” feature
Cause: HMR connection lost, or a build error prevents module replacement.What to try:
  • Check if there are syntax errors in the editor (red underlines)
  • Click the refresh button in the preview toolbar
  • Check the browser console in the preview for error messages
  • Ensure the file was saved (Ctrl/Cmd + S)
  • Restart the dev server if HMR is completely unresponsive
Cause: A syntax error or type error prevents the application from compiling.What to try:
  • Read the error message shown in the overlay
  • Check the file and line number referenced in the error
  • Fix the error in the editor and save
  • Ask an AI agent to debug the issue: paste the error message in the chat
Cause: Large bundle size, unoptimized images, or heavy computation in the render cycle.What to try:
  • Close other browser tabs to free resources
  • Optimize large images (compress or resize)
  • Check for infinite re-render loops in the browser console
  • Profile the application using Chrome DevTools Performance tab

​
Best Practices

Test After Each Change

Check the preview after each code edit or AI generation. Catching issues early is much easier than debugging a series of accumulated changes.

Use DevTools Regularly

Open the preview in a new tab periodically. Use Chrome DevTools to inspect elements, check network requests, and verify responsive layouts.

Monitor the Console

Keep an eye on the browser console for warnings and errors. Runtime issues often show up here before they become visible in the UI.

Refresh When State Gets Stale

If the preview looks wrong after many rapid changes, do a full refresh. HMR occasionally leaves stale state, especially after changes to context providers or routing.

​
Next Steps

Code Editor

Make manual code changes with full IntelliSense

Chat Interface

Generate and modify code through AI agents

Git Integration

Save your changes to a remote repository

Understanding Projects

Learn about container orchestration and project architecture