A Kontent.ai custom application for content model visualization, allowing you to explore the relationships between your content types and other entities.
- Quick Deploy on Netlify
- Configuration
- Features
- API Consumption
- Local Development
- Performance Considerations
- Technical Notes
- License
- Support
- Additional Resources
Clicking on the below button will guide you through the deployment process and also create a copy of the repository in your account.
After deployment, set up the following environment variable in your Netlify project settings:
MAPI_KEY: Your Kontent.ai Management API key withManage content modelpermission
Afterwards, create a new custom app in Kontent.ai under Environment settings → Custom Apps and pass the URL of your deployed application to Hosted code URL (HTTPS) field.
The visualization layout can be customized by modifying the layoutConfig object. The following options are available:
| Option | Default | Available Values | Description |
|---|---|---|---|
| edgeType | default |
default, straight, smoothstep, step |
Shape of the edge connecting nodes. default is a bezier curve. |
| alignment | DL |
UL, UR, DL, DR |
Node alignment within ranks. UL = up-left, UR = up-right, DL = down-left, DR = down-right |
| rankDirection | TB |
TB, LR |
Direction of the graph layout. TB = top to bottom, RL = left to right |
| ranker | network-simplex |
network-simplex, tight-tree, longest-path |
Algorithm used for ranking nodes. Network-simplex generally gives the best results |
| acyclicer | none |
greedy, none |
Method to handle cyclic relationships. greedy attempts to minimize edge crossings and may result in a more compact graph. |
| nodeSeparation | 60 | number (pixels) | Horizontal spacing between nodes at the same rank |
| rankSeparation | 200 | number (pixels) | Vertical spacing between ranks (levels) in the graph |
To modify these settings, update the layoutConfig object under utils/config.ts:
// utils/config.ts
export const layoutConfig: Readonly<LayoutConfig> = {
edgeType: "default",
alignment: "UL",
rankDirection: "LR",
ranker: "network-simplex",
acyclicer: "none",
nodeSeparation: 60,
rankSeparation: 200,
};The custom app retrieves content model entities (types, snippets and taxonomies) via management API and renders them as interactive nodes into a React Flow canvas, automatically layouted using Dagre layouting library. There are three selectable views, each with a specific purpose:
Renders all content types defined in your environment and their relationships with each other based on allowed types configured in Linked items and optionally Rich text elements.
This view renders separate nodes for Snippets and Types and allows you to see where each snippet is used. Content types without snippet elements are hidden.
Similarly to the snippet view, renders Taxonomy nodes and edges to the Content type nodes the taxonomies are used in. Types without taxonomies are omitted.
Each view comes with a collapsible sidebar, which dynamically lists the entities currently on the canvas, grouped by their type. Each sidebar entry serves as a shortcut to its corresponding node and also provides the same tools. For convenience, a search bar is also included.
The app allows you to export your content model to a JSON file and load it later. This way you can explore models from earlier or from a completely different environment; or perhaps store a snapshot of your content model for versioning purposes. The exported file matches management API response format.
Although the extent is minimal, the app makes use of Management API and thus contributes to your MAPI calls quota. In an ideal scenario, each initial load of the application performs exactly three listing requests, one for each entity.
If the number of types, taxonomies or snippets in your environment exceeds the point where pagination is required, the number of requests increases accordingly.
The loaded entities are memoized for the app's lifecycle, only triggering a re-request if the application or the window it's hosted in is reloaded.
- Clone the repository
- Install dependencies:
npm i
- Create a
.envfile in the root directory with:MAPI_KEY=your_management_api_key - Start the development server:
npm run dev:functions # or npm run dev:functions:live- the latter option creates a live tunnel URL you can use to embed the developed custom app into Kontent.ai and observe the changes in real time (refresh needed for changes to take effect). Requires running
netlify linkfirst.
- the latter option creates a live tunnel URL you can use to embed the developed custom app into Kontent.ai and observe the changes in real time (refresh needed for changes to take effect). Requires running
To create your own view, you need to implement a ViewRenderer type, consisting of two methods – createNodes and createEdges – returning an array of Node and Edge respectively. When creating a node, its type property should point to an existing (or your own) custom node defined in nodeTypes property under utils/layout.ts.
The view then needs to be added to views constant under components/views/views.ts file, specifying its data and the renderer you created.
Use existing renderer and node implementations for reference.
The app uses Dagre algorithm for automatic graph layout. The algorithm typically has a time complexity of
Since the tool runs entirely in the browser, its performance is influenced by the client’s hardware and browser capabilities.
- Built with React and TypeScript
- Uses React Flow for graph visualization
- Dagre algorithm used for automatic layouting
- Implements Netlify Functions for API communication
- Tailwind CSS for styling
This project is licensed under the MIT License - see the LICENSE.md file for details.
If you have any questions or need assistance, please reach out:
- Kontent.ai Support: Contact Support
- Kontent.ai Official Documentation: Learn more about Kontent.ai