feat(new-tool): diff of two json objects

components.d.ts

@@ -5,139 +5,141 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
-export {};
+export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    '404.page': typeof import('./src/pages/404.page.vue')['default'];
+    '404.page': typeof import('./src/pages/404.page.vue')['default']
-    About: typeof import('./src/pages/About.vue')['default'];
+    About: typeof import('./src/pages/About.vue')['default']
-    App: typeof import('./src/App.vue')['default'];
+    App: typeof import('./src/App.vue')['default']
-    'Base.layout': typeof import('./src/layouts/base.layout.vue')['default'];
+    'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
-    Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default'];
+    Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
-    Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default'];
+    Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
-    BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default'];
+    BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']
-    Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default'];
+    Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
-    BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default'];
+    BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
-    Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default'];
+    Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
-    CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default'];
+    CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
-    CButton: typeof import('./src/ui/c-button/c-button.vue')['default'];
+    CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
-    CCard: typeof import('./src/ui/c-card/c-card.vue')['default'];
+    CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
-    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default'];
+    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
-    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default'];
+    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
-    CLink: typeof import('./src/ui/c-link/c-link.vue')['default'];
+    CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
-    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default'];
+    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
-    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default'];
+    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
-    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default'];
+    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
-    CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default'];
+    CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']
-    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'];
+    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
-    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default'];
+    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
-    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default'];
+    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
-    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default'];
+    DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default']
-    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default'];
+    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
-    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default'];
+    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
-    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default'];
+    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
-    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default'];
+    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
-    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default'];
+    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
-    FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default'];
+    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
-    GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default'];
+    FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
-    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default'];
+    GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']
-    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default'];
+    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
-    'Home.page': typeof import('./src/pages/Home.page.vue')['default'];
+    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
-    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default'];
+    'Home.page': typeof import('./src/pages/Home.page.vue')['default']
-    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default'];
+    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
-    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'];
+    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
-    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'];
+    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
-    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'];
+    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
-    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default'];
+    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
-    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default'];
+    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
-    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default'];
+    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
-    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default'];
+    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
-    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default'];
+    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
-    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default'];
+    JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']
-    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default'];
+    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
-    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default'];
+    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
-    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default'];
+    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
-    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default'];
+    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
-    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default'];
+    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
-    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default'];
+    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
-    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default'];
+    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
-    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default'];
+    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
-    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default'];
+    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
-    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default'];
+    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
-    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'];
+    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
-    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'];
+    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
-    NAlert: typeof import('naive-ui')['NAlert'];
+    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
-    NAutoComplete: typeof import('naive-ui')['NAutoComplete'];
+    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
-    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'];
+    NAlert: typeof import('naive-ui')['NAlert']
-    NButton: typeof import('naive-ui')['NButton'];
+    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
-    NCard: typeof import('naive-ui')['NCard'];
+    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NCheckbox: typeof import('naive-ui')['NCheckbox'];
+    NButton: typeof import('naive-ui')['NButton']
-    NCode: typeof import('naive-ui')['NCode'];
+    NCard: typeof import('naive-ui')['NCard']
-    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'];
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
-    NColorPicker: typeof import('naive-ui')['NColorPicker'];
+    NCode: typeof import('naive-ui')['NCode']
-    NConfigProvider: typeof import('naive-ui')['NConfigProvider'];
+    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
-    NDatePicker: typeof import('naive-ui')['NDatePicker'];
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
-    NDivider: typeof import('naive-ui')['NDivider'];
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDynamicInput: typeof import('naive-ui')['NDynamicInput'];
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
-    NEllipsis: typeof import('naive-ui')['NEllipsis'];
+    NDivider: typeof import('naive-ui')['NDivider']
-    NForm: typeof import('naive-ui')['NForm'];
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
-    NFormItem: typeof import('naive-ui')['NFormItem'];
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NGi: typeof import('naive-ui')['NGi'];
+    NForm: typeof import('naive-ui')['NForm']
-    NGrid: typeof import('naive-ui')['NGrid'];
+    NFormItem: typeof import('naive-ui')['NFormItem']
-    NH1: typeof import('naive-ui')['NH1'];
+    NGi: typeof import('naive-ui')['NGi']
-    NH2: typeof import('naive-ui')['NH2'];
+    NGrid: typeof import('naive-ui')['NGrid']
-    NH3: typeof import('naive-ui')['NH3'];
+    NH1: typeof import('naive-ui')['NH1']
-    NIcon: typeof import('naive-ui')['NIcon'];
+    NH2: typeof import('naive-ui')['NH2']
-    NImage: typeof import('naive-ui')['NImage'];
+    NH3: typeof import('naive-ui')['NH3']
-    NInput: typeof import('naive-ui')['NInput'];
+    NIcon: typeof import('naive-ui')['NIcon']
-    NInputGroup: typeof import('naive-ui')['NInputGroup'];
+    NImage: typeof import('naive-ui')['NImage']
-    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel'];
+    NInput: typeof import('naive-ui')['NInput']
-    NInputNumber: typeof import('naive-ui')['NInputNumber'];
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
-    NLayout: typeof import('naive-ui')['NLayout'];
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
-    NLayoutSider: typeof import('naive-ui')['NLayoutSider'];
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NMenu: typeof import('naive-ui')['NMenu'];
+    NLayout: typeof import('naive-ui')['NLayout']
-    NP: typeof import('naive-ui')['NP'];
+    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
-    NPageHeader: typeof import('naive-ui')['NPageHeader'];
+    NMenu: typeof import('naive-ui')['NMenu']
-    NProgress: typeof import('naive-ui')['NProgress'];
+    NP: typeof import('naive-ui')['NP']
-    NScrollbar: typeof import('naive-ui')['NScrollbar'];
+    NPageHeader: typeof import('naive-ui')['NPageHeader']
-    NSelect: typeof import('naive-ui')['NSelect'];
+    NProgress: typeof import('naive-ui')['NProgress']
-    NSlider: typeof import('naive-ui')['NSlider'];
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSpace: typeof import('naive-ui')['NSpace'];
+    NSelect: typeof import('naive-ui')['NSelect']
-    NStatistic: typeof import('naive-ui')['NStatistic'];
+    NSlider: typeof import('naive-ui')['NSlider']
-    NSwitch: typeof import('naive-ui')['NSwitch'];
+    NSpace: typeof import('naive-ui')['NSpace']
-    NTable: typeof import('naive-ui')['NTable'];
+    NStatistic: typeof import('naive-ui')['NStatistic']
-    NTag: typeof import('naive-ui')['NTag'];
+    NSwitch: typeof import('naive-ui')['NSwitch']
-    NText: typeof import('naive-ui')['NText'];
+    NTable: typeof import('naive-ui')['NTable']
-    NTooltip: typeof import('naive-ui')['NTooltip'];
+    NTag: typeof import('naive-ui')['NTag']
-    NUpload: typeof import('naive-ui')['NUpload'];
+    NText: typeof import('naive-ui')['NText']
-    NUploadDragger: typeof import('naive-ui')['NUploadDragger'];
+    NTooltip: typeof import('naive-ui')['NTooltip']
-    OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'];
+    NUpload: typeof import('naive-ui')['NUpload']
-    QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default'];
+    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
-    RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default'];
+    OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
-    ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default'];
+    QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
-    RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default'];
+    RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink'];
+    ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']
-    RouterView: typeof import('vue-router')['RouterView'];
+    RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']
-    RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default'];
+    RouterLink: typeof import('vue-router')['RouterLink']
-    SearchBar: typeof import('./src/components/SearchBar.vue')['default'];
+    RouterView: typeof import('vue-router')['RouterView']
-    SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default'];
+    RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
-    SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default'];
+    SearchBar: typeof import('./src/components/SearchBar.vue')['default']
-    SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default'];
+    SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']
-    SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default'];
+    SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
-    SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default'];
+    SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
-    TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default'];
+    SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
-    TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default'];
+    SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
-    TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default'];
+    TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
-    TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default'];
+    TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
-    TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default'];
+    TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
-    'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default'];
+    TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
-    'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default'];
+    TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
-    ToolCard: typeof import('./src/components/ToolCard.vue')['default'];
+    'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
-    UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default'];
+    'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
-    UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default'];
+    ToolCard: typeof import('./src/components/ToolCard.vue')['default']
-    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default'];
+    UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
-    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default'];
+    UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
-    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default'];
+    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
-    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default'];
+    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
+    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
   }
 }

