Jantt

The Declarative JSON Gantt Chart Engine

Where human intuition meets declarative AI planning.

Turn any declarative JSON document into a high-performance, interactive, draggable Gantt chart.
Zero runtime dependencies. 100% pure TypeScript.
Runs everywhere: Plain HTML, React, Next.js, Node.js CLI, and autonomous AI toolchains.

Designed from the ground up for:

• Autonomous AI Agents & LLMs - Declarative JSON schema contract eliminates UI hallucinations; models generate timeline data with 10x fewer tokens than fragile JSX code.
• Students, Hobbyists & Creators - Lightweight, beautiful Swiss Noir dark mode, intuitive drag-and-drop, touch gestures, and instant local storage persistence.
• Engineering Teams & Program Directors - Operations Research Critical Path solver, EVM (Earned Value Management), DCMA-14 schedule health audits, and multi-user CRDT collaboration with secure role-based permissions.

Live Playground • JSON Cheatsheet • Architecture • Schema Specification • API Docs • Roadmap • Changelog

Why Jantt? The Declarative Revolution

Traditional project management and timeline tools force an impossible choice:

1. Enterprise Bloat: Commercial suites (DHTMLX, Bryntum) demand 200KB to 800KB runtime dependencies, complex imperative APIs (gantt.init(), gantt.addTask()), and expensive recurring per-seat fees.
2. Brittle AI Generations: Prompting LLMs (ChatGPT, Claude, Gemini) to generate React JSX or SVG coordinate math produces broken layouts, coordinate hallucinations, and wastes thousands of tokens on boilerplate UI code.
3. Static Limitations: DSLs like Mermaid.js are read-only, non-interactive images. They cannot be dragged, edited, recalculated, or synchronized back to living project state.

The 4 Superpowers of Jantt

• Zero Runtime Dependencies: The core math and layout engine (@jantt/core) is pure, zero-dependency TypeScript weighing under 14 KB gzipped.
• AI-Native & 10x Fewer Tokens: Declarative JSON schema contract eliminates UI hallucinations; models generate timeline data with 10x fewer tokens than fragile JSX code.
• Swiss Modernism 2.0 Aesthetics: Deep OLED Swiss Noir (#080D18), 90-degree CAD orthogonal routing, glassmorphic HUD cards, and high-contrast typography.
• Defense-Grade Operations Research: Built-in topological DAG solver, Critical Path Method (CPM), Earned Value Management (EVM - ANSI/EIA-748), DCMA-14 schedule health audits, and multi-user CRDT cloud rooms.

Visual Showcase & Curated Themes

Jantt features a fully reactive, CSS variable-driven theming architecture with out-of-the-box support for light modes, sleek dark modes, and high-contrast vibrant styles:

Swiss Light Mode

Daylight clarity, high contrast typography, and subtle glassmorphic tooltips.

Swiss Dark Mode

Sleek obsidian palette with glowing critical path indicators and 90° right-angle routing.

Color Theme Gallery

Cyber Emerald	Midnight Rose
Sunset Crimson	Master Specification Benchmark

Comparison Matrix

60-Second Quickstart Across Frameworks

1. React (@jantt/react)

npm install @jantt/react @jantt/core

import { Jantt } from "@jantt/react";
import "@jantt/react/dist/index.css";

const projectData = {
  tasks: [
    { id: "t1", label: "Architecture RFC", category: "core", start: "2026-09-01", end: "2026-09-14", progress: 1.0 },
    { id: "t2", label: "Core Implementation", category: "core", start: "2026-09-15", end: "2026-10-15", dependsOn: "t1" }
  ],
  categories: {
    core: { label: "Core Engineering", color: "#38BDF8" }
  }
};

export default function Timeline() {
  return <Jantt data={projectData} theme="swiss-dark" => console.log(next)} />;
}

2. Vue 3 (@jantt/vue)

npm install @jantt/vue @jantt/core

<script setup>
import { JanttTimeline } from "@jantt/vue";
import "@jantt/core/dist/theme.css";

