This page demonstrates visual composition of APEP macros, custom tags and color components. No backend business logic is wired up - forms do not submit, prices are static, downloads are placeholder paths and user data is not persisted. All interactions are for design and layout demonstration purposes only.
A real-world pricing page: choose your plan, add features, set team size and billing cycle. The sticky sidebar reflects the current configuration and validates on submit.
Click any component in the SVG diagram to reveal its technical spec sheet. Uses the image macro's on_click hook, native details/summary for collapsible sections, and theme-block to show different context in light vs. dark mode.
Click any component to see its spec sheet below.
{% set _arch_svg %} {% endset %} {{ apep.macros.image(_arch_svg, protected=False) }} {# ── Detail panels (shown on SVG click) ──────────────────── #}The client layer is entirely server-rendered using APEP macros and Jinja2 templates.
No client-side framework is required. JavaScript is loaded on demand via ApepLoader.register()
only when a component that needs it is present on the page.
Macro output is deterministic and hydration-free. This makes the client layer cache-friendly at the CDN level and extremely fast on first paint.
{% endset %} {{ apep.macros.text_block(_client_text, variant="plain") }}Jinja2 + APEP macros
Custom tags + color components
ApepLoader (on-demand deferred)
You are viewing the light theme. The diagram uses inverted colors optimized for dark backgrounds regardless of the page theme.
You are viewing the dark theme. The diagram renders identically - it carries its own color palette as inline SVG attributes.
All inbound HTTP traffic passes through the API Gateway before reaching any service. It handles authentication token validation, rate limiting (100 req/min per IP by default), request routing, and response compression.
{% endset %} {{ apep.macros.text_block(_gw, variant="plain") }} {{ apep.macros.faq_list([ {"question": "How is rate limiting enforced?", "answer": "Token bucket algorithm, 100 requests per minute per client IP. Headers X-RateLimit-Remaining and Retry-After are always returned."}, {"question": "Does the gateway cache responses?", "answer": "GET responses are cached at the gateway edge for 60 seconds by default. Cache-Control headers from services override this."}, {"question": "How does routing work?", "answer": "URL prefix routing: /auth/* → Auth Service, /api/* → Data Service, /media/* → Media Service. Route table is hot-reloadable without restart."} ]) }}Stateless JWT-based authentication with optional session persistence in Redis. Supports OAuth2 (Google, GitHub) and SAML for enterprise plans. All tokens are short-lived (15 min access, 7 day refresh).
{% endset %} {{ apep.macros.text_block(_auth, variant="plain") }} {{ apep.macros.progress_bar(99, label="Service uptime (30d)", show_value=True, variant="success") }} {{ apep.macros.progress_bar(4, label="Avg. response time (ms)", max=100, show_value=True, variant="success") }}Provides both a RESTful and a GraphQL interface over the same underlying data layer. Reads are served from Redis cache first (TTL 120s). Writes go directly to PostgreSQL primary and invalidate the relevant cache keys synchronously.
{% endset %} {{ apep.macros.text_block(_data, variant="plain") }} {{ apep.macros.progress_bar(72, label="Cache hit rate", show_value=True, variant="success") }} {{ apep.macros.progress_bar(12, label="Avg. query time (ms)", max=100, show_value=True, variant="success") }}Handles file ingestion, format conversion, and thumbnail generation asynchronously. Originals are stored in S3-compatible object storage. Derivatives (WebP, AVIF, resized) are generated on first request and cached at the CDN edge indefinitely.
{% endset %} {{ apep.macros.text_block(_media, variant="plain") }}PostgreSQL runs in a primary-replica configuration with streaming replication. Automatic failover via Patroni. Redis operates as a write-through cache and pub/sub broker for real-time features. Both are hosted inside the same VPC as the service layer - no public endpoints.
{% endset %} {{ apep.macros.text_block(_db, variant="plain") }} {{ apep.macros.progress_bar(34, label="DB storage used", max=100, show_value=True, variant="warning") }} {{ apep.macros.progress_bar(19, label="Redis memory used", max=100, show_value=True, variant="success") }}A multi-step onboarding flow. The stepper tracks progress. Validation fires toast notifications. Every step uses a different combination of form components.
{{ s.detail }}
A documentation or blog layout using sidebar-layout with a sticky navigation sidebar, a timeline of recent updates, a gallery of screenshots and a FAQ section below.
A complete team page: hoverable service cards with inline tooltips showing each person's skill stack, a shrink animation on the technology strip, and a review gallery of client testimonials below.
Small, focused team. Every person ships code and documentation. Hover a card to see their tech stack.
Architect of the macro system and the ApepLoader pipeline. Passionate about zero-runtime UI and server-side rendering done right.
Designed the color token architecture, the custom tag system, and every hover state you will ever enjoy. Dark mode is his life's work.
Owns the JS layer - ApepLoader, all component scripts, and the timeline engine. Fan of vanilla JS and obsessive about bundle size.
Form validation, CSRF protection, file upload hardening, and making sure no macro ever leaks user data into the DOM.
Every example in these showcase files went through Amélie. She also wrote the SKILL.md files and keeps the changelog honest.
Keeps the CI/CD green, the Postgres replicas in sync, and the Redis cluster from running out of memory at 2 am on a Tuesday.
Hover a technology to bring it into focus.
Click any project to open a full-size overlay with details.