--- title: Built with Pennington description: A gallery of sites and tools built with Pennington — and the .NET-native stack it grew up alongside. canonical_url: https://usepennington.net/showcase/ sidecar_url: https://usepennington.net/showcase.md content_hash: sha256:09ab970107fa114fe7f7d5e7c1316f5da50286bde2e7448ab3379322cac7a867 tokens: 1847 uid: showcase reading_time_minutes: 1 --- Showcase # Built with Pennington A gallery of sites and tools built with Pennington — and the .NET-native stack it grew up alongside. A gallery of sites and tools built with Pennington — and the .NET-native stack it grew up alongside. Each one leans on the content pipeline differently; these are the ones worth a closer look. ## MonorailCSS monorailcss.github.io/MonorailCss.Framework monorailcss.github.io/MonorailCss.Framework ![Screenshot of MonorailCSS](/showcase/monorailcss.png) ![Screenshot of MonorailCSS in dark mode](/showcase/monorailcss-dark.png) A Tailwind-compatible JIT CSS engine written in pure C# — and the engine that styles Pennington itself. Hand it utility class names and it compiles exactly the CSS they need, in-process and npm-free: oklch theme palettes, custom variants, arbitrary `[values]`, and tailwind-style conflict resolution. Its docs are the compiler documenting itself. Notable Pennington use A custom `IContentService` reflects over the engine's own documentation model to publish 169 utility-reference pages — and each one compiles its example CSS live, through a real `CssFramework` instance, at render time. Custom IContentServiceSelf-documentingoklch theme palettes:symbol code fencesSplit llms.txt subtree [Visit site](https://monorailcss.github.io/MonorailCss.Framework/) ## Spectre.Console spectreconsole.net spectreconsole.net ![Screenshot of Spectre.Console](/showcase/spectre-console.png) ![Screenshot of Spectre.Console in dark mode](/showcase/spectre-console-dark.png) Documentation for Spectre.Console, the library for rich cross-platform .NET console apps — tables, trees, prompts, live progress, and markup. The site skips the packaged template and is built straight on `AddPennington`: one bespoke Blazor host wiring three markdown sources, each with its own front-matter type. It is the deepest custom integration here — nearly every Pennington seam, exercised at once. Notable Pennington use A single widget page fuses three features at once — a VCR#-recorded terminal SVG, source pulled live from a sibling project through a `:symbol` fence, and a reflection-generated API table rendered by an embedded Mdazor component. Raw AddPennington host:symbol source linkingReflection API tablesMdazor componentsVCR# terminal SVGs [Visit site](https://spectreconsole.net/) ## Pennington usepennington.net usepennington.net ![Screenshot of Pennington](/showcase/pennington.png) ![Screenshot of Pennington in dark mode](/showcase/pennington-dark.png) Pennington's own documentation, generated by the pipeline it documents — markdown in, a fast static docs-and-blog site out, styled with MonorailCSS. The reference build: one DocSite host dogfooding tree-sitter source fences, a reflection-driven API reference, per-area PDF books, and a hand-tuned grape OKLCH palette. Notable Pennington use Code samples are never pasted. `:symbol` fences embed real source by name-path at build time — 212 of them across 68 pages, resolved against the repo root — so every quoted snippet stays in lockstep with the file it came from. DocSite template:symbol code fencesReflection API referencePer-area PDF booksCtrl-K search [Visit site](https://usepennington.net/) ## Ashcroft usepennington.github.io/ashcroft usepennington.github.io/ashcroft ![Screenshot of Ashcroft](/showcase/ashcroft.png) Ashcroft generates Open Graph images, X cards, and blog headers from a small C# API: set a background, describe the content, pin it to one of nine anchors, save. SkiaSharp draws it and HarfBuzz shapes every string — real kerning, honest wrapping, shrink-to-fit before ellipsis, emoji and CJK fallback — with an automatic legibility scrim behind text over photos. Notable Pennington use Nothing on the docs page is a screenshot. Each example shows its C# source through a `:symbol` fence, while the image beside it is rendered by running that exact method through a `/samples/{id}.png` endpoint wired into Pennington's content discovery — even the page's own `og:image`. csharp:symbol sourceCustom IContentServiceSelf-rendered og:imageSkiaSharp + HarfBuzzCode shown == code run [Visit site](https://usepennington.github.io/ashcroft/) ## VCR# phil-scott-78.github.io/vcr phil-scott-78.github.io/vcr ![Screenshot of VCR#](/showcase/vcr.png) ![Screenshot of VCR# in dark mode](/showcase/vcr-dark.png) A browserless .NET terminal recorder: it turns `.tape` scripts into SVGs, GIFs, and videos by driving a real shell over an in-process pseudo-terminal and rendering frames with a from-scratch VT500 engine — no ttyd, no Chromium, and SVG output needs no external binaries at all. The docs are a near-stock DocSite that earn their polish by dogfooding the tool: every embedded recording is an SVG VCR# made from its own sample tapes. Notable Pennington use The whole site is essentially one `AddDocSite` call — but it slots in a custom `ICodeHighlighter` at priority 60, above the built-in TextMate highlighter and below shell, to syntax-color the `.tape` language with a hand-written TextMate grammar. One AddDocSite callCustom tape highlighterVcrTape componentSelf-rendered SVG demosDiataxis four areas [Visit site](https://phil-scott-78.github.io/vcr/) ## Beck usepennington.github.io/beck usepennington.github.io/beck ![Screenshot of Beck](/showcase/beck.png) ![Screenshot of Beck in dark mode](/showcase/beck-dark.png) Declarative, animated architecture diagrams from YAML — "Mermaid, but sexy." Describe a system in a few lines of YAML and Beck lays it out, routes the edges, themes itself from the host's CSS variables, and animates packets flowing through it. The docs are a bare `AddPennington` host that owns the entire chrome — a custom landing, a live playground, a hand-built sidebar — and dogfood the tool: every diagram is rendered live by Beck, wearing the site's MonorailCSS emerald palette and following its dark mode. Notable Pennington use The reference pages hand-maintain no token tables. A `BeckGallery` Mdazor component reflects over Beck's authoring enums and renders each value as a live `beck` fence, so the gallery tracks the schema automatically — and inherits the host palette and dark mode for free. Raw AddPennington hostCustom Blazor chromeMdazor token gallery:symbol source fencesSelf-rendered diagrams [Visit site](https://usepennington.github.io/beck/) ## Thirty25 thirty25.blog thirty25.blog ![Screenshot of Thirty25](/showcase/thirty25.png) ![Screenshot of Thirty25 in dark mode](/showcase/thirty25-dark.png) Phil Scott's personal dev blog, and the gallery's lone BlogSite — a single `AddBlogSite()` call that wires the homepage hero, a project list, and social links, plus RSS, a sitemap, and tag browsing. Posts are dated Markdown carrying tags, series, and a repository link in front matter. Notable Pennington use It hands Pennington's `SocialCardOptions.Render` hook a SkiaSharp + HarfBuzz canvas, minting a 1200x630 OpenGraph card for every post — title, description, and date drawn over a gradient-faded background image. AddBlogSite templateSkiaSharp social cardsCustom GBNF highlighter:symbol from projectsRSS + tags + series [Visit site](https://thirty25.blog/) Building something with Pennington? [Add your site](https://github.com/usepennington/pennington).