Table of Contents

• How to Install Drafter
  • Thonny
  • Command Line
• Drafter Quick Start Guide
  • 0. Overview
  • 1. Another Route
  • 2. Taking Input
  • 3. More Interactivity
  • 4. Testing
  • 5. Moving On
• Workbook
  • Cookie Clicker
  • Bank Account
  • Simple Adventure Game
  • Store
• Longer Examples
• Drafter Documentation for Students
  • Basic Routing
    • route()
  • Pages
    • Page()
  • Server Control
    • start_server()
  • Components
    • Image()
    • Link()
    • TextBox()
    • TextArea()
    • SelectBox()
    • CheckBox()
    • LineBreak()
    • HorizontalRule()
    • Button()
    • NumberedList()
    • BulletedList()
    • Header()
    • Table()
    • Span()
    • Argument()
    • MatPlotLibPlot()
    • Download()
    • Div()
    • Row()
    • PreformattedText()
    • FileUpload()
  • Debug Information
    • show_debug_information()
    • hide_debug_information()
• HTML
• Styling
  • A Full Styling Example
  • Styling Functions
    • float_left()
    • float_right()
    • bold()
    • italic()
    • underline()
    • strikethrough()
    • monospace()
    • small_font()
    • large_font()
    • change_color()
    • change_background_color()
    • change_text_size()
    • change_text_font()
    • change_text_align()
    • change_text_decoration()
    • change_text_transform()
    • change_margin()
    • change_border()
    • change_padding()
    • change_width()
    • change_height()
  • Keyword Parameters
  • CSS Style Tags
  • CSS Classes
  • Adding Website CSS
    • add_website_css()
  • Changing Themes
    • set_website_style()
• Testing Drafter Applications
  • Automatically Generated Tests
  • Testing Parts of Routes
• Deployment
  • Step 1: Create the Repository
  • Step 2: Enable GitHub Pages
  • Step 3: Edit Your Main.py File
  • Step 4: Upload Additional Files (If Needed)
  • Step 5: Upload Your Planning Document
  • Step 6: Update set_site_information with Your Details
  • Step 7: Record a Video
  • Step 8: Deploy Your Website
  • Step 9: Get Your Deployed URL and Submit
  • Checking Your Site Information
  • Deployment Dashboard
  • Common Issues and Tips
• Reference Lists
  • HTML Colors
  • Components Cheatsheet
  • HTML Fonts
  • Transitioning from Drafter to Flask
    • What is Flask?
    • Installing Flask
    • Basic Routing
    • Returning HTML Content
    • Using Templates
    • Handling Forms and Input
    • Managing State
    • Conclusion
  • Local Python Development Setup Guide
    • Step 1: Install Git
    • Step 2: Install Visual Studio Code (VS Code)
    • Step 3: Install UV
    • Step 4: Install Python
    • Step 5: Install the Python Extension for VS Code
    • Step 6: Apply for GitHub Student Developer Pack
    • Step 7: Setup GitHub Copilot
    • Step 8: Fork and Clone a Repository
    • Step 9: Install Dependencies and Run Tests
    • Step 10: Fix the Issue and Confirm It Works
    • Step 11: Add, Commit, and Push Your Changes
    • Step 12: Enable and Check GitHub Actions
    • Step 13: Develop
      • Running Locally
      • Debug Locally
      • AI Help
    • Congratulations!
  • Gemini Support
    • Deploy Your Site
    • Get Your Gemini API Key
    • Setting Up a Proxy Server
    • Configure Drafter to Use the Proxy
    • Example LLM Integration
  • Pillow Support
  • Deployed Site Compatibility
  • JavaScript in Drafter
    • Errors
    • Deployment vs Local Development
• More Help
  • Actions After Start
  • Circular Reference Errors
• Full API Documentation
  • Server
    • Server.about()
    • Server.add_route()
    • Server.clear_routes()
    • Server.convert_parameter()
    • Server.dump_state()
    • Server.flash_warning()
    • Server.handle_images()
    • Server.load_from_state()
    • Server.make_bottle_page()
    • Server.make_debug_page()
    • Server.make_error_page()
    • Server.prepare_args()
    • Server.reset()
    • Server.restore_state_if_available()
    • Server.run()
    • Server.serve_image()
    • Server.setup()
    • Server.test_deployment()
    • Server.try_special_conversions()
    • Server.verify_page_result()
    • Server.verify_page_state_history()
    • Server.wrap_page()
  • SiteInformation
  • bundle_files_into_js()
  • do_not_start_server()
  • get_all_routes()
  • get_main_server()
  • get_server_setting()
  • protect_script_tags()
  • set_main_server()
  • set_server_setting()
  • start_server()
  • BakeryTestCase
  • assert_equal()
  • diff_tests()
  • route()
  • Page
    • Page.make_about_button()
    • Page.make_reset_button()
    • Page.render_content()
    • Page.verify_content()
  • ConversionRecord
  • UnchangedRecord
  • VisitedPage
  • add_website_css()
  • add_website_header()
  • default_index()
  • deploy_site()
  • hide_debug_information()
  • set_image_path()
  • set_site_information()
  • set_website_framed()
  • set_website_style()
  • set_website_title()
  • show_debug_information()
  • DebugInformation
    • DebugInformation.available_routes()
    • DebugInformation.copy_all_page_history()
    • DebugInformation.current_route()
    • DebugInformation.current_state()
    • DebugInformation.generate()
    • DebugInformation.page_load_history()
  • ServerConfiguration
  • ApiKeyBox
  • Argument
  • Box
  • BulletedList
  • Button
  • CheckBox
  • Div
  • Division
  • Download
  • FileUpload
  • Header
  • HorizontalRule
  • Image
    • Image.render()
  • LineBreak
  • Link
  • LinkContent
  • MatPlotLibPlot
  • NumberedList
  • PageContent
    • PageContent.parse_extra_settings()
    • PageContent.render()
    • PageContent.update_attr()
    • PageContent.update_style()
    • PageContent.verify()
  • Picture
  • Pre
  • PreformattedText
  • Row
  • SelectBox
  • Span
  • SubmitButton
  • Table
  • Text
  • TextArea
  • TextBox
  • make_safe_argument()
  • make_safe_json_argument()
  • make_safe_name()
  • validate_parameter_name()
  • float_left()
  • float_right()
  • update_attr()
  • update_style()
  • LLMError
  • LLMMessage
  • LLMResponse
  • ResponseWrapper
  • call_gemini()
  • call_gemini_structured()
  • call_gpt()
  • call_gpt_structured()
  • clear_api_key()
  • get_stored_api_key()
  • save_api_key()