Tags that draw,
format and interact.
Diagrams, maps, timelines, avatars and icons as SVG; tables, diffs, tables of contents and JSON views; thumbnails, video and PDF; tabs, modals and carousels without JavaScript of your own; chess boards and puzzles. Every one rendered on the server from a tag.
- 32 tags
- 65 examples
Avatar
Initials in a circle, coloured by a hash of the name - no image needed-
Herbert Jebbink
Founder and engine -
Ada Lovelace
Sequences -
Grace Hopper
Compilers and tooling -
Alan Turing
Expression evaluator -
Émile Zola
Translations -
Margaret Hamilton
Error handling
Diagram
Flowcharts and sequence diagrams from a few lines of text, laid out on the serverIcon
Around eighty interface icons drawn as lines in the colour of the text-
arrow-right -
arrow-left -
arrow-up -
arrow-down -
chevron-right -
chevron-left -
chevron-up -
chevron-down -
external -
refresh -
sort -
maximize -
minimize -
check -
x -
plus -
minus -
check-circle -
x-circle -
info -
alert -
help -
star -
heart -
bookmark -
flag -
tag -
zap -
home -
menu -
grid -
list -
more-horizontal -
more-vertical -
search -
filter -
settings -
log-in -
log-out -
link -
user -
users -
mail -
message -
send -
share -
phone -
bell -
calendar -
clock -
globe -
map-pin -
sun -
moon -
cloud -
file -
folder -
copy -
edit -
trash -
download -
upload -
printer -
image -
camera -
cart -
play -
pause -
stop -
lock -
unlock -
key -
eye -
eye-off -
power -
code -
terminal -
database -
bar-chart
Identicon
A symmetric 5 by 5 pattern from a SHA-256 hash - every account its own picture|
herbert@example.com 2009-03-14 |
|
|
ada@example.org 2015-12-10 |
|
|
grace@example.net 2018-07-01 |
|
|
alan@example.com 2021-06-23 |
|
|
Ada@Example.org the same address, other spelling |
Map
Choropleth maps of the world and its regions, a colour step per valuePlaceholder
Grey boxes with crossing lines for the images that are not there yetLamp
Chair
Table
Progress
Accessible progress bars and step indicators, styled on the serverRating
Stars or hearts for a score, parts of one clipped, said in words| Product | Score | Reviews |
|---|---|---|
| Walnut desk lamp |
|
214 |
| Linen armchair |
|
88 |
| Oak side table |
|
41 |
| Wool rug, 160x230 |
|
17 |
| Ceramic vase |
|
9 |
Timeline
Events on a time axis - cards above and below, spans as bars, or a column for long listsCountdown
The time left until a moment, in words inside a time element - ticking live when asked- Jazz in the park
- Pottery workshop
- City half marathon
- Film night
- New year concert
Version 3.0 launches in
Tuesday 3 November, 09:21
Country
A country flag and its English name from an ISO 3166 code - alpha-2, alpha-3 or the name- Netherlands 18,230
- United States 12,904
- Germany 8,711
- United Kingdom 6,120
- Belgium 4,385
- Japan 2,017
- Brazil 1,460
- Côte d’Ivoire 312
Data table
A complete table from rows: headers, aligned numbers, totals, sorting and paging links| Channel | Budget | Spent |
|---|---|---|
| Search ads | €12,000.00 | €11,380.40 |
| Social media | €8,500.00 | €9,120.15 |
| Newsletter | €1,500.00 | €960.00 |
| Trade fair | €15,000.00 | €14,215.80 |
| €3,000.00 | €2,410.25 | |
| Total | €40,000.00 | €38,086.60 |
| Number | Date | Customer | Items | Total |
|---|---|---|---|---|
| 10414 | 6 Oct 2026 | Mini Wheels Co. | 12 | 4,310.00 |
| 10417 | 8 Oct 2026 | Euro+ Shopping | 8 | 2,975.75 |
| 10415 | 6 Oct 2026 | Land of Toys Inc. | 5 | 642.25 |
| 10412 | 5 Oct 2026 | Atelier Graphique | 3 | 1,245.50 |
| 10416 | 7 Oct 2026 | Baane Mini Imports | 2 | 318.00 |
| 10413 | 5 Oct 2026 | Signal Gift Stores | 1 | 89.90 |
| Total | 31 | 9,581.40 |
| City | Country | Population | Area (km²) |
|---|---|---|---|
| Shanghai | China | 24,870,895 | 6,341 |
| Beijing | China | 21,893,095 | 16,411 |
| Kinshasa | DR Congo | 16,315,534 | 9,965 |
| Istanbul | Türkiye | 15,655,924 | 5,461 |
| Tokyo | Japan | 14,094,034 | 2,194 |
| Moscow | Russia | 13,010,112 | 2,511 |
| Mumbai | India | 12,442,373 | 603 |
| São Paulo | Brazil | 11,451,245 | 1,521 |
Diff
What changed between two texts - words or lines, inline or side by side| 1 | 1 | Milk | |
| 2 | 2 | Eggs | |
| 3 | - |
|
|
| 3 | + | Sourdough bread | |
| 4 | - |
|
|
| 5 | 4 | Coffee | |
| 6 | 5 | Apples | |
| 6 | + | Pears | |
| 7 | + | Cheese |
| total.php - before | total.php - after | ||
|---|---|---|---|
| 1 | function total ( $rows ) { | 1 | function total ( $rows, $tax = 0.21 ) { |
| 2 | 2 | ||
| 3 | $sum = 0; | 3 | $sum = 0; |
| 4 | 4 | ||
| 5 | foreach ( $rows as $row ) | 5 | foreach ( $rows as $row ) |
| 6 | $sum += $row ['price']; | 6 | $sum += $row ['price'] * $row ['quantity']; |
| 7 | 7 | ||
| 8 | return $sum; | 8 | return round ( $sum * ( 1 + $tax ), 2 ); |
| 9 | 9 | ||
| 10 | } | 10 | } |
Emoji
Emoji by their GitHub and Slack shortcodes, each a labelled image for screen readers - and a pipe for text- Ana: The build is green ✅ shipping it 🚀
- Bram: Nice work 👏 👏
- Chen: Coffee at 10:30:00? ☕
- Dewi: Count me in ✋ - and :not_a_code: stays as it is
Release 3.0 is out - charts, tables and a faster first render.
Excerpt
A long text cut to whole words around the search words, the matches markedResults for cache
Fragment cache
… from the database, a report over a year of orders. The fragment cache keeps the rendered text of such a section for a number …Remote data
… seconds. When the source fails afterwards, the last good copy in the cache is served and the failure is logged, so a slow or …
Page cache
With the page cache switched on in the configuration, a whole page is kept after its first rendering, with an ETag, and a browser …
Templates that drive
2026-09-14 Most frameworks start in a controller. The controller fetches the data, decides what to show and hands it to a template, which is the last …
Charts without JavaScript
2026-10-01 A chart is a picture, and a picture can be drawn on the server. The chart tag writes inline SVG: bars, lines, pies and forty …
JSON viewer
A JSON answer or a PHP array as a tree to fold open and shut, coloured by type, with counts on folded nodesGET /api/orders/10417 {…} 8 keys
- "id": 10417
- "status": "open"
- "paid": false
-
"customer": {…} 3 keys
- "name": "Euro+ Shopping"
- "country": "ES"
- "vip": true
-
"lines": […] 2 items
-
0: {…} 4 keys
- "sku": "S18_1749"
- "name": "1917 Grand Touring Sedan"
- "qty": 2
- "price": 136
-
1: {…} 4 keys
- "sku": "S24_2840"
- "name": "1958 Chevy Corvette"
- "qty": 6
- "price": 35.29
-
- "coupon": null
- "total": 2975.75
- "created": "2026-10-08T09:42:11Z"
settings {…} 5 keys
-
"shop": {…} 3 keys
- "name": "Mini Wheels Co."
- "currency": "EUR"
-
"locales": […] 3 items
- 0: "en"
- 1: "nl"
- 2: "de"
-
"mail": {…} 4 keys
- "transport": "smtp"
- "host": "mail.example.com"
- "port": 587
- "tls": true
-
"cache": {…} 3 keys
- "pages": true
- "ttl": 600
- "store": "apcu"
-
"features": {…} 3 keys
- "reviews": true
- "wishlist": false
- "giftcards": null
- "version": "3.0.2"
Lorem ipsum
Placeholder text in words, sentences or paragraphs - the same text for the same seedLorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit semper diam. Per nec dictumst montes facilisis at sapien interdum cubilia lectus ad ligula.
Quis facilisis sociosqu tortor iaculis sagittis. Mus sollicitudin fusce, faucibus ultricies hac class massa condimentum nascetur facilisis scelerisque inceptos. Varius hendrerit risus euismod dui ornare efficitur. Tempus aptent eu etiam facilisis quisque felis. Eros sed sollicitudin euismod congue vitae eget ridiculus.
Auctor nostra mus habitant, interdum quam. Neque at ornare hendrerit pellentesque quisque dictumst himenaeos mauris enim, quam tempor. Tincidunt efficitur ullamcorper efficitur potenti cras convallis curae. Primis integer himenaeos mollis elementum vitae. Fringilla auctor est mollis viverra lectus augue at metus erat.
Magnis tempor taciti habitant condimentum luctus risus vivamus parturient. Donec nunc justo morbi, porta fames. Torquent non turpis nostra fusce id quis malesuada est. Nec aenean feugiat viverra tempus netus, dictumst varius dis hendrerit eget.
Etiam sodales nostra bibendum magna habitasse consequat nisl nullam feugiat nullam curabitur. Nunc dui ultrices, nec dis lacinia.
Arcu ultrices nec faucibus, torquent id consequat felis, arcu rutrum curae montes. Risus sed lacus cursus, blandit ad.
Iaculis sapien aliquet netus rhoncus vulputate volutpat vestibulum. Maximus lacinia quam, posuere phasellus sociosqu ullamcorper aliquam blandit pretium.
Ligula cursus fermentum senectus, commodo primis. Nascetur volutpat class pharetra penatibus placerat, dis fermentum. Semper phasellus eleifend non.
Egestas facilisis arcu pulvinar in, gravida sollicitudin iaculis habitant penatibus, mus aliquet nunc aliquet. Inceptos integer fringilla lobortis.
Erat sagittis iaculis parturient, vehicula platea, at phasellus ad massa nulla cursus mollis. Urna fringilla dui curabitur facilisis.
Time ago
How long ago a moment was, in a time element that keeps the exact moment for machines and on hover-
Maya ·
Is there a way to export the report as a spreadsheet?
-
Jonas ·
The CSV answer of the same page does exactly that.
-
Priya ·
Tried it today - one line in the page and it works.
-
Tomás ·
Can the columns be chosen?
-
Maya ·
Yes: list them in the page, in the order you want.
-
Ken ·
Thanks, everyone!
Table of contents
The headings of the page, nested and linked - filled in after the whole page has renderedChoosing the beans
Fresh beans matter more than any machine. Buy whole beans roasted in the last few weeks, and only as much as you drink in a fortnight.
Light or dark roast
A light roast keeps the fruit and acidity of its origin; a dark roast trades them for body and the bitter-sweet taste of the roast itself.
Single origin or blend
A blend is made to taste the same all year. A single origin tastes of one farm and one harvest - and changes with it.
Grinding
Grind just before brewing. A burr grinder gives even particles; a blade grinder gives dust and boulders that brew at different speeds.
Grind size by method
Coarse for a French press, medium for filter, fine for espresso - finer grinds extract faster.
Brewing
Use water just off the boil, around 94 °C, and about 60 grams of coffee per litre.
Pour-over
Bloom the grounds with a little water for thirty seconds, then pour slowly in circles.
French press
Steep four minutes, press gently, and pour it all out at once so it does not go bitter.
Storing what is left
An airtight tin in a dark cupboard. Not the fridge: the beans take on its smells.
Installation
Clone the repository and point the web server at www/.
Requirements
PHP 8.1 or newer; a database only when the application uses one.
Extensions
mbstring is required, intl is used when it is there.
First run
Open the hello application to see a page and its template.
Configuration
Settings stand in _config/config.php and in .env files.
Error handling
Choose what happens when something goes wrong: a page, a log line or a dump.
Deployment
Copy the files; there is no build step.
Gravatar
The picture of an e-mail address, or a local avatar for privacyThe page cache halves the time of the home page.
Could the sequence tags take a step of their own?
A bug report with a template line number - lovely.
The page cache halves the time of the home page.
Could the sequence tags take a step of their own?
A bug report with a template line number - lovely.
Thumbnails
Resized, cached pictures with GD - one size on the page, twice that for a sharp screenPDF documents
A template rendered as a PDF by a writer in plain PHP - fonts, tables, pictures
Invoice 2026-114
Harbour Supplies
Kaai 3, 1781 AA Den Helder
info@harbour.example
To: Noordkaap Sailing School
Havenkade 12
1781 AB Den Helder
Issued 8 October 2026 - due 7 November 2026
| Item | Qty | Price | Amount |
|---|---|---|---|
| Mooring rope, 12 mm, per 20 m | 4 | € 38,50 | € 154,00 |
| Fender, inflatable, large | 6 | € 27,95 | € 167,70 |
| Life jacket 150 N, adult | 10 | € 64,00 | € 640,00 |
| Shackle, stainless, 8 mm | 24 | € 3,20 | € 76,80 |
| Delivery to the harbour | 1 | € 45,00 | € 45,00 |
| Subtotal | € 1.083,50 | ||
| VAT 21% | € 227,54 | ||
| Total | € 1.311,04 | ||
Please pay within 30 days to NL91 ABNA 0417 1643 00, quoting invoice 2026-114.
Video embeds
YouTube and Vimeo as a poster and a play button - the player loads only when asked
Accordion
Questions that open on a click - every item a details element, one open at a time if askedQuestions about your order
When will my order arrive?
Orders placed before 22:00 on a working day are delivered the next day in the Netherlands and Belgium, within three working days elsewhere in the EU.
Can I return something?
Yes - within 30 days, unused and in its box. Print the label from your account and drop the parcel at any pick-up point; the refund follows within five days.
Is there a warranty?
Two years on every appliance, five years on the heating element of our kettles.
How do I pay?
iDEAL, Bancontact, credit card, PayPal, or on account for business customers.
Carousel
Slides that scroll and snap sideways - previous, next and a dot per slide, all plain linksCopy
A text with a copy-to-clipboard button - selectable by hand when scripting is off
Put this in apps/shop/.env:
padSqlDriver=sqlite
padSqlDatabase=shop/shop.sqlite
padSqlSetup=_install/schema.sql
Add the package to your project:
composer require pad/pad:^11.0
Or start a fresh application with the command-line tool:
pad new shop && pad serve 8000
Modal
A dialog over the page - opened by HTML invoker commands, a tiny script, or a link without scriptingPoll
A vote among a few answers, once per visitor - the results as bars, with or without scriptingTabs
Panels behind a row of tabs - radio buttons and CSS, the arrow keys move between them€ 9 a month - for one person and a side project
- One site
- 10 GB storage
- E-mail support
€ 29 a month - for a team that ships every week
- Ten sites
- 100 GB storage
- Chat support
- Daily backups
€ 79 a month - for an agency with many clients
- Unlimited sites
- 1 TB storage
- Phone support
- Hourly backups
- Staging
Aurora electric kettle
A 1.7 litre kettle in brushed steel that boils a full jug in under four minutes and keeps it warm for half an hour. The lid opens with one touch, the water window lights up blue while it heats.
| Capacity | 1.7 litres |
|---|---|
| Power | 2200 W |
| Keep warm | 30 minutes at 80 °C |
| Weight | 1.1 kg |
Marieke - 5 of 5
Quiet, fast, and the light is a nice touch.
Tom - 4 of 5
Boils quickly. The lid is a little stiff.
Aisha - 5 of 5
The keep-warm setting is perfect for tea.
Chess board
A chess position from FEN as SVG - pieces, coordinates, marked squares and arrowsCrossword
Words and clues in, a numbered grid and the Across and Down lists outAcross
- The dependency manager most projects install (8)
- The stricter switch, an expression since 8.0 (5)
- Late binding keyword, or a property of the class (6)
- A framework with Eloquent and Blade (7)
Down
- A type with a fixed set of cases, new in 8.1 (4)
- An ordered map, the workhorse of PHP (5)
- An anonymous function that captures variables with use (7)
- A language construct that outputs one or more strings (4)
- Hands a value out of a generator and pauses it (5)
- The value of a variable that has none (4)
Across
- The dependency manager most projects install (8) COMPOSER
- The stricter switch, an expression since 8.0 (5) MATCH
- Late binding keyword, or a property of the class (6) STATIC
- A framework with Eloquent and Blade (7) LARAVEL
Down
- A type with a fixed set of cases, new in 8.1 (4) ENUM
- An ordered map, the workhorse of PHP (5) ARRAY
- An anonymous function that captures variables with use (7) CLOSURE
- A language construct that outputs one or more strings (4) ECHO
- Hands a value out of a generator and pauses it (5) YIELD
- The value of a variable that has none (4) NULL
Sudoku
A puzzle as a grid, givens bold - and solved on the server by backtracking| 8 | 1 | 2 | 7 | 5 | 3 | 6 | 4 | 9 |
| 9 | 4 | 3 | 6 | 8 | 2 | 1 | 7 | 5 |
| 6 | 7 | 5 | 4 | 9 | 1 | 2 | 8 | 3 |
| 1 | 5 | 4 | 2 | 3 | 7 | 8 | 9 | 6 |
| 3 | 6 | 9 | 8 | 4 | 5 | 7 | 2 | 1 |
| 2 | 8 | 7 | 1 | 6 | 9 | 5 | 3 | 4 |
| 5 | 2 | 1 | 9 | 7 | 4 | 3 | 6 | 8 |
| 4 | 3 | 8 | 5 | 2 | 6 | 9 | 1 | 7 |
| 7 | 9 | 6 | 3 | 1 | 8 | 4 | 5 | 2 |
| 5 | 3 | empty | empty | 7 | empty | empty | empty | empty |
| 6 | empty | empty | 1 | 9 | 5 | empty | empty | empty |
| empty | 9 | 8 | empty | empty | empty | empty | 6 | empty |
| 8 | empty | empty | empty | 6 | empty | empty | empty | 3 |
| 4 | empty | empty | 8 | empty | 3 | empty | empty | 1 |
| 7 | empty | empty | empty | 2 | empty | empty | empty | 6 |
| empty | 6 | empty | empty | empty | empty | 2 | 8 | empty |
| empty | empty | empty | 4 | 1 | 9 | empty | empty | 5 |
| empty | empty | empty | empty | 8 | empty | empty | 7 | 9 |
| 5 | 3 | 4 | 6 | 7 | 8 | 9 | 1 | 2 |
| 6 | 7 | 2 | 1 | 9 | 5 | 3 | 4 | 8 |
| 1 | 9 | 8 | 3 | 4 | 2 | 5 | 6 | 7 |
| 8 | 5 | 9 | 7 | 6 | 1 | 4 | 2 | 3 |
| 4 | 2 | 6 | 8 | 5 | 3 | 7 | 9 | 1 |
| 7 | 1 | 3 | 9 | 2 | 4 | 8 | 5 | 6 |
| 9 | 6 | 1 | 5 | 3 | 7 | 2 | 8 | 4 |
| 2 | 8 | 7 | 4 | 1 | 9 | 6 | 3 | 5 |
| 3 | 4 | 5 | 2 | 8 | 6 | 1 | 7 | 9 |