diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 6718ad3..058f22f 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -53,7 +53,10 @@ export default defineConfig({
           text: "API Reference",
           items: [
             { text: "Form Options", link: "/guide/form-options" },
-            { text: "Schema Extensions", link: "/guide/schema-extensions" },
+            {
+              text: "Schema Extensions (x-*)",
+              link: "/guide/schema-extensions",
+            },
             { text: "Components", link: "/guide/components" },
             { text: "Composables", link: "/guide/composables" },
             { text: "Testers & Registry", link: "/guide/testers-registry" },
diff --git a/docs/guide/components.md b/docs/guide/components.md
index 542b862..68f887d 100644
--- a/docs/guide/components.md
+++ b/docs/guide/components.md
@@ -305,6 +305,105 @@ Renders nested object fields.
 
 ---
 
+## JsonField
+
+Renders a JSON editor for freeform object configuration.
+
+### Handles
+
+- `type: 'object'` with `additionalProperties` but no defined `properties`
+- Any field with `x-render: 'jsoneditor'`
+
+### Example Schema
+
+**Auto-detected (freeform object):**
+```typescript
+{
+  type: 'object',
+  title: 'Custom Configuration',
+  description: 'Freeform JSON object',
+  additionalProperties: {}
+}
+```
+
+**Explicit via x-render:**
+```typescript
+{
+  type: 'object',
+  title: 'API Settings',
+  description: 'Configuration in JSON format',
+  'x-render': 'jsoneditor',
+  'x-rows': 10  // Control textarea height
+}
+```
+
+**With custom props (Quasar):**
+```typescript
+{
+  type: 'object',
+  title: 'Metadata',
+  'x-render': 'jsoneditor',
+  'x-rows': 8,
+  'x-quasar-props': {
+    dense: false,
+    color: 'secondary'
+  },
+  'x-quickforms-quasar': {
+    prependIcon: 'settings',
+    iconColor: 'primary',
+    showFormatHint: false  // Hide info icon
+  }
+}
+```
+
+**Hide format hint (Vue):**
+```typescript
+{
+  type: 'object',
+  'x-render': 'jsoneditor',
+  'x-show-format-hint': false  // Hide info icon
+}
+```
+
+### Features
+
+- **Tab indentation**: Press Tab to insert 2 spaces
+- **Format shortcut**: Press Ctrl+Space to auto-format JSON
+- **Real-time validation**: Shows parse errors as you type
+- **Monospace font**: Better readability for JSON
+- **Info icon**: Hover tooltip showing format shortcut (can be hidden)
+- **No auto-formatting**: Only formats on initial load or manual trigger
+
+### Keyboard Shortcuts
+
+- **Ctrl+Space**: Format JSON with proper indentation
+- **Tab**: Insert 2 spaces for indentation
+- **Enter**: Insert new line (does not submit form)
+
+### Configuration
+
+**Global defaults (Quasar):**
+```typescript
+const formOptions = {
+  componentDefaults: {
+    jsoneditor: {
+      dense: true,
+      color: 'primary',
+      rows: 12
+    }
+  },
+  quickformsDefaults: {
+    jsoneditor: {
+      prependIcon: 'code',
+      iconColor: 'grey-7',
+      showFormatHint: true  // Default: true
+    }
+  }
+}
+```
+
+---
+
 ## ArrayField
 
 Renders dynamic array fields with add/remove buttons.
diff --git a/docs/guide/schema-extensions.md b/docs/guide/schema-extensions.md
index 5e9b99a..33f0f34 100644
--- a/docs/guide/schema-extensions.md
+++ b/docs/guide/schema-extensions.md
@@ -330,6 +330,82 @@ All `x-*` attributes are optional. QuickForms works perfectly with standard JSON
 
 ---
 
+## `x-render`
+
+**Purpose:** Force a specific renderer for a field
+
+**Type:** `string`
+
+**Example:**
+```typescript
+{
+  apiSettings: {
+    type: 'object',
+    title: 'API Settings',
+    'x-render': 'jsoneditor'  // Force JSON editor
+  }
+}
+```
+
+**Available Renderers:**
+- `'jsoneditor'` - JSON textarea editor with formatting support
+
+**Use Cases:**
+- Force JSON editor for object fields that would normally render as nested fields
+- Override automatic component selection
+
+**Related:** [JsonField Component](/guide/components#jsonfield)
+
+---
+
+## `x-rows`
+
+**Purpose:** Control textarea height in rows
+
+**Type:** `number`
+
+**Default:** `8` (for JSON editor), varies by field type
+
+**Example:**
+```typescript
+{
+  config: {
+    type: 'object',
+    'x-render': 'jsoneditor',
+    'x-rows': 12  // Taller editor
+  }
+}
+```
+
+**Applies to:**
+- `format: 'textarea'` - String textarea fields
+- `x-render: 'jsoneditor'` - JSON editor fields
+
+---
+
+## `x-show-format-hint`
+
+**Purpose:** Show/hide the format hint icon in JSON editor (Vue package)
+
+**Type:** `boolean`
+
+**Default:** `true`
+
+**Example:**
+```typescript
+{
+  config: {
+    type: 'object',
+    'x-render': 'jsoneditor',
+    'x-show-format-hint': false  // Hide the ⓘ icon
+  }
+}
+```
+
+**Note:** For Quasar, use `x-quickforms-quasar: { showFormatHint: false }` instead.
+
+---
+
 ## Combining Extensions
 
 Multiple extensions can be used together:
diff --git a/packages/core/package.json b/packages/core/package.json
index 499214d..1a9d4b7 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quickflo/quickforms",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Framework-agnostic core for QuickForms - JSON Schema form generator",
   "type": "module",
   "main": "./dist/index.js",
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 83c9547..9935af3 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -24,6 +24,7 @@ export {
   isArrayType,
   isNullType,
   isEnumType,
+  isJsonType,
   hasConst,
   hasFormat,
   isEmailFormat,
diff --git a/packages/core/src/testers.ts b/packages/core/src/testers.ts
index 29e4c77..96152e0 100644
--- a/packages/core/src/testers.ts
+++ b/packages/core/src/testers.ts
@@ -42,6 +42,25 @@ export const isArrayType = (schema: JSONSchema): boolean => {
   return schema.type === 'array';
 };
 
+/**
+ * JSON object tester - for freeform JSON editing
+ * Matches objects with additionalProperties but no defined properties,
+ * or any field with x-render: "jsoneditor"
+ */
+export const isJsonType = (schema: JSONSchema): boolean => {
+  // Explicit opt-in via x-render extension
+  if ((schema as any)['x-render'] === 'jsoneditor') {
+    return true;
+  }
+  
+  // Automatic detection: object with additionalProperties but no defined properties
+  return (
+    schema.type === 'object' &&
+    schema.additionalProperties !== undefined &&
+    (!schema.properties || Object.keys(schema.properties).length === 0)
+  );
+};
+
 export const isNullType = (schema: JSONSchema): boolean => {
   return schema.type === 'null';
 };
diff --git a/packages/quasar/dev/App.vue b/packages/quasar/dev/App.vue
index f8d526f..6dcc21c 100644
--- a/packages/quasar/dev/App.vue
+++ b/packages/quasar/dev/App.vue
@@ -353,6 +353,32 @@ const schema: JSONSchema = {
       },
     },
 
+    // === JSON EDITOR (AUTO-DETECTED) ===
+    customConfig: {
+      type: "object",
+      title: "Custom Configuration",
+      description: "Freeform JSON object (auto-detected via additionalProperties)",
+      additionalProperties: {},
+      "x-rows": 8,
+    },
+
+    // === JSON EDITOR (EXPLICIT WITH CUSTOMIZATION) ===
+    metadata: {
+      type: "object",
+      title: "Metadata",
+      description: "Explicit JSON editor via x-render extension with custom props",
+      "x-render": "jsoneditor",
+      "x-rows": 6,
+      "x-quasar-props": {
+        dense: false,
+        color: "secondary",
+      },
+      "x-quickforms-quasar": {
+        prependIcon: "settings",
+        iconColor: "primary",
+      },
+    },
+
     // === URL FIELD ===
     website: {
       type: "string",
diff --git a/packages/quasar/package.json b/packages/quasar/package.json
index 44182ea..4661811 100644
--- a/packages/quasar/package.json
+++ b/packages/quasar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quickflo/quickforms-quasar",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Quasar UI components for QuickForms - JSON Schema form generator",
   "type": "module",
   "main": "./dist/index.js",
diff --git a/packages/quasar/src/components/QuasarJsonField.vue b/packages/quasar/src/components/QuasarJsonField.vue
new file mode 100644
index 0000000..b315577
--- /dev/null
+++ b/packages/quasar/src/components/QuasarJsonField.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { QInput, QIcon } from 'quasar';
+import { useFormField, generateFieldId, useFormContext } from '@quickflo/quickforms-vue';
+import type { FieldProps } from '@quickflo/quickforms-vue';
+import type { QuasarFormOptions } from '../types';
+
+const props = withDefaults(defineProps<FieldProps>(), {
+  disabled: false,
+  readonly: false,
+});
+
+const { value, setValue, label, hint, errorMessage, required } = useFormField(
+  props.path,
+  props.schema,
+  { label: props.label }
+);
+
+const formContext = useFormContext<QuasarFormOptions>();
+
+const fieldId = generateFieldId(props.path);
+
+// Local text state for JSON editing
+const jsonText = ref('');
+const parseError = ref<string | null>(null);
+const isInitialized = ref(false);
+
+// Initialize jsonText from value (only once)
+watch(
+  () => value.value,
+  (newValue) => {
+    // Only auto-format on initial load, not during user editing
+    if (!isInitialized.value) {
+      try {
+        jsonText.value = JSON.stringify(newValue || {}, null, 2);
+        parseError.value = null;
+      } catch (err) {
+        jsonText.value = '{}';
+      }
+      isInitialized.value = true;
+    }
+  },
+  { immediate: true }
+);
+
+// Parse and update value on text change
+function handleInput(val: string) {
+  jsonText.value = val;
+
+  try {
+    const parsed = JSON.parse(jsonText.value);
+    setValue(parsed);
+    parseError.value = null;
+  } catch (err: any) {
+    parseError.value = err.message;
+  }
+}
+
+// Format JSON with Cmd+Shift+F (Mac) or Ctrl+Shift+F (others)
+function formatJson() {
+  try {
+    const parsed = JSON.parse(jsonText.value);
+    jsonText.value = JSON.stringify(parsed, null, 2);
+    parseError.value = null;
+  } catch (err: any) {
+    // Don't format if invalid JSON
+  }
+}
+
+// Handle keyboard events for better editor UX
+function handleKeyDown(event: KeyboardEvent) {
+  const target = event.target as HTMLTextAreaElement;
+  
+  // Format JSON: Ctrl + Space
+  if (event.ctrlKey && (event.key === ' ' || event.code === 'Space')) {
+    event.preventDefault();
+    event.stopPropagation();
+    formatJson();
+    return;
+  }
+  
+  // Tab key - insert 2 spaces
+  if (event.key === 'Tab') {
+    event.preventDefault();
+    event.stopPropagation();
+    
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    const spaces = '  '; // 2 spaces
+    
+    // Insert spaces at cursor position
+    jsonText.value = jsonText.value.substring(0, start) + spaces + jsonText.value.substring(end);
+    
+    // Move cursor after inserted spaces
+    setTimeout(() => {
+      target.selectionStart = target.selectionEnd = start + spaces.length;
+    }, 0);
+    return;
+  }
+  
+  // Enter, Space - stop propagation to prevent form submission
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.stopPropagation();
+  }
+}
+
+const displayError = computed(() => parseError.value || errorMessage.value);
+
+// Get Quasar-specific props with defaults
+const quasarProps = computed(() => {
+  const globalDefaults = formContext?.componentDefaults?.global || {};
+  const jsonEditorDefaults = formContext?.componentDefaults?.jsoneditor || {};
+  const xQuasarProps = (props.schema as any)['x-quasar-props'] || {};
+  const xComponentProps = (props.schema as any)['x-component-props'] || {};
+  
+  // Merge in order: global defaults < jsoneditor defaults < schema-specific props
+  return { ...globalDefaults, ...jsonEditorDefaults, ...xComponentProps, ...xQuasarProps };
+});
+
+// Get QuickForms-specific features (icons, etc.)
+const quickformsFeatures = computed(() => {
+  const globalFeatures = formContext?.quickformsDefaults?.global || {};
+  const jsonEditorFeatures = formContext?.quickformsDefaults?.jsoneditor || {};
+  const xQuickformsQuasar = (props.schema as any)['x-quickforms-quasar'] || {};
+  
+  // Merge in order: global < jsoneditor < schema-specific
+  return { ...globalFeatures, ...jsonEditorFeatures, ...xQuickformsQuasar };
+});
+
+// Whether to show the format hint icon (default: true)
+const showFormatHint = computed(() => {
+  return quickformsFeatures.value.showFormatHint !== false;
+});
+
+// Get rows from schema or default
+const rows = computed(() => {
+  const xRows = (props.schema as any)['x-rows'];
+  return xRows !== undefined ? xRows : 8;
+});
+
+</script>
+
+<template>
+  <div class="quickform-json-field-wrapper">
+    <div v-if="label" class="quickform-label-header">
+      <span class="quickform-label-text">
+        {{ label }}
+        <span v-if="required" style="color: red; margin-left: 0.25rem">*</span>
+      </span>
+      <span v-if="showFormatHint" class="quickform-info-icon" title="Press Ctrl+Space to format JSON">ⓘ</span>
+    </div>
+    <QInput
+      :id="fieldId"
+      :model-value="jsonText"
+      :hint="hint"
+      :error="!!displayError"
+      :error-message="displayError || undefined"
+      :disable="disabled"
+      :readonly="readonly"
+      :rules="[() => !displayError || displayError]"
+      type="textarea"
+      :rows="rows"
+      outlined
+      dense
+      class="quickform-json-field"
+      input-class="quickform-json-editor"
+      input-style="font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; font-size: 0.813rem; line-height: 1.5;"
+      placeholder="{}"
+      v-bind="quasarProps"
+      @update:model-value="handleInput"
+      @keydown="handleKeyDown"
+    >
+      <template v-if="quickformsFeatures.prependIcon" #prepend>
+        <QIcon
+          :name="quickformsFeatures.prependIcon"
+          :color="quickformsFeatures.iconColor || 'grey-7'"
+          :size="quickformsFeatures.iconSize || 'sm'"
+        />
+      </template>
+      <template v-if="quickformsFeatures.appendIcon" #append>
+        <QIcon
+          :name="quickformsFeatures.appendIcon"
+          :color="quickformsFeatures.iconColor || 'grey-7'"
+          :size="quickformsFeatures.iconSize || 'sm'"
+        />
+      </template>
+    </QInput>
+  </div>
+</template>
+
+<style scoped>
+.quickform-json-field-wrapper {
+  width: 100%;
+}
+
+.quickform-label-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+}
+
+.quickform-label-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.quickform-info-icon {
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.54);
+  cursor: help;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+}
+
+.quickform-info-icon:hover {
+  opacity: 1;
+}
+
+.quickform-json-field-wrapper :deep(.quickform-json-editor) {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  font-size: 0.813rem;
+  line-height: 1.5;
+}
+</style>
diff --git a/packages/quasar/src/index.ts b/packages/quasar/src/index.ts
index 2e79867..fef949d 100644
--- a/packages/quasar/src/index.ts
+++ b/packages/quasar/src/index.ts
@@ -11,6 +11,7 @@ export { default as QuasarTimeField } from './components/QuasarTimeField.vue';
 export { default as QuasarDateTimeField } from './components/QuasarDateTimeField.vue';
 export { default as QuasarObjectField } from './components/QuasarObjectField.vue';
 export { default as QuasarArrayField } from './components/QuasarArrayField.vue';
+export { default as QuasarJsonField } from './components/QuasarJsonField.vue';
 export { default as QuasarMultiEnumField } from './components/QuasarMultiEnumField.vue';
 export { default as QuasarOneOfField } from './components/QuasarOneOfField.vue';
 export { default as QuasarAllOfField } from './components/QuasarAllOfField.vue';
@@ -51,6 +52,7 @@ export {
   isEnumType,
   isObjectType,
   isArrayType,
+  isJsonType,
   isNullType,
   // Format testers
   isEmailFormat,
diff --git a/packages/quasar/src/registry.ts b/packages/quasar/src/registry.ts
index cba0490..f914c7a 100644
--- a/packages/quasar/src/registry.ts
+++ b/packages/quasar/src/registry.ts
@@ -10,6 +10,7 @@ import {
   isDateTimeFormat,
   isObjectType,
   isArrayType,
+  isJsonType,
   hasOneOf,
   hasAnyOf,
   hasAllOf,
@@ -25,6 +26,7 @@ import QuasarTimeField from './components/QuasarTimeField.vue';
 import QuasarDateTimeField from './components/QuasarDateTimeField.vue';
 import QuasarObjectField from './components/QuasarObjectField.vue';
 import QuasarArrayField from './components/QuasarArrayField.vue';
+import QuasarJsonField from './components/QuasarJsonField.vue';
 import QuasarMultiEnumField from './components/QuasarMultiEnumField.vue';
 import QuasarOneOfField from './components/QuasarOneOfField.vue';
 import QuasarAllOfField from './components/QuasarAllOfField.vue';
@@ -98,6 +100,11 @@ export function createQuasarRegistry(): ComponentRegistry<Component> {
     rankWith(3, isDateTimeFormat(schema))
   );
 
+  // Register JSON field (priority: 5, higher than object since it's more specific)
+  registry.register('json', QuasarJsonField, (schema) =>
+    rankWith(5, isJsonType(schema))
+  );
+
   // Register object field (priority: 1)
   registry.register('object', QuasarObjectField, (schema) =>
     rankWith(1, isObjectType(schema))
diff --git a/packages/quasar/src/types.ts b/packages/quasar/src/types.ts
index c727eb8..a23bfc4 100644
--- a/packages/quasar/src/types.ts
+++ b/packages/quasar/src/types.ts
@@ -116,6 +116,9 @@ export interface QuasarComponentDefaults extends VueComponentDefaults {
 
   /** QExpansionItem-specific defaults (for objects) */
   expansion?: Partial<QExpansionItemProps>;
+
+  /** QInput textarea-specific defaults (for JSON editor) */
+  jsoneditor?: Partial<QInputProps>;
 }
 
 /**
@@ -134,6 +137,11 @@ export interface QuickFormsQuasarDefaults {
   datetime?: QuickFormsQuasarFeatures;
   /** Array-specific QuickForms features */
   array?: QuickFormsQuasarArrayFeatures;
+  /** JSON editor-specific QuickForms features */
+  jsoneditor?: QuickFormsQuasarFeatures & {
+    /** Show the info icon with format shortcut hint. Default: true */
+    showFormatHint?: boolean;
+  };
 }
 
 /**
diff --git a/packages/vue/dev/App.vue b/packages/vue/dev/App.vue
index 8cab2e3..75f4f6d 100644
--- a/packages/vue/dev/App.vue
+++ b/packages/vue/dev/App.vue
@@ -230,6 +230,19 @@ const fullTestSchema: JSONSchema = {
         required: ["company", "position"],
       },
     },
+    customConfig: {
+      type: "object",
+      title: "Custom Configuration",
+      description: "Freeform JSON object (auto-detected via additionalProperties)",
+      additionalProperties: {},
+    },
+    apiSettings: {
+      type: "object",
+      title: "API Settings",
+      description: "Explicit JSON editor via x-render extension",
+      "x-render": "jsoneditor",
+      "x-rows": 6,
+    },
     paymentMethod: {
       type: "object",
       title: "Payment Method",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 9ec573a..384cf49 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quickflo/quickforms-vue",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Vue 3 bindings for QuickForms - JSON Schema form generator",
   "type": "module",
   "main": "./dist/index.js",
diff --git a/packages/vue/src/components/JsonField.vue b/packages/vue/src/components/JsonField.vue
new file mode 100644
index 0000000..d6940fd
--- /dev/null
+++ b/packages/vue/src/components/JsonField.vue
@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useFormField } from '../composables/useFormField.js';
+import { generateFieldId } from '../composables/utils.js';
+import type { FieldProps } from '../types/index.js';
+
+const props = withDefaults(defineProps<FieldProps>(), {
+  disabled: false,
+  readonly: false
+});
+
+const { value, setValue, label, hint, errorMessage, required } = useFormField(
+  props.path, 
+  props.schema,
+  { label: props.label }
+);
+
+const fieldId = generateFieldId(props.path);
+
+// Check if we should show the format hint icon
+// Can be controlled via x-show-format-hint in schema
+const showFormatHint = computed(() => {
+  const xShowFormatHint = (props.schema as any)['x-show-format-hint'];
+  return xShowFormatHint !== false; // Default: true
+});
+
+// Local text state for JSON editing
+const jsonText = ref('');
+const parseError = ref<string | null>(null);
+const isInitialized = ref(false);
+
+// Initialize jsonText from value (only once)
+watch(
+  () => value.value,
+  (newValue) => {
+    // Only auto-format on initial load, not during user editing
+    if (!isInitialized.value) {
+      try {
+        jsonText.value = JSON.stringify(newValue || {}, null, 2);
+        parseError.value = null;
+      } catch (err) {
+        jsonText.value = '{}';
+      }
+      isInitialized.value = true;
+    }
+  },
+  { immediate: true }
+);
+
+// Parse and update value on text change
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement;
+  jsonText.value = target.value;
+  
+  try {
+    const parsed = JSON.parse(jsonText.value);
+    setValue(parsed);
+    parseError.value = null;
+  } catch (err: any) {
+    parseError.value = err.message;
+  }
+}
+
+// Format JSON with Cmd+Shift+F (Mac) or Ctrl+Shift+F (others)
+function formatJson() {
+  try {
+    const parsed = JSON.parse(jsonText.value);
+    jsonText.value = JSON.stringify(parsed, null, 2);
+    parseError.value = null;
+  } catch (err: any) {
+    // Don't format if invalid JSON
+  }
+}
+
+// Handle keyboard events for better editor UX
+function handleKeyDown(event: KeyboardEvent) {
+  const target = event.target as HTMLTextAreaElement;
+  
+  // Format JSON: Ctrl + Space
+  if (event.ctrlKey && (event.key === ' ' || event.code === 'Space')) {
+    event.preventDefault();
+    event.stopPropagation();
+    formatJson();
+    return;
+  }
+  
+  // Tab key - insert 2 spaces
+  if (event.key === 'Tab') {
+    event.preventDefault();
+    event.stopPropagation();
+    
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    const spaces = '  '; // 2 spaces
+    
+    // Insert spaces at cursor position
+    jsonText.value = jsonText.value.substring(0, start) + spaces + jsonText.value.substring(end);
+    
+    // Move cursor after inserted spaces
+    setTimeout(() => {
+      target.selectionStart = target.selectionEnd = start + spaces.length;
+    }, 0);
+    return;
+  }
+  
+  // Enter, Space - stop propagation to prevent form submission
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.stopPropagation();
+  }
+}
+
+const displayError = computed(() => parseError.value || errorMessage.value);
+
+// Get rows from schema or default
+const rows = computed(() => {
+  const xRows = (props.schema as any)['x-rows'];
+  return xRows !== undefined ? xRows : 8;
+});
+
+</script>
+
+<template>
+  <div class="quickform-field quickform-json-field">
+    <div v-if="label" class="quickform-label-wrapper">
+      <label 
+        :for="fieldId" 
+        class="quickform-label"
+      >
+        {{ label }}
+        <span v-if="required" class="quickform-required">*</span>
+      </label>
+      <span v-if="showFormatHint" class="quickform-info-icon" title="Press Ctrl+Space to format JSON">ⓘ</span>
+    </div>
+
+    <div v-if="hint" :id="`${fieldId}-hint`" class="quickform-hint">
+      <span v-html="hint"></span>
+    </div>
+
+    <textarea
+      :id="fieldId"
+      v-model="jsonText"
+      class="quickform-textarea quickform-json-editor"
+      :class="{ 'quickform-error-border': displayError }"
+      :disabled="disabled"
+      :readonly="readonly"
+      :rows="rows"
+      :aria-describedby="hint ? `${fieldId}-hint` : undefined"
+      :aria-invalid="!!displayError"
+      placeholder="{}"
+      spellcheck="false"
+      @input="handleInput"
+      @keydown="handleKeyDown"
+    />
+
+    <div v-if="displayError" class="quickform-error">
+      {{ displayError }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.quickform-field {
+  margin-bottom: var(--quickform-spacing-md, 1rem);
+}
+
+.quickform-label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: var(--quickform-spacing-xs, 0.5rem);
+}
+
+.quickform-label {
+  font-weight: var(--quickform-label-font-weight, 500);
+  font-size: var(--quickform-label-font-size, 0.875rem);
+  color: var(--quickform-label-color, #374151);
+}
+
+.quickform-info-icon {
+  font-size: 1rem;
+  color: var(--quickform-hint-color, #6b7280);
+  cursor: help;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.quickform-info-icon:hover {
+  opacity: 1;
+}
+
+.quickform-required {
+  color: var(--quickform-required-color, #ef4444);
+  margin-left: var(--quickform-required-margin-left, 0.25rem);
+}
+
+.quickform-hint {
+  font-size: var(--quickform-hint-font-size, 0.875rem);
+  color: var(--quickform-hint-color, #6b7280);
+  margin-bottom: var(--quickform-spacing-xs, 0.5rem);
+}
+
+.quickform-textarea {
+  width: 100%;
+  padding: var(--quickform-input-padding, 0.5rem 0.75rem);
+  border: 1px solid var(--quickform-color-border, #d1d5db);
+  border-radius: var(--quickform-radius-md, 0.375rem);
+  font-size: var(--quickform-input-font-size, 0.875rem);
+  color: var(--quickform-input-color, #1f2937);
+  background-color: var(--quickform-input-bg, #ffffff);
+  transition: border-color 0.2s;
+  resize: vertical;
+}
+
+.quickform-json-editor {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  font-size: 0.813rem;
+  line-height: 1.5;
+}
+
+.quickform-textarea:focus {
+  outline: none;
+  border-color: var(--quickform-color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px var(--quickform-color-primary-alpha, rgba(59, 130, 246, 0.1));
+}
+
+.quickform-textarea:disabled {
+  background-color: var(--quickform-input-disabled-bg, #f3f4f6);
+  cursor: not-allowed;
+}
+
+.quickform-textarea:read-only {
+  background-color: var(--quickform-input-readonly-bg, #f9fafb);
+}
+
+.quickform-error-border {
+  border-color: var(--quickform-color-error, #ef4444);
+}
+
+.quickform-error {
+  margin-top: var(--quickform-spacing-xs, 0.5rem);
+  font-size: var(--quickform-error-font-size, 0.875rem);
+  color: var(--quickform-error-color, #ef4444);
+}
+</style>
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index ad5f2ed..c700993 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -14,6 +14,7 @@ export { default as EnumField } from './components/EnumField.vue';
 export { default as DateField } from './components/DateField.vue';
 export { default as ObjectField } from './components/ObjectField.vue';
 export { default as ArrayField } from './components/ArrayField.vue';
+export { default as JsonField } from './components/JsonField.vue';
 export { default as OneOfField } from './components/OneOfField.vue';
 export { default as AllOfField } from './components/AllOfField.vue';
 export { default as HiddenField } from './components/HiddenField.vue';
@@ -46,6 +47,7 @@ export {
   isEnumType,
   isObjectType,
   isArrayType,
+  isJsonType,
   isNullType,
   // Format testers
   isEmailFormat,
diff --git a/packages/vue/src/registry.ts b/packages/vue/src/registry.ts
index ecbdba0..a56a7da 100644
--- a/packages/vue/src/registry.ts
+++ b/packages/vue/src/registry.ts
@@ -1,5 +1,5 @@
 import type { Component } from 'vue';
-import { ComponentRegistry, isStringType, isNumberType, isBooleanType, isEnumType, isDateFormat, isObjectType, isArrayType, hasOneOf, hasAnyOf, hasAllOf, hasConst, rankWith } from '@quickflo/quickforms';
+import { ComponentRegistry, isStringType, isNumberType, isBooleanType, isEnumType, isDateFormat, isObjectType, isArrayType, isJsonType, hasOneOf, hasAnyOf, hasAllOf, hasConst, rankWith } from '@quickflo/quickforms';
 import StringField from './components/StringField.vue';
 import NumberField from './components/NumberField.vue';
 import BooleanField from './components/BooleanField.vue';
@@ -7,6 +7,7 @@ import EnumField from './components/EnumField.vue';
 import DateField from './components/DateField.vue';
 import ObjectField from './components/ObjectField.vue';
 import ArrayField from './components/ArrayField.vue';
+import JsonField from './components/JsonField.vue';
 import OneOfField from './components/OneOfField.vue';
 import AllOfField from './components/AllOfField.vue';
 import HiddenField from './components/HiddenField.vue';
@@ -68,6 +69,11 @@ export function createDefaultRegistry(): ComponentRegistry<Component> {
     rankWith(2, isDateFormat(schema))
   );
 
+  // Register JSON field (priority: 5, higher than object since it's more specific)
+  registry.register('json', JsonField, (schema) =>
+    rankWith(5, isJsonType(schema))
+  );
+
   // Register object field (priority: 1)
   registry.register('object', ObjectField, (schema) =>
     rankWith(1, isObjectType(schema))