src/composable/copy.ts

@@ -1,8 +1,7 @@
-import { useClipboard } from '@vueuse/core';
+import { useClipboard, type MaybeRef } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
-import type { Ref } from 'vue';
 
-export function useCopy({ source, text = 'Copied to the clipboard' }: { source: Ref; text?: string }) {
+export function useCopy({ source, text = 'Copied to the clipboard' }: { source: MaybeRef<string>; text?: string }) {
   const { copy } = useClipboard({ source });
   const message = useMessage();
 

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as jsonDiff } from './json-diff';
 import { tool as ipv4RangeExpander } from './ipv4-range-expander';
 import { tool as httpStatusCodes } from './http-status-codes';
 import { tool as yamlToJson } from './yaml-to-json-converter';
@@ -91,6 +92,7 @@ export const toolsByCategory: ToolCategory[] = [
       htmlWysiwygEditor,
       userAgentParser,
       httpStatusCodes,
+      jsonDiff,
     ],
   },
   {

src/tools/json-diff/diff-viewer/diff-viewer.models.tsx

@@ -0,0 +1,119 @@
+import _ from 'lodash';
+import { useCopy } from '@/composable/copy';
+import type { Difference, ArrayDifference, ObjectDifference } from '../json-diff.types';
+
+export const DiffRootViewer = ({ diff }: { diff: Difference }) => {
+  return (
+    <div class={'diffs-viewer'}>
+      <ul>{DiffViewer({ diff, showKeys: false })}</ul>
+    </div>
+  );
+};
+
+const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) => {
+  const { type, status } = diff;
+
+  if (status === 'updated') {
+    return ComparisonViewer({ diff, showKeys });
+  }
+
+  if (type === 'array') {
+    return ChildrenViewer({ diff, showKeys, showChildrenKeys: false, openTag: '[', closeTag: ']' });
+  }
+
+  if (type === 'object') {
+    return ChildrenViewer({ diff, showKeys, openTag: '{', closeTag: '}' });
+  }
+
+  return LineDiffViewer({ diff, showKeys });
+};
+
+const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+  const { value, key, status, oldValue } = diff;
+  const valueToDisplay = status === 'removed' ? oldValue : value;
+
+  return (
+    <li>
+      <span class={[status, 'result']}>
+        {showKeys && (
+          <>
+            <span class={'key'}>{key}</span>
+            {': '}
+          </>
+        )}
+        {Value({ value: valueToDisplay, status })}
+      </span>
+      ,
+    </li>
+  );
+};
+
+const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+  const { value, key, oldValue } = diff;
+
+  return (
+    <li class={'updated-line'}>
+      {showKeys && (
+        <>
+          <span class={'key'}>{key}</span>
+          {': '}
+        </>
+      )}
+      {Value({ value: oldValue, status: 'removed' })}
+      {Value({ value, status: 'added' })},
+    </li>
+  );
+};
+
+const ChildrenViewer = ({
+  diff,
+  openTag,
+  closeTag,
+  showKeys,
+  showChildrenKeys = true,
+}: {
+  diff: ArrayDifference | ObjectDifference;
+  showKeys: boolean;
+  showChildrenKeys?: boolean;
+  openTag: string;
+  closeTag: string;
+}) => {
+  const { children, key, status, type } = diff;
+
+  return (
+    <li>
+      <div class={[type, status]} style={{ display: 'inline-block' }}>
+        {showKeys && (
+          <>
+            <span class={'key'}>{key}</span>
+            {': '}
+          </>
+        )}
+
+        {openTag}
+        {children.length > 0 && <ul>{children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>}
+        {closeTag + ','}
+      </div>
+    </li>
+  );
+};
+
+function formatValue(value: unknown) {
+  if (_.isNull(value)) {
+    return 'null';
+  }
+
+  return JSON.stringify(value);
+}
+
+const Value = ({ value, status }: { value: unknown; status: string }) => {
+  const formatedValue = formatValue(value);
+
+  const { copy } = useCopy({ source: formatedValue });
+
+  return (
+    <span class={['value', status]} onClick={copy}>
+      {formatedValue}
+    </span>
+  );
+};

src/tools/json-diff/diff-viewer/diff-viewer.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="showResults">
+    <n-space justify="center">
+      <n-form-item label="Only show differences" label-placement="left">
+        <n-switch v-model:value="onlyShowDifferences" />
+      </n-form-item>
+    </n-space>
+
+    <c-card data-test-id="diff-result">
+      <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text>
+      <diff-root-viewer v-else :diff="result" />
+    </c-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAppTheme } from '@/ui/theme/themes';
+import _ from 'lodash';
+import { DiffRootViewer } from './diff-viewer.models';
+import { diff } from '../json-diff.models';
+
+const onlyShowDifferences = ref(false);
+const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
+const { leftJson, rightJson } = toRefs(props);
+const appTheme = useAppTheme();
+
+const result = computed(() =>
+  diff(leftJson.value, rightJson.value, { onlyShowDifferences: onlyShowDifferences.value }),
+);
+
+const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value));
+const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value));
+</script>
+
+<style lang="less" scoped>
+::v-deep(.diffs-viewer) {
+  color: v-bind('appTheme.text.mutedColor');
+
+  & > ul {
+    padding-left: 0 !important;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 20px;
+    margin: 0;
+
+    li {
+      .updated-line {
+        padding: 3px 0;
+      }
+
+      .result,
+      .array,
+      .object,
+      .value {
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
+
+        &.added {
+          padding: 3px 5px;
+          border-radius: 4px;
+          background-color: v-bind('appTheme.success.colorFaded');
+          color: v-bind('appTheme.success.color');
+          .key {
+            color: inherit;
+          }
+        }
+
+        &.removed {
+          padding: 3px 5px;
+          border-radius: 4px;
+          background-color: v-bind('appTheme.error.colorFaded');
+          color: v-bind('appTheme.error.color');
+
+          .key {
+            color: inherit;
+          }
+        }
+      }
+
+      .value {
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: border-color 0.2s ease-in-out;
+
+        &.added:hover {
+          border-color: v-bind('appTheme.success.color');
+        }
+
+        &.removed:hover {
+          border-color: v-bind('appTheme.error.color');
+        }
+      }
+
+      .added .added,
+      .removed .removed {
+        background-color: transparent;
+        color: inherit;
+      }
+
+      .key {
+        font-weight: 500;
+        color: v-bind('appTheme.text.baseColor');
+      }
+    }
+  }
+}
+</style>

