Hugging Face's logo

Spaces:
AItool
/
home-fasthtml
Sleeping

App Files Community
home-fasthtml / docs /tutorials /e2e.html
AItool's picture
AItool
Upload 210 files
036b3a6 verified
raw
history blame contribute delete
88.3 kB
 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<meta charset="utf-8">
<meta name="generator" content="quarto-1.6.40">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="description" content="How to build a website with custom JavaScript in FastHTML step-by-step">
<title>JS App Walkthrough – fasthtml</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
vertical-align: middle;
}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
}
pre.numberSource { margin-left: 3em; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
</style>
<script src="../site_libs/quarto-nav/quarto-nav.js"></script>
<script src="../site_libs/quarto-nav/headroom.min.js"></script>
<script src="../site_libs/clipboard/clipboard.min.js"></script>
<script src="../site_libs/quarto-search/autocomplete.umd.js"></script>
<script src="../site_libs/quarto-search/fuse.min.js"></script>
<script src="../site_libs/quarto-search/quarto-search.js"></script>
<meta name="quarto:offset" content="../">
<link href="../favicon.ico" rel="icon">
<script src="../site_libs/quarto-html/quarto.js"></script>
<script src="../site_libs/quarto-html/popper.min.js"></script>
<script src="../site_libs/quarto-html/tippy.umd.min.js"></script>
<script src="../site_libs/quarto-html/anchor.min.js"></script>
<link href="../site_libs/quarto-html/tippy.css" rel="stylesheet">
<link href="../site_libs/quarto-html/quarto-syntax-highlighting-549806ee2085284f45b00abea8c6df48.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="../site_libs/bootstrap/bootstrap.min.js"></script>
<link href="../site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="../site_libs/bootstrap/bootstrap-e463c5e664eae906a5c2eb38a07ecc3d.min.css" rel="stylesheet" append-hash="true" id="quarto-bootstrap" data-mode="light">
<script id="quarto-search-options" type="application/json">{
"location": "navbar",
"copy-button": false,
"collapse-after": 3,
"panel-placement": "end",
"type": "overlay",
"limit": 50,
"keyboard-shortcut": [
"f",
"/",
"s"
],
"show-item-context": false,
"language": {
"search-no-results-text": "No results",
"search-matching-documents-text": "matching documents",
"search-copy-link-title": "Copy link to search",
"search-hide-matches-text": "Hide additional matches",
"search-more-match-text": "more match in this document",
"search-more-matches-text": "more matches in this document",
"search-clear-button-title": "Clear",
"search-text-placeholder": "",
"search-detached-cancel-button-title": "Cancel",
"search-submit-button-title": "Submit",
"search-label": "Search"
}
}</script>
<link rel="stylesheet" href="../styles.css">
<meta property="og:title" content="JS App Walkthrough – fasthtml">
<meta property="og:description" content="How to build a website with custom JavaScript in FastHTML step-by-step">
<meta property="og:image" content="https://www.fastht.ml/docs/tutorials/imgs/quickdraw.png">
<meta property="og:site_name" content="fasthtml">
<meta property="og:image:height" content="1554">
<meta property="og:image:width" content="1684">
<meta name="twitter:title" content="JS App Walkthrough – fasthtml">
<meta name="twitter:description" content="How to build a website with custom JavaScript in FastHTML step-by-step">
<meta name="twitter:image" content="https://www.fastht.ml/docs/tutorials/imgs/quickdraw.png">
<meta name="twitter:creator" content="@jeremyphoward">
<meta name="twitter:site" content="@answerdotai">
<meta name="twitter:image-height" content="1554">
<meta name="twitter:image-width" content="1684">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="https://www.fastht.ml/docs/tutorials/e2e.html">
</head>
<body class="nav-sidebar floating nav-fixed">
<div id="quarto-search-results"></div>
<header id="quarto-header" class="headroom fixed-top">
<nav class="navbar navbar-expand-lg " data-bs-theme="dark">
<div class="navbar-container container-fluid">
<div class="navbar-brand-container mx-auto">
<a href="../index.html" class="navbar-brand navbar-brand-logo">
<img src="../logo.svg" alt="" class="navbar-logo">
</a>
</div>
<div id="quarto-search" class="" title="Search"></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" role="menu" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-nav-scroll me-auto">
<li class="nav-item">
<a class="nav-link" href="https://fastht.ml">
<span class="menu-text">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fastht.ml/about">
<span class="menu-text">Learn</span></a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-scroll ms-auto">
<li class="nav-item compact">
<a class="nav-link" href="https://github.com/answerdotai/fasthtml"> <i class="bi bi-github" role="img">
</i>
<span class="menu-text"></span></a>
</li>
<li class="nav-item compact">
<a class="nav-link" href="https://x.com/answerdotai"> <i class="bi bi-twitter" role="img" aria-label="Fast.ai Twitter">
</i>
<span class="menu-text"></span></a>
</li>
</ul>
</div> <!-- /navcollapse -->
<div class="quarto-navbar-tools">
</div>
</div> <!-- /container-fluid -->
</nav>
<nav class="quarto-secondary-nav">
<div class="container-fluid d-flex">
<button type="button" class="quarto-btn-toggle btn" data-bs-toggle="collapse" role="button" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
<i class="bi bi-layout-text-sidebar-reverse"></i>
</button>
<nav class="quarto-page-breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="../tutorials/index.html">Tutorials</a></li><li class="breadcrumb-item"><a href="../tutorials/e2e.html">JS App Walkthrough</a></li></ol></nav>
<a class="flex-grow-1" role="navigation" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
</a>
</div>
</nav>
</header>
<!-- content -->
<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article page-navbar">
<!-- sidebar -->
<nav id="quarto-sidebar" class="sidebar collapse collapse-horizontal quarto-sidebar-collapse-item sidebar-navigation floating overflow-auto">
<div class="sidebar-menu-container">
<ul class="list-unstyled mt-1">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../index.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Get Started</span></a>
</div>
</li>
<li class="sidebar-item sidebar-item-section">
<div class="sidebar-item-container">
<a href="../tutorials/index.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Tutorials</span></a>
<a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-1" role="navigation" aria-expanded="true" aria-label="Toggle section">
<i class="bi bi-chevron-right ms-2"></i>
</a>
</div>
<ul id="quarto-sidebar-section-1" class="collapse list-unstyled sidebar-section depth1 show">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../tutorials/by_example.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">FastHTML By Example</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../tutorials/quickstart_for_web_devs.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Web Devs Quickstart</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../tutorials/e2e.html" class="sidebar-item-text sidebar-link active">
<span class="menu-text">JS App Walkthrough</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../tutorials/best_practice.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">FastHTML Best Practices</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../tutorials/jupyter_and_fasthtml.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Using Jupyter to write FastHTML</span></a>
</div>
</li>
</ul>
</li>
<li class="sidebar-item sidebar-item-section">
<div class="sidebar-item-container">
<a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="true">
<span class="menu-text">Explanations</span></a>
<a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="true" aria-label="Toggle section">
<i class="bi bi-chevron-right ms-2"></i>
</a>
</div>
<ul id="quarto-sidebar-section-2" class="collapse list-unstyled sidebar-section depth1 show">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../explains/background_tasks.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Background Tasks</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../explains/explaining_xt_components.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><strong>FT</strong> Components</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../explains/faq.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">FAQ</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../explains/minidataapi.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">MiniDataAPI Spec</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../explains/oauth.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">OAuth</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../explains/routes.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Routes</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../explains/stripe.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Stripe</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../explains/websockets.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">WebSockets</span></a>
</div>
</li>
</ul>
</li>
<li class="sidebar-item sidebar-item-section">
<div class="sidebar-item-container">
<a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="true">
<span class="menu-text">Reference</span></a>
<a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="true" aria-label="Toggle section">
<i class="bi bi-chevron-right ms-2"></i>
</a>
</div>
<ul id="quarto-sidebar-section-3" class="collapse list-unstyled sidebar-section depth1 show">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../ref/concise_guide.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Concise reference</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../ref/best_practice.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">FastHTML Best Practices</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../ref/defining_xt_component.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Custom Components</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../ref/handlers.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Handling handlers</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../ref/live_reload.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Live Reloading</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../ref/response_types.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Response Types</span></a>
</div>
</li>
</ul>
</li>
<li class="sidebar-item sidebar-item-section">
<div class="sidebar-item-container">
<a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="true">
<span class="menu-text">Source</span></a>
<a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="true" aria-label="Toggle section">
<i class="bi bi-chevron-right ms-2"></i>
</a>
</div>
<ul id="quarto-sidebar-section-4" class="collapse list-unstyled sidebar-section depth1 show">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../api/core.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Core</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../api/components.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Components</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../api/xtend.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Component extensions</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../api/js.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Javascript examples</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../api/pico.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Pico.css components</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../api/svg.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">SVG</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../api/jupyter.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Jupyter compatibility</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../api/oauth.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">OAuth</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="../api/cli.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Command Line Tools</span></a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item"></div>
<!-- margin-sidebar -->
<div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
<nav id="TOC" role="doc-toc" class="toc-active">
<h2 id="toc-title">On this page</h2>
<ul>
<li><a href="#installation" id="toc-installation" class="nav-link active" data-scroll-target="#installation">Installation</a>
<ul class="collapse">
<li><a href="#install-fasthtml" id="toc-install-fasthtml" class="nav-link" data-scroll-target="#install-fasthtml">Install FastHTML</a></li>
</ul></li>
<li><a href="#first-steps" id="toc-first-steps" class="nav-link" data-scroll-target="#first-steps">First steps</a>
<ul class="collapse">
<li><a href="#create-a-hello-world" id="toc-create-a-hello-world" class="nav-link" data-scroll-target="#create-a-hello-world">Create a hello world</a></li>
<li><a href="#quickdraw-a-fasthtml-adventure" id="toc-quickdraw-a-fasthtml-adventure" class="nav-link" data-scroll-target="#quickdraw-a-fasthtml-adventure">QuickDraw: A FastHTML Adventure 🎨✨</a></li>
<li><a href="#deploying-to-railway" id="toc-deploying-to-railway" class="nav-link" data-scroll-target="#deploying-to-railway">Deploying to Railway</a></li>
<li><a href="#conclusion-youre-a-fasthtml-artist-now" id="toc-conclusion-youre-a-fasthtml-artist-now" class="nav-link" data-scroll-target="#conclusion-youre-a-fasthtml-artist-now">Conclusion: You’re a FastHTML Artist Now! 🎨🚀</a></li>
</ul></li>
</ul>
<div class="toc-actions"><ul><li><a href="https://github.com/AnswerDotAI/fasthtml/issues/new" class="toc-action"><i class="bi bi-github"></i>Report an issue</a></li></ul></div><div class="quarto-alternate-formats"><h2>Other Formats</h2><ul><li><a href="e2e.html.md"><i class="bi bi-file-code"></i>CommonMark</a></li></ul></div></nav>
</div>
<!-- main -->
<main class="content" id="quarto-document-content">
<header id="title-block-header" class="quarto-title-block default"><nav class="quarto-page-breadcrumbs quarto-title-breadcrumbs d-none d-lg-block" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="../tutorials/index.html">Tutorials</a></li><li class="breadcrumb-item"><a href="../tutorials/e2e.html">JS App Walkthrough</a></li></ol></nav>
<div class="quarto-title">
<h1 class="title">JS App Walkthrough</h1>
</div>
<div>
<div class="description">
How to build a website with custom JavaScript in FastHTML step-by-step
</div>
</div>
<div class="quarto-title-meta">
</div>
</header>
<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->
<section id="installation" class="level2">
<h2 class="anchored" data-anchor-id="installation">Installation</h2>
<p>You’ll need the following software to complete the tutorial, read on for specific installation instructions:</p>
<ol type="1">
<li>Python</li>
<li>A Python package manager such as pip (which normally comes with Python) or uv</li>
<li>FastHTML</li>
<li>Web browser</li>
<li>Railway.app account</li>
</ol>
<p>If you haven’t worked with Python before, we recommend getting started with <a href="https://docs.anaconda.com/miniconda/">Miniconda</a>.</p>
<p>Note that you will only need to follow the steps in the installation section once per environment. If you create a new repo, you won’t need to redo these.</p>
<section id="install-fasthtml" class="level3">
<h3 class="anchored" data-anchor-id="install-fasthtml">Install FastHTML</h3>
<p>For Mac, Windows and Linux, enter:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode sh code-with-copy"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">pip</span> install python-fasthtml</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</section>
</section>
<section id="first-steps" class="level2">
<h2 class="anchored" data-anchor-id="first-steps">First steps</h2>
<p>By the end of this section you’ll have your own FastHTML website with tests deployed to railway.app.</p>
<section id="create-a-hello-world" class="level3">
<h3 class="anchored" data-anchor-id="create-a-hello-world">Create a hello world</h3>
<p>Create a new folder to organize all the files for your project. Inside this folder, create a file called <code>main.py</code> and add the following code to it:</p>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb2" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> fasthtml.common <span class="im">import</span> <span class="op">*</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>app <span class="op">=</span> FastHTML()</span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>rt <span class="op">=</span> app.route</span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">'/'</span>)</span>
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> get():</span>
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> <span class="st">'Hello, world!'</span></span>
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a>serve()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>Finally, run <code>python main.py</code> in your terminal and open your browser to the ‘Link’ that appears.</p>
</section>
<section id="quickdraw-a-fasthtml-adventure" class="level3">
<h3 class="anchored" data-anchor-id="quickdraw-a-fasthtml-adventure">QuickDraw: A FastHTML Adventure 🎨✨</h3>
<p>The end result of this tutorial will be QuickDraw, a real-time collaborative drawing app using FastHTML. Here is what the final site will look like:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="imgs/quickdraw.png" class="img-fluid figure-img"></p>
<figcaption>QuickDraw</figcaption>
</figure>
</div>
<section id="drawing-rooms" class="level4">
<h4 class="anchored" data-anchor-id="drawing-rooms">Drawing Rooms</h4>
<p>Drawing rooms are the core concept of our application. Each room represents a separate drawing space where a user can let their inner Picasso shine. Here’s a detailed breakdown:</p>
<ol type="1">
<li>Room Creation and Storage</li>
</ol>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb3" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a>db <span class="op">=</span> database(<span class="st">'data/drawapp.db'</span>)</span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a>rooms <span class="op">=</span> db.t.rooms</span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="cf">if</span> rooms <span class="kw">not</span> <span class="kw">in</span> db.t:</span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a> rooms.create(<span class="bu">id</span><span class="op">=</span><span class="bu">int</span>, name<span class="op">=</span><span class="bu">str</span>, created_at<span class="op">=</span><span class="bu">str</span>, pk<span class="op">=</span><span class="st">'id'</span>)</span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a>Room <span class="op">=</span> rooms.dataclass()</span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a><span class="at">@patch</span></span>
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> __ft__(<span class="va">self</span>:Room):</span>
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Li(A(<span class="va">self</span>.name, href<span class="op">=</span><span class="ss">f"/rooms/</span><span class="sc">{</span><span class="va">self</span><span class="sc">.</span><span class="bu">id</span><span class="sc">}</span><span class="ss">"</span>))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>Or you can use our <code>fast_app</code> function to create a FastHTML app with a SQLite database and dataclass in one line:</p>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb4" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> render(room):</span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Li(A(room.name, href<span class="op">=</span><span class="ss">f"/rooms/</span><span class="sc">{</span>room<span class="sc">.</span><span class="bu">id</span><span class="sc">}</span><span class="ss">"</span>))</span>
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a>app,rt,rooms,Room <span class="op">=</span> fast_app(<span class="st">'data/drawapp.db'</span>, render<span class="op">=</span>render, <span class="bu">id</span><span class="op">=</span><span class="bu">int</span>, name<span class="op">=</span><span class="bu">str</span>, created_at<span class="op">=</span><span class="bu">str</span>, pk<span class="op">=</span><span class="st">'id'</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>We are specifying a render function to convert our dataclass into HTML, which is the same as extending the <code>__ft__</code> method from the <code>patch</code> decorator we used before. We will use this method for the rest of the tutorial since it is a lot cleaner and easier to read.</p>
<ul>
<li>We’re using a SQLite database (via FastLite) to store our rooms.</li>
<li>Each room has an id (integer), a name (string), and a created_at timestamp (string).</li>
<li>The Room dataclass is automatically generated based on this structure.</li>
</ul>
<ol start="2" type="1">
<li>Creating a room</li>
</ol>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb5" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/"</span>)</span>
<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> get():</span>
<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a> <span class="co"># The 'Input' id defaults to the same as the name, so you can omit it if you wish</span></span>
<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a> create_room <span class="op">=</span> Form(Input(<span class="bu">id</span><span class="op">=</span><span class="st">"name"</span>, name<span class="op">=</span><span class="st">"name"</span>, placeholder<span class="op">=</span><span class="st">"New Room Name"</span>),</span>
<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a> Button(<span class="st">"Create Room"</span>),</span>
<span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a> hx_post<span class="op">=</span><span class="st">"/rooms"</span>, hx_target<span class="op">=</span><span class="st">"#rooms-list"</span>, hx_swap<span class="op">=</span><span class="st">"afterbegin"</span>)</span>
<span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a> rooms_list <span class="op">=</span> Ul(<span class="op">*</span>rooms(order_by<span class="op">=</span><span class="st">'id DESC'</span>), <span class="bu">id</span><span class="op">=</span><span class="st">'rooms-list'</span>)</span>
<span id="cb5-8"><a href="#cb5-8" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Titled(<span class="st">"DrawCollab"</span>, </span>
<span id="cb5-9"><a href="#cb5-9" aria-hidden="true" tabindex="-1"></a> H1(<span class="st">"DrawCollab"</span>),</span>
<span id="cb5-10"><a href="#cb5-10" aria-hidden="true" tabindex="-1"></a> create_room, rooms_list)</span>
<span id="cb5-11"><a href="#cb5-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb5-12"><a href="#cb5-12" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms"</span>)</span>
<span id="cb5-13"><a href="#cb5-13" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> post(room:Room):</span>
<span id="cb5-14"><a href="#cb5-14" aria-hidden="true" tabindex="-1"></a> room.created_at <span class="op">=</span> datetime.now().isoformat()</span>
<span id="cb5-15"><a href="#cb5-15" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> rooms.insert(room)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<ul>
<li>When a user submits the “Create Room” form, this route is called.</li>
<li>It creates a new Room object, sets the creation time, and inserts it into the database.</li>
<li>It returns an HTML list item with a link to the new room, which is dynamically added to the room list on the homepage thanks to HTMX.</li>
</ul>
<ol start="3" type="1">
<li>Let’s give our rooms shape</li>
</ol>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb6" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms/</span><span class="sc">{id}</span><span class="st">"</span>)</span>
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> get(<span class="bu">id</span>:<span class="bu">int</span>):</span>
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a> room <span class="op">=</span> rooms[<span class="bu">id</span>]</span>
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Titled(<span class="ss">f"Room: </span><span class="sc">{</span>room<span class="sc">.</span>name<span class="sc">}</span><span class="ss">"</span>, H1(<span class="ss">f"Welcome to </span><span class="sc">{</span>room<span class="sc">.</span>name<span class="sc">}</span><span class="ss">"</span>), A(Button(<span class="st">"Leave Room"</span>), href<span class="op">=</span><span class="st">"/"</span>))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<ul>
<li>This route renders the interface for a specific room.</li>
<li>It fetches the room from the database and renders a title, heading, and paragraph.</li>
</ul>
<p>Here is the full code so far:</p>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb7" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> fasthtml.common <span class="im">import</span> <span class="op">*</span></span>
<span id="cb7-2"><a href="#cb7-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> datetime <span class="im">import</span> datetime</span>
<span id="cb7-3"><a href="#cb7-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb7-4"><a href="#cb7-4" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> render(room):</span>
<span id="cb7-5"><a href="#cb7-5" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Li(A(room.name, href<span class="op">=</span><span class="ss">f"/rooms/</span><span class="sc">{</span>room<span class="sc">.</span><span class="bu">id</span><span class="sc">}</span><span class="ss">"</span>))</span>
<span id="cb7-6"><a href="#cb7-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb7-7"><a href="#cb7-7" aria-hidden="true" tabindex="-1"></a>app,rt,rooms,Room <span class="op">=</span> fast_app(<span class="st">'data/drawapp.db'</span>, render<span class="op">=</span>render, <span class="bu">id</span><span class="op">=</span><span class="bu">int</span>, name<span class="op">=</span><span class="bu">str</span>, created_at<span class="op">=</span><span class="bu">str</span>, pk<span class="op">=</span><span class="st">'id'</span>)</span>
<span id="cb7-8"><a href="#cb7-8" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb7-9"><a href="#cb7-9" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/"</span>)</span>
<span id="cb7-10"><a href="#cb7-10" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> get():</span>
<span id="cb7-11"><a href="#cb7-11" aria-hidden="true" tabindex="-1"></a> create_room <span class="op">=</span> Form(Input(<span class="bu">id</span><span class="op">=</span><span class="st">"name"</span>, name<span class="op">=</span><span class="st">"name"</span>, placeholder<span class="op">=</span><span class="st">"New Room Name"</span>),</span>
<span id="cb7-12"><a href="#cb7-12" aria-hidden="true" tabindex="-1"></a> Button(<span class="st">"Create Room"</span>),</span>
<span id="cb7-13"><a href="#cb7-13" aria-hidden="true" tabindex="-1"></a> hx_post<span class="op">=</span><span class="st">"/rooms"</span>, hx_target<span class="op">=</span><span class="st">"#rooms-list"</span>, hx_swap<span class="op">=</span><span class="st">"afterbegin"</span>)</span>
<span id="cb7-14"><a href="#cb7-14" aria-hidden="true" tabindex="-1"></a> rooms_list <span class="op">=</span> Ul(<span class="op">*</span>rooms(order_by<span class="op">=</span><span class="st">'id DESC'</span>), <span class="bu">id</span><span class="op">=</span><span class="st">'rooms-list'</span>)</span>
<span id="cb7-15"><a href="#cb7-15" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Titled(<span class="st">"DrawCollab"</span>, create_room, rooms_list)</span>
<span id="cb7-16"><a href="#cb7-16" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb7-17"><a href="#cb7-17" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms"</span>)</span>
<span id="cb7-18"><a href="#cb7-18" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> post(room:Room):</span>
<span id="cb7-19"><a href="#cb7-19" aria-hidden="true" tabindex="-1"></a> room.created_at <span class="op">=</span> datetime.now().isoformat()</span>
<span id="cb7-20"><a href="#cb7-20" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> rooms.insert(room)</span>
<span id="cb7-21"><a href="#cb7-21" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb7-22"><a href="#cb7-22" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms/</span><span class="sc">{id}</span><span class="st">"</span>)</span>
<span id="cb7-23"><a href="#cb7-23" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> get(<span class="bu">id</span>:<span class="bu">int</span>):</span>
<span id="cb7-24"><a href="#cb7-24" aria-hidden="true" tabindex="-1"></a> room <span class="op">=</span> rooms[<span class="bu">id</span>]</span>
<span id="cb7-25"><a href="#cb7-25" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Titled(<span class="ss">f"Room: </span><span class="sc">{</span>room<span class="sc">.</span>name<span class="sc">}</span><span class="ss">"</span>, H1(<span class="ss">f"Welcome to </span><span class="sc">{</span>room<span class="sc">.</span>name<span class="sc">}</span><span class="ss">"</span>), A(Button(<span class="st">"Leave Room"</span>), href<span class="op">=</span><span class="st">"/"</span>))</span>
<span id="cb7-26"><a href="#cb7-26" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb7-27"><a href="#cb7-27" aria-hidden="true" tabindex="-1"></a>serve()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>Now run <code>python main.py</code> in your terminal and open your browser to the ‘Link’ that appears. You should see a page with a form to create a new room and a list of existing rooms.</p>
</section>
<section id="the-canvas---lets-get-drawing" class="level4">
<h4 class="anchored" data-anchor-id="the-canvas---lets-get-drawing">The Canvas - Let’s Get Drawing! 🖌️</h4>
<p>Time to add the actual drawing functionality. We’ll use Fabric.js for this:</p>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb8" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a><span class="co"># ... (keep the previous imports and database setup)</span></span>
<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms/</span><span class="sc">{id}</span><span class="st">"</span>)</span>
<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> get(<span class="bu">id</span>:<span class="bu">int</span>):</span>
<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a> room <span class="op">=</span> rooms[<span class="bu">id</span>]</span>
<span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a> canvas <span class="op">=</span> Canvas(<span class="bu">id</span><span class="op">=</span><span class="st">"canvas"</span>, width<span class="op">=</span><span class="st">"800"</span>, height<span class="op">=</span><span class="st">"600"</span>)</span>
<span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a> color_picker <span class="op">=</span> Input(<span class="bu">type</span><span class="op">=</span><span class="st">"color"</span>, <span class="bu">id</span><span class="op">=</span><span class="st">"color-picker"</span>, value<span class="op">=</span><span class="st">"#3CDD8C"</span>)</span>
<span id="cb8-8"><a href="#cb8-8" aria-hidden="true" tabindex="-1"></a> brush_size <span class="op">=</span> Input(<span class="bu">type</span><span class="op">=</span><span class="st">"range"</span>, <span class="bu">id</span><span class="op">=</span><span class="st">"brush-size"</span>, <span class="bu">min</span><span class="op">=</span><span class="st">"1"</span>, <span class="bu">max</span><span class="op">=</span><span class="st">"50"</span>, value<span class="op">=</span><span class="st">"10"</span>)</span>
<span id="cb8-9"><a href="#cb8-9" aria-hidden="true" tabindex="-1"></a> </span>
<span id="cb8-10"><a href="#cb8-10" aria-hidden="true" tabindex="-1"></a> js <span class="op">=</span> <span class="st">"""</span></span>
<span id="cb8-11"><a href="#cb8-11" aria-hidden="true" tabindex="-1"></a><span class="st"> var canvas = new fabric.Canvas('canvas');</span></span>
<span id="cb8-12"><a href="#cb8-12" aria-hidden="true" tabindex="-1"></a><span class="st"> canvas.isDrawingMode = true;</span></span>
<span id="cb8-13"><a href="#cb8-13" aria-hidden="true" tabindex="-1"></a><span class="st"> canvas.freeDrawingBrush.color = '#3CDD8C';</span></span>
<span id="cb8-14"><a href="#cb8-14" aria-hidden="true" tabindex="-1"></a><span class="st"> canvas.freeDrawingBrush.width = 10;</span></span>
<span id="cb8-15"><a href="#cb8-15" aria-hidden="true" tabindex="-1"></a><span class="st"> </span></span>
<span id="cb8-16"><a href="#cb8-16" aria-hidden="true" tabindex="-1"></a><span class="st"> document.getElementById('color-picker').onchange = function() {</span></span>
<span id="cb8-17"><a href="#cb8-17" aria-hidden="true" tabindex="-1"></a><span class="st"> canvas.freeDrawingBrush.color = this.value;</span></span>
<span id="cb8-18"><a href="#cb8-18" aria-hidden="true" tabindex="-1"></a><span class="st"> };</span></span>
<span id="cb8-19"><a href="#cb8-19" aria-hidden="true" tabindex="-1"></a><span class="st"> </span></span>
<span id="cb8-20"><a href="#cb8-20" aria-hidden="true" tabindex="-1"></a><span class="st"> document.getElementById('brush-size').oninput = function() {</span></span>
<span id="cb8-21"><a href="#cb8-21" aria-hidden="true" tabindex="-1"></a><span class="st"> canvas.freeDrawingBrush.width = parseInt(this.value, 10);</span></span>
<span id="cb8-22"><a href="#cb8-22" aria-hidden="true" tabindex="-1"></a><span class="st"> };</span></span>
<span id="cb8-23"><a href="#cb8-23" aria-hidden="true" tabindex="-1"></a><span class="st"> """</span></span>
<span id="cb8-24"><a href="#cb8-24" aria-hidden="true" tabindex="-1"></a> </span>
<span id="cb8-25"><a href="#cb8-25" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Titled(<span class="ss">f"Room: </span><span class="sc">{</span>room<span class="sc">.</span>name<span class="sc">}</span><span class="ss">"</span>,</span>
<span id="cb8-26"><a href="#cb8-26" aria-hidden="true" tabindex="-1"></a> A(Button(<span class="st">"Leave Room"</span>), href<span class="op">=</span><span class="st">"/"</span>),</span>
<span id="cb8-27"><a href="#cb8-27" aria-hidden="true" tabindex="-1"></a> canvas,</span>
<span id="cb8-28"><a href="#cb8-28" aria-hidden="true" tabindex="-1"></a> Div(color_picker, brush_size),</span>
<span id="cb8-29"><a href="#cb8-29" aria-hidden="true" tabindex="-1"></a> Script(src<span class="op">=</span><span class="st">"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"</span>),</span>
<span id="cb8-30"><a href="#cb8-30" aria-hidden="true" tabindex="-1"></a> Script(js))</span>
<span id="cb8-31"><a href="#cb8-31" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb8-32"><a href="#cb8-32" aria-hidden="true" tabindex="-1"></a><span class="co"># ... (keep the serve() part)</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>Now we’ve got a drawing canvas! FastHTML makes it easy to include external libraries and add custom JavaScript.</p>
</section>
<section id="saving-and-loading-canvases" class="level4">
<h4 class="anchored" data-anchor-id="saving-and-loading-canvases">Saving and Loading Canvases 💾</h4>
<p>Now that we have a working drawing canvas, let’s add the ability to save and load drawings. We’ll modify our database schema to include a <code>canvas_data</code> field, and add new routes for saving and loading canvas data. Here’s how we’ll update our code:</p>
<ol type="1">
<li>Modify the database schema:</li>
</ol>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb9" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a>app,rt,rooms,Room <span class="op">=</span> fast_app(<span class="st">'data/drawapp.db'</span>, render<span class="op">=</span>render, <span class="bu">id</span><span class="op">=</span><span class="bu">int</span>, name<span class="op">=</span><span class="bu">str</span>, created_at<span class="op">=</span><span class="bu">str</span>, canvas_data<span class="op">=</span><span class="bu">str</span>, pk<span class="op">=</span><span class="st">'id'</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<ol start="2" type="1">
<li>Add a save button that grabs the canvas’ state and sends it to the server:</li>
</ol>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb10" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms/</span><span class="sc">{id}</span><span class="st">"</span>)</span>
<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> get(<span class="bu">id</span>:<span class="bu">int</span>):</span>
<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a> room <span class="op">=</span> rooms[<span class="bu">id</span>]</span>
<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a> canvas <span class="op">=</span> Canvas(<span class="bu">id</span><span class="op">=</span><span class="st">"canvas"</span>, width<span class="op">=</span><span class="st">"800"</span>, height<span class="op">=</span><span class="st">"600"</span>)</span>
<span id="cb10-5"><a href="#cb10-5" aria-hidden="true" tabindex="-1"></a> color_picker <span class="op">=</span> Input(<span class="bu">type</span><span class="op">=</span><span class="st">"color"</span>, <span class="bu">id</span><span class="op">=</span><span class="st">"color-picker"</span>, value<span class="op">=</span><span class="st">"#3CDD8C"</span>)</span>
<span id="cb10-6"><a href="#cb10-6" aria-hidden="true" tabindex="-1"></a> brush_size <span class="op">=</span> Input(<span class="bu">type</span><span class="op">=</span><span class="st">"range"</span>, <span class="bu">id</span><span class="op">=</span><span class="st">"brush-size"</span>, <span class="bu">min</span><span class="op">=</span><span class="st">"1"</span>, <span class="bu">max</span><span class="op">=</span><span class="st">"50"</span>, value<span class="op">=</span><span class="st">"10"</span>)</span>
<span id="cb10-7"><a href="#cb10-7" aria-hidden="true" tabindex="-1"></a> save_button <span class="op">=</span> Button(<span class="st">"Save Canvas"</span>, <span class="bu">id</span><span class="op">=</span><span class="st">"save-canvas"</span>, hx_post<span class="op">=</span><span class="ss">f"/rooms/</span><span class="sc">{</span><span class="bu">id</span><span class="sc">}</span><span class="ss">/save"</span>, hx_vals<span class="op">=</span><span class="st">"js:{canvas_data: JSON.stringify(canvas.toJSON())}"</span>)</span>
<span id="cb10-8"><a href="#cb10-8" aria-hidden="true" tabindex="-1"></a> <span class="co"># ... (rest of the function remains the same)</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<ol start="3" type="1">
<li>Add routes for saving and loading canvas data:</li>
</ol>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb11" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms/</span><span class="sc">{id}</span><span class="st">/save"</span>)</span>
<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> post(<span class="bu">id</span>:<span class="bu">int</span>, canvas_data:<span class="bu">str</span>):</span>
<span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a> rooms.update({<span class="st">'canvas_data'</span>: canvas_data}, <span class="bu">id</span>)</span>
<span id="cb11-4"><a href="#cb11-4" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> <span class="st">"Canvas saved successfully"</span></span>
<span id="cb11-5"><a href="#cb11-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-6"><a href="#cb11-6" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms/</span><span class="sc">{id}</span><span class="st">/load"</span>)</span>
<span id="cb11-7"><a href="#cb11-7" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> get(<span class="bu">id</span>:<span class="bu">int</span>):</span>
<span id="cb11-8"><a href="#cb11-8" aria-hidden="true" tabindex="-1"></a> room <span class="op">=</span> rooms[<span class="bu">id</span>]</span>
<span id="cb11-9"><a href="#cb11-9" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> room.canvas_data <span class="cf">if</span> room.canvas_data <span class="cf">else</span> <span class="st">"</span><span class="sc">{}</span><span class="st">"</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<ol start="4" type="1">
<li>Update the JavaScript to load existing canvas data:</li>
</ol>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb12" data-filename="main.py"><pre class="sourceCode javascript code-with-copy"><code class="sourceCode javascript"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a>js <span class="op">=</span> f<span class="st">"""</span></span>
<span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> canvas <span class="op">=</span> <span class="kw">new</span> fabric<span class="op">.</span><span class="fu">Canvas</span>(<span class="st">'canvas'</span>)<span class="op">;</span></span>
<span id="cb12-3"><a href="#cb12-3" aria-hidden="true" tabindex="-1"></a> canvas<span class="op">.</span><span class="at">isDrawingMode</span> <span class="op">=</span> <span class="kw">true</span><span class="op">;</span></span>
<span id="cb12-4"><a href="#cb12-4" aria-hidden="true" tabindex="-1"></a> canvas<span class="op">.</span><span class="at">freeDrawingBrush</span><span class="op">.</span><span class="at">color</span> <span class="op">=</span> <span class="st">'#3CDD8C'</span><span class="op">;</span></span>
<span id="cb12-5"><a href="#cb12-5" aria-hidden="true" tabindex="-1"></a> canvas<span class="op">.</span><span class="at">freeDrawingBrush</span><span class="op">.</span><span class="at">width</span> <span class="op">=</span> <span class="dv">10</span><span class="op">;</span></span>
<span id="cb12-6"><a href="#cb12-6" aria-hidden="true" tabindex="-1"></a> <span class="co">// Load existing canvas data</span></span>
<span id="cb12-7"><a href="#cb12-7" aria-hidden="true" tabindex="-1"></a> <span class="fu">fetch</span>(<span class="vs">`/rooms/{id}/load`</span>)</span>
<span id="cb12-8"><a href="#cb12-8" aria-hidden="true" tabindex="-1"></a> <span class="op">.</span><span class="fu">then</span>(response <span class="kw">=&gt;</span> response<span class="op">.</span><span class="fu">json</span>())</span>
<span id="cb12-9"><a href="#cb12-9" aria-hidden="true" tabindex="-1"></a> <span class="op">.</span><span class="fu">then</span>(data <span class="kw">=&gt;</span> {{</span>
<span id="cb12-10"><a href="#cb12-10" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (data <span class="op">&amp;&amp;</span> <span class="bu">Object</span><span class="op">.</span><span class="fu">keys</span>(data)<span class="op">.</span><span class="at">length</span> <span class="op">&gt;</span> <span class="dv">0</span>) {{</span>
<span id="cb12-11"><a href="#cb12-11" aria-hidden="true" tabindex="-1"></a> canvas<span class="op">.</span><span class="fu">loadFromJSON</span>(data<span class="op">,</span> canvas<span class="op">.</span><span class="at">renderAll</span><span class="op">.</span><span class="fu">bind</span>(canvas))<span class="op">;</span></span>
<span id="cb12-12"><a href="#cb12-12" aria-hidden="true" tabindex="-1"></a> }}</span>
<span id="cb12-13"><a href="#cb12-13" aria-hidden="true" tabindex="-1"></a> }})<span class="op">;</span></span>
<span id="cb12-14"><a href="#cb12-14" aria-hidden="true" tabindex="-1"></a> </span>
<span id="cb12-15"><a href="#cb12-15" aria-hidden="true" tabindex="-1"></a> <span class="co">// ... (rest of the JavaScript remains the same)</span></span>
<span id="cb12-16"><a href="#cb12-16" aria-hidden="true" tabindex="-1"></a><span class="st">"""</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>With these changes, users can now save their drawings and load them when they return to the room. The canvas data is stored as a JSON string in the database, allowing for easy serialization and deserialization. Try it out! Create a new room, make a drawing, save it, and then reload the page. You should see your drawing reappear, ready for further editing.</p>
<p>Here is the completed code:</p>
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>main.py</strong></pre>
</div>
<div class="sourceCode" id="cb13" data-filename="main.py"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> fasthtml.common <span class="im">import</span> <span class="op">*</span></span>
<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> datetime <span class="im">import</span> datetime</span>
<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> render(room):</span>
<span id="cb13-5"><a href="#cb13-5" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Li(A(room.name, href<span class="op">=</span><span class="ss">f"/rooms/</span><span class="sc">{</span>room<span class="sc">.</span><span class="bu">id</span><span class="sc">}</span><span class="ss">"</span>))</span>
<span id="cb13-6"><a href="#cb13-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-7"><a href="#cb13-7" aria-hidden="true" tabindex="-1"></a>app,rt,rooms,Room <span class="op">=</span> fast_app(<span class="st">'data/drawapp.db'</span>, render<span class="op">=</span>render, <span class="bu">id</span><span class="op">=</span><span class="bu">int</span>, name<span class="op">=</span><span class="bu">str</span>, created_at<span class="op">=</span><span class="bu">str</span>, canvas_data<span class="op">=</span><span class="bu">str</span>, pk<span class="op">=</span><span class="st">'id'</span>)</span>
<span id="cb13-8"><a href="#cb13-8" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-9"><a href="#cb13-9" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/"</span>)</span>
<span id="cb13-10"><a href="#cb13-10" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> get():</span>
<span id="cb13-11"><a href="#cb13-11" aria-hidden="true" tabindex="-1"></a> create_room <span class="op">=</span> Form(Input(<span class="bu">id</span><span class="op">=</span><span class="st">"name"</span>, name<span class="op">=</span><span class="st">"name"</span>, placeholder<span class="op">=</span><span class="st">"New Room Name"</span>),</span>
<span id="cb13-12"><a href="#cb13-12" aria-hidden="true" tabindex="-1"></a> Button(<span class="st">"Create Room"</span>),</span>
<span id="cb13-13"><a href="#cb13-13" aria-hidden="true" tabindex="-1"></a> hx_post<span class="op">=</span><span class="st">"/rooms"</span>, hx_target<span class="op">=</span><span class="st">"#rooms-list"</span>, hx_swap<span class="op">=</span><span class="st">"afterbegin"</span>)</span>
<span id="cb13-14"><a href="#cb13-14" aria-hidden="true" tabindex="-1"></a> rooms_list <span class="op">=</span> Ul(<span class="op">*</span>rooms(order_by<span class="op">=</span><span class="st">'id DESC'</span>), <span class="bu">id</span><span class="op">=</span><span class="st">'rooms-list'</span>)</span>
<span id="cb13-15"><a href="#cb13-15" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Titled(<span class="st">"QuickDraw"</span>, </span>
<span id="cb13-16"><a href="#cb13-16" aria-hidden="true" tabindex="-1"></a> create_room, rooms_list)</span>
<span id="cb13-17"><a href="#cb13-17" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-18"><a href="#cb13-18" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms"</span>)</span>
<span id="cb13-19"><a href="#cb13-19" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> post(room:Room):</span>
<span id="cb13-20"><a href="#cb13-20" aria-hidden="true" tabindex="-1"></a> room.created_at <span class="op">=</span> datetime.now().isoformat()</span>
<span id="cb13-21"><a href="#cb13-21" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> rooms.insert(room)</span>
<span id="cb13-22"><a href="#cb13-22" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-23"><a href="#cb13-23" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms/</span><span class="sc">{id}</span><span class="st">"</span>)</span>
<span id="cb13-24"><a href="#cb13-24" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> get(<span class="bu">id</span>:<span class="bu">int</span>):</span>
<span id="cb13-25"><a href="#cb13-25" aria-hidden="true" tabindex="-1"></a> room <span class="op">=</span> rooms[<span class="bu">id</span>]</span>
<span id="cb13-26"><a href="#cb13-26" aria-hidden="true" tabindex="-1"></a> canvas <span class="op">=</span> Canvas(<span class="bu">id</span><span class="op">=</span><span class="st">"canvas"</span>, width<span class="op">=</span><span class="st">"800"</span>, height<span class="op">=</span><span class="st">"600"</span>)</span>
<span id="cb13-27"><a href="#cb13-27" aria-hidden="true" tabindex="-1"></a> color_picker <span class="op">=</span> Input(<span class="bu">type</span><span class="op">=</span><span class="st">"color"</span>, <span class="bu">id</span><span class="op">=</span><span class="st">"color-picker"</span>, value<span class="op">=</span><span class="st">"#000000"</span>)</span>
<span id="cb13-28"><a href="#cb13-28" aria-hidden="true" tabindex="-1"></a> brush_size <span class="op">=</span> Input(<span class="bu">type</span><span class="op">=</span><span class="st">"range"</span>, <span class="bu">id</span><span class="op">=</span><span class="st">"brush-size"</span>, <span class="bu">min</span><span class="op">=</span><span class="st">"1"</span>, <span class="bu">max</span><span class="op">=</span><span class="st">"50"</span>, value<span class="op">=</span><span class="st">"10"</span>)</span>
<span id="cb13-29"><a href="#cb13-29" aria-hidden="true" tabindex="-1"></a> save_button <span class="op">=</span> Button(<span class="st">"Save Canvas"</span>, <span class="bu">id</span><span class="op">=</span><span class="st">"save-canvas"</span>, hx_post<span class="op">=</span><span class="ss">f"/rooms/</span><span class="sc">{</span><span class="bu">id</span><span class="sc">}</span><span class="ss">/save"</span>, hx_vals<span class="op">=</span><span class="st">"js:{canvas_data: JSON.stringify(canvas.toJSON())}"</span>)</span>
<span id="cb13-30"><a href="#cb13-30" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-31"><a href="#cb13-31" aria-hidden="true" tabindex="-1"></a> js <span class="op">=</span> <span class="ss">f"""</span></span>
<span id="cb13-32"><a href="#cb13-32" aria-hidden="true" tabindex="-1"></a><span class="ss"> var canvas = new fabric.Canvas('canvas');</span></span>
<span id="cb13-33"><a href="#cb13-33" aria-hidden="true" tabindex="-1"></a><span class="ss"> canvas.isDrawingMode = true;</span></span>
<span id="cb13-34"><a href="#cb13-34" aria-hidden="true" tabindex="-1"></a><span class="ss"> canvas.freeDrawingBrush.color = '#000000';</span></span>
<span id="cb13-35"><a href="#cb13-35" aria-hidden="true" tabindex="-1"></a><span class="ss"> canvas.freeDrawingBrush.width = 10;</span></span>
<span id="cb13-36"><a href="#cb13-36" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-37"><a href="#cb13-37" aria-hidden="true" tabindex="-1"></a><span class="ss"> // Load existing canvas data</span></span>
<span id="cb13-38"><a href="#cb13-38" aria-hidden="true" tabindex="-1"></a><span class="ss"> fetch(`/rooms/</span><span class="sc">{</span><span class="bu">id</span><span class="sc">}</span><span class="ss">/load`)</span></span>
<span id="cb13-39"><a href="#cb13-39" aria-hidden="true" tabindex="-1"></a><span class="ss"> .then(response =&gt; response.json())</span></span>
<span id="cb13-40"><a href="#cb13-40" aria-hidden="true" tabindex="-1"></a><span class="ss"> .then(data =&gt; </span><span class="ch">{{</span></span>
<span id="cb13-41"><a href="#cb13-41" aria-hidden="true" tabindex="-1"></a><span class="ss"> if (data &amp;&amp; Object.keys(data).length &gt; 0) </span><span class="ch">{{</span></span>
<span id="cb13-42"><a href="#cb13-42" aria-hidden="true" tabindex="-1"></a><span class="ss"> canvas.loadFromJSON(data, canvas.renderAll.bind(canvas));</span></span>
<span id="cb13-43"><a href="#cb13-43" aria-hidden="true" tabindex="-1"></a><span class="ss"> </span><span class="ch">}}</span></span>
<span id="cb13-44"><a href="#cb13-44" aria-hidden="true" tabindex="-1"></a><span class="ss"> </span><span class="ch">}}</span><span class="ss">);</span></span>
<span id="cb13-45"><a href="#cb13-45" aria-hidden="true" tabindex="-1"></a><span class="ss"> </span></span>
<span id="cb13-46"><a href="#cb13-46" aria-hidden="true" tabindex="-1"></a><span class="ss"> document.getElementById('color-picker').onchange = function() </span><span class="ch">{{</span></span>
<span id="cb13-47"><a href="#cb13-47" aria-hidden="true" tabindex="-1"></a><span class="ss"> canvas.freeDrawingBrush.color = this.value;</span></span>
<span id="cb13-48"><a href="#cb13-48" aria-hidden="true" tabindex="-1"></a><span class="ss"> </span><span class="ch">}}</span><span class="ss">;</span></span>
<span id="cb13-49"><a href="#cb13-49" aria-hidden="true" tabindex="-1"></a><span class="ss"> </span></span>
<span id="cb13-50"><a href="#cb13-50" aria-hidden="true" tabindex="-1"></a><span class="ss"> document.getElementById('brush-size').oninput = function() </span><span class="ch">{{</span></span>
<span id="cb13-51"><a href="#cb13-51" aria-hidden="true" tabindex="-1"></a><span class="ss"> canvas.freeDrawingBrush.width = parseInt(this.value, 10);</span></span>
<span id="cb13-52"><a href="#cb13-52" aria-hidden="true" tabindex="-1"></a><span class="ss"> </span><span class="ch">}}</span><span class="ss">;</span></span>
<span id="cb13-53"><a href="#cb13-53" aria-hidden="true" tabindex="-1"></a><span class="ss"> """</span></span>
<span id="cb13-54"><a href="#cb13-54" aria-hidden="true" tabindex="-1"></a> </span>
<span id="cb13-55"><a href="#cb13-55" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> Titled(<span class="ss">f"Room: </span><span class="sc">{</span>room<span class="sc">.</span>name<span class="sc">}</span><span class="ss">"</span>,</span>
<span id="cb13-56"><a href="#cb13-56" aria-hidden="true" tabindex="-1"></a> A(Button(<span class="st">"Leave Room"</span>), href<span class="op">=</span><span class="st">"/"</span>),</span>
<span id="cb13-57"><a href="#cb13-57" aria-hidden="true" tabindex="-1"></a> canvas,</span>
<span id="cb13-58"><a href="#cb13-58" aria-hidden="true" tabindex="-1"></a> Div(color_picker, brush_size, save_button),</span>
<span id="cb13-59"><a href="#cb13-59" aria-hidden="true" tabindex="-1"></a> Script(src<span class="op">=</span><span class="st">"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"</span>),</span>
<span id="cb13-60"><a href="#cb13-60" aria-hidden="true" tabindex="-1"></a> Script(js))</span>
<span id="cb13-61"><a href="#cb13-61" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-62"><a href="#cb13-62" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms/</span><span class="sc">{id}</span><span class="st">/save"</span>)</span>
<span id="cb13-63"><a href="#cb13-63" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> post(<span class="bu">id</span>:<span class="bu">int</span>, canvas_data:<span class="bu">str</span>):</span>
<span id="cb13-64"><a href="#cb13-64" aria-hidden="true" tabindex="-1"></a> rooms.update({<span class="st">'canvas_data'</span>: canvas_data}, <span class="bu">id</span>)</span>
<span id="cb13-65"><a href="#cb13-65" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> <span class="st">"Canvas saved successfully"</span></span>
<span id="cb13-66"><a href="#cb13-66" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-67"><a href="#cb13-67" aria-hidden="true" tabindex="-1"></a><span class="at">@rt</span>(<span class="st">"/rooms/</span><span class="sc">{id}</span><span class="st">/load"</span>)</span>
<span id="cb13-68"><a href="#cb13-68" aria-hidden="true" tabindex="-1"></a><span class="cf">async</span> <span class="kw">def</span> get(<span class="bu">id</span>:<span class="bu">int</span>):</span>
<span id="cb13-69"><a href="#cb13-69" aria-hidden="true" tabindex="-1"></a> room <span class="op">=</span> rooms[<span class="bu">id</span>]</span>
<span id="cb13-70"><a href="#cb13-70" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> room.canvas_data <span class="cf">if</span> room.canvas_data <span class="cf">else</span> <span class="st">"</span><span class="sc">{}</span><span class="st">"</span></span>
<span id="cb13-71"><a href="#cb13-71" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-72"><a href="#cb13-72" aria-hidden="true" tabindex="-1"></a>serve()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
</section>
</section>
<section id="deploying-to-railway" class="level3">
<h3 class="anchored" data-anchor-id="deploying-to-railway">Deploying to Railway</h3>
<p>You can deploy your website to a number of hosting providers, for this tutorial we’ll be using Railway. To get started, make sure you create an <a href="https://railway.app/">account</a> and install the <a href="https://docs.railway.app/guides/cli">Railway CLI</a>. Once installed, make sure to run <code>railway login</code> to log in to your account.</p>
<p>To make deploying your website as easy as possible, FastHTMl comes with a built in CLI tool that will handle most of the deployment process for you. To deploy your website, run the following command in your terminal in the root directory of your project:</p>
<div class="sourceCode" id="cb14"><pre class="sourceCode sh code-with-copy"><code class="sourceCode bash"><span id="cb14-1"><a href="#cb14-1" aria-hidden="true" tabindex="-1"></a><span class="ex">fh_railway_deploy</span> quickdraw</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="callout callout-style-default callout-note callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
Note
</div>
</div>
<div class="callout-body-container callout-body">
<p>Your app must be located in a <code>main.py</code> file for this to work.</p>
</div>
</div>
</section>
<section id="conclusion-youre-a-fasthtml-artist-now" class="level3">
<h3 class="anchored" data-anchor-id="conclusion-youre-a-fasthtml-artist-now">Conclusion: You’re a FastHTML Artist Now! 🎨🚀</h3>
<p>Congratulations! You’ve just built a sleek, interactive web application using FastHTML. Let’s recap what we’ve learned:</p>
<ol type="1">
<li>FastHTML allows you to create dynamic web apps with minimal code.</li>
<li>We used FastHTML’s routing system to handle different pages and actions.</li>
<li>We integrated with a SQLite database to store room information and canvas data.</li>
<li>We utilized Fabric.js to create an interactive drawing canvas.</li>
<li>We implemented features like color picking, brush size adjustment, and canvas saving.</li>
<li>We used HTMX for seamless, partial page updates without full reloads.</li>
<li>We learned how to deploy our FastHTML application to Railway for easy hosting.</li>
</ol>
<p>You’ve taken your first steps into the world of FastHTML development. From here, the possibilities are endless! You could enhance the drawing app further by adding features like:</p>
<ul>
<li>Implementing different drawing tools (e.g., shapes, text)</li>
<li>Adding user authentication</li>
<li>Creating a gallery of saved drawings</li>
<li>Implementing real-time collaborative drawing using WebSockets</li>
</ul>
<p>Whatever you choose to build next, FastHTML has got your back. Now go forth and create something awesome! Happy coding! 🖼️🚀</p>
</section>
</section>
</main> <!-- /main -->
<script id="quarto-html-after-body" type="application/javascript">
window.document.addEventListener("DOMContentLoaded", function (event) {
const toggleBodyColorMode = (bsSheetEl) => {
const mode = bsSheetEl.getAttribute("data-mode");
const bodyEl = window.document.querySelector("body");
if (mode === "dark") {
bodyEl.classList.add("quarto-dark");
bodyEl.classList.remove("quarto-light");
} else {
bodyEl.classList.add("quarto-light");
bodyEl.classList.remove("quarto-dark");
}
}
const toggleBodyColorPrimary = () => {
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
if (bsSheetEl) {
toggleBodyColorMode(bsSheetEl);
}
}
toggleBodyColorPrimary();
const icon = "";
const anchorJS = new window.AnchorJS();
anchorJS.options = {
placement: 'right',
icon: icon
};
anchorJS.add('.anchored');
const isCodeAnnotation = (el) => {
for (const clz of el.classList) {
if (clz.startsWith('code-annotation-')) {
return true;
}
}
return false;
}
const onCopySuccess = function(e) {
// button target
const button = e.trigger;
// don't keep focus
button.blur();
// flash "checked"
button.classList.add('code-copy-button-checked');
var currentTitle = button.getAttribute("title");
button.setAttribute("title", "Copied!");
let tooltip;
if (window.bootstrap) {
button.setAttribute("data-bs-toggle", "tooltip");
button.setAttribute("data-bs-placement", "left");
button.setAttribute("data-bs-title", "Copied!");
tooltip = new bootstrap.Tooltip(button,
{ trigger: "manual",
customClass: "code-copy-button-tooltip",
offset: [0, -8]});
tooltip.show();
}
setTimeout(function() {
if (tooltip) {
tooltip.hide();
button.removeAttribute("data-bs-title");
button.removeAttribute("data-bs-toggle");
button.removeAttribute("data-bs-placement");
}
button.setAttribute("title", currentTitle);
button.classList.remove('code-copy-button-checked');
}, 1000);
// clear code selection
e.clearSelection();
}
const getTextToCopy = function(trigger) {
const codeEl = trigger.previousElementSibling.cloneNode(true);
for (const childEl of codeEl.children) {
if (isCodeAnnotation(childEl)) {
childEl.remove();
}
}
return codeEl.innerText;
}
const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
text: getTextToCopy
});
clipboard.on('success', onCopySuccess);
if (window.document.getElementById('quarto-embedded-source-code-modal')) {
const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
text: getTextToCopy,
container: window.document.getElementById('quarto-embedded-source-code-modal')
});
clipboardModal.on('success', onCopySuccess);
}
var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
var mailtoRegex = new RegExp(/^mailto:/);
var filterRegex = new RegExp("https:\/\/www\.fastht\.ml\/docs\/");
var isInternal = (href) => {
return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
}
// Inspect non-navigation links and adorn them if external
var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
for (var i=0; i<links.length; i++) {
const link = links[i];
if (!isInternal(link.href)) {
// undo the damage that might have been done by quarto-nav.js in the case of
// links that we want to consider external
if (link.dataset.originalHref !== undefined) {
link.href = link.dataset.originalHref;
}
}
}
function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
const config = {
allowHTML: true,
maxWidth: 500,
delay: 100,
arrow: false,
appendTo: function(el) {
return el.parentElement;
},
interactive: true,
interactiveBorder: 10,
theme: 'quarto',
placement: 'bottom-start',
};
if (contentFn) {
config.content = contentFn;
}
if (onTriggerFn) {
config.onTrigger = onTriggerFn;
}
if (onUntriggerFn) {
config.onUntrigger = onUntriggerFn;
}
window.tippy(el, config);
}
const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
for (var i=0; i<noterefs.length; i++) {
const ref = noterefs[i];
tippyHover(ref, function() {
// use id or data attribute instead here
let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
try { href = new URL(href).hash; } catch {}
const id = href.replace(/^#\/?/, "");
const note = window.document.getElementById(id);
if (note) {
return note.innerHTML;
} else {
return "";
}
});
}
const xrefs = window.document.querySelectorAll('a.quarto-xref');
const processXRef = (id, note) => {
// Strip column container classes
const stripColumnClz = (el) => {
el.classList.remove("page-full", "page-columns");
if (el.children) {
for (const child of el.children) {
stripColumnClz(child);
}
}
}
stripColumnClz(note)
if (id === null || id.startsWith('sec-')) {
// Special case sections, only their first couple elements
const container = document.createElement("div");
if (note.children && note.children.length > 2) {
container.appendChild(note.children[0].cloneNode(true));
for (let i = 1; i < note.children.length; i++) {
const child = note.children[i];
if (child.tagName === "P" && child.innerText === "") {
continue;
} else {
container.appendChild(child.cloneNode(true));
break;
}
}
if (window.Quarto?.typesetMath) {
window.Quarto.typesetMath(container);
}
return container.innerHTML
} else {
if (window.Quarto?.typesetMath) {
window.Quarto.typesetMath(note);
}
return note.innerHTML;
}
} else {
// Remove any anchor links if they are present
const anchorLink = note.querySelector('a.anchorjs-link');
if (anchorLink) {
anchorLink.remove();
}
if (window.Quarto?.typesetMath) {
window.Quarto.typesetMath(note);
}
if (note.classList.contains("callout")) {
return note.outerHTML;
} else {
return note.innerHTML;
}
}
}
for (var i=0; i<xrefs.length; i++) {
const xref = xrefs[i];
tippyHover(xref, undefined, function(instance) {
instance.disable();
let url = xref.getAttribute('href');
let hash = undefined;
if (url.startsWith('#')) {
hash = url;
} else {
try { hash = new URL(url).hash; } catch {}
}
if (hash) {
const id = hash.replace(/^#\/?/, "");
const note = window.document.getElementById(id);
if (note !== null) {
try {
const html = processXRef(id, note.cloneNode(true));
instance.setContent(html);
} finally {
instance.enable();
instance.show();
}
} else {
// See if we can fetch this
fetch(url.split('#')[0])
.then(res => res.text())
.then(html => {
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(html, "text/html");
const note = htmlDoc.getElementById(id);
if (note !== null) {
const html = processXRef(id, note);
instance.setContent(html);
}
}).finally(() => {
instance.enable();
instance.show();
});
}
} else {
// See if we can fetch a full url (with no hash to target)
// This is a special case and we should probably do some content thinning / targeting
fetch(url)
.then(res => res.text())
.then(html => {
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(html, "text/html");
const note = htmlDoc.querySelector('main.content');
if (note !== null) {
// This should only happen for chapter cross references
// (since there is no id in the URL)
// remove the first header
if (note.children.length > 0 && note.children[0].tagName === "HEADER") {
note.children[0].remove();
}
const html = processXRef(null, note);
instance.setContent(html);
}
}).finally(() => {
instance.enable();
instance.show();
});
}
}, function(instance) {
});
}
let selectedAnnoteEl;
const selectorForAnnotation = ( cell, annotation) => {
let cellAttr = 'data-code-cell="' + cell + '"';
let lineAttr = 'data-code-annotation="' + annotation + '"';
const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
return selector;
}
const selectCodeLines = (annoteEl) => {
const doc = window.document;
const targetCell = annoteEl.getAttribute("data-target-cell");
const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
const lines = annoteSpan.getAttribute("data-code-lines").split(",");
const lineIds = lines.map((line) => {
return targetCell + "-" + line;
})
let top = null;
let height = null;
let parent = null;
if (lineIds.length > 0) {
//compute the position of the single el (top and bottom and make a div)
const el = window.document.getElementById(lineIds[0]);
top = el.offsetTop;
height = el.offsetHeight;
parent = el.parentElement.parentElement;
if (lineIds.length > 1) {
const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
const bottom = lastEl.offsetTop + lastEl.offsetHeight;
height = bottom - top;
}
if (top !== null && height !== null && parent !== null) {
// cook up a div (if necessary) and position it
let div = window.document.getElementById("code-annotation-line-highlight");
if (div === null) {
div = window.document.createElement("div");
div.setAttribute("id", "code-annotation-line-highlight");
div.style.position = 'absolute';
parent.appendChild(div);
}
div.style.top = top - 2 + "px";
div.style.height = height + 4 + "px";
div.style.left = 0;
let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
if (gutterDiv === null) {
gutterDiv = window.document.createElement("div");
gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
gutterDiv.style.position = 'absolute';
const codeCell = window.document.getElementById(targetCell);
const gutter = codeCell.querySelector('.code-annotation-gutter');
gutter.appendChild(gutterDiv);
}
gutterDiv.style.top = top - 2 + "px";
gutterDiv.style.height = height + 4 + "px";
}
selectedAnnoteEl = annoteEl;
}
};
const unselectCodeLines = () => {
const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
elementsIds.forEach((elId) => {
const div = window.document.getElementById(elId);
if (div) {
div.remove();
}
});
selectedAnnoteEl = undefined;
};
// Handle positioning of the toggle
window.addEventListener(
"resize",
throttle(() => {
elRect = undefined;
if (selectedAnnoteEl) {
selectCodeLines(selectedAnnoteEl);
}
}, 10)
);
function throttle(fn, ms) {
let throttle = false;
let timer;
return (...args) => {
if(!throttle) { // first call gets through
fn.apply(this, args);
throttle = true;
} else { // all the others get throttled
if(timer) clearTimeout(timer); // cancel #2
timer = setTimeout(() => {
fn.apply(this, args);
timer = throttle = false;
}, ms);
}
};
}
// Attach click handler to the DT
const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
for (const annoteDlNode of annoteDls) {
annoteDlNode.addEventListener('click', (event) => {
const clickedEl = event.target;
if (clickedEl !== selectedAnnoteEl) {
unselectCodeLines();
const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
if (activeEl) {
activeEl.classList.remove('code-annotation-active');
}
selectCodeLines(clickedEl);
clickedEl.classList.add('code-annotation-active');
} else {
// Unselect the line
unselectCodeLines();
clickedEl.classList.remove('code-annotation-active');
}
});
}
const findCites = (el) => {
const parentEl = el.parentElement;
if (parentEl) {
const cites = parentEl.dataset.cites;
if (cites) {
return {
el,
cites: cites.split(' ')
};
} else {
return findCites(el.parentElement)
}
} else {
return undefined;
}
};
var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
for (var i=0; i<bibliorefs.length; i++) {
const ref = bibliorefs[i];
const citeInfo = findCites(ref);
if (citeInfo) {
tippyHover(citeInfo.el, function() {
var popup = window.document.createElement('div');
citeInfo.cites.forEach(function(cite) {
var citeDiv = window.document.createElement('div');
citeDiv.classList.add('hanging-indent');
citeDiv.classList.add('csl-entry');
var biblioDiv = window.document.getElementById('ref-' + cite);
if (biblioDiv) {
citeDiv.innerHTML = biblioDiv.innerHTML;
}
popup.appendChild(citeDiv);
});
return popup.innerHTML;
});
}
}
});
</script>
</div> <!-- /content -->
<footer class="footer"><div class="nav-footer"><div class="nav-footer-center"><div class="toc-actions d-sm-block d-md-none"><ul><li><a href="https://github.com/AnswerDotAI/fasthtml/issues/new" class="toc-action"><i class="bi bi-github"></i>Report an issue</a></li></ul></div></div></div></footer></body></html>