ObjectContentEditor

The ObjectContentEditor component displays and allows exploration of complex JSON objects with schema-aware rendering and navigation.

Purpose

ObjectContentEditor provides a structured view of JSON objects with breadcrumb navigation for exploring nested objects and arrays, rendering properties according to a JSON schema.

Key Features

• Schema-aware property display
• Breadcrumb navigation for nested objects
• Type-specific rendering (strings, numbers, booleans, dates, etc.)
• Format-aware display (email, URI, UUID, etc.)
• Array and object exploration
• Timestamp display for temporal data
• Icon-based type indicators
• Read-only viewing mode

Quick Start

import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor';
import { JsonSchema } from '@cratis/components/types';

function MyObjectViewer() {
    const data = {
        id: 'user-123',
        name: 'John Doe',
        email: 'john@example.com',
        profile: {
            age: 30,
            city: 'Oslo'
        }
    };

    const schema: JsonSchema = {
        type: 'object',
        properties: {
            id: { type: 'string', format: 'uuid' },
            name: { type: 'string' },
            email: { type: 'string', format: 'email' },
            profile: {
                type: 'object',
                properties: {
                    age: { type: 'integer' },
                    city: { type: 'string' }
                }
            }
        }
    };

    return (
        <ObjectContentEditor
            object={data}
            schema={schema}
        />
    );
}

Props

Required Props

• object: The JSON object to display
• schema: JSON schema defining the object’s structure

Optional Props

• timestamp: Date to display as a snapshot timestamp
• editMode: When true, renders editable input fields for each property (default: false)
• onChange: Called with the full updated object after any field edit — only relevant when editMode is true
• onValidationChange: Called with true when any field has a validation error, false when all fields are valid — only called when editMode is true

Edit Mode

When editMode is true, each property is rendered as an editable input field appropriate for its schema type and format.

Input field types

Schema type / format	Input rendered
boolean	Checkbox
number / integer	Number input
string / date-time	Date + time picker
string / date	Date picker
string (> 50 chars)	Textarea
string (any other)	Text input
array	Read-only (not yet editable)
object	Read-only (not yet editable)

Validation

Validation runs on every field change and whenever object or schema changes.

• In edit mode: all fields are required — any empty value is flagged.
• In view mode: only fields listed in schema.required are validated.
• string fields with format: 'email' are validated against a basic email pattern.
• string fields with format: 'uri' must start with http:// or https://.
• number / integer fields must be valid numbers.

Validation errors are displayed inline beneath each field using PrimeReact’s p-error style.

Edit Mode Example

import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor';
import { useState } from 'react';

function EditableProduct() {
    const schema = {
        type: 'object',
        required: ['name', 'price'],
        properties: {
            name: { type: 'string' },
            price: { type: 'number' },
            inStock: { type: 'boolean' },
            releaseDate: { type: 'string', format: 'date-time' },
            website: { type: 'string', format: 'uri' }
        }
    };

    const [product, setProduct] = useState({
        name: 'Laptop Pro',
        price: 1299.99,
        inStock: true,
        releaseDate: '2024-01-15T10:00:00Z',
        website: 'https://example.com'
    });

    const [hasErrors, setHasErrors] = useState(false);

    return (
        <>
            <ObjectContentEditor
                object={product}
                schema={schema}
                editMode
                onChange={setProduct}
                onValidationChange={setHasErrors}
            />
            <button disabled={hasErrors}>Save</button>
        </>
    );
}

Navigation

Breadcrumb Trail

The ObjectNavigationalBar shows current location:

Root > profile > address > city

• Click “Root” to return to top level
• Click any segment to jump to that level
• Click back arrow to go up one level

Nested Objects

Click any object or array property to navigate into it:

// Top level
{
    name: "Product A",
    metadata: { ... }  // Click to view
}

// After clicking metadata
{
    created: "2024-01-01",
    tags: ["sale", "featured"]
}

Navigation Examples

// Navigate to nested object
profile → address → city

// Navigate into array
tags → [0] → view first tag

// Return to parent
Click back arrow or breadcrumb

Complete Example

import { ObjectContentEditor } from '@cratis/components/ObjectContentEditor';

function ProductViewer() {
    const product = {
        id: 'f81d4fae-7dec-11d0-a765-00a0c91e6bf6',
        name: 'Laptop Pro',
        price: 1299.99,
        inStock: true,
        specs: {
            cpu: 'M2 Pro',
            ram: '16GB',
            storage: '512GB'
        },
        tags: ['electronics', 'computers', 'featured'],
        website: 'https://example.com/laptop-pro',
        releaseDate: '2024-01-15T10:00:00Z'
    };

    const schema = {
        type: 'object',
        properties: {
            id: { type: 'string', format: 'uuid' },
            name: { type: 'string' },
            price: { type: 'number' },
            inStock: { type: 'boolean' },
            specs: {
                type: 'object',
                properties: {
                    cpu: { type: 'string' },
                    ram: { type: 'string' },
                    storage: { type: 'string' }
                }
            },
            tags: {
                type: 'array',
                items: { type: 'string' }
            },
            website: { type: 'string', format: 'uri' },
            releaseDate: { type: 'string', format: 'date-time' }
        }
    };

    return (
        <ObjectContentEditor
            object={product}
            schema={schema}
            timestamp={new Date()}
        />
    );
}

Use Cases

• Data inspection: View complex API response data
• Configuration display: Show application settings
• Audit trails: Display historical data states
• Debugging: Explore runtime object structures
• Documentation: Display example data structures
• Data validation: Review data against schema
• User profiles: Display nested user information
• Product catalogs: Show product details and metadata

Best Practices

1. Provide complete schema: Define all properties for proper rendering
2. Use appropriate formats: Leverage format hints for better display
3. Structure deeply nested data: Keep nesting reasonable (3-4 levels max)
4. Timestamp important data: Include timestamp for temporal context
5. Keep objects focused: Don’t display overly large objects (use pagination)
6. Use consistent property names: Follow naming conventions
7. Validate data against schema: Ensure data matches schema structure

Integration with Other Components

ObjectContentEditor works well with:

• TimeMachine: Display read model states at each version
• DataPage: Show detail panel content
• Dialogs: Display object details in modal
• SchemaEditor: Use schema created by editor

Schema Requirements

The schema should be a valid JSON Schema with:

• type: 'object' at root
• properties defining each property’s type and format
• Optional required array for required properties
• Nested schemas for object and array types

Performance Considerations

• Large objects (1000+ properties) may render slowly
• Deep nesting (5+ levels) can be difficult to navigate
• Consider pagination or virtualization for large arrays
• Schema validation on every render can impact performance