src/tools/json-diff/index.ts

@@ -0,0 +1,12 @@
+import { CompareArrowsRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON diff',
+  path: '/json-diff',
+  description: 'Compare two JSON objects and get the differences between them.',
+  keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'],
+  component: () => import('./json-diff.vue'),
+  icon: CompareArrowsRound,
+  createdAt: new Date('2023-04-20'),
+});

src/tools/json-diff/json-diff.e2e.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - JSON diff', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-diff');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON diff - IT Tools');
+  });
+
+  test('Identical JSONs have a custom result message', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{   "foo":  "bar" }  ');
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain('The provided JSONs are the same');
+  });
+
+  test('Different JSONs have differences listed', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{"foo":"buz","baz":"qux"}');
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain(`{\nfoo: "bar""buz",\nbaz: "qux",\n},`);
+  });
+
+  test('Different JSONs have only differences listed when "Only show differences" is checked', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{"foo":"bar","baz":"qux"}');
+    await page.getByRole('switch').click();
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain(`{\nbaz: "qux",\n},`);
+  });
+});

src/tools/json-diff/json-diff.models.test.ts

@@ -0,0 +1,80 @@
+import { expect, describe, it } from 'vitest';
+import { diff } from './json-diff.models';
+
+describe('json-diff models', () => {
+  describe('diff', () => {
+    it('list object differences', () => {
+      const obj = { a: 1, b: 2 };
+      const newObj = { a: 1, b: 2, c: 3 };
+      const result = diff(obj, newObj);
+
+      expect(result).toEqual({
+        key: '',
+        type: 'object',
+        children: [
+          {
+            key: 'a',
+            type: 'value',
+            value: 1,
+            oldValue: 1,
+            status: 'unchanged',
+          },
+          {
+            key: 'b',
+            type: 'value',
+            value: 2,
+            oldValue: 2,
+            status: 'unchanged',
+          },
+          {
+            key: 'c',
+            type: 'value',
+            value: 3,
+            oldValue: undefined,
+            status: 'added',
+          },
+        ],
+        oldValue: { a: 1, b: 2 },
+        value: { a: 1, b: 2, c: 3 },
+        status: 'children-updated',
+      });
+    });
+
+    it('list array differences', () => {
+      const obj = [1, 2];
+      const newObj = [1, 2, 3];
+      const result = diff(obj, newObj);
+
+      expect(result).toEqual({
+        key: '',
+        type: 'array',
+        children: [
+          {
+            key: 0,
+            type: 'value',
+            value: 1,
+            oldValue: 1,
+            status: 'unchanged',
+          },
+          {
+            key: 1,
+            type: 'value',
+            value: 2,
+            oldValue: 2,
+            status: 'unchanged',
+          },
+          {
+            key: 2,
+            type: 'value',
+            value: 3,
+            oldValue: undefined,
+            status: 'added',
+          },
+        ],
+        oldValue: [1, 2],
+        value: [1, 2, 3],
+        status: 'children-updated',
+      });
+    });
+  });
+});

