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 holds all the answers. It just needed a human-friendly interface.
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.
The Navigator 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
Speed matters when you're deep in development. The Navigator is designed for keyboard-driven workflows:
Every action is also available via mouse, but keyboard shortcuts let you explore without breaking flow.
Design Philosophy
Relationships over entities
Viewing a field in isolation tells you nothing. Seeing its complete impact map - every view, rule, and email that references it - tells you everything. Every detail view shows different perspectives on how things connect.
Metadata is the source of truth
Don't maintain separate documentation. Auto-discover relationships by analyzing the metadata structure. This guarantees accuracy.
Reduce cognitive load through visual design
Color-coding reduces need for text reading. Grouping reduces list fatigue. Context-rich labels reduce clicks needed to understand.
Impact
The Metadata Navigator 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.