PicProse: a browser based cover image generator

A Next.js app for the two-minute cover image

PicProse is described as a better cover image generator tool for Medium, Blog, YouTube, BiliBili and many others, and the README calls it a powerful cover image generator designed for bloggers, content creators, developers and designers, aimed at creating professional cover images in a few steps.

It is a web application, not a desktop tool, and the hosted preview lives at picprose.pixpark.net. The repository is MIT licensed and its content is bilingual, with an English README and a Simplified Chinese one, and the interface itself is multilingual through next-intl with the locales kept in a locales directory and the i18n setup in i18n.ts.

The stack is visible in the package manifest and it is a familiar one. Next.js 15.5.23 with React 19.2.8, Tailwind CSS 3.4.1 for styling, the NextUI React component library, framer-motion for animation, react-color for the colour picker, react-photo-album for the image grid, react-infinite-scroll-component for scrolling the photo results, dom-to-image for turning the composed canvas into an exportable file, and unsplash-js for talking to the Unsplash API.

The interesting engineering choice is dom-to-image. Because the editor composites the photo and the text in the DOM, exporting SVG means serialising that DOM rather than drawing to a canvas, which is why an SVG export is possible at all.

Unsplash is the source, and its API key is the hard dependency

The image resources come from Unsplash through the Unsplash API, and the README is explicit that this is how you get high quality images.

That makes the API key the one thing you cannot run without. The installation section says to create a .env.local file with this content:

UNSPLASH_API_KEY = your_unsplash_api_key
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=your_ga_id

Two environment variables, two different purposes. The Unsplash key unlocks the photo search. The analytics id is prefixed with NEXT_PUBLIC, which is the Next.js convention for a value that ends up in the browser bundle, so the Google Analytics measurement id is exposed client side.

This is the constraint that shapes the whole tool. PicProse is a composition layer over a photo library rather than an image editor, so it inherits both the capability and the limits of that library. There is no upload of your own artwork in the feature list, and the README does not document one.

For a self-hosted installation that is a second decision: you are now running a service that talks to a third party API on behalf of your users, and every query carries your key. The key is server side, but the design means the images your visitors see come from Unsplash, which has its own attribution and usage terms that your deployment inherits.

The editor: what you can change and what you see

The feature list describes the editing surface. You can customise titles, author information, fonts, colours and transparency. There is a real-time preview with a WYSIWYG interface, so changes appear as you make them rather than after a render pass.

Aspect ratios are handled explicitly, in both horizontal and vertical formats for different platforms, which is the practical difference between a cover that fits a Medium article and one that fits a YouTube thumbnail.

There is a set of built-in developer icons, described as tech related icons for technical article covers, which is a small feature that tells you about the intended audience. The idea is that a blog post about a particular technology gets an icon for that technology rather than a generic abstract shape.

The photo browser itself is built on react-photo-album with infinite scrolling, so the search results behave like a proper image grid rather than a paginated list.

Export is the part that sets PicProse apart from a screenshot tool. It supports JPG, PNG and SVG, and the copy of the design is DOM based, which is what allows an SVG export that keeps text as text instead of rasterising it.

One detail in the feature list is worth a second look: the design is described as responsive and adapting to both desktop and mobile devices. A tool that runs in the browser and produces a fixed aspect ratio has to square that circle, and the mobile experience is where composition tools usually break.

Running it locally in four commands

The installation is a standard Next.js workflow and the README gives it in full.

# Clone the repository
git clone https://github.com/jaaronkot/picprose.git

# Navigate to the project directory
cd picprose

# Install dependencies
npm install

# Start the development server
npm run dev

The four scripts in the package manifest are next dev, next build, next start and next lint, so the build path is the conventional one: npm run build produces the production bundle and npm run start serves it.

The configuration surface is small, which is a sign of a small application. There is next.config.mjs, routing.ts, middleware.ts, postcss.config.js, tailwind.config.ts, tsconfig.json and an .eslintrc.json, plus app for the routes, components under config, types in a types directory, and public for static assets. The repository also carries a doc directory with the demo images used in the README.

Note that the package manifest is marked private with version 0.1.0, which is the normal way to keep an application from being published to the npm registry by accident. It also contains a long overrides block pinning transitive versions of packages such as micromatch, braces, js-yaml, glob, lodash and nanoid, along with sharp, which is what the image pipeline uses.

The result is a codebase that a front end developer can read in an afternoon.

Two deployment paths: a Vercel clone and a container

The README offers two ways to run PicProse for real, and they suit different situations.

The first is Vercel. The text says you can start by creating your own Nextra site and deploying to Vercel by clicking the link, and the repository includes the Vercel clone button markup with a URL that clones the repository into a new Vercel project. This is the fastest route for a personal deployment, and the only configuration it needs is the Unsplash key and the analytics id.

The second is Docker. The README gives a one-liner:

docker run -d --name picprose -e UNSPLASH_API_KEY=xxx -p 3000:3000 hausen1012/picprose

The image is hausen1012/picprose, the API key is passed as an environment variable, and the service is published on port 3000, which matches the Next.js default.

The Dockerfile in the repository root is short, and it explains what the published image actually is:

FROM node:21.7.1-alpine3.19 AS builder
ENV NODE_OPTIONS=--openssl-legacy-provider
COPY . /app
WORKDIR /app/
RUN npm install
CMD ["npm", "run", "dev"]

Two things follow from that file. The container runs the development server, not a production build, so it is a convenience for trying PicProse on your own machine rather than a hardened deployment, and the environment variable NODE_OPTIONS=--openssl-legacy-provider exists to work around an OpenSSL change in newer Node versions. The base image is Node 21.7.1 on Alpine 3.19, and the image is built without a multi-stage build, so the source tree and the development dependencies travel with it.

If you deploy this for real, build the production bundle and serve it with next start rather than running the dev server.

Where PicProse is the wrong choice

There is a clear case against it, and it is the case of anybody who needs their images to be theirs.

Every photo in a PicProse cover comes from Unsplash. If your publication has a visual identity, a sponsor with brand guidelines, or a legal need to control image rights, an Unsplash sourced photo is a non-starter, and the README documents no way to bring your own files.

The second limit is the shape of the tool. There is no project system, no saved drafts, no queue of covers to render, and no batch export. It is a single composition surface that produces a file when you click export, which is the right shape for a weekly blog post and the wrong shape for a marketing team that needs forty covers a month with consistent typography.

The third is the deployment story. The container runs the development server, the npm package is marked private, and the version in the manifest is 0.1.0 with no GitHub releases published, so there is no tagged release to pin and the image is built from a branch.

What PicProse does have is speed and a narrow purpose. If the job is a cover for a post you are about to publish, with a photo from a stock library and a title over it, the WYSIWYG editor, the aspect ratio presets and the SVG export are exactly the right set of features, and a design tool would be slower for the same result.

Editorial conclusion

Use PicProse if you publish regularly and need consistent cover images for blog posts or videos without opening a design tool, and you are happy to source photography from Unsplash under its terms. Do not use it if you need original artwork, licensed photography you control, or a batch pipeline, because there is no project or account model and the export happens in the browser. Before you deploy it, put an UNSPLASH_API_KEY in .env.local, since the image search is unusable without one, and decide whether you want the Vercel clone path or the container, keeping in mind the published image runs the development server rather than a production build.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. pixpark/picprose on GitHub
4. Project website
5. README