Jac in the Block

Overview

Jac is a powerful graph-based and agent-driven programming language, but it introduces a completely new way of thinking that can be difficult for beginners to grasp. Concepts like nodes, edges, and walkers are often abstract and hard to visualize, creating a steep learning curve for new users.

Jac in the Blocks is an accessible learning and development toolkit designed to bridge that gap.

We combine:

• 🧩 A block-based visual programming interface
• 🌐 A real-time graph visualizer
• 🛠️ A VS Code extension with linting and debugging support

Together, these tools help users move from visual learning → conceptual understanding → real Jac development seamlessly.

❗ The Problem

• 🧠 Unfamiliar mental model
  Jac introduces graph-based and agent-driven programming, which differs significantly from traditional coding paradigms.

• 👁️ Execution is invisible
  It’s difficult to understand how nodes, edges, and walkers behave without visual feedback.

• 🚪 No intuitive entry point
  Beginners lack an accessible way to experiment with and learn Jac interactively.

💡 Our Solution

Jac in the Blocks provides a complete learning pipeline for Jac:

• Visual Block-Based Programming
  Users build Jac programs using intuitive drag-and-drop blocks, lowering the barrier for beginners.

• Real-Time Code Generation
  As users build with blocks, clean and readable Jac code is generated instantly.

• Interactive Graph & Execution View
  Users can visualize nodes, edges, and traversal behavior to understand how their program runs.

• VS Code Linter & Debugger
  Developers can transition to real coding with tools that:

  • detect errors
  • provide feedback
  • support debugging workflows

🛠️ How We Built It

• Frontend: React / Next.js, Blockly
  
• Graph Visualization: React
• Code Generation: Custom block → Jac parser
  
• VS Code Extension:
  • Jac linter
  • Debugging support
  • Developer tooling integration

🌍 Impact

Built with a focus on making complex systems simple and accessible. Jac in the Blocks lowers the barrier to entry for Jac by making its concepts:

• visual
• interactive
• intuitive

This enables:

• faster onboarding for new developers
  
• improved understanding of graph-based programming
  
• a smoother transition from beginner to advanced usage
  

We’re building the on-ramp and developer toolkit for the Jac ecosystem.

Built With

• jac