Closing the Block-to-Text Gap: A Domain-Specific JavaScript Editor for Early Computational Thinking
Andrei Enea
TL;DR
This study introduces Painting with Code, a domain-specific JavaScript editor with a visual-art DSL designed to ease the transition from block-based to text-based programming for children aged 8–10. In a four-week pilot with 15 participants, the tool yielded large computational thinking gains and substantially fewer syntax errors, highlighting the benefits of a visual-first, DSL-driven approach. The work situates this method within broader scaffolding strategies and demonstrates its potential to scale across domains, potentially broadening participation in K–12 CS education. Overall, the DSL-based framework provides a practical, engaging pathway from blocks to authentic text coding that preserves creativity and motivation while building core computational skills.
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.