@polareth/evmstate/docs/pages/playground.mdx

A TypeScript library for tracing, and visualizing EVM state changes with detailed human-readable labeling.

import { Callout } from "vocs/components";
import { Playground } from "../components/playground/index.tsx";

# Playground

This interactive playground demonstrates how different Solidity storage types are traced and visualized.

<Callout type="tip">
_The client is shared and persisted across sessions (the state of the chain and traces will persist everytime you visit the playground)._
</Callout>


## Usage Guide

1. **Select a function** from the dropdown menu - each function is labeled with a description of what storage type it affects
2. **Enter parameters** if required by the selected function
3. **Click "Execute"** to run the function
4. **View the trace** in the collapsible code block right below
5. **Explore the history** of all executed functions and their traces

Try different functions to see how various storage patterns are represented in the trace output!

## Interactive example

<Playground />

## Reference contract

```solidity
// [!include ~/../test/contracts/Playground.s.sol]
```