const props = defineProps(["plan"]);
const handleCommit = (updatedPlan) => console.log("Committed:", updatedPlan);
</script>

<template>
  <JanttTimeline :data="props.plan" theme="swiss-dark" @commit="handleCommit" />
</template>

3. Svelte 4 / 5 (@jantt/svelte)

npm install @jantt/svelte @jantt/core

<script>
  import { janttAction } from "@jantt/svelte";
  import "@jantt/core/dist/theme.css";
  export let plan;
</script>

<div
  use:janttAction={{ data: plan, theme: "swiss-dark" }}
  on:commit={(e) => console.log("Committed:", e.detail)}
  style="width: 100%; height: 600px;"
/>

4. Framework-Agnostic Web Component (@jantt/elements)

Drop directly into PHP, Ruby on Rails, Django, Laravel, WordPress, or static HTML:

<script type="module" src="https://unpkg.com/@jantt/elements/dist/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@jantt/core/dist/theme.css" />

<jantt-timeline
  data-src="/api/plan.json"
  theme="swiss-dark"
  scale="day"
  show-critical-path="true">
</jantt-timeline>

5. Python, Jupyter & Streamlit (pip install jantt)

import jantt
import pandas as pd

df = pd.DataFrame([
    {"id": "t1", "label": "Design System", "category": "design", "start": "2026-11-01", "end": "2026-11-05"},
    {"id": "t2", "label": "API Engine", "category": "dev", "start": "2026-11-06", "end": "2026-11-15", "dependsOn": "t1"}
])

# Inside Jupyter Notebook:
jantt.show(df, theme="swiss-dark")

# Inside Streamlit app:
# jantt.streamlit(df)

6. AI Agent Protocol (@jantt/mcp)

Run as an official Model Context Protocol server for Claude Desktop, Cursor, Gemini, and autonomous AI Agents:

npx @jantt/mcp

{
  "mcpServers": {
    "jantt": {
      "command": "npx",
      "args": ["-y", "@jantt/mcp"]
    }
  }
}

Provides 6 deterministic PM tools: jantt_inspect_plan, jantt_add_task, jantt_reschedule_task, jantt_audit_schedule, jantt_diff_plans, jantt_export_csv.

7. Real-Time Multiplayer CRDT (@jantt/yjs)

import * as Y from "yjs";
import { bindJanttToYDoc, bindJanttAwareness, createJanttUndoManager } from "@jantt/yjs";

const doc = new Y.Doc();
const binding = bindJanttToYDoc(doc, {
  initialPlan,
  onPlanChange: (plan) => render(plan)
});

// Fine-grained task update (synced to all connected peers)
binding.updateTask("t1", { progress: 0.85 });

// Infinite Undo / Redo
const undoManager = createJanttUndoManager(doc);
undoManager.undo();

8. Enterprise Microsoft Project, Primavera & Vector PDF Interop (@jantt/interop)

import {
  exportMsProjectXml,
  importMsProjectXml,
  exportPrimaveraXer,
  importPrimaveraXer,
  exportSpreadsheetCsv,
  exportExecutiveReportHtml,
  exportExecutiveReportSvg
} from "@jantt/interop";

// Export to Microsoft Project XML (2013-2021 schema)
const msXml = exportMsProjectXml(plan);

// Export to Oracle Primavera P6 .XER batch format
const p6Xer = exportPrimaveraXer(plan);

// Export publication-ready multi-page landscape Executive PDF Booklet (with EVM & DCMA-14)
const reportHtml = exportExecutiveReportHtml(plan.tasks, {
  title: "Apollo Cloud Infrastructure",
  theme: "corporate"
});

// Import back into Jantt
const importedPlan = importMsProjectXml(msXml);

9. High-Performance 60 FPS Canvas Virtualized Engine (@jantt/render-canvas)

import { CanvasTimelineRenderer } from "@jantt/render-canvas";

// Renders 10,000 to 100,000+ tasks at smooth 60 FPS using 2D virtualized windowing
const renderer = new CanvasTimelineRenderer(hugePlan, {
  dayWidth: 36,
  rowHeight: 34,
  showCriticalPath: true
});

