Vibecode Orshot

You are building a lean indie version of Orshot.

Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt.

===== README.md =====
# Orshot indie build

## Goal

Build the smallest trustworthy replacement for the core Orshot workflow for one developer or a tiny team.

## Scope

Fill an HTML template with JSON, render it in headless Chromium at a fixed viewport, return PNG or PDF over HTTP, and batch a CSV through the same path.

## Quick start

1. Install the documented dependencies.
2. Copy `.env.example` to `.env`.
3. Run the development command chosen during implementation.
4. Complete the acceptance checks in `BUILD_PLAN.md`.

## Honest limits

This build deliberately does not replace:
- visual studio editor for non developers
- 2,000 plus prebuilt templates
- one design auto resized to every social format
- scheduled and webhook driven workflows
- publishing to social platforms
- MCP and agent integrations
- white label embedded editor
- workspaces, audit logs, and team access

If those capabilities are essential, use Bannerbear instead of pretending the gap is solved.

===== AGENTS.md =====
# Agent instructions

- Optimize for a working, understandable weekend build.
- Prefer the fewest moving parts that satisfy the brief.
- Do not invent cryptography, security guarantees, APIs, or compliance claims.
- Keep secrets out of source control and logs.
- Add focused tests for destructive, security-sensitive, and data-loss paths.
- Run the project checks before declaring the build complete.
- Record any deliberate shortcut in the README under "Tradeoffs".

===== BUILD_PLAN.md =====
# Build plan

## Original build brief

Build me a local templated image and PDF render service to replace an image generation API. Requirements:

- Node 22 with Express in a single server.js, plus Playwright driving Chromium.
  No build step, no framework, no database.
- A template is a folder at templates/<name>/ holding index.html with Handlebars
  placeholders, style.css, and meta.json with width, height, and defaults.
- Ship 3 starters: an OG card at 1200x630, an Instagram square at 1080x1080, and
  a one page invoice that renders to PDF.
- POST /render {template, modifications, format} returns PNG, JPEG, or PDF.
  Fill the template, set the viewport from meta.json, screenshot the page.
  PDFs go through page.pdf() instead.
- GET /render/<template>.png?headline=...&image=... does the same thing from
  query params so the URL can be dropped straight into an img tag.
- POST /batch accepts a CSV or a JSON array, renders every row into out/ with a
  concurrency of 4, and returns a manifest of paths.
- A brand.json with 4 colors and 2 local font files, injected into every template
  as CSS custom properties so a rebrand is one file edit.
- Keep one browser instance warm and reuse pages. Launching Chromium per request
  is the thing that makes the naive version unusable.
- Cache by a hash of template plus modifications into .cache/ and serve hits from
  disk before touching the browser.
- Fonts load from ./fonts via @font-face with file:// URLs, and the renderer waits
  on document.fonts.ready so text never screenshots mid swap.
- Out of scope: a visual editor, video, social publishing, and multi tenant auth.
  I write templates in HTML by hand and that is the trade I am making.
- README: how to add a template, how fonts resolve, and the Docker line that
  installs the Chromium system dependencies.

## Required capabilities

- headless Chromium (Playwright or Puppeteer)
- a template language and a place to store templates
- a warm browser pool and a render queue
- font and brand asset handling
- object storage plus a CDN for delivery
- a host that tolerates burst traffic

## Delivery order

1. Scaffold the smallest runnable application and document its commands.
2. Implement the primary data model and core workflow.
3. Add validation, safe failure states, and persistence.
4. Cover the critical path with automated tests.
5. Exercise a clean install from the README and fix every missing step.

## Done when

- A new user can go from clone to first successful workflow using only the README.
- The core workflow works without paid infrastructure unless the brief requires it.
- Tests cover the highest-risk behavior.
- Known limitations are explicit rather than hidden.

===== .env.example =====
# Copy to .env and document every variable when it is introduced.
# Never put real credentials in this file.

APP_ENV=development
# Add only values required by the selected implementation.

You are building a lean indie version of Orshot.

Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt.

===== README.md =====
# Orshot indie build

## Goal

Build the smallest trustworthy replacement for the core Orshot workflow for one developer or a tiny team.

## Scope

Fill an HTML template with JSON, render it in headless Chromium at a fixed viewport, return PNG or PDF over HTTP, and batch a CSV through the same path.

## Quick start

