GIF

Inspiration

Traditional note-taking tools and knowledge bases promise freedom but often deliver cognitive chaos. As a network grows, linear documents turn into endless walls of text, and graph views turn into unreadable "spaghetti" node maps. We wanted to build a knowledge management system that honors the Zettelkasten principle of absolute atomicity, but forces the user interface to respect human cognitive limits. We were inspired to build a system where you only ever see what matters right now, allowing deep focus without losing systemic context.

What it does

Strukt is a structured information management system designed to eliminate cognitive load. It breaks information down into independent, self-contained units called atoms. Instead of scrolling through massive documents, users experience a Minimalist View—the interface renders only the currently selected atom and its immediate, directional connections. Navigating the knowledge base feels like navigating a clean file system using rapid keyboard shortcuts. It also features a built-in progress tracker, dedicated entry points ($), a custom terminology database (@), and native, beautifully styled Mermaid.js diagram generation to visualize relationships on the fly.

How we built it

Strukt is built as a highly responsive single-page application using React and TypeScript.

State & Performance: We relied heavily on React's hook architecture (useState, useEffect, useRef, useMemo, useCallback) to manage tokenized document states and render heavy UI updates instantly.
The Parser: We engineered a custom Markdown parser from scratch that breaks raw text into structured tokens (HeadingToken, ParagraphToken, ListToken, etc.) and seamlessly handles complex text styling like bolding and inline code.
Dynamic Visualization: We integrated a lazy-loading mechanism for mermaid.min.js that pulls the library dynamically from a CDN only when needed, injects custom dark-mode theme variables directly into the SVG renderer, and dynamically generates flowcharts with smooth, basis-curve transitions.

Challenges we ran into

Handling Mermaid Async Lifecycle: Managing the asynchronous rendering lifecycle of Mermaid.js diagrams within dynamic React components was tough. If the DOM node wasn't ready or if multiple diagrams rendered simultaneously, it caused layout breaks. We solved this by implementing a global callback queue (_mermaidCallbacks) and utilizing distinct, auto-incrementing element refs to ensure perfect isolation.
Inline Tokenization: Building a custom lexer to parse non-nested inline elements (like turning bold and code into InlineNode objects) required strict boundary checks to ensure standard text strings mixed smoothly with stylized nodes without breaking character positions.

Accomplishments that we're proud of

Zero Layout Cumulative Shift (CLS): Even with heavy dynamic script injection for data diagrams, the UI feels incredibly snappy, clean, and perfectly stable.
Elegant Aesthetic: We crafted a deeply focused, premium developer environment using an intentional typography hierarchy—combining elegant serifs (Fraunces, Lora) with hyper-sharp monospaced fonts (JetBrains Mono) over a rich, low-contrast dark-blue canvas.
Truly Modular Code: The strict TypeScript typing of our token system makes the codebase exceptionally maintainable, allowing any future developer to add new node types safely.

What we learned

We learned a massive amount about the mechanics of text parsing and AST (Abstract Syntax Tree) tokenization. Building a custom markdown tokenizer instead of dropping in a heavy, bloated open-source library gave us complete granular control over layout styles. We also gained a deeper appreciation for UI minimalism: strictly limiting what the user can see at one time actually makes discovering connections faster and less exhausting.

What's next for Strukt

True Graph Traversal Mode: Expanding the keyboard navigation engine into a full vim-like traversal system for moving between linked atoms seamlessly.
Local Storage & File Sync: Allowing users to sync local folders of raw .md files directly into the atomic database.
Bi-directional Link Auto-Generation: An intelligent background scanner that automatically suggests connections when two separate atoms share similar contextual keywords or prefix tags.