renderer.render(ctx, { scrollX, scrollY, width, height });

10. Enterprise Terminal CLI Tool (@jantt/cli)

# Open interactive viewer with 2-way live sync back to disk
npx jantt open ./project.json --port 3000

# Run DCMA-14 schedule health & EVM scorecard audit
npx jantt audit ./project.json

# Run 5,000 Monte Carlo probabilistic risk iterations
npx jantt monte-carlo ./project.json --runs 5000

# Export to MS Project XML, Primavera P6, CSV, or Executive PDF
npx jantt export ./project.json --format xml --out ./project.xml
npx jantt export ./project.json --format html --out ./executive-report.html

# Import enterprise schedules back into Jantt JSON
npx jantt import ./schedule.xer --out ./project.json

11. Plain HTML / Script Tag (@jantt/standalone)

<link rel="stylesheet" href="https://unpkg.com/@jantt/standalone/dist/style.css" />
<script src="https://unpkg.com/@jantt/standalone/dist/jantt.standalone.iife.js"></script>

<div id="timeline" style="width: 100vw; height: 100vh;"></div>

<script>
  Jantt.mount("#timeline", projectData, { theme: "swiss-dark" });
</script>

AI Agent Workbench & Schema Cheatsheet

AI-Native Ideology: Stop Asking AI to Write Fragile Timeline Code

Having LLMs generate hundreds of lines of React JSX, SVG coordinate math, and canvas listeners produces brittle, hallucination-prone results. With Jantt, the AI outputs pure declarative JSON, and Jantt delivers deterministic, interactive execution.

• Step 1: Feed Cheatsheet to LLM - Give the AI the compact schema contract (WBS, dates, DAG dependencies, milestones, budget). See the full Jantt JSON Cheatsheet.
• Step 2: AI Outputs Pure JSON - Uses 10× fewer tokens than JSX. Machine-checkable, type-safe, and zero UI hallucinations.
• Step 3: Instant Interactive Suite - Jantt resolves topological DAG schedules, routes orthogonal wires, and renders Gantt, Kanban, Notes & Analytics.
• Step 4: Bidirectional Loop - Humans drag and adjust visually. Jantt syncs clean JSON back to localStorage/disk for the AI agent.

LLM System Prompt

Hand this prompt to ChatGPT, Claude, Gemini, Cursor, or your autonomous AI agent pipelines. The model will output 100% valid, constraint-checked Jantt JSON schedules without hallucinating UI code:

You are a precision project management schedule generator.
Output ONLY raw, valid JSON conforming strictly to the Jantt JSON Schema (https://raw.githubusercontent.com/AhmadHassan-BTed/Jantt/main/schema/jantt.schema.json).

# JANTT JSON SCHEMA BENCHMARK & SPECIFICATION CHEATSHEET (v1.4.0)

## 1. Top-Level Root Structure
{
  "$schema": "https://raw.githubusercontent.com/AhmadHassan-BTed/Jantt/main/schema/jantt.schema.json",
  "meta": {
    "title": "<Project Title>",
    "description": "<Project narrative and objectives>",
    "person": "<Lead Program Manager / Owner>",
    "organization": "<Enterprise / Organization Name>",
    "start": "YYYY-MM-DD",
    "end": "YYYY-MM-DD",
    "defaultGapDays": 2,
    "scale": "day" | "week" | "month" | "quarter" | "year",
    "linkRouting": "orthogonal" | "curved" | "direct",
    "showCriticalPath": true,
    "showBaselines": true,
    "autoCascade": true,
    "currency": "USD",
    "budget": 450000,
    "version": "1.4.0"
  },
  "categories": {
    "<category_id>": {
      "label": "<Category Display Name>",
      "color": "#HEX_COLOR",
      "soft": "#BG_TINT_HEX",
      "icon": "<lucide_icon_name>"
    }
  },
  "people": [
    {
      "id": "@alex",
      "name": "Alex Mercer",
      "username": "@alex",
      "role": "Lead Architect",
      "email": "[email protected]",
      "teamId": "core-team",
      "color": "#3B82F6"
    },
    {
      "id": "person-contractor",
      "name": "Sarah Miller",
      "role": "External Specialist",
      "teamId": "core-team",
      "color": "#10B981"
    }
  ],
  "teams": [
    {
      "id": "core-team",
      "name": "Core Platform Squad",
      "color": "#3B82F6",
      "description": "Backend services and architecture"
    }
  ],
  "notes": [
    {
      "id": "note-unique-id",
      "title": "Architecture RFC & Specs",
      "content": "Detailed markdown requirements, meeting minutes, and acceptance criteria.",
      "color": "#3B82F6",
      "pinned": true,
      "category": "Architecture",
      "tags": ["RFC", "Architecture"],
      "task_ids": ["task-1"],
      "updatedBy": "@alex",
      "createdAt": "YYYY-MM-DDTHH:mm:ssZ",
      "updatedAt": "YYYY-MM-DDTHH:mm:ssZ"
    }
  ],
  "documents": [
    {
      "id": "doc-unique-id",
      "label": "<Document or Deliverable Title>",
      "status": "have" | "pending" | "missing",
      "owner": "<Owner Name>",
      "url": "<Documentation Link>",
      "note": "<Review notes / status>"
    }
  ],
  "tasks": [
    {
      "id": "task-unique-id",
      "wbs": "1.1",
      "label": "Task Name / Title",
      "category": "<matching_category_id>",
      "start": "YYYY-MM-DD",
      "end": "YYYY-MM-DD",
      "assignee": "@alex",
      "phase": "Phase 1: Foundation",
      "priority": "low" | "medium" | "high" | "urgent",
      "estimatedCost": 28000,
      "actualCost": 15000,
      "dependsOn": "prereq-id" | ["prereq-1", "prereq-2"] | null,
      "gapDays": 2,
      "locked": false,
      "progress": 0.75,
      "milestone": false,
      "status": "not-started" | "in-progress" | "submitted" | "completed" | "blocked",
      "urgent": false,
      "color": "#EC4899",
      "baseline": {
        "start": "YYYY-MM-DD",
        "end": "YYYY-MM-DD"
      },
      "notes": "Detailed task description, acceptance criteria, and technical specs.",
      "fields": {
        "jira": "JANTT-101",
        "storyPoints": 13,
        "repo": "github.com/org/repo",
        "deliverable": "schemas/v1.json"
      }
    }
  ]
}

## 2. Critical Constraints & Validation Rules:
1. DATES: All dates must be ISO "YYYY-MM-DD" format. "end" must be >= "start".
2. CATEGORIES: Every task "category" must match an existing key in the "categories" dictionary.
3. DEPENDENCIES (DAG):
   - "dependsOn" can be a single task ID string, an array of strings ["t1", "t2"], or null.
   - All referenced dependency IDs must exist in the "tasks" list (no dangling references).
   - Strict Directed Acyclic Graph: NO circular dependency loops (e.g. A -> B -> C -> A).
   - Timing Sanity: A task's "start" must be on or after prerequisite "end" + gapDays.
4. MILESTONES: For zero-duration milestone gates, set "milestone": true and "start" equal to "end".
5. PROGRESS: Must be a decimal float from 0.0 (0%) to 1.0 (100%).
6. BASELINES: Optional planned timeframe object { "start": "YYYY-MM-DD", "end": "YYYY-MM-DD" } for baseline variance tracking.
7. LOCKED: Set "locked": true on fixed gates or hard-deadline milestones to prevent accidental drag shifts.
8. SINGLE SOURCE OF TRUTH & ZERO DATABASE IDS IN JSON:
   - Real registered teammates use canonical "@username" for both "id" and "username".
   - Non-account individuals are defined as offline personas (e.g. "id": "person-contractor", without "username").
   - Tasks assigned to real accounts reference the handle in "assignee": "@username".
   - NO INTERNAL DATABASE IDS OR UIDs IN JSON: Private database keys, Firebase UIDs, auth tokens, and secret keys are strictly stripped from JSON. The ONLY exc

提示：代码过长已自动截断

Minimal JSON Template

Provide this minimal benchmark template directly to any code or LLM pipeline:

{
  "$schema": "https://raw.githubusercontent.com/AhmadHassan-BTed/Jantt/main/schema/jantt.schema.json",
  "meta": {
    "title": "Master Delivery Plan",
    "person": "@ahmadhassan",
    "start": "2026-09-01",
    "end": "2027-02-28",
    "scale": "week",
    "linkRouting": "orthogonal",
    "showCriticalPath": true,
    "currency": "USD",
    "budget": 250000
  },
  "categories": {
    "core": { "label": "Core Dev", "color": "#38BDF8" },
    "qa": { "label": "QA & Release", "color": "#10B981" }
  },
  "tasks": [
    {
      "id": "t1",
      "wbs": "1.0",
      "label": "Engine Architecture",
      "category": "core",
      "start": "2026-09-01",
      "end": "2026-09-20",
      "progress": 1.0,
      "status": "completed",
      "assignee": "@ahmadhassan"
    },
    {
      "id": "gate-1",
      "wbs": "1.1",
      "label": "Architecture Approved",
      "category": "core",
      "start": "2026-09-21",
      "end": "2026-09-21",
      "milestone": true,
      "dependsOn": "t1"
    },
    {
      "id": "t2",
      "wbs": "2.0",
      "label": "Core Implementation",
      "category": "core",
      "start": "2026-09-23",
      "end": "2026-10-30",
      "dependsOn": "gate-1",
      "gapDays": 2,
      "progress": 0.4,
      "status": "in-progress"
    }
  ]
}

System Architecture

Jantt operates on a strictly decoupled, unidirectional data flow. Raw JSON is validated, topologically solved, mapped into coordinate space, and presented via modular DOM and SVG layers.

Interaction & Request Lifecycle

When dragging task bars, resizing durations, connecting dependency handles, or adjusting progress, the event cycle flows cleanly through the state machine:

Feature Matrix & Capabilities Guide

Jantt bridges the gap between declarative machine data and human project intuition with high-performance visualization across timelines, agile boards, and documentation.

Visual & Interactive Experience (Up Front)

Core Engine & Algorithmic Internals (Under the Hood)

Monorepo Directory Structure

Jantt/
├── packages/
│   ├── core/                  # Pure TypeScript engine (ZERO runtime dependencies)
│   │   ├── src/
│   │   │   ├── date-math.ts   # Pure UTC date math & calendar functions
│   │   │   ├── validator.ts   # Schema, cycle, and integrity validator
│   │   │   ├── resolver.ts    # Topological solver & Critical Path analysis
│   │   │   ├── layout.ts      # Multi-scale coordinate engine & 90° line router
│   │   │   ├── controller.ts  # Pointer event interaction state machine
│   │   │   ├── detail-modal.ts# Accessible task detail modal subsystem
│   │   │   ├── exporter.ts    # Client-side CSV, SVG, and JSON exporters
│   │   │   ├── renderers/     # Modular DOM presentation subsystems
│   │   │   └── index.ts       # Public package exports
│   │   └── tests/             # Vitest test suites (339/339 tests passing across 22 suites)
│   ├── react/                 # Official React component (<Jantt />)
│   └── standalone/            # UMD & IIFE script-tag bundles for plain HTML
├── cli/                       # Standalone Node.js CLI runner (npx jantt open)
├── apps/
│   └── playground/            # Split-view interactive documentation sandbox
├── assets/                    # Official vector logos & curated screenshot gallery
├── schema/
│   └── jantt.schema.json      # Formal JSON Schema v1 specification
├── examples/                  # Validated JSON planning fixtures
└── docs/                      # Technical specifications & architectural guides

Quickstarts

1. React Application (@jantt/react)

npm install @jantt/react @jantt/core

import React, { useState } from "react";
import { Jantt } from "@jantt/react";
import "@jantt/core/dist/theme.css";

const initialPlan = {
  "$schema": "https://jantt.dev/schema/v1.json",
  "meta": {
    "title": "High-Rise Construction",
    "scale": "week",
    "showCriticalPath": true,
    "showBaselines": true
  },
  "categories": {
    "civil": { "label": "Civil Engineering", "color": "#10B981" },
    "structure": { "label": "Superstructure", "color": "#8B5CF6" }
  },
  "tasks": [
    { "id": "T1", "label": "Deep Foundation Excavation", "category": "civil", "start": "2026-09-01", "end": "2026-09-20", "progress": 1.0 },
    { "id": "T2", "label": "Structural Steel Erection", "category": "structure", "start": "2026-09-22", "end": "2026-10-30", "dependsOn": "T1", "progress": 0.35 }
  ]
};

export function RoadmapView() {
  const [plan, setPlan] = useState(initialPlan);

  return (
    <div style={{ width: "100%", height: "600px" }}>
      <Jantt
        data={plan}
        viewport={{ scale: "week", showCriticalPath: true }}
        => console.log("Draft state:", draft)}
        => {
          setPlan(finalPlan);
        }}
      />
    </div>
  );
}

