---
title: "Code Diff"
description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
---
An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
`code` `code-animation` `diff` `developer`
## Add it to a project
Ask your agent:
```text
Add the Code Diff block from the HyperFrames Catalog to this project.
Replace the demo content with mine and match the existing design and timing.
```
Or install it from the project folder:
```bash Terminal
npx hyperframes add code-diff
```
| Property | Value |
| --- | --- |
| Type | Block |
| Dimensions | 1920×1080 |
| Duration | 6s |
**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-diff.html` | `compositions/code-diff.html` | hyperframes:composition |
## Use it
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
The installed block can be added to a host composition with:
```html
```