> For the complete documentation index, see [llms.txt](https://wiki.redmodding.org/scripting-cyberpunk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.redmodding.org/scripting-cyberpunk/how-do-i/inkwidgets.md).

# 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 %}