2. Standalone Plain HTML (@jantt/standalone)

No bundler, Node.js, or build step required:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/@jantt/standalone/dist/style.css">
  <script src="https://unpkg.com/@jantt/standalone/dist/jantt.standalone.iife.js"></script>
</head>
<body>
  <div id="chart-mount" style="max-width: 1200px; margin: 40px auto;"></div>

  <script>
    fetch("./roadmap.json")
      .then(res => res.json())
      .then(data => {
        window.Jantt.mount(document.getElementById("chart-mount"), data, {
          onCommit: (updatedPlan) => console.log("Saved JSON:", updatedPlan)
        });
      });
  </script>
</body>
</html>

3. Local CLI with Live Two-Way Sync (jantt)

Open and edit any JSON file with automatic real-time saving back to disk:

# Open interactive browser chart with auto-save to file
npx jantt open ./examples/construction-enterprise.json

# Validate JSON file against schema from terminal
npx jantt validate ./examples/basic.json

4. Headless Core Engine (@jantt/core)

Execute topological constraints and schedule calculations headlessly in backend services:

import { resolveSchedule, calculateCriticalPath, validate, exportToCsv } from "@jantt/core";

// 1. Validate payload
const validation = validate(rawJson);
if (!validation.valid) {
  console.error("Schema errors:", validation.errors);
}

