3 files changed, 60 insertions, 0 deletions
diff --git a/src/tools/json-to-yaml-converter/index.ts b/src/tools/json-to-yaml-converter/index.ts
new file mode 100644
index 0000000..9db09d3
--- /dev/null
+++ b/src/tools/json-to-yaml-converter/index.ts
@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON to YAML converter',
+  path: '/json-to-yaml-converter',
+  description: 'Simply convert JSON to YAML with this live online converter.',
+  keywords: ['yaml', 'to', 'json'],
+  component: () => import('./json-to-yaml.vue'),
+  icon: Braces,
+  createdAt: new Date('2023-04-10'),
+});
diff --git a/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts b/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts
new file mode 100644
index 0000000..bce095b
--- /dev/null
+++ b/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - json to yaml', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-to-yaml-converter');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON to YAML converter - IT Tools');
+  });
+
+  test('json is parsed and output clean yaml', async ({ page }) => {
+    await page.getByTestId('input').fill('{"foo":"bar","list":["item",{"key":"value"}]}');
+
+    const generatedJson = await page.getByTestId('area-content').innerText();
+
+    expect(generatedJson.trim()).toEqual(`foo: bar\nlist:\n  - item\n  - key: value`.trim());
+  });
+});
diff --git a/src/tools/json-to-yaml-converter/json-to-yaml.vue b/src/tools/json-to-yaml-converter/json-to-yaml.vue
new file mode 100644
index 0000000..f25ef37
--- /dev/null
+++ b/src/tools/json-to-yaml-converter/json-to-yaml.vue
@@ -0,0 +1,29 @@
+<template>
+  <format-transformer
+    input-label="Your JSON"
+    input-placeholder="Paste your JSON here..."
+    output-label="YAML from your JSON"
+    output-language="yaml"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { stringify } from 'yaml';
+import JSON5 from 'json5';
+
+const transformer = (value: string) => withDefaultOnError(() => stringify(JSON5.parse(value)), '');
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (value: string) => value === '' || isNotThrowing(() => stringify(JSON5.parse(value))),
+    message: 'Provided JSON is not valid.',
+  },
+];
+</script>
+
+<style lang="less" scoped></style>