Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/betterspacx/app/llms.txt

Use this file to discover all available pages before exploring further.

Betterflow is a fully in-browser design tool for creating polished screenshots and animated visuals. Upload any image, wrap it in a device frame, drop in a gradient background, apply a 3D perspective, animate it with keyframes, and export to PNG, MP4, WebM, or GIF — all without leaving your browser and without creating an account.

Introduction

Learn what Betterflow is, what it can do, and how it fits into your workflow.

Quickstart

Run Betterflow locally in under five minutes with pnpm.

Core Features

Backgrounds, device frames, 3D transforms, overlays, animations, and export.

API Reference

REST API routes used by the Chrome extension and server-side export pipeline.

What you can build

Product Screenshots

Wrap app screenshots in browser mockups with custom gradients and shadows.

Social Media Assets

Export high-resolution PNGs at up to 5× scale for crisp social graphics.

Animated Demos

Apply animation presets and export MP4 or GIF walkthroughs of your product.

Code Snippets

Import and style syntax-highlighted code images directly in the editor.

Tweet Cards

Pull any tweet by ID and render it as a styled card inside your design.

Slideshows

Build multi-slide presentations and export them as a single video.

Get started

1

Clone and install

Clone the repository and install dependencies with pnpm.
git clone https://github.com/betterspacx/app.git
cd app
pnpm install
2

Configure environment

Copy .env.example to .env and add your Cloudflare R2 credentials for background image storage.
cp .env.example .env
3

Start the dev server

pnpm run dev
Open http://localhost:3000 in your browser.
4

Upload and edit

Drag an image into the editor, pick a background, apply a device frame, and export.
Core editor features work without any environment variables configured. Cloudflare R2 is only required for background image storage. See Environment Variables for details.

Build docs developers (and LLMs) love