// 2. Cascade topological schedules
const resolvedTasks = resolveSchedule(rawJson.tasks, 2);

// 3. Compute critical path bottleneck sequence
const { criticalTaskIds } = calculateCriticalPath(resolvedTasks);

// 4. Export to CSV spreadsheet
const csvData = exportToCsv({ ...rawJson, tasks: resolvedTasks });

JSON Schema Contract

Every Jantt document conforms strictly to schema/jantt.schema.json:

{
  "$schema": "https://jantt.dev/schema/v1.json",
  "meta": {
    "title": "Metropolis High-Rise Construction",
    "start": "2026-09-01",
    "end": "2027-02-28",
    "defaultGapDays": 2,
    "scale": "week",
    "showCriticalPath": true,
    "showBaselines": true
  },
  "categories": {
    "civil": { "label": "Civil & Foundation", "color": "#10B981" },
    "milestone": { "label": "Project Milestones", "color": "#E11D48" }
  },
  "tasks": [
    {
      "id": "excavation",
      "label": "Deep Foundation Excavation",
      "category": "civil",
      "start": "2026-09-01",
      "end": "2026-09-20",
      "progress": 1.0,
      "baseline": { "start": "2026-09-01", "end": "2026-09-18" }
    },
    {
      "id": "foundation-pour",
      "label": "Foundation Pour Milestone",
      "category": "milestone",
      "start": "2026-09-22",
      "end": "2026-09-22",
      "milestone": true,
      "dependsOn": "excavation",
      "gapDays": 2,
      "progress": 0.0
    }
  ]
}

Real-Time Cloud Collaboration & Architecture

