> For the complete documentation index, see [llms.txt](https://code-after-sex.gitbook.io/script-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://code-after-sex.gitbook.io/script-documentation/cas-gunsmith/developer/editing-the-ui.md).

# Editing the UI

Edit the CAS Gunsmith React interface — the web folders, adding images, building web/dist and how the texts come from the language files.

The interface is written in React and the built version is in the `web/dist` folder. The game loads this folder directly, so no build is needed unless you change the interface.

## Folders

| Folder                  | Contents                                                |
| ----------------------- | ------------------------------------------------------- |
| `web/src`               | Source code of the interface.                           |
| `web/public/tex/items`  | Weapon and ammo images.                                 |
| `web/public/tex/swatch` | Finish, wood, engraving, carving and wrap images.       |
| `web/dist`              | The built interface. This is the folder the game loads. |

During the build, the contents of `web/public` are copied to `web/dist`. If you are only adding an image, placing the file directly under `web/dist/tex/...` is enough. If you will build later, put the same file under `web/public` as well, because the build recreates `web/dist` from scratch.

## Building

Node.js 18 or newer is required.

```bash
cd web
npm install
npm run build
```

The command recreates the `web/dist` folder. Restart the resource afterwards.

## Texts

Interface texts are in the `locales` folder, not in the components. The components read them by key through `web/src/lib/i18n.js`, and the client sends the chosen language with every open, so editing a text needs no build. `locales/en.json` is also built into the interface as a fallback, so a new key must be added to `en.json` before the build. Option names and descriptions come from `config.lua` and the language file. See [Localization](/script-documentation/cas-gunsmith/configuration/localization.md).