---
title: "Edit styles directly in your app"
description: "Select an element on the Build Mode stage, change its spacing, type or color in the design panel, and let the agent write it into the code."
url: https://help.modeinspect.com/en/articles/28-edit-styles-directly-in-your-app
collection: "Build mode"
updated: 2026-10-29
language: en
---

# Edit styles directly in your app

Select an element on the Build Mode stage, change its spacing, type or color in the design panel, and let the agent write it into the code.

Fix a padding, a font weight or a color on the running page yourself, then let the agent write it into the component. Use it when the change is small enough to point at and a prompt would take longer to write.

**Before you start**

-   Build Mode open on the page, see [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-and-navigate-build-mode.md).
    

## Steps

1.  Click the **Design** button below the message box, or press `⌘ D`. The chat makes room for a **Design** panel that reads "Select an element to edit its styles".
    
2.  Click the element on the stage. It gets an outline, and the panel shows its name at the top with its styles below, in groups: **Position**, **Size**, **Layout**, **Appearance**, **Typography**, **Fill**, **Stroke**, and **Effects**. Which groups you see depends on the element.
    
    ![The Design panel for the selected heading: h1 at the top, then the Position, Size, Layout, Appearance, and Typography groups, with Typography highlighted](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/Pg8A5UgTrCCS6SWg87DXhyfFDql7m7YR3Sv4cMWFbHKuTTx6dAfBCrwvpDMbkTUL6l0MEyXQLeg.png)
3.  Change a value. A field that shows a token name, such as spacing/4 or weight/bold, is bound to one of your design tokens, see [Use your design tokens on the canvas](https://help.modeinspect.com/en/articles/36-design-tokens.md). Click it to open the token menu, search, and pick another token. To type a value instead, double-click the field, type, and press `Enter`.
    
    ![The token menu open on the padding-left field of the checkout button: a search box above the spacing tokens, each with its value](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/FNSADl17GrectFq0QQFliGRrCHulnwOGhmW0ey0UwkwNMTsruIGnNR1OZoqFQKQM4dh9oRJO4rR.png)
4.  Make the other edits you want, on this element or another one. The stage shows every edit at once, but nothing is in the code yet.
    
5.  Click **Add to build chat**. The panel closes, and a card above the message box lists each element with the properties you changed, old value to new value.
    
    ![The checkout button's corner radius typed as 8 and its variant set to secondary, Add to build chat, the edits card above the message box, and Send](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/Me2OVW4YH1jI3yNHwMO7mqknw1n5Xgg4tUPVu5HBLtdsoZI43VdASeu7U2zAJ4iQ1FBj5i7vwKU.gif)
6.  Click **Send** with the message box empty. The chat shows "Apply visual changes to codebase.", and the agent edits the source file. Or type what else should change and send that with the edits.
    

The reply names the file and shows how many lines changed, and the page on the stage reloads with the change. A token becomes the class your codebase has for it.

![Build Mode after the apply: the checkout button on the stage is white with more left padding. The agent's reply names cart-checkout-button.tsx and counts the changed lines](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/eeE0smSTZSEnfYBL7Yeh1ia2pigyV1KtrBv5t2BNH61BhD4MVbO3cNR9rmWBQOdGdZi9tnmN33q.png)

## Change your mind

-   In the card, **Edit** reopens the panel on the element. **Discard edit**, the ✕ next to an element, drops its edits, and the stage goes back to the code.
    
-   **Cancel** in the panel drops the edits you made since you opened it. `Esc` closes the panel the same way. Edits already in the card stay.
    

## If it does not work

-   **The reply says the edit was skipped because it has no source location**: the element was sent before Modeinspect had found its place in the code. Select the element again, wait a moment, and send the edit again.
    

## Related

-   [Change a component's props and states](https://help.modeinspect.com/en/articles/26-change-component-states-and-props.md)
    
-   [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-and-navigate-build-mode.md)
    
-   [Use your design tokens on the canvas](https://help.modeinspect.com/en/articles/36-design-tokens.md)

## Related

- [What is Build Mode](https://help.modeinspect.com/en/articles/30-what-is-build-mode.md)
- [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-build-mode-and-move-around-your-app.md)
- [Preview your app at different screen sizes](https://help.modeinspect.com/en/articles/27-preview-your-app-at-different-screen-sizes.md)
- [From a captured frame to code](https://help.modeinspect.com/en/articles/25-from-a-captured-frame-to-code.md)
- [Attach a frame to the build chat](https://help.modeinspect.com/en/articles/22-attach-a-frame-to-the-build-chat.md)