CLI tool that auto-captures <section id=""> elements from your local dev server
and generates a ready-to-fill Build in Public draft log.
No scrolling. No manual naming. No cost.
Taking screenshots for Build in Public posts is tedious: open the browser → scroll → capture → name the file → repeat. The friction is real enough to make you skip publishing altogether.
tpl-shot removes it.
- You run one command
- Playwright opens your local URL in headless mode
- Every
<section id="">is captured as a PNG - A dated folder is created with all screenshots + a
draft.mdto fill in
- Node.js >= 18
- Chromium via Playwright (
npx playwright install chromium)
git clone https://github.com/your-username/tpl-shot.git
cd tpl-shot
npm install
npx playwright install chromiumnpm run capture -- --url http://localhost:3000With a project label:
npm run capture -- --url http://localhost:3000 --project lenscontent/
2026-06-02_lens/
hero.png
features.png
pricing.png
faq.png
draft.md
# BIP — 2026-06-02 · lens
## Sections capturées
| Section | Fichier |
|----------|------------------|
| hero | ./hero.png |
| features | ./features.png |
| pricing | ./pricing.png |
| faq | ./faq.png |
---
## Draft post
**Ce que j'ai construit :**
**Ce que j'ai modifié :**
**Ce que j'ai appris :**
**Prochaine étape :**The content/ folder is gitignored — your screenshots stay local.
Sections must have an id attribute to be detected:
<section id="hero">...</section>
<section id="features">...</section>
<section id="pricing">...</section>Sections without id are ignored.
| Tool | Role |
|---|---|
| Node.js | Runtime |
| Playwright | Headless browser + capture |
| minimist | CLI argument parsing |
No API. No LLM. No external service. Cost: $0.
tpl-shot is one of the internal tools built at Tol Product Lab to remove friction from the Build in Public workflow.
MIT