Truepane

Everything renders to<canvas>in the browser. Screenshots stay on your machine. Optional AI helpers send only the text you ask them to process (and, when supplied, your Groq API key) to the configured Edge Function and model provider. Google Fonts are also loaded from Google's CDN unless you use a system or uploaded font.

Most screenshot generators composite a pre-rendered PNG of a phone. This onedraws the device frame procedurallyon a canvas — body, bezel, buttons, camera, and the screen mask are all geometry, not bitmaps. That choice drives most of what makes the tool small, sharp, and cheap to run.

- Procedural device framesat exact store sizes: iPhone 6.9″ (1320×2868), iPad 13″ (2064×2752), Android phone (1080×2400), Android tablet (1600×2560).
- Backgrounds = fill + shape.A fill layer (solid, or linear/radial gradient) plus an optional shape overlay (rings, blobs, waves, dots, mesh, arcs, triangles, grid, zigzag, bubbles), each with independent colors. Shapes flow continuously across the strip and reproduce exactly from a stored seed.
- Custom background images: upload a backdrop, then control blur, fit, opacity, scrim, and whether it spans one slide or the full strip. Imported images are resized locally to a practical render budget.
- One composable shape family.Alongside the ten fixed looks,Custom…is a parameter surface rather than a preset: pick a primitive (ring, disc, arc, triangle, bar, blob) and an arrangement (scatter, grid, row, radial, wave), then tune count, size, spacing, rotation, stroke weight, and a fade along the strip. It isdata, not code— twelve bounded numbers and two closed enums — so a shared project file stays inert, renders identically forever, and can be diffed. That makes it the intended surface for agent-driven variation over MCP: an agent composes a background by filling in numbers instead of shipping drawing code. Its controls live behindAdvancedin the background panel so the picker stays uncluttered.
- Color tools: content-based palette extraction from your screenshot, harmonized shape suggestions, an eyedropper (native EyeDropper API + a click-a-slide fallback for Safari/Firefox), and curated color-science presets.
- AI prompt → style(optional): describe a vibe ("calm, warm, organic") and a Groq model returns a style + palette. Bring your own Groq key, or use the hosted endpoint.
- Typography: curated Google Fonts (incl. Apple/Android system fonts and Noto multi-script + CJK) plus custom.ttf/.otf/.woff(2)upload.
- Flexible composition: choose a preset or place text and devices directly, resize them, rotate devices from −20° to +20°, and drag or nudge mockups on canvas.
- Cross-slide devices: span one synchronized device across two adjacent slides. Both clipped halves share their screenshot, position, scale, and rotation.
- Export: per-slide PNG, one horizontal strip PNG, or a ZIP of everything. Plus JSON project import/export. The editor auto-saves documents and content-addressed binary assets to IndexedDB, with a localStorage fallback where IndexedDB is unavailable.
- Responsive editor with history: purpose-built desktop and mobile layouts, light and dark themes, and a 100-step undo/redo history with standard keyboard shortcuts.
- Multi-platform projects: keep separate iPhone, iPad, Android phone, and Android tablet captures on the same ordered slides. Locale screenshots fall back only to their own target's source capture; they never borrow another platform's image.
- Localization: store translated copy, locale-specific captures, and per-language fonts in one project. Translation can be entered manually, generated through the optional AI helper, or produced by an MCP-connected agent.
- Preview-first bulk import: choose a folder or ZIP, review deterministic target/locale/slide mappings, correct rows, then apply once. Explicittarget/locale/NN-name.pngpaths take priority; conflicts never overwrite silently.
- Shared release preflight: the editor and MCP report the same stable issue codes for missing captures/translations, locale fallbacks, crop risk, composition, fonts, and fill/text contrast. Warnings are advisory and require “export anyway” in the web editor.
- Local brand kits: save typography, text colors, background, custom font, and default composition for reuse. Kits are portable.truepane-brand.jsonfiles and never contain slides, screenshots, targets, translations, credentials, or history.
- Flexible output surfaces: keep the four native store screenshot sizes, render a Google Play feature graphic at exactly 1024×500, or choose bounded custom dimensions. The procedural device is scaled and placed as a layer; captures are never stretched.
- Release update mode: explicitly save deterministic release signatures, compare added/changed/unchanged/removed assets later, and export a changed-only ZIP with a manifest. Baselines contain hashes, not rendered PNGs, and never update implicitly.

Each of these was a deliberate fork, chosen for a reason:

- Procedural frames, not image mockups.The target isflat store-submissionscreenshots at exact required resolutions — which procedural drawing nails: crisp at any scale, no asset pipeline, andno licensing exposure(most "free" device-mockup packs are not actually clean for commercial redistribution). Flat 2D rotation is supported; perspective and photographic mockups remain out of scope.
- Parametric backgrounds, not diffusion images.Backgrounds are seeded procedural shapes that reproduce exactly and stay tasteful. A raster image model would be unpredictable, costly per call, hard to keep consistent across a set, and would force a heavier backend. AI is used only as a thinprompt → parameterslayer.
- Content-based paletteruns entirely client-side — no model, no cost.
- $0-egress architecture.The app is static and all image work happens in the browser, so hosting bandwidth is effectively free. The only metered cost is the optional AI prompt call, which is rate-limited and can be replaced with your own key.

