Web applications are increasingly the primary way to create user interfaces, and they are often the most common software beginners have encountered. However, modern web development relies on concepts like HTML, CSS, JavaScript, and backend technologies, which are challenging for novices and beyond the scope of an introductory course. Additionally, many features of modern web frameworks conflict with CS1 principles, such as avoiding global mutable state and promoting test-driven development. Consequently, web development is rarely integrated into CS1 courses, despite its potential to motivate and engage students.

This paper introduces Drafter, a new open-source Python library designed for CS1, enabling students to develop full-stack web applications using pure functions with minimal boilerplate. Drafter provides user-friendly functions to generate HTML, eliminating the need to learn HTML or templating languages. The data model scales with students’ mastery of data types, from primitives to nested lists, dataclasses, and dictionaries. Drafter facilitates unit testing of entire web applications and reinforces CS1 concepts like functional decomposition and reusability. Websites created with Drafter can be deployed client-side without a backend server, such as through GitHub Pages, while retaining their full functionality (e.g., plotting). During development, students receive extensive debug information, including automatically scaffolded unit tests, visualization of program state, test failure diffing, internal validation, and enhanced error messages.

This paper discusses the pedagogical features and design decisions behind Drafter, along with instructor reflections on its use in real classrooms. We believe Drafter can significantly enhance student engagement in CS1 courses and reinforce key learning objectives.