https://fastht.ml/about/vision

1 <!doctype html>
2 <html>
3   <head>
4     <title>The FastHTML Vision</title>
5     <link rel="canonical" href="https://fastht.ml/about/vision">
6     <meta charset="utf-8">
7     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

8<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js"></script>

8<script src="https://cdn.jsdelivr.net/gh/answerdotai/[email protected]/fasthtml.js"></script>

8<script src="https://cdn.jsdelivr.net/gh/answerdotai/surreal@main/surreal.js"></script>

8<script src="https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js"></script>

8     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/core.min.css">

9<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/core.iife.js"></script>

9<script src="https://cdn.tailwindcss.com/3.4.16"></script>

9<script>
10    tailwind.config = {
11        darkMode: 'selector',
12    }
13    </script>

13<script>
14        const htmlElement = document.documentElement;
15        
16          const __FRANKEN__ = JSON.parse(localStorage.getItem("__FRANKEN__") || "{}");
17    
18htmlElement.classList.remove("dark");
19          htmlElement.classList.add(__FRANKEN__.theme || "uk-theme-blue");
20          htmlElement.classList.add(__FRANKEN__.radii || "uk-radii-sm");
21          htmlElement.classList.add(__FRANKEN__.shadows || "uk-shadows-sm");
22          htmlElement.classList.add(__FRANKEN__.font || "uk-font-sm");
23    </script>

23     <style>
24.monster-navbar.navbar-bold a {
25    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
26}
27.monster-navbar.navbar-bold a.uk-active {
28    transform: scale(1.15) ;
29    font-weight: bold;
30    text-shadow: 0 0 12px rgba(var(--p-rgb), 0.4);
31    letter-spacing: 0.02em;
32    color: hsl(var(--p) / 1);
33}
34.monster-navbar.navbar-underline a.uk-active { position: relative; }
35.monster-navbar.navbar-underline a.uk-active::after {
36    content: &#x27;&#x27;;
37    position: absolute;
38    left: 0;
39    bottom: -2px;
40    width: 100%;
41    height: 2px;
42    background: currentColor;
43    animation: slideIn 0.3s ease forwards;
44}
45@keyframes slideIn {
46    from { transform: scaleX(0); }
47    to { transform: scaleX(1); }
48}
49</style>

50<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/icon.iife.js"></script>

50     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css">
51     <style>
52:root {
53  --b1: from hsl(var(--background)) l c h;
54  --bc: from hsl(var(--foreground)) l c h;
55  --m: from hsl(var(--muted)) l c h;
56  --mc: from hsl(var(--muted-foreground)) l c h;
57  --po: from hsl(var(--popover)) l c h;
58  --poc: from hsl(var(--popover-foreground)) l c h;
59  --b2: from hsl(var(--card)) l c h;
60  --b2c: from hsl(var(--card-foreground)) l c h;
61  --br: from hsl(var(--border)) l c h;
62  --in: from hsl(var(--input)) l c h;
63  --p: from hsl(var(--primary)) l c h;
64  --pc: from hsl(var(--primary-foreground)) l c h;
65  --s: from hsl(var(--secondary)) l c h;
66  --sc: from hsl(var(--secondary-foreground)) l c h;
67  --a: from hsl(var(--accent)) l c h;
68  --ac: from hsl(var(--accent-foreground)) l c h;
69  --er: from hsl(var(--destructive)) l c h;
70  --erc: from hsl(var(--destructive-foreground)) l c h;
71  --b3: from hsl(var(--ring)) l c h;
72  --ch1: from hsl(var(--chart-1)) l c h;
73  --ch2: from hsl(var(--chart-2)) l c h;
74  --ch3: from hsl(var(--chart-3)) l c h;
75  --ch4: from hsl(var(--chart-4)) l c h;
76  --ch5: from hsl(var(--chart-5)) l c h;
77  --rd: var(--radius);
78}
79</style>

80<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>

80<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/python.min.js"></script>

80     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-light.css" id="hljs-light">
81     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.css" id="hljs-dark">

82<script src="https://cdn.jsdelivr.net/gh/arronhunt/highlightjs-copy/dist/highlightjs-copy.min.js"></script>

82     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/arronhunt/highlightjs-copy/dist/highlightjs-copy.min.css">

83<script type="module">
84                    hljs.addPlugin(new CopyButtonPlugin());
85                    hljs.configure({
86                        cssSelector: 'pre code',
87                        languages: ['python'],
88                        ignoreUnescapedHTML: true
89                    });
90                    function updateTheme() {
91                        const isDark = document.documentElement.classList.contains('dark');
92                        document.getElementById('hljs-dark').disabled = !isDark;
93                        document.getElementById('hljs-light').disabled = isDark;
94                    }
95                    new MutationObserver(mutations =>
96                        mutations.forEach(m => m.target.tagName === 'HTML' &&
97                            m.attributeName === 'class' && updateTheme())
98                    ).observe(document.documentElement, { attributes: true });
99                    updateTheme();
100                    htmx.onLoad(hljs.highlightAll);
101                </script>

101<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/html.min.js"></script>

