Interactive Components

Date Picker, File Dropzone, Split Pane, TOC, Virtual List, Rich Text Editor

← Home

Date Picker

Calendar is fully server-rendered. Month navigation and day selection are djust events.

May 2026
Mo
Tu
We
Th
Fr
Sa
Su

File Dropzone

Drag files or click to browse. In a real app wire to djust's binary upload API.

📄
Drag files here or browse
Max 10 MB, accepts .pdf,.doc,.docx
or multi-file
📄
Drag files here or browse
Max 25 MB, accepts image/*

Table of Contents

Click a TOC item to highlight it. In a real app, sync with scroll position via a small JS observer.

Virtual List

Server-paginated list of 500 items. Click "Load more" to fetch the next page from the server.

Showing 20 of 500 items
User #0001 Active 1d ago
User #0002 Active 2d ago
User #0003 Active 3d ago
User #0004 Active 4d ago
User #0005 Active 5d ago
User #0006 Active 6d ago
User #0007 Active 0d ago
User #0008 Active 1d ago
User #0009 Active 2d ago
User #0010 Active 3d ago
User #0011 Active 4d ago
User #0012 Active 5d ago
User #0013 Active 6d ago
User #0014 Active 0d ago
User #0015 Active 1d ago
User #0016 Active 2d ago
User #0017 Active 3d ago
User #0018 Active 4d ago
User #0019 Active 5d ago
User #0020 Active 6d ago

Split Pane (manual flexbox fallback)

File Explorer

▾ src/
▸ components/
· views.py
· urls.py
· README.md

Editor

Select a file from the tree →

python
class CounterView(LiveView):
    def mount(self, request, **kwargs):
        self.count = 0

    @event_handler()
    def increment(self, **kwargs):
        self.count += 1

Rich Text Editor

Contenteditable div with a formatting toolbar. Content synced to server on every input via dj-input.