1. Install the documented dependencies.
2. Copy `.env.example` to `.env`.
3. Run the development command chosen during implementation.
4. Complete the acceptance checks in `BUILD_PLAN.md`.

## Honest limits

This build deliberately does not replace:
- visual studio editor for non developers
- 2,000 plus prebuilt templates
- one design auto resized to every social format
- scheduled and webhook driven workflows
- publishing to social platforms
- MCP and agent integrations
- white label embedded editor
- workspaces, audit logs, and team access

If those capabilities are essential, use Bannerbear instead of pretending the gap is solved.

===== AGENTS.md =====
# Agent instructions

- Optimize for a working, understandable weekend build.
- Prefer the fewest moving parts that satisfy the brief.
- Do not invent cryptography, security guarantees, APIs, or compliance claims.
- Keep secrets out of source control and logs.
- Add focused tests for destructive, security-sensitive, and data-loss paths.
- Run the project checks before declaring the build complete.
- Record any deliberate shortcut in the README under "Tradeoffs".

===== BUILD_PLAN.md =====
# Build plan

## Original build brief

Build me a local templated image and PDF render service to replace an image generation API. Requirements:

- Node 22 with Express in a single server.js, plus Playwright driving Chromium.
  No build step, no framework, no database.
- A template is a folder at templates/<name>/ holding index.html with Handlebars
  placeholders, style.css, and meta.json with width, height, and defaults.
- Ship 3 starters: an OG card at 1200x630, an Instagram square at 1080x1080, and
  a one page invoice that renders to PDF.
- POST /render {template, modifications, format} returns PNG, JPEG, or PDF.
  Fill the template, set the viewport from meta.json, screenshot the page.
  PDFs go through page.pdf() instead.
- GET /render/<template>.png?headline=...&image=... does the same thing from
  query params so the URL can be dropped straight into an img tag.
- POST /batch accepts a CSV or a JSON array, renders every row into out/ with a
  concurrency of 4, and returns a manifest of paths.
- A brand.json with 4 colors and 2 local font files, injected into every template
  as CSS custom properties so a rebrand is one file edit.
- Keep one browser instance warm and reuse pages. Launching Chromium per request
  is the thing that makes the naive version unusable.
- Cache by a hash of template plus modifications into .cache/ and serve hits from
  disk before touching the browser.
- Fonts load from ./fonts via @font-face with file:// URLs, and the renderer waits
  on document.fonts.ready so text never screenshots mid swap.
- Out of scope: a visual editor, video, social publishing, and multi tenant auth.
  I write templates in HTML by hand and that is the trade I am making.
- README: how to add a template, how fonts resolve, and the Docker line that
  installs the Chromium system dependencies.

## Required capabilities

- headless Chromium (Playwright or Puppeteer)
- a template language and a place to store templates
- a warm browser pool and a render queue
- font and brand asset handling
- object storage plus a CDN for delivery
- a host that tolerates burst traffic

## Delivery order

1. Scaffold the smallest runnable application and document its commands.
2. Implement the primary data model and core workflow.
3. Add validation, safe failure states, and persistence.
4. Cover the critical path with automated tests.
5. Exercise a clean install from the README and fix every missing step.

## Done when

- A new user can go from clone to first successful workflow using only the README.
- The core workflow works without paid infrastructure unless the brief requires it.
- Tests cover the highest-risk behavior.
- Known limitations are explicit rather than hidden.

===== .env.example =====
# Copy to .env and document every variable when it is introduced.
# Never put real credentials in this file.

APP_ENV=development
# Add only values required by the selected implementation.

You are building a production product version of Orshot.

Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt.

===== PRODUCT.md =====
# Orshot product brief

## Problem

The render itself is not the moat. Headless Chromium plus a Handlebars template gets you a PNG or a PDF from JSON in an afternoon, and for one team rendering its own OG images that really is the whole job. What does not fall out of a weekend is everything around the render: a visual editor non engineers can use, one design that re solves cleanly into a story, a square, and an OG card, workflows that fire on a schedule or a webhook against Sheets and Airtable, publishing into 15 plus social platforms, and a render farm that stays warm and predictable under burst. Build it if you own the templates and the volume is small. Keep paying if the people making the creatives do not write HTML.

## Product outcome

Fill an HTML template with JSON, render it in headless Chromium at a fixed viewport, return PNG or PDF over HTTP, and batch a CSV through the same path.

