+
+
+
diff --git a/.idea/shelf/Uncommitted_changes_before_Checkout_at_2_27_2025_11_44_AM_[Changes]1/shelved.patch b/.idea/shelf/Uncommitted_changes_before_Checkout_at_2_27_2025_11_44_AM_[Changes]1/shelved.patch
new file mode 100644
index 0000000..e69de29
diff --git a/.idea/shelf/Uncommitted_changes_before_Checkout_at_2_27_2025_11_44_AM__Changes_.xml b/.idea/shelf/Uncommitted_changes_before_Checkout_at_2_27_2025_11_44_AM__Changes_.xml
new file mode 100644
index 0000000..ec9c29e
--- /dev/null
+++ b/.idea/shelf/Uncommitted_changes_before_Checkout_at_2_27_2025_11_44_AM__Changes_.xml
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/tools/json/index.ts b/src/pages/tools/json/index.ts
new file mode 100644
index 0000000..48d4333
--- /dev/null
+++ b/src/pages/tools/json/index.ts
@@ -0,0 +1,3 @@
+import { tool as jsonPrettify } from './prettify/meta';
+
+export const jsonTools = [jsonPrettify];
diff --git a/src/pages/tools/json/prettify/index.tsx b/src/pages/tools/json/prettify/index.tsx
new file mode 100644
index 0000000..9f22c15
--- /dev/null
+++ b/src/pages/tools/json/prettify/index.tsx
@@ -0,0 +1,190 @@
+import { Box } from '@mui/material';
+import React, { useRef, useState } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
+import { beautifyJson } from './service';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+
+import ToolInfo from '@components/ToolInfo';
+import Separator from '@components/Separator';
+import ToolExamples, {
+ CardExampleType
+} from '@components/examples/ToolExamples';
+import { FormikProps } from 'formik';
+import { ToolComponentProps } from '@tools/defineTool';
+import RadioWithTextField from '@components/options/RadioWithTextField';
+import SimpleRadio from '@components/options/SimpleRadio';
+import { isNumber } from '../../../../utils/string';
+
+type InitialValuesType = {
+ indentationType: 'tab' | 'space';
+ spacesCount: number;
+};
+
+const initialValues: InitialValuesType = {
+ indentationType: 'space',
+ spacesCount: 2
+};
+
+const exampleCards: CardExampleType[] = [
+ {
+ title: 'Beautify an Ugly JSON Array',
+ description:
+ 'In this example, we prettify an ugly JSON array. The input data is a one-dimensional array of numbers [1,2,3] but they are all over the place. This array gets cleaned up and transformed into a more readable format where each element is on a new line with an appropriate indentation using four spaces.',
+ sampleText: `[
+ 1,
+2,3
+]`,
+ sampleResult: `[
+ 1,
+ 2,
+ 3
+]`,
+ sampleOptions: {
+ indentationType: 'space',
+ spacesCount: 4
+ }
+ },
+ {
+ title: 'Prettify a Complex JSON Object',
+ description:
+ 'In this example, we prettify a complex JSON data structure consisting of arrays and objects. The input data is a minified JSON object with multiple data structure depth levels. To make it neat and readable, we add two spaces for indentation to each depth level, making the JSON structure clear and easy to understand.',
+ sampleText: `{"names":["jack","john","alex"],"hobbies":{"jack":["programming","rock climbing"],"john":["running","racing"],"alex":["dancing","fencing"]}}`,
+ sampleResult: `{
+ "names": [
+ "jack",
+ "john",
+ "alex"
+ ],
+ "hobbies": {
+ "jack": [
+ "programming",
+ "rock climbing"
+ ],
+ "john": [
+ "running",
+ "racing"
+ ],
+ "alex": [
+ "dancing",
+ "fencing"
+ ]
+ }
+}`,
+ sampleOptions: {
+ indentationType: 'space',
+ spacesCount: 2
+ }
+ },
+ {
+ title: 'Beautify a JSON with Excessive Whitespace',
+ description:
+ "In this example, we show how the JSON prettify tool can handle code with excessive whitespace. The input file has many leading and trailing spaces as well as spaces within the objects. The excessive whitespace makes the file bulky and hard to read and leads to a bad impression of the programmer who wrote it. The program removes all these unnecessary spaces and creates a proper data hierarchy that's easy to work with by adding indentation via tabs.",
+ sampleText: `
+{
+ "name": "The Name of the Wind",
+ "author" : "Patrick Rothfuss",
+ "genre" : "Fantasy",
+ "published" : 2007,
+ "rating" : {
+ "average" : 4.6,
+ "goodreads" : 4.58,
+ "amazon" : 4.4
+ },
+ "is_fiction" : true
+ }
+
+
+`,
+ sampleResult: `{
+\t"name": "The Name of the Wind",
+\t"author": "Patrick Rothfuss",
+\t"genre": "Fantasy",
+\t"published": 2007,
+\t"rating": {
+\t\t"average": 4.6,
+\t\t"goodreads": 4.58,
+\t\t"amazon": 4.4
+\t},
+\t"is_fiction": true
+}`,
+ sampleOptions: {
+ indentationType: 'tab',
+ spacesCount: 0
+ }
+ }
+];
+
+export default function PrettifyJson({ title }: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+ const formRef = useRef>(null);
+ const compute = (optionsValues: InitialValuesType, input: any) => {
+ const { indentationType, spacesCount } = optionsValues;
+ setResult(beautifyJson(input, indentationType, spacesCount));
+ };
+
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Indentation',
+ component: (
+
+ updateField('indentationType', 'space')}
+ onTextChange={(val) =>
+ isNumber(val) ? updateField('spacesCount', Number(val)) : null
+ }
+ />
+ updateField('indentationType', 'tab')}
+ checked={values.indentationType === 'tab'}
+ description={'Indent output with tabs.'}
+ title={'Use Tabs'}
+ />
+
+ )
+ }
+ ];
+ return (
+
+
+ }
+ result={}
+ />
+
+
+
+
+
+ );
+}
diff --git a/src/pages/tools/json/prettify/meta.ts b/src/pages/tools/json/prettify/meta.ts
new file mode 100644
index 0000000..0a97e83
--- /dev/null
+++ b/src/pages/tools/json/prettify/meta.ts
@@ -0,0 +1,13 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('json', {
+ name: 'Prettify JSON',
+ path: 'prettify',
+ icon: 'lets-icons:json-light',
+ description:
+ "Just load your JSON in the input field and it will automatically get prettified. In the tool options, you can choose whether to use spaces or tabs for indentation and if you're using spaces, you can specify the number of spaces to add per indentation level.",
+ shortDescription: 'Quickly beautify a JSON data structure.',
+ keywords: ['prettify'],
+ component: lazy(() => import('./index'))
+});
diff --git a/src/pages/tools/json/prettify/prettify.service.test.ts b/src/pages/tools/json/prettify/prettify.service.test.ts
new file mode 100644
index 0000000..e2622e9
--- /dev/null
+++ b/src/pages/tools/json/prettify/prettify.service.test.ts
@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './service';
+//
+// describe('prettify', () => {
+//
+// })
\ No newline at end of file
diff --git a/src/pages/tools/json/prettify/service.ts b/src/pages/tools/json/prettify/service.ts
new file mode 100644
index 0000000..b1f0281
--- /dev/null
+++ b/src/pages/tools/json/prettify/service.ts
@@ -0,0 +1,16 @@
+export const beautifyJson = (
+ text: string,
+ indentationType: 'tab' | 'space',
+ spacesCount: number
+) => {
+ let parsedJson;
+ try {
+ parsedJson = JSON.parse(text);
+ } catch (e) {
+ throw new Error('Invalid JSON string');
+ }
+
+ const indent = indentationType === 'tab' ? '\t' : spacesCount;
+
+ return JSON.stringify(parsedJson, null, indent);
+};