<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="MicroPie is an ultra-micro ASGI Python web framework that gets out of your way. - patx/micropie">
<meta property="og:url" content="https://github.com/patx/micropie">
<meta property="og:type" content="website">
<meta property="og:title" content="GitHub - patx/micropie: MicroPie is an ultra-micro ASGI Python web framework that gets out of your way.">
<meta property="og:description" content="MicroPie is an ultra-micro ASGI Python web framework that gets out of your way. - patx/micropie">
<meta property="og:image" content="https://repository-images.githubusercontent.com/918862197/ae93975f-208b-4a71-bac4-f164a509ac16">
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="github.com">
<meta property="twitter:url" content="https://github.com/patx/micropie">
<meta name="twitter:title" content="GitHub - patx/micropie: MicroPie is an ultra-micro ASGI Python web framework that gets out of your way.">
<meta name="twitter:description" content="MicroPie is an ultra-micro ASGI Python web framework that gets out of your way. - patx/micropie">
<meta name="twitter:image" content="https://repository-images.githubusercontent.com/918862197/ae93975f-208b-4a71-bac4-f164a509ac16">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<title>MicroPie - An ultra-micro Python ASGI web framework</title>
<style>
/* --- Global safety: never allow horizontal overflow --- */
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
color: #333;
}
.container {
width: min(800px, 100%);
margin: 0 auto;
background: #fff;
padding: 40px;
border-radius: 15px;
text-align: center;
}
h1, h2 {
color: #d20f23;
font-weight: 600;
}
h2 {
text-align: left;
}
p {
font-size: 18px;
line-height: 1.6;
color: #555;
}
a {
color: #d20f23;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
a:hover {
color: #d20f23;
}
pre {
background: #f5f2f0;
padding: 20px;
border-radius: 10px;
text-align: left;
font-size: 1.05em;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
code {
max-width: 100%;
}
.logo img {
width: 100%;
max-width: 600px;
height: auto;
}
span.c2 { color: #8F5902; }
span.c9 { color: #d20f23; }
.button {
display: inline-block;
background: #d20f23;
color: #fff;
padding: 15px 30px;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
transition: background 0.3s ease;
}
.button:hover {
background: #fff;
border: 2px solid #d20f23;
color: #d20f23;
}
/* GitHub corner */
.github-corner {
position: fixed;
top: 0;
right: 0;
z-index: 1000;
}
.github-corner svg {
fill: #d20f23;
transition: transform 0.25s ease;
}
.github-corner:hover svg {
transform: scale(1.05);
}
.github-corner .octo-arm {
transform-origin: 130px 106px;
}
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
0%, 100% { transform: rotate(0); }
20%, 60% { transform: rotate(-25deg); }
40%, 80% { transform: rotate(10deg); }
}
/* --- Mobile fixes --- */
@media (max-width: 768px) {
.container {
padding: 20px;
}
pre {
white-space: pre-wrap;
word-break: break-word;
overflow-x: hidden;
}
.github-corner {
display: none;
}
}
@media (prefers-color-scheme: dark) {
html, body {
background: #0b0f14;
color: #e7eaf0;
}
.container {
background: #0b0f14;
color: #e7eaf0;
}
p {
color: rgba(231,234,240,0.82);
}
a {
color: #d20f23;
}
a:hover {
color: #d20f23;
}
pre {
background: #0b111a;
border: 1px solid rgba(255,255,255,0.08);
color: #e7eaf0;
}
/* keep your little code colors readable on dark */
span.c2 { color: #ffd17a; }
span.c9 { color: #d20f23; }
.button {
background: #d20f23; /* keep brand red */
color: #fff;
border: 1px solid rgba(255,255,255,0.10);
}
.button:hover {
background: transparent;
border: 2px solid #d20f23;
color: #d20f23;
}
/* GitHub corner stays branded */
.github-corner svg {
fill: #d20f23;
}
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="https://patx.github.io/micropie/logo.png" alt="MicroPie logo">
</div>
<h2>Ultra-micro ASGI framework, BSD 3-clause</h2>
<pre><code>
<span class="c2">from</span> micropie <span class="c2">import</span> App
<span class="c2">class</span> MyApp(<span class="c9">App</span>):
<span class="c2">async def</span> index(self, name=<span class="c9">"world"</span>):
return <span class="c9">f"Hello</span> {name}<span class="c9">!"</span>
app = MyApp()
</code></pre>
<h2>Easy to Install</h2>
<pre><code><span class="c2">$</span> pip install <span class="c9">micropie</span></code></pre>
<p><br>
<a href="https://github.com/patx/micropie" class="button">
View source, examples and documentation on GitHub
</a>
</p>
</div>
<a class="github-corner" href="https://github.com/patx/micropie" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
<path d="M0,0 L250,0 L250,250 Z" fill="#d20f23"></path>
<path d="M128.3,109.0
C113.8,99.7 119.0,89.6 119.0,89.6
C122.0,82.7 120.5,78.6 120.5,78.6
C119.2,72.0 123.4,76.3 123.4,76.3
C127.3,80.9 125.5,87.3 125.5,87.3
C122.9,97.6 130.6,101.9 134.4,103.2"
fill="#fff"
class="octo-arm"/>
<path d="M115.0,115.0
C114.9,115.1 118.7,116.5 119.8,115.4
L133.7,101.6
C136.9,99.2 139.9,98.4 142.2,98.6
C133.8,88.0 127.5,74.4 143.8,58.0
C148.5,53.4 154.0,51.2 159.7,51.0
C160.3,49.4 163.2,43.6 171.4,40.1
C171.4,40.1 176.1,42.1 178.8,56.2
C183.1,58.6 187.2,61.8 190.9,65.4
C194.5,69.0 197.7,73.2 200.1,77.6
C214.2,80.3 216.2,85.0 216.2,85.0
C212.7,93.2 206.9,96.1 205.4,96.7
C205.1,102.4 203.0,107.8 198.3,112.5
C181.9,128.9 168.3,122.5 157.7,114.1
C157.9,116.9 156.7,120.9 152.7,124.9
L141.0,136.5
C139.8,137.7 141.6,141.6 141.8,141.8
Z"
fill="#fff"/>
</svg>
</a>
</body>
</html>
