Kontent.ai API Preview Custom Element

A debugging and development custom element that displays JSON data from Kontent.ai's Preview Delivery API and Management API directly within the content editing interface. Perfect for developers who need to inspect content structure, debug API responses, or understand data models during content creation.

What it does

This custom element provides an interactive JSON viewer that fetches and displays content item data from:

• Preview Delivery API - Shows how content appears through the public content delivery
• Management API - Shows the raw content item structure and metadata

Key Features

• 🔄 Dual API Support - Switch between Preview Delivery and Management APIs
• 📊 Two View Modes - Schema view (expandable/collapsible) and Raw JSON view
• 📋 Copy to Clipboard - One-click copying of JSON data
• ⚡ Manual Fetching - Fetch data on-demand to avoid unnecessary API calls

Setup Instructions

Step 1: Deploy the Custom Element

The element is built with Vite and needs to be hosted securely:

1. Install dependencies: npm ci
2. Build for production: npm run build
3. Deploy: Upload the dist folder contents to your hosting service

Hosting Requirements

Your custom element must be hosted on a secure HTTPS server. You have several options:

• Professional hosting: Use services like Netlify, Vercel, or your own server
• Local development: Use a secure tunnel like ngrok for testing

If hosting on your own server, ensure:

• Valid SSL certificate is configured
• Server sends appropriate X-Frame-Options or Content-Security-Policy headers allowing https://app.kontent.ai

For more details, see the Kontent.ai hosting documentation.

Step 2: Generate API Keys

You'll need two API keys from your Kontent.ai project:

Preview Delivery API Key

1. Go to Project settings → API keys in your Kontent.ai project
2. Find the Delivery API keys tab
3. Create a Delivery API key
4. Check the Content preview option
5. Set the environments Limitations
6. Save changes on the top right

Management API Key

1. Go to Project settings → API keys in your Kontent.ai project
2. Find the Management API keys tab
3. Create or Copy a Management API key

Step 3: Add to Content Type

1. In Content model, open a content type for editing
2. Click Custom element to add a new element
3. Name the element (e.g., "API Preview")
4. In Hosted code URL (HTTPS), paste your deployed element URL
5. In Parameters {JSON}, add your configuration:

{
  "PREVIEW_API_KEY": "your_preview_api_key_here",
  "MANAGEMENT_API_KEY": "your_management_api_key_here"
}

6. Click Save changes

⚠️ Security Considerations

Since this is a client-side React application, please be aware of the following security considerations:

API Key Exposure

Important: API keys are stored in the custom element configuration and are accessible to anyone who can access the content type configuration in Kontent.ai. This means:

• ✅ Safe within your team: Only users with content model editing permissions can see the configuration
• ✅ Not exposed externally: The keys are not visible in your public website or to end users
• ⚠️ Visible to content editors: Anyone who can edit the content type can see the API keys

Recommended Security Practices

1. Use dedicated API keys: Create specific API keys just for this custom element
2. Limit permissions: Ensure the API keys have only the minimum required permissions
3. Team access control: Only grant content model editing permissions to trusted team members
4. Regular rotation: Consider rotating API keys periodically for enhanced security

As noted in the Kontent.ai documentation, never store sensitive data in JSON parameters if external security is a concern. For this debugging element, the risk is minimal since it's designed for internal development use within your CMS environment.

Local Development

1. Clone the repository
2. Run npm ci to install dependencies
3. Run npm run dev for local development
4. Use ngrok or similar to create a secure tunnel for testing in Kontent.ai

License

Distributed under the MIT License. See LICENSE.md for more information.

---

Resources

• Kontent.ai Custom Elements Documentation
• Custom Elements API Reference
• Kontent.ai Community Discord