Snax

Snax examples

Thirty-six live format demonstrations, one composable system — with multi-question polls, paginated quizzes, affiliate lists, rich media, and normalized video embeds.

Story & media

Eight content formats for narrative, media, and embedded content.

Live specimen

Story

Write a narrative post with markdown.

The smallest useful tool does exactly one thing. Not a platform, not a framework — just a sharp little thing that removes a specific friction you kept hitting.

I built one last week in an afternoon. Handed it to two people who actually do the work, and they used it differently than I expected. That gap between my model and their workflow was the real output.

The edge cases taught me more than the happy path. Every weird input, every unexpected sequence — those are the specs you didn't know you needed. Ship the smallest thing, then listen to what breaks.

Live specimen

Image

Share a single image with a caption.

Blueprint-style system architecture with interconnected components
A system sketch before the system exists.
Live specimen

Audio & Podcast

Interactive podcast episode scrubber with speed controls (1x-2x), chapter seeking, download link, and transcript drawer.

EP 42 — Building Unreasonable Software for College Sports
Ben Hofstetter Podcast

EP 42 — Building Unreasonable Software for College Sports

0:00 / 0:00
Download MP3
Live specimen

Video

Embed a video with native controls.

Native video block

Live specimen

Embed

Embed external content from allowlisted providers.

Live specimen

Meme

Share a meme or humorous image with text overlay.

Meme reading MY GITHUB SAID / I SHIPPED NOTHING on a blueprint-style backgroundMY GITHUB SAIDI SHIPPED NOTHING
Live specimen

Visual Comparison Slider

Interactive before-and-after comparison slider with touch drag and full keyboard support (Arrow keys, Home, End).

Modern matrix blueprint setupBlueprint Theme
Legacy retro setupLegacy Theme
Live specimen

Code Diff & Refactor

Interactive side-by-side or tabbed code refactor comparison card with 1-click clipboard copy buttons.

svgSanitizer.jsjavascript
- Bare Specifier Import
1import DOMPurify from "dompurify";
2
3export function sanitizeSvg(svgContent) {
4 return DOMPurify.sanitize(svgContent);
5}
+ Self-Contained Browser DOMParser
1export function sanitizeSvg(svgContent) {
2 const parser = new DOMParser();
3 const doc = parser.parseFromString(svgContent, "image/svg+xml");
4 // Clean elements & attributes against allowlist natively
5 return new XMLSerializer().serializeToString(doc.documentElement);
6}
Live specimen

Checklist & Roadmap

Interactive task checklist with local storage persistence, progress bar, category tags, and pending filter.

Site Audit & Optimization Checklist

Track completion of critical deployment steps for benhof.ai.

5 of 6 completed83%
Audit Admin Shell container max-widths
Layout
Self-contain SVG sanitizer with native DOMParser
Security
Build client-side Canvas OG Social Card Generator
SEO
Audit all 36 Snax interactive formats
Snax
Implement automatic Admin Traffic Exclusion
Analytics
Deploy Base44 backend functions and RLS rules
Backend
Live specimen

KPI Metric Stat Grid

Interactive grid of stat cards with positive/negative trend badges (↑↓) and metric tooltips.

System Verification Metrics

Real-time test suite and bundle optimization indicators.

Unit Tests+100%
772 / 772
Node test runner pass rate
Gzip Bundle-18.4%
115 kB
Public entry chunk size
Build Status100%
0 Errors
Production Vite build clean
Live specimen

CLI Terminal Simulator

Interactive retro CLI command line simulator block with output log styling, re-run trigger, and 1-click copy.

zsh — benhof-ai
benhof@mac:~/benhof-ai$pnpm check
✔ Linting 142 active source files... clean
✔ Running Node test suite... 772 / 772 passing
✔ Building production Vite bundle...
dist/assets/index.js 357 kB │ gzip: 115 kB
✓ Built cleanly in 5.10s — zero errors
Live specimen

Code Snippet Sharing

Interactive code sharing card with line highlighting, file download button, 1-click copy, and collapsible snippet drawer.

