Primitive Visuals Showcase

An isolated dev playground to view, test, and polish every visual primitive in the engine. Edit JSON payloads live to test layouts, highlights, and animations.

Renderer

React DOM · Framer Motion

Array — Two Pointer

type: linear

State Editor (Live)

Array — Sliding Window

type: linear

State Editor (Live)

Linked List — In-place Reversal

type: linear | variant: linked-list

HEAD

curr

State Editor (Live)

Stack — Balanced Brackets

type: linear | variant: stack

top of stack

{

[

(

call stack

State Editor (Live)

Queue — BFS Frontier

type: linear | variant: queue

← dequeuequeueenqueue →

Node B

Node C

Node D

Node E

frontback

State Editor (Live)

Hash Map — LRU Cache State

type: map

Key

Value

page:/home

page:/docs

api:user:42

{ id: 42, role: "admin" }

api:user:99

{ id: 99, role: "user" }

config:flags

{ darkMode: true }

State Editor (Live)

System Diagram — Microservices Flow

type: system-diagram

State Editor (Live)

{
  "components": [
    {
      "id": "client",
      "label": "Mobile App",
      "icon": "mobile",
      "status": "normal"
    },
    {
      "id": "lb",
      "label": "Load Balancer",
      "icon": "layers",
      "status": "active"
    },
    {
      "id": "auth",
      "label": "Auth Service",
      "icon": "shield",
      "status": "normal"
    },
    {
      "id": "api",
      "label": "API Service",
      "icon": "server",
      "status": "active"
    },
    {
      "id": "cache",
      "label": "Redis Cache",
      "icon": "zap",
      "status": "normal"
    },
    {
      "id": "db",
      "label": "Postgres DB",
      "icon": "database",
      "status": "normal"
    }
  ],
  "connections": [
    {
      "from": "client",
      "to": "lb",
      "active": true
    },
    {
      "from": "lb",
      "to": "auth",
      "active": true
    },
    {
      "from": "lb",
      "to": "api",
      "active": true
    },
    {
      "from": "api",
      "to": "cache",
      "style": "dashed"
    },
    {
      "from": "api",
      "to": "db"
    }
  ]
}

Graph — Dijkstra Shortest Path

type: graph

State Editor (Live)

Tree — BST Search

type: tree

State Editor (Live)

Grid — A* Pathfinding

type: grid

State Editor (Live)