## Target user

A serious builder who needs a maintainable product foundation rather than a one-off demo.

## Required capabilities

- headless Chromium (Playwright or Puppeteer)
- a template language and a place to store templates
- a warm browser pool and a render queue
- font and brand asset handling
- object storage plus a CDN for delivery
- a host that tolerates burst traffic

## Explicit non-goals for v1

- visual studio editor for non developers
- 2,000 plus prebuilt templates
- one design auto resized to every social format
- scheduled and webhook driven workflows
- publishing to social platforms
- MCP and agent integrations
- white label embedded editor
- workspaces, audit logs, and team access

## Success criteria

- The primary workflow is measurable end to end.
- Setup is reproducible in a clean environment.
- Failure, recovery, and support paths are documented.
- Product claims match what the implementation actually guarantees.

===== ARCHITECTURE.md =====
# Architecture

## Starting brief

Build me a local templated image and PDF render service to replace an image generation API. Requirements:

- Node 22 with Express in a single server.js, plus Playwright driving Chromium.
  No build step, no framework, no database.
- A template is a folder at templates/<name>/ holding index.html with Handlebars
  placeholders, style.css, and meta.json with width, height, and defaults.
- Ship 3 starters: an OG card at 1200x630, an Instagram square at 1080x1080, and
  a one page invoice that renders to PDF.
- POST /render {template, modifications, format} returns PNG, JPEG, or PDF.
  Fill the template, set the viewport from meta.json, screenshot the page.
  PDFs go through page.pdf() instead.
- GET /render/<template>.png?headline=...&image=... does the same thing from
  query params so the URL can be dropped straight into an img tag.
- POST /batch accepts a CSV or a JSON array, renders every row into out/ with a
  concurrency of 4, and returns a manifest of paths.
- A brand.json with 4 colors and 2 local font files, injected into every template
  as CSS custom properties so a rebrand is one file edit.
- Keep one browser instance warm and reuse pages. Launching Chromium per request
  is the thing that makes the naive version unusable.
- Cache by a hash of template plus modifications into .cache/ and serve hits from
  disk before touching the browser.
- Fonts load from ./fonts via @font-face with file:// URLs, and the renderer waits
  on document.fonts.ready so text never screenshots mid swap.
- Out of scope: a visual editor, video, social publishing, and multi tenant auth.
  I write templates in HTML by hand and that is the trade I am making.
- README: how to add a template, how fonts resolve, and the Docker line that
  installs the Chromium system dependencies.

## Boundaries

Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors.

## Production baseline

- Configuration: validated at startup with safe local defaults where possible.
- Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives.
- Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions.
- Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts.
- Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists.
- Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test.

## Decision records

For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it.

===== AGENTS.md =====
# Agent instructions

- Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code.
- Implement milestone by milestone; keep each change reviewable and leave the application runnable.
- Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present.
- Never invent cryptography or silently weaken a requirement to make a test pass.
- Use provider interfaces for external services and deterministic fakes in tests.
- Add migrations and rollback or recovery notes for persistent data changes.
- Log useful operational context without credentials, tokens, passwords, or personal data.
- Update documentation and run all checks before completing a milestone.

===== MILESTONES.md =====
# Delivery milestones

## M0 — Decisions and scaffold

- Confirm the runtime, persistence model, threat boundaries, and deployment target.
- Create a reproducible local environment and continuous checks.

## M1 — Core workflow

- Implement the smallest end-to-end product path with validation and tests.
- Keep integrations behind interfaces.

## M2 — Trust layer

- Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards.
- Test abuse cases and destructive operations.

## M3 — Operability

- Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration.

## M4 — Release gate

- Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise.
- Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations.

===== OPERATIONS.md =====
# Operations

## Before release

- Validate configuration and secrets at startup.
- Define backup, restore, and rollback procedures and test them.
- Document logs, error tracking, health signals, and alert ownership.
- Set dependency update and vulnerability review expectations.

## Incident checklist

1. Contain the issue without destroying evidence or user data.
2. Record the timeline and affected scope.
3. Rotate exposed secrets and revoke compromised sessions or credentials.
4. Restore from a verified source when needed.
5. Document the root cause, remediation, and regression test.

## Launch constraint

Do not market omitted Orshot capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.

# Orshot indie build

## Goal

