Showcase by example

Have a look at some real Piko projects. Eight of them run live in your browser via WebAssembly. The rest are full-fledged scenarios you can clone and run locally.

a
Sandbox Live

Blank playground

Start from scratch on a clean slate. Edit the template, script, and style blocks and see live changes as you type.

Open playground
Server-Side Rendering Live

Hello world

A minimal Piko page with server-side rendering and scoped CSS

Walkthrough & live demo
Server Actions

Contact form

Form submission with server-side actions and validation

Read walkthrough
Client-side Components Live

Reactive counter

Client-side counter with reactive state and Shadow DOM

Walkthrough & live demo
Server-Side Rendering Live

Product catalogue

Loops, conditionals, and partials for data-driven layouts

Walkthrough & live demo
Server-Side Rendering Live

Blog with layout

Layout composition with nested partials, slots, and theming

Walkthrough & live demo
Server-Side Rendering Live

Sortable data grid

Query parameter binding and server-side sorting

Walkthrough & live demo
Client-side Components Live

Task list app

Interactive task list with array reactivity and two-way binding

Walkthrough & live demo
Cross-component Communication

Event bus chat

Cross-component communication via Piko's event bus

Read walkthrough
Client-side Components Live

Form wizard

Multi-step form with conditional rendering and client-side validation

Walkthrough & live demo
Server Actions

Progress tracker

Streaming progress updates via server-sent events (SSE)

Read walkthrough
Cross-component Communication

Instant messaging

Real-time chat with SSE streaming, auto-reconnection, and event replay

Read walkthrough
Storage and Infrastructure

S3 file upload

File uploads to S3-compatible storage with direct and presigned URL patterns

Read walkthrough
Storage and Infrastructure

TLS and HTTPS

Serve Piko over HTTPS with an HTTP-to-HTTPS redirect.

Read walkthrough
Content Pipelines

Tailwind CSS

Integrate Tailwind CSS with a Piko project via a shared styles library.

Read walkthrough
Server-Side Rendering

Markdown blog

A blog with markdown collections and generated routes.

Read walkthrough
Server Actions

Cached API

Action response caching with TTL

Read walkthrough
Server Actions

Rate-limited API

Per-action rate limiting with token bucket algorithm

Read walkthrough
Component Libraries Live

Built-in components

Registering Piko's built-in counter and card components

Walkthrough & live demo
Component Libraries

M3E components

Material Design 3 Expressive component library showcase

Read walkthrough
Full Applications

M3E recipe app

Full-featured recipe app with M3E components, SSE streaming, emails, and LLM

Read walkthrough
Full Applications

Live playground

An in-browser PK playground backed by a WASM-compiled Piko runtime.

Read walkthrough
Databases

SQLite database

A Piko project backed by SQLite with the generated querier.

Read walkthrough
Databases

MySQL / MariaDB

A Piko project backed by MySQL (or MariaDB) with the generated querier.

Read walkthrough
Databases

PostgreSQL

A Piko project backed by PostgreSQL with the generated querier.

Read walkthrough
Databases

DuckDB (analytics)

A Piko project backed by DuckDB for embedded analytics queries.

Read walkthrough
Content Pipelines

Email contact form

Send transactional emails through an email provider when a visitor submits the contact form.

Read walkthrough
Content Pipelines

PDF invoice

Generate a downloadable PDF invoice from a PK-rendered HTML template.

Read walkthrough
Content Pipelines

Analytics ecommerce

Track pageviews, add-to-cart events, and revenue through the built-in stdout and GA4 analytics collectors.

Read walkthrough
Server Actions

CAPTCHA-protected action

Protect a server action with CAPTCHA verification using the configured provider.

Read walkthrough