base44Client.jsjavascript(13 lines)
1import { createClient } from "@base44/sdk";
2
3// Initialize Base44 client for benhof.ai personal site
4export const base44 = createClient({
5 appId: "6a4af56f202f003f7cf15751",
6 env: "production",
7});
8
Live specimen

AI System Architecture

Interactive node-based AI system architecture diagram visualizing data inputs, LLM pipelines, RLS security rules, and UI output renders.

AI Agent Pipeline & Security Architecture

Click any node to inspect data contracts, serverless functions, and row-level security (RLS) rules.

1. Client Input & ValidationInput

Sanitizes prompt payload, checks participant rate limits, and strips script tags.

Server-side SHA-256 IP hashing & deduplication
Allowed origin check & strict payload schema validation
Rate-limit token bucket (60 req / min limit)
Live specimen

Image Presets & Lightbox

Five intentional image-size presets (hero/wide, medium editorial, compact thumbnail, gallery grid, full-bleed) with an accessible lightbox — close button, Escape, backdrop close, and focus management.

Blueprint-style system architecture with interconnected components
Hero/wide preset — 21:9 aspect ratio for full-bleed headers.
Blueprint-style illustration of a data architecture with database layers, API gateways, and a chat interface
Medium editorial preset — 4:3, constrained width.
Blueprint-style illustration of UI component diagrams — bracket, score panel, and base diamond

Compact thumbnail preset

Blueprint-style illustration of a tournament operations center with multiple fields and data flow lines
Full-bleed answer preset — 16:9 for poll/quiz answer images.

Gallery grid preset — click any image to open the lightbox with arrow-key navigation.

Blueprint-style tournament bracket with highlighted edge casesBlueprint-style illustration of hall of fame plaques in a grid with data structure connectionsBlueprint-style aerial illustration of a university football stadium with signage markersBlueprint-style illustration of a wiffle ball tournament field with payment and registration system architecture overlayBlueprint-style illustration of a folder tree with markdown files and AI processing elementsBlueprint-style illustration of a GitHub contribution graph with mostly empty squares

Video formats

YouTube, Vimeo, Dailymotion, Facebook, self-hosted, and paywall-locked — all with strict allowed-host validation.

Live specimen

YouTube

Embed a YouTube video with privacy-friendly nocookie domain.

Live specimen

Vimeo

Embed a Vimeo video.

Live specimen

Self-Hosted

Play a direct video file with native controls.

Live specimen

Paywall Locked

Locked preview for premium video content. Default: free. Paywall only when explicit entitlement config exists.

Premium video

Premium content

$4.99

Live specimen

Submit New Video

Submit a video for community review. Supports YouTube, Vimeo, Dailymotion, Facebook, and self-hosted video files.

Supports YouTube, Vimeo, Dailymotion, Facebook, and direct video files (mp4, webm, ogg, mov).

Lists

Four list formats: open, ranked, classic, and affiliate.

Live specimen

Open List

A list the community can add to and vote on.

Loading list…
Live specimen

Ranked List

A ranked list with community voting.

Loading list…
Live specimen

Classic List

A static editorial list in fixed order.

Editorial List

[Snax Example] My default build loop

A fixed editorial sequence from problem to proof.

  1. 01
    Find the real problem

    Find the real problem

    Start with the actual friction, not the imagined one.

  2. 02
    Trace the current system

    Trace the current system

    Map what exists before designing what should.

  3. 03
    Build the smallest complete path

    Build the smallest complete path

    One end-to-end flow beats five half-built features.

  4. 04
    Test with real data

    Test with real data

    Synthetic data lies. Real data tells the truth.

  5. 05
    Verify the live outcome

    Verify the live outcome

    Ship it, watch it, fix what actually breaks.

Live specimen

Affiliate List

A classic list with affiliate disclosure, rel=sponsored nofollow, and click tracking.

Editorial List

[Snax Example] Affiliate List

A classic list with affiliate disclosure, rel=sponsored nofollow, and click tracking.

This list contains affiliate links. We may earn a commission if you click through.

  1. 01

    Reliable hosting with great uptime.

  2. 02

    The editor we use every day.

  3. 03

    A design tool with affiliate link.

Quizzes

