diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 8df2a2a..fdac9bb 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,17 +4,17 @@
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
@@ -337,14 +337,6 @@
-
-
- 1720658257129
-
-
-
- 1720658257129
-
1720665220407
@@ -729,7 +721,15 @@
1741414797155
-
+
+
+ 1741416193639
+
+
+
+ 1741416193639
+
+
@@ -788,7 +788,6 @@
-
@@ -813,7 +812,8 @@
-
+
+
diff --git a/src/pages/tools/json/index.ts b/src/pages/tools/json/index.ts
index 3e27468..cb3e84f 100644
--- a/src/pages/tools/json/index.ts
+++ b/src/pages/tools/json/index.ts
@@ -1,4 +1,5 @@
import { tool as jsonPrettify } from './prettify/meta';
import { tool as jsonMinify } from './minify/meta';
+import { tool as jsonStringify } from './stringify/meta';
-export const jsonTools = [jsonPrettify, jsonMinify];
+export const jsonTools = [jsonPrettify, jsonMinify, jsonStringify];
diff --git a/src/pages/tools/json/minify/meta.ts b/src/pages/tools/json/minify/meta.ts
index 18ec46d..513bf0a 100644
--- a/src/pages/tools/json/minify/meta.ts
+++ b/src/pages/tools/json/minify/meta.ts
@@ -5,8 +5,9 @@ export const tool = defineTool('json', {
name: 'Minify JSON',
path: 'minify',
icon: 'lets-icons:json-light',
- description: 'Minify your JSON by removing all unnecessary whitespace and formatting. This tool compresses JSON data to its smallest possible size while maintaining valid JSON structure.',
- shortDescription: 'Remove all unnecessary whitespace from JSON data.',
+ description:
+ 'Minify your JSON by removing all unnecessary whitespace and formatting. This tool compresses JSON data to its smallest possible size while maintaining valid JSON structure.',
+ shortDescription: 'Quickly compress JSON file.',
keywords: ['minify', 'compress', 'minimize', 'json', 'compact'],
component: lazy(() => import('./index'))
});
diff --git a/src/pages/tools/json/prettify/index.tsx b/src/pages/tools/json/prettify/index.tsx
index 77dab89..e1c21cc 100644
--- a/src/pages/tools/json/prettify/index.tsx
+++ b/src/pages/tools/json/prettify/index.tsx
@@ -15,7 +15,7 @@ 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';
+import { isNumber, updateNumberField } from '../../../../utils/string';
type InitialValuesType = {
indentationType: 'tab' | 'space';
@@ -141,7 +141,7 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
value={values.spacesCount.toString()}
onRadioClick={() => updateField('indentationType', 'space')}
onTextChange={(val) =>
- isNumber(val) ? updateField('spacesCount', Number(val)) : null
+ updateNumberField(val, 'spacesCount', updateField)
}
/>
[] = [
+ {
+ title: 'Simple Object to JSON',
+ description: 'Convert a basic JavaScript object into a JSON string.',
+ sampleText: `{ name: "John", age: 30 }`,
+ sampleResult: `{
+ "name": "John",
+ "age": 30
+}`,
+ sampleOptions: {
+ indentationType: 'space',
+ spacesCount: 2,
+ escapeHtml: false
+ }
+ },
+ {
+ title: 'Array with Mixed Types',
+ description:
+ 'Convert an array containing different types of values into JSON.',
+ sampleText: `[1, "hello", true, null, { x: 10 }]`,
+ sampleResult: `[
+ 1,
+ "hello",
+ true,
+ null,
+ {
+ "x": 10
+ }
+]`,
+ sampleOptions: {
+ indentationType: 'space',
+ spacesCount: 4,
+ escapeHtml: false
+ }
+ },
+ {
+ title: 'HTML-Escaped JSON',
+ description: 'Convert an object to JSON with HTML characters escaped.',
+ sampleText: `{
+ html: "Hello & Welcome
",
+ message: "Special chars: < > & ' \\""
+}`,
+ sampleResult: `{
+ "html": "<div>Hello & Welcome</div>",
+ "message": "Special chars: < > & ' ""
+}`,
+ sampleOptions: {
+ indentationType: 'space',
+ spacesCount: 2,
+ escapeHtml: true
+ }
+ }
+];
+
+export default function StringifyJson({ title }: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ const compute = (values: InitialValuesType, input: string) => {
+ if (input) {
+ setResult(
+ stringifyJson(
+ input,
+ values.indentationType,
+ values.spacesCount,
+ values.escapeHtml
+ )
+ );
+ }
+ };
+
+ return (
+
+ }
+ resultComponent={}
+ getGroups={({ values, updateField }) => [
+ {
+ title: 'Indentation',
+ component: (
+
+ updateField('indentationType', 'space')}
+ onTextChange={(val) =>
+ updateNumberField(val, 'spacesCount', updateField)
+ }
+ />
+ updateField('indentationType', 'tab')}
+ checked={values.indentationType === 'tab'}
+ description="Indent output with tabs"
+ title="Use Tabs"
+ />
+
+ )
+ },
+ {
+ title: 'Options',
+ component: (
+ updateField('escapeHtml', value)}
+ title="Escape HTML Characters"
+ description="Convert HTML special characters to their entity references"
+ />
+ )
+ }
+ ]}
+ toolInfo={{
+ title: 'What Is JSON Stringify?',
+ description:
+ 'JSON Stringify is a tool that converts JavaScript objects and arrays into their JSON string representation. It properly formats the output with customizable indentation and offers the option to escape HTML special characters, making it safe for web usage. This tool is particularly useful when you need to serialize data structures for storage or transmission, or when you need to prepare JSON data for HTML embedding.'
+ }}
+ />
+ );
+}
diff --git a/src/pages/tools/json/stringify/meta.ts b/src/pages/tools/json/stringify/meta.ts
new file mode 100644
index 0000000..3fda725
--- /dev/null
+++ b/src/pages/tools/json/stringify/meta.ts
@@ -0,0 +1,12 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('json', {
+ name: 'Stringify JSON',
+ path: 'stringify',
+ icon: 'lets-icons:json-format-light',
+ description: 'Convert JavaScript objects and arrays into their JSON string representation. Options include custom indentation and HTML character escaping for web-safe JSON strings.',
+ shortDescription: 'Convert JavaScript objects to JSON strings',
+ keywords: ['stringify', 'serialize', 'convert', 'object', 'array', 'json', 'string'],
+ component: lazy(() => import('./index'))
+});
diff --git a/src/pages/tools/json/stringify/service.ts b/src/pages/tools/json/stringify/service.ts
new file mode 100644
index 0000000..1532790
--- /dev/null
+++ b/src/pages/tools/json/stringify/service.ts
@@ -0,0 +1,28 @@
+export const stringifyJson = (
+ input: string,
+ indentationType: 'tab' | 'space',
+ spacesCount: number,
+ escapeHtml: boolean
+): string => {
+ let parsedInput;
+ try {
+ // Safely evaluate the input string as JavaScript
+ parsedInput = eval('(' + input + ')');
+ } catch (e) {
+ throw new Error('Invalid JavaScript object/array');
+ }
+
+ const indent = indentationType === 'tab' ? '\t' : ' '.repeat(spacesCount);
+ let result = JSON.stringify(parsedInput, null, indent);
+
+ if (escapeHtml) {
+ result = result
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+ }
+
+ return result;
+};
diff --git a/src/utils/string.ts b/src/utils/string.ts
index d2ce2a9..a6ff6d7 100644
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@@ -1,3 +1,5 @@
+import { UpdateField } from '@components/options/ToolOptions';
+
export function capitalizeFirstLetter(string: string | undefined) {
if (!string) return '';
return string.charAt(0).toUpperCase() + string.slice(1);
@@ -7,6 +9,20 @@ export function isNumber(number: any) {
return !isNaN(parseFloat(number)) && isFinite(number);
}
+export const updateNumberField = (
+ val: string,
+ key: keyof T,
+ updateField: UpdateField
+) => {
+ if (val === '') {
+ // @ts-ignore
+ updateField(key, '');
+ } else if (isNumber(val)) {
+ // @ts-ignore
+ updateField(key, Number(val));
+ }
+};
+
export const replaceSpecialCharacters = (str: string) => {
return str
.replace(/\\"/g, '"')
diff --git a/tsconfig.json b/tsconfig.json
index aa0f1e3..3069285 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,6 +33,9 @@
],
"@components/*": [
"./components/*"
+ ],
+ "@utils/*": [
+ "./utils/*"
]
}
},