Kontent.ai custom apps: The content model visualizer

Understanding how your content model fits together can make the difference between an elegant, maintainable system and a confusing tangle of relationships. The new open‑source content model visualizer is a custom app that graphically displays your entire content model (i.e. the relationships between content types, snippets, and taxonomies) in an interactive diagram. This makes it easy to understand complex content models at a glance, directly inside Kontent.ai.

It's a great example of the power and flexibility that Kontent.ai's custom app framework brings to your content operations. First, let's take a look at what makes custom apps in Kontent.ai so valuable. Then, we’ll see how the content model visualizer can transform your understanding of your content architecture.

Why use custom apps in Kontent.ai

Custom apps are full-screen extensions that integrate directly into your Kontent.ai interface, enabling you to embed external tools and data sources at the environment level. Unlike element-level custom elements, custom apps provide broader functionality that can streamline workflows across your entire project.

So what can you do with custom apps? A few examples:

• Integrated analytics: Combine CMS data with third-party services for comprehensive insights
• Cross-platform collaboration: Provide a unified environment for task management
• Unified dashboards: Build dashboards that integrate data from multiple sources, e.g. web analytics tools, SEO tools, and business intelligence platforms

What makes custom apps particularly powerful is their ability to work at the environment level rather than being limited to specific content elements. This broader scope allows for more comprehensive solutions to complex workflow challenges.

Custom apps in action: the content model visualizer

The content model visualizer is a perfect example of what you can achieve with a custom app in Kontent.ai. It provides an interactive, visual representation of your content model, helping you understand the relationships between your content types, snippets, and taxonomies.

For an in-depth discussion on the content model visualizer, including a demo of the app in action, watch our video interview with Daniel Pokorny, the developer behind the visualizer.

Why visualize your content model?

Understanding your content model is essential for several reasons:

• Onboarding new team members - Help them quickly understand content relationships
• Planning content changes - Visualize the impact of model modifications before implementing them
• Identifying opportunities - Spot areas where content reuse could be improved
• Documentation - Create visual documentation of your content architecture
• Technical communication - Bridge the gap between content and technical teams

By providing a clear visual representation, the content model visualizer makes these tasks significantly easier, especially as content models grow in complexity.

What can you do with it?

The content model visualizer gives you all new ways to interact with your content model:

Interactive content model views

The app provides three distinct views of your content ecosystem:

• Content type view: The default view shows all content types and their relationships based on linked items and rich text elements. This gives you a comprehensive overview of how your content types connect to each other, with each content type shown as a node.
• Snippet view: This specialized view focuses on content snippets, showing which content types include them. It's perfect for understanding where reusable content components are being utilized across your model.
• Taxonomy view: This view highlights taxonomy usage, showing which content types are associated with specific taxonomies. This helps you understand the categorization structure of your content ecosystem at a glance.

Each view automatically arranges your entities using smart layout algorithms, making complex relationships visually comprehensible at a glance.

Configurable layout and a user-friendly interface

The app includes several features that make exploring your content model easier:

• Sidebar navigation and search: Every view includes a collapsible sidebar that lists all entities currently on the canvas (grouped by type), with quick links to select each node. A built-in search bar in the sidebar lets you quickly find and highlight nodes by name, making navigation simple even in large models.
• Configurable layout: The graph layout is customizable via a simple layoutConfig object. You can tweak parameters like edge shape (straight, curved, etc.), node alignment (UL, UR, DL, DR), rank direction (top-to-bottom vs left-to-right), spacing, and more. This lets you optimize the visualization for clarity in your content model.

Simple model import and export

Perhaps one of the most practical features is the ability to export your content model to a JSON file and reload it later. This enables several valuable use cases:

• Create a version history of your content model evolution
• Compare models across different environments
• Share your content architecture with stakeholders
• Document your model for reference purposes

How was it built?

The content model visualizer is built with modern web technologies including React, TypeScript, and Tailwind CSS. It uses React Flow for graph visualization and the Dagre algorithm for automatic layout.

The app communicates with your Kontent.ai environment through the Management API, requiring minimal API calls (typically just three requests on initial load). Data is memoized during the app's lifecycle to reduce unnecessary API consumption.

Like all Kontent.ai custom apps, the visualizer is built with the Custom App SDK to access project context and user info. For example, the app calls getCustomAppContext() to discover the current project (environment ID) and the signed-in user. The returned CustomAppContext object includes the environmentId for API requests and details about the user’s identity and roles. Using this context, the app then uses the Management API (with the provided API key) to load the model data for that environment and to honor any user-based permissions. In short, the SDK hookup means the app “just works” in any environment without hardcoding keys or IDs, and automatically adapts to wherever and whoever is running it.

How to get started with the content model visualizer

Ready to visualize your content model? The setup process is straightforward:

1. Deploy the app to Netlify with a single click using the deploy button in the GitHub repository
2. Configure your Management API key as an environment variable
3. Add the app to your Kontent.ai environment under Environment Settings > Custom Apps

Once configured, you'll have immediate access to a visual representation of your content model that updates as your model evolves.

Extending the visualizer

As an open-source project, the Content Model Visualizer can be extended to meet your specific needs. The codebase is structured to allow for the creation of additional views or customization of the existing visualization.

Developers can fork the repository, implement custom views, or enhance existing functionality to address specific use cases within their organization.

Try custom apps in Kontent.ai today

The content model visualizer shows how custom apps can significantly enhance your content operations in Kontent.ai. In this case, a visual representation of your content model can help teams better understand, document, and optimize their content architecture.

This open-source tool is just one example of the kinds of powerful extensions you can create with Kontent.ai's custom app framework. Whether you're looking to integrate external tools, create custom workflows, or provide new insights into your content, custom apps offer a flexible and powerful solution.

Try the content model visualizer with your own content model and experience the benefits of visualization firsthand. The app is available now on our GitHub repository, and we would love your feedback and contributions.

For more information about custom apps and how they can enhance your Kontent.ai experience, check out our documentation on custom apps.