Jantt features a dedicated, enterprise-grade multi-user collaboration engine backed by Firebase Realtime Database and Cloudflare Workers:

1. GitHub-Only Authentication (Zero Google Auth)

• Strict Single Provider: Google login and generic password forms are completely removed. Authentication is restricted to GitHub OAuth 2.0 (read:user, user:follow, public_repo).
• Zero Manual Username Typing: Jantt automatically claims the user’s verified GitHub handle (@username) directly into /usernames/{username} upon first sign-in.
• Creator Follow & Star Gate: Collaborators unlock free cloud collaboration rooms by supporting the project - following @AhmadHassan-BTed and starring developer repositories. Creator @AhmadHassan-BTed is automatically verified across all checks.

2. Single Source of Truth & Zero Internal Database IDs in JSON

• No Database Leakage: Private database UIDs, owner UIDs, internal room secrets, and authentication tokens are strictly stripped and never exposed in JSON.
• Canonical Mentions: The only user identity representation in JSON is canonical user mentions (@username).
• Plan Sanitizer Engine (sanitizePlanForJson): Every plan document is recursively scrubbed before write or export.

3. Dual-Mode People & Assignee Management

• Search Real Accounts: Live search modal queries /users by username prefix (searchUsersByUsername) with avatar, display name, and @username.
• Offline / Dummy Personas: Add contractors or external stakeholders without an account (id: "person-xxx", without username).
• Coherent Task Assignments: Tasks assigned to real accounts reference "assignee": "@username", keeping tasks, people, and mentions 100% synchronized.

4. Realtime Database Security Rules (database.rules.json)

The complete ruleset governs authorization across all paths:

• /users: Indexed on username (.indexOn: ["username"]) for prefix searches; users can only write to their own record.
• /usernames: Atomic handle registration preventing username collisions.
• /user_rooms: Fast dashboard listings of owned and shared rooms.
• /rooms: ACID transactions via runTransaction with 3-way CRDT reconciler, ensuring only room owners and editors can mutate plan data.

AI Prompting Specification

Use this system prompt with ChatGPT, Claude, Gemini, or local LLMs to generate valid Jantt timelines:

You are a project timeline generator. Output only raw, valid JSON conforming strictly to the Jantt Schema (https://jantt.dev/schema/v1.json).

Rules:
1. Root must contain: "tasks": [{ "id", "label", "category", "start", "end", "dependsOn", "progress", "milestone", "baseline" }]
2. All dates must be ISO "YYYY-MM-DD"
3. All task categories must match keys declared in "categories"
4. Put custom domain metadata inside the "fields" object
5. Output ONLY raw JSON without markdown explanations.

Theming & CSS Variables Reference

:root {
  --jantt-bg: #0B111E;              /* Chart background */
  --jantt-surface: #141D2F;         /* Toolbar & left table surface */
  --jantt-surface-hover: #1A263D;   /* Row hover state */
  --jantt-border: #24324B;          /* Border lines */
  --jantt-text: #F1F5F9;            /* Primary text */
  --jantt-text-muted: #94A3B8;      /* Secondary text */
  --jantt-accent: #38BDF8;          /* Active selection & ports */
  --jantt-today: #F43F5E;           /* Today indicator line */
  --jantt-critical: #F59E0B;        /* Critical path glowing line */
  --jantt-bar-radius: 6px;          /* Task bar corner radius */
}

Keyboard Accessibility

Local Development & Contributing

New contributors are welcomed. Please review CONTRIBUTING.md and CODE_OF_CONDUCT.md.

# Clone the repository
git clone https://github.com/AhmadHassan-BTed/Jantt.git
cd Jantt

# Install dependencies
npm install

# Run verification test suite (339/339 passing across 22 test suites)
npm test

# Typecheck all packages
npm run typecheck

# Launch local interactive development playground
npm run dev

Author & Maintainer

Ahmad Hassan (B-Ted)

• Email: [email protected]
• GitHub: @AhmadHassan-BTed
• Project Repository: https://github.com/AhmadHassan-BTed/Jantt

License

This project is licensed under the MIT License - see the LICENSE file for details.