Lively UI
Real-time UI, zero JavaScript
Lively is a real-time UI engine built into Duck. Components update over WebSockets without full page reloads — keeping your stack clean and predictable. No React. No Vue. Just Python.
✓Real-time updates over WebSockets — msgpack, not JSON
✓Virtual DOM diffing — only what changed is patched
✓Seamless page navigation without full reloads
✓Backend and dynamic UI in a single Python codebase
How the Counter App below is built
from duck.html.components.container import FlexContainer
from duck.html.components.button import Button
from duck.html.components.label import Label
class CounterApp(FlexContainer):
def on_create(self) -> None:
super().on_create()
# Component setup
self.style.update({
'gap': '5px',
'flex-direction': 'column',
'align-items': 'center',
'padding': '20px',
})
# Counter state
self.counter = 0
def on_btn_click(btn, *_) -> None:
if btn == self.increment_btn:
self.counter += 1
elif self.counter > 0:
self.counter -= 1
# Real-time update over WebSocket — no JavaScript needed
self.label.text = self.counter
# Child components
self.label = Label(
text=self.counter,
style={'font-size': '1.5rem'},
)
self.increment_btn = Button(text='Increment')
self.decrement_btn = Button(text='Decrement')
# Event bindings
for btn in [self.increment_btn, self.decrement_btn]:
btn.bind('click', on_btn_click, update_targets=[self])
self.add_children([
self.label,
FlexContainer(
children=[self.increment_btn, self.decrement_btn],
flex_direction='row',
style={'gap': '5px'},
),
])Try it live
Get Started in Seconds
Install Duck and scaffold a full project with a single command. No boilerplate hunting, no config files to set up manually.
$ pip install duckframework
$ duck makeproject myproject
$ cd myproject
$ python web/main.py # Starts server on http://localhost:8000Showcase
Built with Duck
Real apps built entirely with Duck Framework — no separate frontend, all deployed in production.
Snip
Free URL shortener. Paste a long URL, get a clean short link instantly.
URL ShortenerWSGI
Quill
AI design generator. Describe any design and get a pixel-perfect PNG.
AIHTML Generator
Counter App
Live WebSocket counter — the Duck 'Hello World'. Real-time, pure Python.
Lively UIDemo
Sponsors
Do you want your logo to appear here?