Drafter

Drafter is an educational Python library for building interactive web applications.

Drafter is an educational web development library for Python. It enables students to learn and practice programming concepts by building dynamic, interactive websites.

Features

  • Web Development Simplified: Build “full-stack” websites with minimal setup.
  • State Management: Use Python dataclasses, lists, dictionaries, or any primitive types as the data model.
  • Interactive Components: Add buttons, text boxes, images, and more.
  • Fully Testable: Drafter uses a model around simple functions and doesn’t rely on global state, making it easy to test your sites.
  • Instant Regression Tests: Drafter automatically generates tests cases based on your interactions with the site. No AI needed!
  • Dynamic Content: Create multi-page applications with rich user interaction.
  • Easy Deployment: Use GitHub Pages to deploy your sites; no backend server required!

Examples and Getting Started

You can install Drafter using your favorite editor’s GUI, or via pip on the command line:

pip install drafter

The simplest Drafter site is quite short:

from drafter import *

start_server()

But it’s not hard to make something more sophisticated!

from drafter import *
from dataclasses import dataclass

@dataclass
class State:
    counter: int

@route
def index(state: State) -> Page:
    return Page(state, [
        "Welcome to Drafter!",
        "Click the button below.",
        Button("Increase the count", increment_counter)
    ])

@route
def increment_counter(state: State) -> Page:
    state.counter += 1
    return Page(state, [
      "You've clicked the button " + str(state.counter) + " times",
      Button("Click again", increment_counter)
    ])

start_server(State(0))

Want to see it in action and try it yourself? Try Drafter Online (in BlockPy)

Explore Tutorials

  • Cookie Clicker: Click cookies to earn more cookies. Learn state management!
  • Bank Account: Manage deposits and withdrawals in a simulated bank system.
  • Simple Adventure Game: Explore a world of decisions and find the treasure.
  • Store: Create a shop where users can purchase items.
  • More examples can be found here!

We also have this Google Doc worksheet assignment that we use in our CS1.

Documentation

Ready to learn more? Check out the student-friendly Drafter Documentation!

About Drafter’s Team

Drafter was created to simplify web development for students learning Python. The team includes passionate educators and developers dedicated to advancing programming education.

Follow us!