Bridge the gap between visual puzzle blocks and real-world code.

ScratchBridge is an interactive, browser-based workspace that lets you assemble visual programming blocks and instantly see the equivalent Python or JavaScript output — live, with semantic validation as you build.

• Visual Block Editor — toolbox with Print, Assign Variable, and Repeat Loop blocks
• Live Code Preview — every block change instantly re-generates Python and JavaScript output side-by-side
• AST-Backed Architecture — UI interactions map to a typed Abstract Syntax Tree (AST), keeping codegen and validation cleanly separated
• Semantic Validation — real-time detection of empty variable names, negative repeat counts, and static divide-by-zero errors
• Dual Language Output — toggle between Python and JavaScript previews with a single click
• TypeScript Throughout — fully typed AST nodes, expressions, and codegen pipeline

src/
├── app/
│   └── page.tsx          # Main workspace UI (block editor + live preview)
├── ast/
│   ├── ast-types.ts      # TypeScript types for the AST
│   └── validate-ast.ts   # Semantic validator (empty names, div/0, negative counts)
└── codegen/
    ├── generate-python.ts
    └── generate-javascript.ts

tests/
├── generate-javascript.test.ts
└── validate-ast.test.ts

• Node.js 20+
• pnpm (recommended)

# Install dependencies
pnpm install

# Start the development server
pnpm dev

Open http://localhost:3000 in your browser.

1. Add blocks from the toolbox on the left panel
2. Configure each block inline (variable name, value, repeat count, print text)
3. The UI state is derived into an AST on every render
4. The AST is validated for semantic errors (shown in the header and a warning tray)
5. The AST is compiled to Python and JavaScript, displayed live in the right panel

The validator (validate-ast.ts) catches these errors at edit-time:

MIT