Role
Design & Development
Timeline
2025 - Present (ongoing)
Platform
Web (Standalone + Knack-integrated)
The Problem
Knack developers work with massive, deeply nested JSON metadata files. A typical enterprise app generates 5-10 MB of metadata describing hundreds of views, fields, objects, and their relationships.
What developers needed to understand
- How views connect to scenes
- Which fields appear in which views
- How changes to one field cascade through the app (impact analysis)
- What automation rules depend on specific fields
- Navigation paths through the user experience
The status quo
Knack has a built-in visualization tool, but it only shows connections between objects. There's no native way to visualize how fields, views, scenes, tasks, or emails relate to each other. Developers struggled to:
- Click through individual pages one by one to find field usage
- Build mental maps of relationships with no visualization
- Manually check every view before changing a field (impact analysis)
- Remember every location in the app where emails are triggered - often hundreds of places across different views and rules
The metadata is a wealth of knowledge and becomes very useful when paired with a way to read and visualize the data contained within.
Design Approach
Progressive disclosure for complexity
Rather than overwhelming users with everything at once, the interface uses a hierarchical drill-down pattern:
Users start broad, then move to specific details. At every level, related items are clickable - no need to go "back to search" to explore adjacent concepts.
Visual language through color coding
Each entity type has a consistent visual identity throughout the interface:
Users quickly learn "when I see blue, I'm looking at field relationships." This reduces cognitive load when navigating thousands of entities.
Two-column layout for impact analysis
When viewing a field, developers ask two questions simultaneously:
Left: "Who uses me?"
- · Rules (page rules, view rules, validation)
- · Views (tables, forms, detail views)
- · Filtering (menu filters, data sources)
- · Configuration (identifiers, links)
Right: "Who do I depend on?"
- · Fields this one references
- · Fields that reference this one
- · Calculation dependencies
A single-column view would force scrolling between these related concerns.
Key Design Decisions
Context-rich relationship display
When you see "This field is used in View X," the tool shows additional context:
- The view's scene name (navigation context)
- Whether inline editing is enabled (operational detail)
- Rule conditions that reference this field (explains "why")
- Every email that includes this field in its template
A field might appear in 50 views, but only a few actually "check" it in conditional rules. The context tells you which ones matter for impact analysis.
Accumulating breadcrumb navigation
The navigation trail appends rather than truncates - even when revisiting the same entity:
Notice Field_47 appears twice. When exploring circular relationships, the full path is preserved so developers can trace exactly how they arrived at an entity. Any point can be clicked to jump back.
Smart extraction to avoid noise
The tool carefully prioritizes what relationships to extract. For example, menu filters are only extracted when filters are actually enabled - not when they exist but are disabled.
Over-extraction creates phantom relationships that waste user time. This was refined through real-world usage to only show meaningful connections.
Flexibility Through Deployment Modes
Developers have different workflows, so the tool works in two modes:
Integrated Mode
Runs inside Knack apps via local development mode. Developers can test changes in their actual app environment with real-time updates.
Standalone Mode
Works as a standalone HTML file for offline analysis. Useful for understanding apps you don't have code access to, or for testing extraction logic.
Both modes use the same core extraction logic, ensuring consistency. Zero infrastructure overhead - no backend required.
Email Visualization
Knack apps often have dozens of automated emails, but there's no built-in way to see them all or understand which fields they reference. Developers always struggled to get a clear picture of their app's email configuration.
Knavigator provides a dedicated email view showing every email in the application. Click any email to see its field dependencies, or search for a specific field to find all emails that reference it.
Built for Developers, by a Developer
Knavigator is designed for keyboard-driven workflows:
Global Navigation
Search Results
Detail View
Summary Notes
Every action is also available via mouse.
Design Philosophy
Maximize Valuable Information
This tool's target audience is Knack Builders. They have the context and knowledge to handle a lot of information about their app. For this reason, I want to show as much information as possible when using the Knavigator. Not just relationships between items, but, additional context that may be relevant as well. This tool is intended to be a helpful companion to any Knack builder.
Metadata is the source of truth
Auto-discover relationships by analyzing the metadata structure with the ability to re-pull the current app's structure at any time. Use what Knack already provides - organize and display the app structure in a way that is helpful to Knack builders.
Reduce cognitive load through visual design
My goal with this tool is to help users understand what they're looking at and find relevant information, as fast as possible and with as little cognitive load as possible. It's an ongoing iterative process and I welcome feedback from everyone.
Impact
Knavigator is now used by Knack developers in the community and has been shared on the official Knack forums. It transforms what was previously a tedious manual process into an intuitive exploration experience.