src/tools/json-diff/json-diff.models.ts

@@ -0,0 +1,140 @@
+import _ from 'lodash';
+import type { Difference, DifferenceStatus } from './json-diff.types';
+
+export { diff };
+
+function diff(
+  obj: unknown,
+  newObj: unknown,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference {
+  if (_.isArray(obj) && _.isArray(newObj)) {
+    return {
+      key: '',
+      type: 'array',
+      children: diffArrays(obj, newObj, { onlyShowDifferences }),
+      oldValue: obj,
+      value: newObj,
+      status: getStatus(obj, newObj),
+    };
+  }
+
+  if (_.isObject(obj) && _.isObject(newObj)) {
+    return {
+      key: '',
+      type: 'object',
+      children: diffObjects(obj as Record<string, unknown>, newObj as Record<string, unknown>, { onlyShowDifferences }),
+      oldValue: obj,
+      value: newObj,
+      status: getStatus(obj, newObj),
+    };
+  }
+
+  return {
+    key: '',
+    type: 'value',
+    oldValue: obj,
+    value: newObj,
+    status: getStatus(obj, newObj),
+  };
+}
+
+function diffObjects(
+  obj: Record<string, unknown>,
+  newObj: Record<string, unknown>,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference[] {
+  const keys = Object.keys({ ...obj, ...newObj });
+  return keys
+    .map((key) => createDifference(obj?.[key], newObj?.[key], key, { onlyShowDifferences }))
+    .filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged');
+}
+
+function createDifference(
+  value: unknown,
+  newValue: unknown,
+  key: string | number,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference {
+  const type = getType(value);
+
+  if (type === 'object') {
+    return {
+      key,
+      type,
+      children: diffObjects(value as Record<string, unknown>, newValue as Record<string, unknown>, {
+        onlyShowDifferences,
+      }),
+      oldValue: value,
+      value: newValue,
+      status: getStatus(value, newValue),
+    };
+  }
+
+  if (type === 'array') {
+    return {
+      key,
+      type,
+      children: diffArrays(value as unknown[], newValue as unknown[], { onlyShowDifferences }),
+      value: newValue,
+      oldValue: value,
+      status: getStatus(value, newValue),
+    };
+  }
+
+  return {
+    key,
+    type,
+    value: newValue,
+    oldValue: value,
+    status: getStatus(value, newValue),
+  };
+}
+
+function diffArrays(
+  arr: unknown[],
+  newArr: unknown[],
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference[] {
+  const maxLength = Math.max(0, arr?.length, newArr?.length);
+  return Array.from({ length: maxLength }, (_, i) =>
+    createDifference(arr?.[i], newArr?.[i], i, { onlyShowDifferences }),
+  ).filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged');
+}
+
+function getType(value: unknown): 'object' | 'array' | 'value' {
+  if (value === null) {
+    return 'value';
+  }
+  if (Array.isArray(value)) {
+    return 'array';
+  }
+  if (typeof value === 'object') {
+    return 'object';
+  }
+  return 'value';
+}
+
+function getStatus(value: unknown, newValue: unknown): DifferenceStatus {
+  if (value === undefined) {
+    return 'added';
+  }
+
+  if (newValue === undefined) {
+    return 'removed';
+  }
+
+  const bothAreObjects = getType(value) === 'object' && getType(newValue) === 'object';
+  const bothAreArrays = getType(value) === 'array' && getType(newValue) === 'array';
+  const bothAreDeepEqual = _.isEqual(value, newValue);
+
+  if (bothAreDeepEqual) {
+    return 'unchanged';
+  }
+
+  if (bothAreObjects || bothAreArrays) {
+    return 'children-updated';
+  }
+
+  return 'updated';
+}

src/tools/json-diff/json-diff.types.ts

@@ -0,0 +1,29 @@
+export type DifferenceStatus = 'added' | 'removed' | 'updated' | 'unchanged' | 'children-updated';
+
+export type ObjectDifference = {
+  key: string | number;
+  type: 'object';
+  children: Difference[];
+  status: DifferenceStatus;
+  oldValue: unknown;
+  value: unknown;
+};
+
+export type ValueDifference = {
+  key: string | number;
+  type: 'value';
+  value: unknown;
+  oldValue: unknown;
+  status: DifferenceStatus;
+};
+
+export type ArrayDifference = {
+  key: number | string;
+  type: 'array';
+  children: Difference[];
+  status: DifferenceStatus;
+  oldValue: unknown;
+  value: unknown;
+};
+
+export type Difference = ObjectDifference | ValueDifference | ArrayDifference;

src/tools/json-diff/json-diff.vue

@@ -0,0 +1,59 @@
+<template>
+  <n-form-item label="Your first json" v-bind="leftJsonValidation.attrs">
+    <n-input
+      v-model:value="rawLeftJson"
+      placeholder="Paste your first json here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :input-props="{ 'data-test-id': 'leftJson' }"
+    />
+  </n-form-item>
+  <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs">
+    <n-input
+      v-model:value="rawRightJson"
+      placeholder="Paste your json to compare here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :input-props="{ 'data-test-id': 'rightJson' }"
+    />
+  </n-form-item>
+
+  <DiffsViewer :left-json="leftJson" :right-json="rightJson" />
+</template>
+
+<script setup lang="ts">
+import JSON5 from 'json5';
+
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import DiffsViewer from './diff-viewer/diff-viewer.vue';
+
+const rawLeftJson = ref('');
+const rawRightJson = ref('');
+
+const leftJson = computed(() => withDefaultOnError(() => JSON5.parse(rawLeftJson.value), undefined));
+const rightJson = computed(() => withDefaultOnError(() => JSON5.parse(rawRightJson.value), undefined));
+
+const createJsonValidation = (json: Ref) =>
+  useValidation({
+    source: json,
+    rules: [
+      {
+        validator: (value) => value === '' || isNotThrowing(() => JSON5.parse(value)),
+        message: 'Invalid JSON',
+      },
+    ],
+  });
+
+const leftJsonValidation = createJsonValidation(rawLeftJson);
+const rightJsonValidation = createJsonValidation(rawRightJson);
+</script>

src/ui/theme/themes.ts

@@ -4,6 +4,7 @@ export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({
   light: {
     text: {
       baseColor: 'rgb(51, 54, 57)',
+      mutedColor: 'rgba(118, 124, 130)',
     },
 
     primary: {
@@ -17,10 +18,23 @@ export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({
       colorHover: '#f59e0b',
       colorPressed: '#f59e0b',
     },
+    success: {
+      color: '#18a058',
+      colorHover: '#36ad6a',
+      colorPressed: '#0c7a43',
+      colorFaded: '#18a0582f',
+    },
+    error: {
+      color: '#d03050',
+      colorHover: '#de576d',
+      colorPressed: '#ab1f3f',
+      colorFaded: '#d030502a',
+    },
   },
   dark: {
     text: {
       baseColor: 'rgba(255, 255, 255, 0.82)',
+      mutedColor: 'rgba(255, 255, 255, 0.5)',
     },
 
     primary: {
@@ -33,5 +47,17 @@ export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({
       colorHover: '#f59e0b',
       colorPressed: '#f59e0b',
     },
+    success: {
+      color: '#18a058',
+      colorHover: '#36ad6a',
+      colorPressed: '#0c7a43',
+      colorFaded: '#18a0582f',
+    },
+    error: {
+      color: '#e88080',
+      colorHover: '#e98b8b',
+      colorPressed: '#e57272',
+      colorFaded: '#e8808029',
+    },
   },
 });