# InkWidgets

## Summary <a href="#summary" id="summary"></a>

**Created:** ?? 2024 by [Zhincore](mailto:undefined)\
**Last documented update:** Mar 1 2025 by [Zhincore](mailto:undefined)

Thanks to Codeware we can fully access the game's UI programatically, even create our own. If you're not familiar with InkWidgets, check out the yellow wiki first: [Interface definitions: .inkwidget files](https://wiki.redmodding.org/cyberpunk-2077-modding/for-mod-creators-theory/files-and-what-they-do/file-formats/inkwidgets-a-custom-interface)

Also check out the[ Codeware wiki](https://github.com/psiberx/cp2077-codeware/wiki#user-interface) for inkwidget scripting examples.

## Basics of custom UI

Building custom UI programatically works by instantiating inkWidgets/components, setting their properties and parenting them to something. The following code is an example of flashbanging yourself by adding a rectangle to the in-game HUD. For more examples see the [Codeware wiki](https://github.com/psiberx/cp2077-codeware/wiki#user-interface).

```swift
// Create the rectangle
let rectangle = new inkRectangle();
// Make it fill it's parent (screen in our case)
rectangle.SetAnchor(inkEAnchor.Fill);
// Make it fully opaque (default color is white)
rectangle.SetOpacity(1.0);

// Now obtain the HUD layer
let inkSystem = GameInstance.GetInkSystem();
let hudRoot = inkSystem.GetLayer(n"inkHUDLayer").GetVirtualWindow();

// Put the rectangle in the HUD 
rectangle.Reparent(hudRoot, -1);
```

If you call this code, for example, in the `Session/Ready` event ([Codeware](https://github.com/psiberx/cp2077-codeware/wiki#game-events)), you'll be welcomed by a bright white screen upon loading a save.

You can also name your ink components using `.SetName("name")` and the name will appear in [RedHotTool's Ink Inspector](https://github.com/psiberx/cp2077-red-hot-tools), which is useful for debugging! RHT also allows you to change ink properties to find what's right for your UI.

For more complex UIs you probably want to build your custom components from the simple ones, refer to the [Codeware wiki for more info](https://github.com/psiberx/cp2077-codeware/wiki#scripted-widgets).

## Animating inks

You can have the inkWidgets animate themselves through [`.PlayAnimation()`](https://nativedb.red4ext.com/inkWidget#PlayAnimation), there are various predefined animations like scaling, sharing and fading, you can find them in [NativeDB](https://nativedb.red4ext.com/c/2925108796900393). Here is an example on how to make the flashbang more annoying:

```swift
let anim = new inkAnimTransparency();
// From 0% transparency
anim.SetStartTransparency(0.0);
// To 100% transparency
anim.SetEndTransparency(1.0);
// Make the animation last 10 seconds
anim.SetDuration(10);

let animDef = new inkAnimDef();
animDef.AddInterpolator(tickAnim);

// Also create options so we can control the animation more
let animOpts: inkAnimOptions;
// Make it loop forever
animOpts.loopInfinite = true;
// And make it reset after each cycle
animOpts.loopType = inkanimLoopType.Cycle;

// Finally, play the animation and hurt my eyes
rectangle.PlayAnimationWithOptions(animDef, animOpts);
```

<div align="center" data-full-width="false"><figure><img src="https://media1.tenor.com/m/fLhSt81F5gAAAAAd/cat-flashbang.gif" alt="" width="188"><figcaption><p>You after loading the game with the above code.</p></figcaption></figure></div>

{% content-ref url="/pages/8cUzFEUf4Q59jNKoQjGS" %}
[Adding character creator options](/scripting-cyberpunk/how-do-i/inkwidgets/adding-character-creator-options.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.redmodding.org/scripting-cyberpunk/how-do-i/inkwidgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.