screenshot studio - Moses Yebei

The Problem

Designers need a quick way to produce polished screenshots—device frames, gradients, annotations, and short videos—without installing heavyweight tools or dealing with watermarks. Existing desktop apps require downloads, licensing, and manual export steps, slowing iteration for marketing or documentation.

What This Does

screenshot-studio is a pure‑browser editor that lets users compose visuals from a library of backgrounds, mock‑ups, and animation presets, then export PNG/JPG, GIF, or MP4. The core UI lives in the components/ directory; for example, components/editor/sections/index.ts bundles the editor panels, while components/canvas/html/index.ts draws the live preview onto an HTML canvas. Asset‑heavy resources (e.g., background images) sit under public/. The Next.js app entry (app/ with route files such as app/[locale]/for/designers/page.tsx) wires these components into server‑rendered pages.

How It Is Wired

Startup – npm run dev launches Next.js (config in next.config.ts). The framework reads the app/ folder to create routes; each route renders a page component that imports the editor UI.
Editor bootstrap – The page component imports components/editor/sections/index.ts. That file re‑exports a collection of section components, the most connected of which is components/editor/sections/SectionWrapper.tsx (17 inbound imports, instability 0).
Canvas pipeline – UI actions dispatch state changes (Zustand stores in lib/store/index.ts, a 1 600‑line file). The updated state flows to components/canvas/html/index.ts, which instantiates components/canvas/ClientCanvas.tsx and the SVG overlay layer (components/canvas/html/SVGAnnotationLayer.tsx).
Export flow – When the user clicks “Export”, components/export/index.ts calls into components/image-render/index.ts for raster images or the FFmpeg‑WASM wrapper for video (lib/r2.ts). These modules contain dense branching logic (high branching density reported in lib/r2.ts).
Blast‑radius hotspots – SectionWrapper.tsx is a hub; changes here affect 17 other modules, so keep it stable. Oversized files (lib/store/index.ts, SVGAnnotationLayer.tsx, RightSettingsPanel.tsx) and deep nesting (max depth 8 in RightSettingsPanel.tsx) add cognitive load and are prime refactor targets.

No circular imports were detected, and the import graph spans 257 internal modules with 149 edges, indicating a relatively flat dependency tree aside from the identified hub.

How To Use It

# Clone the fork you will work on
git clone https://github.com/moses-y/screenshot-studio.git
cd screenshot-studio

# Install dependencies (npm is declared in package.json)
npm install

# Start the development server
npm run dev

Configuration: The repo contains no .env.example or similar files, so no environment variables are required for a local run. Running: The dev server serves the app at http://localhost:3000. The main UI loads from the route app/[locale]/for/designers/page.tsx, which pulls in the editor components described above.

Real‑World Use

A product marketing team can embed the editor in an internal portal, letting copywriters generate device‑framed screenshots of new UI features on the fly. A script could open the page, programmatically set the canvas state via the Zustand store, trigger exportImage() from components/export/index.ts, and retrieve the PNG for inclusion in release notes—all without leaving the browser.

Code Health & Issues