101     <meta property="og:image" content="https://fastht.ml/about/assets/og-sq.png">
102     <meta property="og:site_name" content="fastht.ml/about">
103     <meta property="og:image:type" content="image/png">
104     <meta property="og:image:width" content="1200">
105     <meta property="og:image:height" content="630">
106     <meta property="og:type" content="website">
107     <meta property="og:url" content="https://fastht.ml/about">
108     <meta property="og:title" content="About FastHTML">
109     <meta property="og:description" content="Learn the foundations of FastHTML">
110     <meta name="twitter:image" content="https://fastht.ml/about/assets/og-sq.png">
111     <meta name="twitter:card" content="summary">
112     <meta name="twitter:title" content="About FastHTML">
113     <meta name="twitter:description" content="Learn the foundations of FastHTML">
114     <meta name="twitter:site" content="@answerdotai">
115   </head>
116   <body class=" bg-background text-foreground">
117     <div class="uk-container py-8 mb-4 uk-container-xl">
118       <div>
119         <div class="monster-navbar bg-[#3cdd8c] rounded-t-3xl p-2 py-5 px-4">
120           <div class="flex justify-between items-center w-full">
121             <div class="flex justify-start items-center space-x-4">
122<a href="https://fastht.ml"><img src="assets/logo.svg"></a>               <div class="hidden md:flex space-x-4">
123<a href="/about" class=" text-lg hover:text-yellow-400/60 transition-colors text-sm">About</a><a href="/about/vision" class="font-bold text-lg hover:text-yellow-400/60 transition-colors text-sm">Vision</a><a href="/about/foundation" class=" text-lg hover:text-yellow-400/60 transition-colors text-sm">Foundations</a><a href="/about/tech" class=" text-lg hover:text-yellow-400/60 transition-colors text-sm">Technology</a><a href="/about/components" class=" text-lg hover:text-yellow-400/60 transition-colors text-sm">Components</a><a href="javascript:void(0)" disabled uk-tooltip="No limits!" class="text-gray-500 dark:text-gray-200 text-lg hover:text-yellow-400/60 transition-colors text-sm">Limits</a>               </div>
124             </div>
125<a href="#" data-uk-toggle="target: #_SsmHYQX3TieiDin2oabU5g; cls: hidden" class="md:hidden"><uk-icon icon="menu" height="30" width="30"></uk-icon></a>             <div class="items-center space-x-4 hidden md:flex">
126<a href="/docs" target="_blank" class="text-gray-800 text-lg hover:text-yellow-400/60 transition-colors text-sm">Docs</a><a href="https://github.com/AnswerDotAI/fasthtml" target="_blank" class="text-gray-800 text-lg hover:text-yellow-400/60 transition-colors text-sm"><img src="assets/github-mark/github-mark.svg" width="20" height="20"></a>             </div>
127           </div>
128         </div>
129         <div class="flex flex-col items-center justify-center space-y-4 bg-[#3cdd8c] rounded-t-3xl p-2 py-5 px-4 hidden md:hidden monster-navbar" id="_SsmHYQX3TieiDin2oabU5g">
130<a href="/about" class=" text-lg hover:text-yellow-400/60 transition-colors text-sm">About</a><a href="/about/vision" class="font-bold text-lg hover:text-yellow-400/60 transition-colors text-sm">Vision</a><a href="/about/foundation" class=" text-lg hover:text-yellow-400/60 transition-colors text-sm">Foundations</a><a href="/about/tech" class=" text-lg hover:text-yellow-400/60 transition-colors text-sm">Technology</a><a href="/about/components" class=" text-lg hover:text-yellow-400/60 transition-colors text-sm">Components</a><a href="javascript:void(0)" disabled uk-tooltip="No limits!" class="text-gray-500 dark:text-gray-200 text-lg hover:text-yellow-400/60 transition-colors text-sm">Limits</a><a href="/docs" target="_blank" class="text-gray-800 text-lg hover:text-yellow-400/60 transition-colors text-sm">Docs</a><a href="https://github.com/AnswerDotAI/fasthtml" target="_blank" class="text-gray-800 text-lg hover:text-yellow-400/60 transition-colors text-sm"><img src="assets/github-mark/github-mark.svg" width="20" height="20"></a>         </div>
131       </div>
132       <div class="uk-container mt-5 uk-container-xl">
133         <div class="grid grid-cols-6 sm:grid-cols-6 md:grid-cols-6 lg:grid-cols-6 xl:grid-cols-6 gap-4">
134           <div class="hidden md:block col-span-1">
135             <ul uk-scrollspy-nav="closest: li; scroll: true" class="uk-nav uk-nav-primary float-left sticky top-4 hidden md:block">
136               <li>
137<a href="#sec1">No compromise</a>               </li>
138               <li>
139<a href="#sec2">Scaling down</a>               </li>
140               <li>
141<a href="#sec3">Scaling up</a>               </li>
142             </ul>
143           </div>
144           <div class="col-span-12 md:col-span-5">
145             <h1 class="uk-h1 mb-12">The FastHTML Vision</h1>
146             <div>
147               <h2 id="sec1" class="uk-h2 py-2 px-3 mt-4 mb-2 bg-yellow-400/70 rounded-tl-3xl">No compromise</h2>
148               <div class="px-2">
149                 <div><div><p class="text-lg leading-relaxed mb-6">FastHTML is a general-purpose full-stack web programming system, in the same vein as Django, NextJS, and Ruby on Rails. The vision is to make it the easiest way to create quick prototypes, and <strong>also</strong> the easiest way to create scalable, powerful, rich applications.</p>
150<p class="text-lg leading-relaxed mb-6">It is important to have a system that can scale down, as well as up. That's because the best way to create a big complex application is to first create a small simple application, and then add to it in small steps. If we don't make it easy to create small, simple applications, then fewer people get started and fewer ideas get tried.</p>
151<h4 class="uk-h4 text-xl font-semibold mt-6 mb-3">Two types of tools</h4>
152<p class="text-lg leading-relaxed mb-6">Most software development platforms that make it easy to get started make it hard to scale in size and complexity. As a result, the development landscape gets segmented into "domain expert tools" like Streamlit, Gradio, and Wordpress, vs "serious programmer tools" like React and Django.</p>
153<p class="text-lg leading-relaxed mb-6">This means that picking one of those domain expert tools is a compromise: if what you're building is really successful, then at some point you'll have to throw it away and start again---possibly in a whole different programming language. The domain expert tools generally use very high-level abstractions specific to a single tool, which means learning a new set of foundations too. And the serious programmer tools add unnecessary complexity, slowing down both learning and development, and making maintenance harder.</p>
154</div></div>
155               </div>
156             </div>
157             <div>
158               <h2 id="sec2" class="uk-h2 py-2 px-3 mt-4 mb-2 bg-pink-400/70 rounded-tl-3xl">Scaling down</h2>
159               <div class="px-2">
160                 <div>
161<figure class="p-4 my-4 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm bg-card float-right m-2">                     <div class="flex flex-col items-center justify-center space-y-4">
162<img src="assets/hello.png" alt="Web dev" class="h-60"><caption><span class="text-gray-500 dark:text-gray-200 text-sm text-lg pt-2">A minimal FastHTML app really is minimal.</span></caption>                     </div>
163</figure>                   <div><div><p class="text-lg leading-relaxed mb-6">FastHTML scales down by picking the most widely used language for "getting stuff done": Python. And then it throws away everything that makes Python web programming complicated. No templates with quirky template languages. No multi-folder multi-file project skeletons. No complex type systems. No separate JavaScript frontend. No single-framework reactive abstractions. No build step. No tree shaking. No nonsense.</p>
164<p class="text-lg leading-relaxed mb-6">A FastHTML application can start as a single Python file. In fact, it can stay as a single Python file! You only need to break things into multiple files if <em>you</em> decide that will help you build or maintain your software.</p>
165<p class="text-lg leading-relaxed mb-6">FastHTML applications don't require learning about and installing separate CSS and JavaScript frameworks. You can pip install a complete style library, such as a UI toolkit or template, and use it entirely from Python. We're building FastHTML libraries for DaisyUI, Bootstrap, Shoelace, Flowbite, and more. You can use these, or create your own, and customise them all with Python. You can pip install additional functionality provided by JavaScript and Python libraries, both controllable entirely from Python.</p>
166</div></div>
167                 </div>
168               </div>
169             </div>
170             <div>
171               <h2 id="sec3" class="uk-h2 py-2 px-3 mt-4 mb-2 bg-teal-400/70 rounded-tl-3xl">Scaling up</h2>
172               <div class="px-2">
173                 <div><div><p class="text-lg leading-relaxed mb-6">FastHTML scales up by taking advantage of the foundations of the web. Because a FastHTML application directly uses HTTP, HTML, JavaScript, and CSS, there's nothing standing between your application and the power of the web. FastHTML comes with powerful yet simple tools for function-level and handler-level caching, async, threading, HTML partials, and much more.</p>
174<p class="text-lg leading-relaxed mb-6">The most important thing is that the fundamentals you started out with when you scaled down are identical to those you will use when you scale up! Same language, same libraries, same abstractions. As you continue on your web programming journey, all your new skills become more and more powerful!</p>
175</div></div>
176               </div>
177             </div>
178           </div>
179         </div>
180       </div>
181<hr class="my-4 h-[2px] w-full bg-secondary">       <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4">
182         <p class="text-gray-500 dark:text-gray-200 text-lg">© 2024 onwards AnswerDotAI, Inc</p>
183         <div class="flex flex-col items-center justify-center space-y-4">
184<a href="https://fastht.ml"><img src="assets/logo.svg" height="24"></a>         </div>
185         <div class="flex justify-end items-center text-gray-500 dark:text-gray-200 text-lg space-x-4">
186<a href="#">Home</a><a href="/docs" target="_blank">Docs</a><a href="https://www.answer.ai/" target="_blank">Company</a>         </div>
187       </div>

188     </div>
189   

189<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"c5a83d3df82447fabbe0ec9201502cc7","r":1,"spa":2}' crossorigin="anonymous"></script>

189
190</body>
191 </html>