> For the complete documentation index, see [llms.txt](https://walksy.gitbook.io/walksylib-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://walksy.gitbook.io/walksylib-docs/advanced/previews.md).

# Previews

A preview is a live, animated panel in your config screen that shows what your settings look like as the user changes them.

```java
.group(OptionGroup.builder("Preview")
    .option(Options.ofPreview("Preview", MyModConfig::drawPreview).build())
    .build())
```

```java
private static void drawPreview(final PreviewCanvas canvas) {
    final float size = canvas.height() * 0.6f;
    final float x = canvas.x() + (canvas.width() - size) / 2f;
    final float y = canvas.y() + (canvas.height() - size) / 2f;
    canvas.graphics().fill(x, y, x + size, y + size, tint.getRGB(), null);
}
```

## `PreviewCanvas`

| Method                              | Returns                                                      |
| ----------------------------------- | ------------------------------------------------------------ |
| `graphics()`                        | The `WLGraphics2D` to draw with                              |
| `x()`, `y()`, `width()`, `height()` | The panel bounds                                             |
| `alpha()`                           | The panel's current fade. Multiply your colors' alpha by it. |
| `uiScale()`                         | The config screen's UI scale.                                |
| `time()`                            | Seconds since the preview opened.                            |
| `entity(Entity)`                    | Draws an entity model in the preview                         |
| `frame(...)`, `line(...)`           | 3D wireframe helpers                                         |