Pro

Registry Architecture

PreviousNext

Overview of the Jolocky code registry architecture, multi-file tree distribution, and seamless CLI consumption.

Jolocky operates an open-standard component and block registry compliant with the official shadcn registry specification. Rather than locking developers into an opaque private NPM package, Jolocky delivers transparent, editable source code directly into your repository.

The Architecture Problem

Traditional component libraries distribute pre-compiled JavaScript via NPM. While this model works for basic atomic widgets, it fails for complex award-winning website sections:

  • Style Overrides are Painful: You cannot easily modify underlying sub-element animations without fighting third-party CSS specificity.
  • Bloat: Installing a heavy NPM package pulls in unused assets, shaders, and dependencies that bloat client bundle sizes.
  • Monolithic Dumps: When code is provided as a simple copy-paste snippet, creators often dump 1,500 lines of hooks, canvas shaders, SVG definitions, and layout into a single unmaintainable file.

The Jolocky Solution

Jolocky treats every section as a structured registry item delivered through an intelligent HTTP API at https://jolocky.com/r/[slug].json.

When the CLI requests a section, the registry server:

  1. Validates the item existence and checks if it is a Free or Pro tier asset.
  2. If Pro, verifies the cryptographically signed license key from the request authorization headers.
  3. Automatically parses file dependencies (icons, motion libraries, utils, hooks).
  4. Generates a multi-file tree JSON package that maps each file to its exact destination in your project directory.

Registry Directory Structure

A typical Jolocky section registry payload maps files according to functional roles:

  • registry:block: Root container section located at components/sections/[slug]/index.tsx.
  • registry:component: Sub-components located at components/sections/[slug]/[part].tsx.
  • registry:hook: Custom animation math and scroll physics located at hooks/[hook-name].ts.
  • registry:lib: Mathematical interpolations or WebGL shader shaders located at lib/[slug].ts.

Next Steps

Explore the detailed architecture guides: