# 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/`](https://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/`](https://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.