Build the smallest trustworthy replacement for the core Orshot workflow for one developer or a tiny team.

## Scope

Fill an HTML template with JSON, render it in headless Chromium at a fixed viewport, return PNG or PDF over HTTP, and batch a CSV through the same path.

## Quick start

1. Install the documented dependencies.
2. Copy `.env.example` to `.env`.
3. Run the development command chosen during implementation.
4. Complete the acceptance checks in `BUILD_PLAN.md`.

## Honest limits

This build deliberately does not replace:
- visual studio editor for non developers
- 2,000 plus prebuilt templates
- one design auto resized to every social format
- scheduled and webhook driven workflows
- publishing to social platforms
- MCP and agent integrations
- white label embedded editor
- workspaces, audit logs, and team access

If those capabilities are essential, use Bannerbear instead of pretending the gap is solved.

# Agent instructions

- Optimize for a working, understandable weekend build.
- Prefer the fewest moving parts that satisfy the brief.
- Do not invent cryptography, security guarantees, APIs, or compliance claims.
- Keep secrets out of source control and logs.
- Add focused tests for destructive, security-sensitive, and data-loss paths.
- Run the project checks before declaring the build complete.
- Record any deliberate shortcut in the README under "Tradeoffs".

# Build plan

## Original build brief

Build me a local templated image and PDF render service to replace an image generation API. Requirements:

- Node 22 with Express in a single server.js, plus Playwright driving Chromium.
  No build step, no framework, no database.
- A template is a folder at templates/<name>/ holding index.html with Handlebars
  placeholders, style.css, and meta.json with width, height, and defaults.
- Ship 3 starters: an OG card at 1200x630, an Instagram square at 1080x1080, and
  a one page invoice that renders to PDF.
- POST /render {template, modifications, format} returns PNG, JPEG, or PDF.
  Fill the template, set the viewport from meta.json, screenshot the page.
  PDFs go through page.pdf() instead.
- GET /render/<template>.png?headline=...&image=... does the same thing from
  query params so the URL can be dropped straight into an img tag.
- POST /batch accepts a CSV or a JSON array, renders every row into out/ with a
  concurrency of 4, and returns a manifest of paths.
- A brand.json with 4 colors and 2 local font files, injected into every template
  as CSS custom properties so a rebrand is one file edit.
- Keep one browser instance warm and reuse pages. Launching Chromium per request
  is the thing that makes the naive version unusable.
- Cache by a hash of template plus modifications into .cache/ and serve hits from
  disk before touching the browser.
- Fonts load from ./fonts via @font-face with file:// URLs, and the renderer waits
  on document.fonts.ready so text never screenshots mid swap.
- Out of scope: a visual editor, video, social publishing, and multi tenant auth.
  I write templates in HTML by hand and that is the trade I am making.
- README: how to add a template, how fonts resolve, and the Docker line that
  installs the Chromium system dependencies.

## Required capabilities

- headless Chromium (Playwright or Puppeteer)
- a template language and a place to store templates
- a warm browser pool and a render queue
- font and brand asset handling
- object storage plus a CDN for delivery
- a host that tolerates burst traffic

## Delivery order

1. Scaffold the smallest runnable application and document its commands.
2. Implement the primary data model and core workflow.
3. Add validation, safe failure states, and persistence.
4. Cover the critical path with automated tests.
5. Exercise a clean install from the README and fix every missing step.

## Done when

- A new user can go from clone to first successful workflow using only the README.
- The core workflow works without paid infrastructure unless the brief requires it.
- Tests cover the highest-risk behavior.
- Known limitations are explicit rather than hidden.

# Copy to .env and document every variable when it is introduced.
# Never put real credentials in this file.

APP_ENV=development
# Add only values required by the selected implementation.

# Orshot product brief

## Problem

The render itself is not the moat. Headless Chromium plus a Handlebars template gets you a PNG or a PDF from JSON in an afternoon, and for one team rendering its own OG images that really is the whole job. What does not fall out of a weekend is everything around the render: a visual editor non engineers can use, one design that re solves cleanly into a story, a square, and an OG card, workflows that fire on a schedule or a webhook against Sheets and Airtable, publishing into 15 plus social platforms, and a render farm that stays warm and predictable under burst. Build it if you own the templates and the volume is small. Keep paying if the people making the creatives do not write HTML.

## Product outcome