- src/core/— platform-neutral project logic shared by the browser and MCP server: canvas rendering, normalization, composition, output validation, preflight, bulk import, brand kits, release comparison, and background-image preparation.src/core/render.tsdefines the device frames and paints every pixel.

- Concentric-corner invariant:the BODY / BEZEL / SCREEN rounded rects share a center of curvature (x + requal across all three; same fory + r). Breaking it produces "laddery" corner kinks. New frames go throughdefineFrame(), which throws on violation; theshell()helper derives the inner rects so the invariant holds by construction.
- Backgrounds render in two layers: afill(solid / linear / radial gradient) then an optionalshapeoverlay from a generator registry. Each shape lays out in strip-space so it flows across slides; a seededmulberry32PRNG keeps a strip reproducible.
- Masking uses offscreen canvases withdestination-in/destination-out(rather thanctx.clip()) to get antialiased edges.

npm install npm run dev # http://localhost:5173 npm run build # tsc -b && vite build → dist/ npm run preview # serve the production build npm run typecheck npm test # vitest (pure-logic suite)

The AI prompt feature is optional. Without it, the app is fully functional and the AI controls are hidden. To enable them, copy.env.exampleto.envand opt in:

VITE_ENABLE_AI=true VITE_PUBLIC_SITE_URL=https://truepane.dev VITE_BG_PROMPT_URL=https://YOUR-PROJECT.supabase.co/functions/v1/generator-bg-prompt VITE_SUPABASE_ANON_KEY=your-anon-key VITE_TRANSLATE_URL=https://YOUR-PROJECT.supabase.co/functions/v1/generator-translate

VITE_ENABLE_AIgates both helpers. Configure either endpoint independently; an unconfigured helper stays hidden. The Edge Functions readGROQ_API_KEYfrom Supabase secrets. The background helper also accepts an optionalBG_PROMPT_MODEL(defaultllama-3.3-70b-versatile). Deploy them with:

supabase functions deploy generator-bg-prompt --project-ref YOUR-REF --no-verify-jwt supabase functions deploy generator-translate --project-ref YOUR-REF --no-verify-jwt

Server-side rate limiting is currently best-effort (in-memory, per isolate). Add a durable limiter before a high-traffic public launch.

A soft, client-side password gate can be enabled during private beta by settingVITE_GATE_PASSWORD_HASHto the SHA-256 of your password (unset = no gate):

printf '%s' 'your-password' | shasum -a 256 # put the hash in .env

It's a deterrent, not real security (it's a static client app) — meant to be removed after beta.

claude mcp add --scope user truepane -- npx -y truepane-mcp

codex mcp add truepane -- npx -y truepane-mcp

Or configure Codex manually in~/.codex/config.toml:

Usespan_device_across_slidesto place one device across an adjacent slide pair. The two clipped halves keep their screenshot, position, scale, and rotation linked, including after project export/import and later screenshot or copy updates.

export_brand_kitandapply_brand_kitmove the current visual defaults between projects without carrying project content. Applying preserves per-slide overrides unlessclear_slide_overrides: trueis explicitly supplied.

Useset_outputto persist a native,play-feature, orcustomoutput on an MCP project.renderalso accepts temporaryoutput_id,output_width,output_height, andoutput_frameoverrides.

Usecompare_release,set_release_baseline, andrender changed_only:truefor release updates through MCP. Any future pixel-affecting renderer change must bumpRENDERER_SCHEMA_VERSIONinsrc/core/release.ts, intentionally marking every asset changed.

Google Fonts are fetched on demand and cached in~/.cache/truepane/fonts(Inter is bundled, so offline rendering works out of the box). The-apple-systemfont renders as real San Francisco on macOS — from your own installed system font, which is never bundled or redistributed (Apple's font is proprietary) — and falls back to Inter on Linux/CI. Because SF is a variable font, its full weight range resolves (including Heavy/Black viatitleWeight/subtitleWeight), not just Regular/Bold. A curated set of Google fonts —Inter, Manrope, and Fraunces— is loaded as a single-file variable font too, so their full weight range resolves as well; every other Google font uses its static faces (typically up to 700). Want another font's full range? Open an issue or PR adding it toVARIABLE_FONT_URLSinserver/mcp/fonts.ts. For non-Latin target languages, pick a font that covers the script (Inter covers Cyrillic/Greek;Noto Sans JP/KR/SCfor CJK;Noto Sans Arabicfor Arabic, which is shaped and laid out right-to-left automatically) — unlike browsers, server-side rendering has no per-glyph system-font fallback, so glyphs a font lacks come out as boxes.

The site builds todist/and can be hosted as a static SPA anywhere. This repository is configured for Cloudflare Workers static assets throughwrangler.jsonc; deploy it with:

SetVITE_PUBLIC_SITE_URLat build time for canonical URLs,robots.txt, the sitemap, and prerendered guide metadata. Set the optional AI variables above only when those helpers should be exposed.

The Inter font files bundled withtruepane-mcpare distributed under the SIL Open Font License 1.1; the copyright notice and license travel with them inserver/mcp/assets/fonts/LICENSE-Inter.txtand in the published npm package.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Create crafted UI components inspired by the best 21st.dev design engineers.

Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server

An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

ALAPI MCP Tools,Call hundreds of API interfaces via MCP

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.