Closing the Block-to-Text Gap: A Domain-Specific JavaScript Editor for Early Computational Thinking

TL;DR

This paper introduces a web-based JavaScript editor with a domain-specific language to help children transition from block-based to text-based programming, improving computational thinking and reducing syntax errors.

Contribution

It presents a novel visual-first DSL and pedagogical framework validated through a pilot study to facilitate early coding education.

Findings

Significant improvement in computational thinking skills (+10.9 CTCI)

70% reduction in syntax errors

Participants advanced to complex algorithmic designs

Abstract

This paper presents a web-based JavaScript editor designed to help children aged 8-10 transition from block-based to text-based programming. The system introduces a simplified domain-specific language (DSL) focused on visual art, combining authentic JavaScript syntax with immediate, creative visual feedback. A four-week pilot study (N = 15) demonstrated significant improvements in computational thinking skills (mean CTCI gain of +10.9, p < 0.001), along with a 70% reduction in syntax errors. Participants advanced from basic drawing functions to sophisticated algorithmic designs using loops, conditionals, and animations. By integrating constructionist principles with a visual-first DSL, this research contributes a validated pedagogical framework for easing the block-to-text transition in K-12 computer science education. The system encourages creativity, self-correction, and sustained engagement, offering educators a practical, scalable tool for introducing authentic coding to young learners.