Replay: From Video of a Design Mockup to Functional Angular App

TL;DR: Replay uses video analysis and Gemini to reconstruct a functional Angular application from a design mockup video, offering a faster, more intelligent alternative to screenshot-based code generation tools.

Stop Building UIs from Screenshots: Replay Understands User Behavior#

Building user interfaces is often a tedious process. Designers hand off mockups, often as static images, and developers painstakingly translate them into functional code. This process is error-prone, time-consuming, and often misses the nuances of the intended user experience. Screenshot-to-code tools offer a partial solution, but they only capture the visual representation, failing to understand the intent behind the design.

Replay changes the game by using video as the source of truth. Instead of just "seeing" the pixels, Replay understands the user's behavior within the video. Powered by Gemini, Replay's "Behavior-Driven Reconstruction" engine analyzes the video, identifies UI elements, infers interactions, and reconstructs a fully functional Angular application, complete with styling and data integration.

Why Video Input Matters: Beyond Static Images#

The core difference between Replay and traditional mockup-to-code tools lies in its use of video input. Consider the following comparison:

Screenshot-to-code tools can generate basic HTML and CSS from a static image. However, they struggle with:

• •Dynamic elements: Animations, state changes, and conditional rendering are often missed.
• •User interactions: Button clicks, form submissions, and navigation events are impossible to infer from a single screenshot.
• •Contextual understanding: The tool has no knowledge of the intended user flow or the purpose of different UI elements.

Replay overcomes these limitations by analyzing the video recording of the design mockup. It can:

• •Identify UI elements and their states: Replay can detect changes in button states (hover, active, disabled), form field values, and other dynamic elements.
• •Infer user interactions: By analyzing mouse movements, clicks, and keyboard input, Replay can understand how users are intended to interact with the UI.
• •Reconstruct the user flow: Replay can generate multi-page applications by following the navigation path in the video.
• •Integrate with backend services: Replay can automatically generate API calls and data bindings to connect the UI to a backend, such as Supabase.

💡 Pro Tip: For best results, record your mockup videos with clear and deliberate interactions. Speak aloud what you're doing to provide additional context for the AI.

Building an Angular App from a Video: A Step-by-Step Guide#

Let's walk through the process of using Replay to generate an Angular application from a video of a design mockup.

Step 1: Recording the Mockup Video#

First, you need to record a video of your design mockup. Use a screen recording tool like OBS Studio, QuickTime, or Loom. Ensure the video clearly shows the following:

• •All UI elements that you want to include in the application.
• •All user interactions, such as button clicks, form submissions, and navigation events.
• •The intended user flow through the application.

📝 Note: The quality of the video will directly impact the accuracy of the generated code. Make sure the video is clear, well-lit, and free of distractions.

Step 2: Uploading the Video to Replay#

Once you have the video, upload it to the Replay platform. Replay supports various video formats, including MP4, MOV, and AVI.

Step 3: Configuring Replay Settings#

After uploading the video, you can configure the Replay settings to fine-tune the code generation process. Some key settings include:

• •Target Framework: Select Angular as the target framework.
• •Styling Method: Choose your preferred styling method (e.g., CSS, SCSS, Tailwind CSS). Replay can even inject existing CSS styles.
• •Backend Integration: Configure your Supabase connection details if you want to automatically generate API calls and data bindings.
• •Component Structure: Specify how you want the UI to be broken down into components.

Step 4: Generating the Code#

Click the "Generate Code" button to start the code generation process. Replay will analyze the video, identify UI elements, infer interactions, and reconstruct the Angular application. This process may take a few minutes, depending on the length and complexity of the video.

Step 5: Reviewing and Refining the Code#

Once the code generation is complete, you can review and refine the generated code in the Replay editor. The editor provides a visual representation of the application, along with the corresponding code. You can make changes to the code, adjust the styling, and add additional functionality.

⚠️ Warning: While Replay generates a significant portion of the application, manual refinement is often necessary to achieve the desired level of quality and functionality.

Step 6: Integrating with Your Angular Project#

Finally, you can download the generated code and integrate it into your existing Angular project. Replay provides the code as a set of Angular components, services, and modules. You can simply copy and paste the code into your project, or use the Angular CLI to generate the necessary files.

Example: Generating a Simple To-Do App#

Let's say you have a video of a simple to-do app mockup. The mockup includes:

• •A text input for adding new tasks.
• •A button for submitting the task.
• •A list of existing tasks.
• •A checkbox for marking tasks as complete.

Replay can analyze the video and generate the following Angular code:

typescript
// todo.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {
  newTask: string = '';
  todos: { task: string; completed: boolean }[] = [];

  ngOnInit(): void {}

  addTask() {
    if (this.newTask.trim() !== '') {
      this.todos.push({ task: this.newTask, completed: false });
      this.newTask = '';
    }
  }

  toggleComplete(index: number) {
    this.todos[index].completed = !this.todos[index].completed;
  }
}

html
<!-- todo.component.html -->
<div>
  <input type="text" [(ngModel)]="newTask" placeholder="Add a task" />
  <button (click)="addTask()">Add</button>
</div>

<ul>
  <li *ngFor="let todo of todos; let i = index">
    <input type="checkbox" (change)="toggleComplete(i)" [checked]="todo.completed" />
    <span [ngClass]="{'completed': todo.completed}">{{ todo.task }}</span>
  </li>
</ul>

This is a simplified example, but it demonstrates how Replay can automatically generate the basic structure and functionality of an Angular component from a video. Replay would also generate the necessary CSS to match the visual appearance of the mockup.

Key Benefits of Using Replay#

• •Faster Development: Replay automates the tedious task of translating mockups into code, saving you valuable time and effort.
• •Improved Accuracy: By analyzing video, Replay captures the nuances of the intended user experience, resulting in more accurate and functional code.
• •Enhanced Collaboration: Replay facilitates collaboration between designers and developers by providing a shared understanding of the user interface.
• •Reduced Errors: Replay minimizes the risk of errors by automatically generating code that is consistent with the design mockup.
• •Behavior-Driven Development: Replay enables a behavior-driven development approach, where the UI is built based on the intended user interactions.
• •Supabase Integration: Streamlines backend connections for rapid prototyping and full-stack development.
• •Product Flow Maps: Visualizes the user journey, ensuring a cohesive and intuitive application experience.

Frequently Asked Questions#

Is Replay free to use?#

Replay offers a free tier with limited features and usage. Paid plans are available for more advanced features and higher usage limits. Check the Replay website for current pricing details.

How is Replay different from v0.dev?#

v0.dev is a text-to-code AI tool that generates UI components based on textual descriptions. Replay, on the other hand, uses video as input, enabling it to understand user behavior and reconstruct complex UI flows. Replay excels at replicating existing designs, while v0.dev focuses on generating new designs from scratch.

What frameworks does Replay support?#

Currently, Replay primarily supports Angular, with plans to expand support to other popular frameworks like React and Vue.js in the future.

Can Replay handle complex animations and transitions?#

Replay can detect and reconstruct basic animations and transitions. However, more complex animations may require manual refinement.

---

Ready to try behavior-driven code generation? Get started with Replay - transform any video into working code in seconds.