High – No test suite – 257 source files, 0 test files.
High – No CI workflow – No .github/workflows/* or other build gate.
High – Missing build validation (vercel.json) – Deployable artifacts lack automated verification.
Medium – Dependabot disabled – Only one package-lock.json; no update bot.
Medium – Large binaries in repo – public/mac/mac-asset-7.png (12.9 MB) and related WebP assets exceed 5 MB.
Low – Missing repo conventions – No .editorconfig, .gitattributes, or formatter config.

The Bottom Line

screenshot-studio delivers a functional, zero‑install screenshot editor built on modern React/Next.js tooling, but the codebase suffers from missing automated quality checks, oversized modules, and deep nesting that will hinder large‑scale maintenance. It is suitable for teams that need a quick visual tool and are prepared to add testing and CI infrastructure.

What the analyser found

Deployment readiness

5/7

Container image
CI pipeline
Lockfile committed
Test suite
README
License
No committed secrets

Composition

707 files

Markdown261
TSX165
TypeScript90
JSON17
YAML1
CSS1

ReactNext.jsExpressSpringVector store

Architecture

Top-level areas of the codebase, sized by module count. Arrows show how many imports cross from one area into another.

graph TD g0["components 153 modules"] g1["lib 50 modules"] g2["app 33 modules"] g3["hooks 7 modules"] g4["(root) 6 modules"] g5["types 5 modules"] g6["i18n 3 modules"] g4 -->|1| g6

Module dependencies

The 10 most depended-upon modules of 257, from static import analysis. Red outline marks a module in an import cycle.

graph LR n0_itor_sections_SectionWrapper["SectionWrapper"] n1_lib_r2["r2"] n2_onents_editor_sections_index["index"] n3_ts_canvas_utils_shadow_utils["shadow-utils"] n4_i18n_routing["routing"] n5_lib_export_types["types"] n6_lib_constants_backgrounds["backgrounds"] n7_ct_ratio_aspect_ratio_picker["aspect-ratio-picker"] n8_as_dialogs_ImageProgressView["ImageProgressView"] n9_canvas_frames_BrowserToolbar["BrowserToolbar"] n2_onents_editor_sections_index --> n0_itor_sections_SectionWrapper

Dependencies

10 of 74 declared dependencies are a major version behind. Resolved 74 of 74 against the registry.

Package	Declared	Latest	Behind
`@sparticuz/chromium`	^141.0.0	149.0.0	8 major
`react-dropzone`	^14.3.8	20.1.0	6 major
`@types/node`	^20	26.2.0	6 major
`typescript`	5.9.3	7.0.2	2 major
`@prisma/client`	^6.19.0	7.9.1	1 major
`lucide-react`	^0.552.0	1.31.0	1 major
`motion`	^12.23.24	13.1.0	1 major
`prisma`	^6.19.0	7.9.1	1 major

Findings

MediumNo CI/CD pipeline detected - no automated build/test gate .github/ or CI config

What would stop me shipping this

Ranked by severity × confidence × production reach. Reach is the honest discriminator across a collection that is mostly other people's code: the same finding matters more in something that ships.

high3

medium2

low1

Add a test suite; this repository has nonehigh257 occurrences

257 source files, no test files

Any change ships with no signal that existing behaviour still holds, so a regression reaches production undetected.

Fix: Add one test per public entry point, then a CI step that runs them.

Add a workflow that builds and tests this repositoryhigh

257 source files, no CI configuration

Every change merges with nobody having run the build once, which across this estate is 499 repositories.

Fix: Add a workflow running the project build and test command on push and pull_request.

Add a build gate for the deployable artifacts herehigh

vercel.json

deployment artifacts with no workflow

Something in the repo is meant to reach a server and no automated step has ever validated it, which is the state of 125 repositories here.

Fix: Add a workflow that at least builds the image and validates the manifests.

Enable Dependabot or Renovatemedium

1 manifest(s), no update bot configured

Without a bot a published advisory sits unpatched until someone audits by hand, which across 1,322 repositories means never.

Fix: Commit .github/dependabot.yml covering the repo ecosystems plus github-actions.

Move large binaries to Git LFS or out of the repositorymedium6 occurrences

public/mac/mac-asset-7.png

6 blobs over 5MB: mac-asset-7.png 12.9MB, loupe.webp 7.5MB, loupe-mono-light.webp 7.5MB

One repository here carries twenty blobs over 5MB including a 10.9MB spreadsheet, so every clone and every CI checkout pays for data nobody diffs.

Fix: Track those extensions with LFS, or move datasets to object storage and fetch them in a setup step.

Add the repository convention files this project lackslow3 occurrences

missing .editorconfig, .gitattributes, a formatter config

Without them one contributor's editor writes tabs into a Python file, a shell script commits with CRLF and fails in the container, and a notebook diff is unreviewable.

Fix: Add .editorconfig, .gitattributes with text=auto eol=lf, and a formatter config.

Checked deterministically against the repository tree and a bounded set of its files: committed credentials, unpinned actions and base images, missing lockfiles and update bots, workflows that discard failures, published advisories against the declared dependencies, runtime configuration, licensing and notebook reproducibility. No language model is involved in this section.