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.

Overlays turn a raw screenshot into a polished marketing asset. Betterflow supports two independent overlay systems — text and image — each of which can be freely positioned, resized, styled, and reordered. Overlays are composited on top of both the background and the main image during export, so they always appear in the correct z-order regardless of the export scale.

​
Text Overlays

Text overlays let you add headlines, captions, labels, and callouts directly on the canvas. Every overlay is independent — you can have as many as you like, each with its own font, color, size, and position.
1

Add an Overlay

Click Add Text in the left panel to insert a new text overlay. It appears centered on the canvas with default styling and is immediately selected for editing.
2

Edit Content

Double-click the overlay to enter edit mode. Type or paste your text. Press Escape to deselect.
3

Style the Text

Use the text overlay controls to configure:
  • Font family — chosen from the curated font list in lib/constants/fonts.ts
  • Font size — in pixels, adjustable via slider or direct input
  • Font weight — thin, light, regular, medium, semibold, bold, extrabold
  • Color — full color picker with hex input
  • Orientation — horizontal (default) or vertical (rotated 90°)
4

Add a Text Shadow

Enable the shadow toggle to reveal shadow controls: color, blur radius, X offset, and Y offset. Text shadows work well for ensuring legibility against complex backgrounds.
5

Position the Overlay

Drag the overlay anywhere on the canvas. Positions are stored as percentages of the canvas dimensions, so they scale correctly when you change aspect ratios or export at higher resolutions.

​
Text Overlay Properties

PropertyTypeNotes
contentstringThe text to display
fontFamilystringMust match an available font key
fontSizenumberIn pixels at 1× scale
fontWeightstringCSS font-weight values
colorstringHex or RGB color string
orientation'horizontal' | 'vertical'Vertical rotates 90° CW
x, ynumberPosition as percentage (0–100) of canvas width/height
shadowobject{ enabled, color, blur, offsetX, offsetY }
Percentage-based positioning means an overlay placed at x: 50, y: 10 will always appear centered horizontally, 10% from the top — regardless of whether you’re on a 1:1 square or 16:9 widescreen canvas.

​
Image Overlays

Image overlays are decorative elements layered over the canvas — icons, stickers, illustrations, brand marks, or any other graphic element.

Gallery Overlays

Browse a built-in gallery of decorative overlays served from Cloudflare R2. Categories include abstract shapes, gradients, patterns, and UI elements.

Custom Uploads

Upload any image file (PNG, JPG, WebP, SVG) as a custom overlay. Uploaded overlays are stored in IndexedDB alongside your other project assets.

​
Transform Controls

Each image overlay exposes the following controls:
ControlDescription
Position (X / Y)Drag or use numeric inputs. Stored as canvas-relative percentages.
Size (W / H)Width and height in pixels at 1× scale. Aspect ratio lock is available.
Rotation–180° to 180° rotation around the overlay’s center point.
Flip Horizontal / VerticalMirror the overlay along either axis.
Opacity0–100% transparency control. Useful for watermark-style placements.
VisibilityToggle an overlay off without deleting it — handy for A/B comparisons.

​
Tweet Import

Betterflow can fetch a tweet by its numeric ID and render it as a beautifully styled card overlay:
1

Enter Tweet ID

Paste the tweet URL or just the numeric ID into the Tweet import field (e.g. 1234567890123456789).
2

Fetch & Render

Betterflow fetches the tweet metadata and renders it as a styled card — avatar, handle, content, timestamp, and engagement metrics — matching the visual language of the native Twitter/X UI.
3

Position the Card

The tweet card behaves like any other image overlay: drag to reposition, resize, rotate, and adjust opacity as needed.

​
Code Snippet Import

Share code in style with the built-in code snippet tool:
  • Paste any code into the snippet editor and choose a programming language
  • Syntax highlighting is applied automatically using a token-aware renderer
  • The rendered snippet is converted to an image and placed as an overlay on the canvas
  • Font, theme (light/dark), and padding are configurable before import
Code snippet images render at a high pixel density. Export at 2× or higher to keep the text in code overlays crisp and readable.

​
Overlay Compositing During Export

Betterflow renders everything — background, image, text overlays, image overlays, borders, and shadows — using pure HTML/CSS inside a single container element. During export the entire container is captured in one pass using domToCanvas from modern-screenshot: 
Export Pipeline
  1. Full canvas capture  ← domToCanvas captures background + image + overlays in one pass
  2. Blur region pass     ← CSS backdrop-filter applied manually via Canvas 2D filter API
  3. Sharp processing     ← format compression (PNG / JPEG / WebP)
  4. Download + IndexedDB ← final blob saved locally with metadata
Because overlays are rendered as HTML elements (not drawn onto a Konva canvas), features like custom fonts, text shadows, CSS blend modes, rotation, and percentage positioning are all faithfully reproduced at any export scale without additional compositing steps.

Build docs developers (and LLMs) love

Get started for freeTalk to us