# zreal1/toolscart architecture

> Architecture diagram of the GitHub repository zreal1/toolscart, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zreal1/toolscart
- Repository: https://github.com/zreal1/toolscart
- Video tour (about a minute): https://gitdiagram.com/zreal1/toolscart/video

## Overview

ToolScart is a static collection of developer utilities that process input locally in the browser and present results for copying or export. The main workflow is users opening a tool, entering or loading data, running its transformation, then using the result. The graph preserves the README’s major tool families; individual tool implementations are represented by their script paths. Sampled scripts show calls to shared browser helpers, but unsampled scripts’ internal wiring is not inferred.

Main entry points: [`index.html`](https://github.com/zreal1/toolscart/blob/main/index.html) (ToolScart Home), [`js/helpers.js`](https://github.com/zreal1/toolscart/blob/main/js/helpers.js) (Browser Helpers), [`tools/json-csv/script.js`](https://github.com/zreal1/toolscart/blob/main/tools/json-csv/script.js) (JSON ↔ CSV), [`tools/base64/script.js`](https://github.com/zreal1/toolscart/blob/main/tools/base64/script.js) (Base64 Encoder)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_data["JSON & Data"]
  node_jsonfmt["JSON Formatter<br/>[script.js]"]
  node_jsonvalid["JSON Validator<br/>[script.js]"]
  node_jsonmin["JSON Minifier<br/>[script.js]"]
  node_jsoncsv["JSON ↔ CSV<br/>[script.js]"]
end

subgraph group_encoding["Encoding &amp; Security"]
  node_base64["Base64 Encoder<br/>[script.js]"]
  node_url["URL Encoder<br/>[script.js]"]
  node_jwt["JWT Decoder<br/>[script.js]"]
  node_entity["HTML Entities<br/>[script.js]"]
  node_uuid["UUID Generator<br/>[script.js]"]
  node_hash["Hash Generator<br/>[script.js]"]
end

subgraph group_utilities["Developer Utilities"]
  node_regex["Regex Tester<br/>[script.js]"]
  node_timestamp["Timestamp Converter<br/>[script.js]"]
  node_cron["Cron Generator<br/>[script.js]"]
  node_slug["Slug Generator<br/>[script.js]"]
end

subgraph group_css["CSS Generators"]
  node_gradient["CSS Gradient<br/>[script.js]"]
  node_shadow["CSS Box Shadow<br/>[script.js]"]
  node_radius["CSS Border Radius<br/>[script.js]"]
end

subgraph group_formatting["Formatting &amp; Preview"]
  node_markdown["Markdown Preview<br/>[script.js]"]
  node_htmlfmt["HTML Formatter<br/>[script.js]"]
  node_cssfmt["CSS Formatter<br/>[script.js]"]
  node_jsfmt["JavaScript Formatter<br/>[script.js]"]
  node_sqlfmt["SQL Formatter<br/>[script.js]"]
end

node_user(("Developer"))
node_home["ToolScart Home<br/>[index.html]"]
node_helpers["Browser Helpers<br/>[helpers.js]"]

node_user -->|"opens"| node_home
node_home -->|"selects tool"| node_jsonfmt
node_home -->|"selects tool"| node_jsonvalid
node_home -->|"selects tool"| node_jsonmin
node_home -->|"selects tool"| node_jsoncsv
node_home -->|"selects tool"| node_base64
node_home -->|"selects tool"| node_url
node_home -->|"selects tool"| node_jwt
node_home -->|"selects tool"| node_entity
node_home -->|"selects tool"| node_uuid
node_home -->|"selects tool"| node_hash
node_home -->|"selects tool"| node_regex
node_home -->|"selects tool"| node_timestamp
node_home -->|"selects tool"| node_cron
node_home -->|"selects tool"| node_slug
node_home -->|"selects tool"| node_gradient
node_home -->|"selects tool"| node_shadow
node_home -->|"selects tool"| node_radius
node_home -->|"selects tool"| node_markdown
node_home -->|"selects tool"| node_htmlfmt
node_home -->|"selects tool"| node_cssfmt
node_home -->|"selects tool"| node_jsfmt
node_home -->|"selects tool"| node_sqlfmt
node_jsoncsv -->|"reads, exports"| node_helpers
node_jsfmt -->|"reads, exports"| node_helpers
node_cssfmt -->|"reads, exports"| node_helpers
node_jwt -->|"reads, exports"| node_helpers
node_base64 -->|"reads, exports"| node_helpers
node_sqlfmt -->|"reads, exports"| node_helpers
node_entity -->|"reads, exports"| node_helpers
node_regex -->|"reads, exports"| node_helpers
node_url -->|"reads, exports"| node_helpers
node_timestamp -->|"reads, exports"| node_helpers
node_shadow -->|"copies, exports"| node_helpers
node_radius -->|"copies, exports"| node_helpers

click node_home "https://github.com/zreal1/toolscart/blob/main/index.html"
click node_helpers "https://github.com/zreal1/toolscart/blob/main/js/helpers.js"
click node_jsonfmt "https://github.com/zreal1/toolscart/blob/main/tools/json-formatter/script.js"
click node_jsonvalid "https://github.com/zreal1/toolscart/blob/main/tools/json-validator/script.js"
click node_jsonmin "https://github.com/zreal1/toolscart/blob/main/tools/json-minifier/script.js"
click node_jsoncsv "https://github.com/zreal1/toolscart/blob/main/tools/json-csv/script.js"
click node_base64 "https://github.com/zreal1/toolscart/blob/main/tools/base64/script.js"
click node_url "https://github.com/zreal1/toolscart/blob/main/tools/url-encoder/script.js"
click node_jwt "https://github.com/zreal1/toolscart/blob/main/tools/jwt-decoder/script.js"
click node_entity "https://github.com/zreal1/toolscart/blob/main/tools/html-entity/script.js"
click node_uuid "https://github.com/zreal1/toolscart/blob/main/tools/uuid-generator/script.js"
click node_hash "https://github.com/zreal1/toolscart/blob/main/tools/hash-generator/script.js"
click node_regex "https://github.com/zreal1/toolscart/blob/main/tools/regex-tester/script.js"
click node_timestamp "https://github.com/zreal1/toolscart/blob/main/tools/timestamp-converter/script.js"
click node_cron "https://github.com/zreal1/toolscart/blob/main/tools/cron-generator/script.js"
click node_slug "https://github.com/zreal1/toolscart/blob/main/tools/slug-generator/script.js"
click node_gradient "https://github.com/zreal1/toolscart/blob/main/tools/css-gradient/script.js"
click node_shadow "https://github.com/zreal1/toolscart/blob/main/tools/css-box-shadow/script.js"
click node_radius "https://github.com/zreal1/toolscart/blob/main/tools/css-border-radius/script.js"
click node_markdown "https://github.com/zreal1/toolscart/blob/main/tools/markdown-preview/script.js"
click node_htmlfmt "https://github.com/zreal1/toolscart/blob/main/tools/html-formatter/script.js"
click node_cssfmt "https://github.com/zreal1/toolscart/blob/main/tools/css-formatter/script.js"
click node_jsfmt "https://github.com/zreal1/toolscart/blob/main/tools/javascript-formatter/script.js"
click node_sqlfmt "https://github.com/zreal1/toolscart/blob/main/tools/sql-formatter/script.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_jsonfmt,node_jsonvalid,node_jsonmin,node_jsoncsv,node_helpers toneBlue
class node_base64,node_url,node_jwt,node_entity,node_uuid,node_hash toneAmber
class node_regex,node_timestamp,node_cron,node_slug toneMint
class node_gradient,node_shadow,node_radius toneRose
class node_markdown,node_htmlfmt,node_cssfmt,node_jsfmt,node_sqlfmt,node_user toneIndigo
class node_home toneTeal
```

## Components

### JSON & Data

- [JSON Formatter](https://github.com/zreal1/toolscart/blob/main/tools/json-formatter/script.js): `tools/json-formatter/script.js`
- [JSON Validator](https://github.com/zreal1/toolscart/blob/main/tools/json-validator/script.js): `tools/json-validator/script.js`
- [JSON Minifier](https://github.com/zreal1/toolscart/blob/main/tools/json-minifier/script.js): `tools/json-minifier/script.js`
- [JSON ↔ CSV](https://github.com/zreal1/toolscart/blob/main/tools/json-csv/script.js): `tools/json-csv/script.js`

### Encoding & Security

- [Base64 Encoder](https://github.com/zreal1/toolscart/blob/main/tools/base64/script.js): `tools/base64/script.js`
- [URL Encoder](https://github.com/zreal1/toolscart/blob/main/tools/url-encoder/script.js): `tools/url-encoder/script.js`
- [JWT Decoder](https://github.com/zreal1/toolscart/blob/main/tools/jwt-decoder/script.js): `tools/jwt-decoder/script.js`
- [HTML Entities](https://github.com/zreal1/toolscart/blob/main/tools/html-entity/script.js): `tools/html-entity/script.js`
- [UUID Generator](https://github.com/zreal1/toolscart/blob/main/tools/uuid-generator/script.js): `tools/uuid-generator/script.js`
- [Hash Generator](https://github.com/zreal1/toolscart/blob/main/tools/hash-generator/script.js): `tools/hash-generator/script.js`

### Developer Utilities

- [Regex Tester](https://github.com/zreal1/toolscart/blob/main/tools/regex-tester/script.js): `tools/regex-tester/script.js`
- [Timestamp Converter](https://github.com/zreal1/toolscart/blob/main/tools/timestamp-converter/script.js): `tools/timestamp-converter/script.js`
- [Cron Generator](https://github.com/zreal1/toolscart/blob/main/tools/cron-generator/script.js): `tools/cron-generator/script.js`
- [Slug Generator](https://github.com/zreal1/toolscart/blob/main/tools/slug-generator/script.js): `tools/slug-generator/script.js`

### CSS Generators

- [CSS Gradient](https://github.com/zreal1/toolscart/blob/main/tools/css-gradient/script.js): `tools/css-gradient/script.js`
- [CSS Box Shadow](https://github.com/zreal1/toolscart/blob/main/tools/css-box-shadow/script.js): `tools/css-box-shadow/script.js`
- [CSS Border Radius](https://github.com/zreal1/toolscart/blob/main/tools/css-border-radius/script.js): `tools/css-border-radius/script.js`

### Formatting & Preview

- [Markdown Preview](https://github.com/zreal1/toolscart/blob/main/tools/markdown-preview/script.js): `tools/markdown-preview/script.js`
- [HTML Formatter](https://github.com/zreal1/toolscart/blob/main/tools/html-formatter/script.js): `tools/html-formatter/script.js`
- [CSS Formatter](https://github.com/zreal1/toolscart/blob/main/tools/css-formatter/script.js): `tools/css-formatter/script.js`
- [JavaScript Formatter](https://github.com/zreal1/toolscart/blob/main/tools/javascript-formatter/script.js): `tools/javascript-formatter/script.js`
- [SQL Formatter](https://github.com/zreal1/toolscart/blob/main/tools/sql-formatter/script.js): `tools/sql-formatter/script.js`

### Other components

- **Developer**
- [ToolScart Home](https://github.com/zreal1/toolscart/blob/main/index.html): `index.html`
- [Browser Helpers](https://github.com/zreal1/toolscart/blob/main/js/helpers.js): `js/helpers.js`

## Connections

- Developer → ToolScart Home: opens
- ToolScart Home → JSON Formatter: selects tool
- ToolScart Home → JSON Validator: selects tool
- ToolScart Home → JSON Minifier: selects tool
- ToolScart Home → JSON ↔ CSV: selects tool
- ToolScart Home → Base64 Encoder: selects tool
- ToolScart Home → URL Encoder: selects tool
- ToolScart Home → JWT Decoder: selects tool
- ToolScart Home → HTML Entities: selects tool
- ToolScart Home → UUID Generator: selects tool
- ToolScart Home → Hash Generator: selects tool
- ToolScart Home → Regex Tester: selects tool
- ToolScart Home → Timestamp Converter: selects tool
- ToolScart Home → Cron Generator: selects tool
- ToolScart Home → Slug Generator: selects tool
- ToolScart Home → CSS Gradient: selects tool
- ToolScart Home → CSS Box Shadow: selects tool
- ToolScart Home → CSS Border Radius: selects tool
- ToolScart Home → Markdown Preview: selects tool
- ToolScart Home → HTML Formatter: selects tool
- ToolScart Home → CSS Formatter: selects tool
- ToolScart Home → JavaScript Formatter: selects tool
- ToolScart Home → SQL Formatter: selects tool
- JSON ↔ CSV → Browser Helpers: reads, exports
- JavaScript Formatter → Browser Helpers: reads, exports
- CSS Formatter → Browser Helpers: reads, exports
- JWT Decoder → Browser Helpers: reads, exports
- Base64 Encoder → Browser Helpers: reads, exports
- SQL Formatter → Browser Helpers: reads, exports
- HTML Entities → Browser Helpers: reads, exports
- Regex Tester → Browser Helpers: reads, exports
- URL Encoder → Browser Helpers: reads, exports
- Timestamp Converter → Browser Helpers: reads, exports
- CSS Box Shadow → Browser Helpers: copies, exports
- CSS Border Radius → Browser Helpers: copies, exports