Trivia, personality, paginated/shuffled, and image-answer quizzes with server-side scoring.

Live specimen

Trivia Quiz

Multiple-choice quiz with correct answers scored server-side.

Loading quiz…
Live specimen

Personality Quiz

Quiz that reveals a personality profile based on answers.

Loading quiz…
Live specimen

Paginated Quiz

A paginated quiz with shuffled questions and a start screen.

Loading quiz…
Live specimen

Image Answer Quiz

A trivia quiz where each answer option is an image. Pick the image that matches the prompt.

Loading quiz…

Polls

Twelve poll variants: classic, binary, versus with images, image-first hot-or-not, paginated, multiple-vote, hidden-results, interstitial, login-required, shuffle-questions, shuffle-answers, and draw-subset — server-verified with anonymous voting by default and an explicit login-required mode.

Live specimen

Classic Poll

Multi-option poll with results shown after voting.

Loading poll…
Live specimen

Versus Poll

Head-to-head comparison poll with two large image answers and always-visible results.

Versus PollTap to vote

Two approaches, two images — pick your philosophy.

[Snax Example] Ship fast or polish longer?

Live specimen

Binary Poll

A simple yes-or-not-yet question.

Loading poll…
Live specimen

Hot or Not

Image-first interaction: rate each blueprint design as Hot or Not, one large image at a time with Hot/Not controls directly below.

Hot or NotTap to vote

Rate each blueprint-style design as Hot or Not.

Question 1 of 4
1/4

Hot or Not · 1 of 4

Tournament Operations Center

Tournament Operations Center

Live specimen

Paginated Poll

A paginated multi-question poll — one question at a time with Next/Previous controls.

Loading poll…
Live specimen

Hidden Results Poll

Results are hidden until the user clicks View Results.

Loading poll…
Live specimen

Multiple Vote Poll

A multi-question poll where you can vote on multiple questions at once.

Loading poll…
Live specimen

Login Required Poll

A poll that requires login to vote — only authenticated users can submit responses.

Loading poll…
Live specimen

Interstitial Poll

A paginated poll that shows a safe in-app content placeholder between questions — not a third-party ad.

Loading poll…
Live specimen

Shuffle Questions Poll

Questions appear in a shuffled order, stable per participant. Reload to see a different order.

Loading poll…
Live specimen

Shuffle Answers Poll

Answer options appear in a shuffled order, stable per participant. The correct position changes per visitor.

Loading poll…
Live specimen

Draw Subset Poll

Draws a random subset of 2 questions from a pool of 4, stable per participant.

Loading poll…

Registry packages

Ten composable packages from the Snax system, installable via shadcn registry.

Content Blocks

Render structured content blocks (markdown, media, interactive) in any page or post.

npx shadcn@latest add https://benhof.ai/r/content-blocks.json

Content Block Editor

Admin example

Drag-and-drop editor for composing content blocks.

npx shadcn@latest add https://benhof.ai/r/content-block-editor.json

Link Preview

Display external links as rich preview cards with hostname and metadata.

npx shadcn@latest add https://benhof.ai/r/link-preview.json

Vote Control

Reusable upvote control with participant-token deduplication.

npx shadcn@latest add https://benhof.ai/r/vote-control.json

Poll

Interactive poll block with classic, versus, binary, and hot-or-not types.

npx shadcn@latest add https://benhof.ai/r/poll.json

Quiz

Interactive quiz block with trivia and personality scoring.

npx shadcn@latest add https://benhof.ai/r/quiz.json

Ranked List

Ranked list block with community submissions, voting, and affiliate support.

npx shadcn@latest add https://benhof.ai/r/ranked-list.json

Moderation Queue

Admin example

Admin surface for reviewing community submissions.

npx shadcn@latest add https://benhof.ai/r/moderation-queue.json

Format Chooser

Admin example

Format selector for Create Studio's sixteen publishing formats.

npx shadcn@latest add https://benhof.ai/r/format-chooser.json

Create Studio

Admin example

Full admin authoring studio for all Snax formats.

npx shadcn@latest add https://benhof.ai/r/create-studio.json

Registry index: /r/registry.json. Every format above is rendered with its production component path.