> For the complete documentation index, see [llms.txt](https://docs.betterbugs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.betterbugs.io/contributing-to-betterbugs/design-of-our-code/state-utilities-and-constants.md).

# State, Utilities, and Constants

* [`app/libs/helpers.tsx`](https://github.com/betterbugs/dev-tools/blob/main/app/libs/helpers.tsx) — Utility functions (string manipulation, formatting, etc.)
* [`app/libs/constants.tsx`](https://github.com/betterbugs/dev-tools/blob/main/app/libs/constants.tsx) — App-wide constants (routes, metadata)
* [`app/libs/developmentToolsConstant.tsx`](https://github.com/betterbugs/dev-tools/blob/main/app/libs/developmentToolsConstant.tsx) — Tool registry and configuration
* [`app/contexts/`](vscode-file://vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html) — React context providers for shared state

**Using helpers**

Before writing logic in your component, check if a helper already exists in `helpers.tsx`. Common helpers:

* Text transformations (uppercase, lowercase, etc.)
* Data validation
* Formatting utilities

If you need something that could be reused, add it to `helpers.tsx`.

**Tool configuration**

Every tool needs an entry in `developmentToolsConstant.tsx`. This tells the app:

* The tool's slug (URL identifier)
* Display name and description
* Category (Text, Code, Data, Color, etc.)
* Which component to render

```js
{
  slug: "json-formatter",
  name: "JSON Formatter",
  description: "Format and validate JSON",
  category: "code",
  component: JsonFormatter,
}
```

**Using context for state**

Global state like theme or layout preferences lives in [`app/contexts/`](vscode-file://vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html):

* `themeContext.tsx` — Dark/light mode
* `layoutContexts.tsx` — Layout state

Use these for state that affects multiple tools. Small, single-tool state can stay in the component.