Fill an HTML template with JSON, render it in headless Chromium at a fixed viewport, return PNG or PDF over HTTP, and batch a CSV through the same path.

## Target user

A serious builder who needs a maintainable product foundation rather than a one-off demo.

## Required capabilities

- headless Chromium (Playwright or Puppeteer)
- a template language and a place to store templates
- a warm browser pool and a render queue
- font and brand asset handling
- object storage plus a CDN for delivery
- a host that tolerates burst traffic

## Explicit non-goals for v1

- visual studio editor for non developers
- 2,000 plus prebuilt templates
- one design auto resized to every social format
- scheduled and webhook driven workflows
- publishing to social platforms
- MCP and agent integrations
- white label embedded editor
- workspaces, audit logs, and team access

## Success criteria

- The primary workflow is measurable end to end.
- Setup is reproducible in a clean environment.
- Failure, recovery, and support paths are documented.
- Product claims match what the implementation actually guarantees.

# Architecture

## Starting brief

Build me a local templated image and PDF render service to replace an image generation API. Requirements:

- Node 22 with Express in a single server.js, plus Playwright driving Chromium.
  No build step, no framework, no database.
- A template is a folder at templates/<name>/ holding index.html with Handlebars
  placeholders, style.css, and meta.json with width, height, and defaults.
- Ship 3 starters: an OG card at 1200x630, an Instagram square at 1080x1080, and
  a one page invoice that renders to PDF.
- POST /render {template, modifications, format} returns PNG, JPEG, or PDF.
  Fill the template, set the viewport from meta.json, screenshot the page.
  PDFs go through page.pdf() instead.
- GET /render/<template>.png?headline=...&image=... does the same thing from
  query params so the URL can be dropped straight into an img tag.
- POST /batch accepts a CSV or a JSON array, renders every row into out/ with a
  concurrency of 4, and returns a manifest of paths.
- A brand.json with 4 colors and 2 local font files, injected into every template
  as CSS custom properties so a rebrand is one file edit.
- Keep one browser instance warm and reuse pages. Launching Chromium per request
  is the thing that makes the naive version unusable.
- Cache by a hash of template plus modifications into .cache/ and serve hits from
  disk before touching the browser.
- Fonts load from ./fonts via @font-face with file:// URLs, and the renderer waits
  on document.fonts.ready so text never screenshots mid swap.
- Out of scope: a visual editor, video, social publishing, and multi tenant auth.
  I write templates in HTML by hand and that is the trade I am making.
- README: how to add a template, how fonts resolve, and the Docker line that
  installs the Chromium system dependencies.

## Boundaries

Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors.

## Production baseline

- Configuration: validated at startup with safe local defaults where possible.
- Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives.
- Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions.
- Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts.
- Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists.
- Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test.

## Decision records

For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it.

# Agent instructions

- Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code.
- Implement milestone by milestone; keep each change reviewable and leave the application runnable.
- Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present.
- Never invent cryptography or silently weaken a requirement to make a test pass.
- Use provider interfaces for external services and deterministic fakes in tests.
- Add migrations and rollback or recovery notes for persistent data changes.
- Log useful operational context without credentials, tokens, passwords, or personal data.
- Update documentation and run all checks before completing a milestone.

# Delivery milestones

## M0 — Decisions and scaffold

- Confirm the runtime, persistence model, threat boundaries, and deployment target.
- Create a reproducible local environment and continuous checks.

## M1 — Core workflow

- Implement the smallest end-to-end product path with validation and tests.
- Keep integrations behind interfaces.

## M2 — Trust layer

- Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards.
- Test abuse cases and destructive operations.

## M3 — Operability

- Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration.

## M4 — Release gate

- Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise.
- Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations.

# Operations

## Before release

- Validate configuration and secrets at startup.
- Define backup, restore, and rollback procedures and test them.
- Document logs, error tracking, health signals, and alert ownership.
- Set dependency update and vulnerability review expectations.

## Incident checklist

1. Contain the issue without destroying evidence or user data.
2. Record the timeline and affected scope.
3. Rotate exposed secrets and revoke compromised sessions or credentials.
4. Restore from a verified source when needed.
5. Document the root cause, remediation, and regression test.

## Launch constraint

Do not market omitted Orshot capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.

$ choose a build depth, inspect the files, then open the complete pack in your agent · this prompt is generated from the build plan · improve it via PR