Image Storyboard to PDF Online — arrange frames, add scene notes, set durations, export to PDF
Upload a set of images, drag them into sequence, attach a title, description, and duration to each frame, then export as one PDF or as separate one-page files.
The frame console
Upload images, arrange them, add notes, and export the finished storyboard.
Drop your images here
JPG, PNG, WEBP, or GIF — or click to browse
A storyboard is a sequence with context attached
A single image shows one moment; a storyboard adds sequence, context, and optional timing so you can plan how the visuals fit together.
From loose images to a bound sequence
A folder of screenshots for a UX flow, a set of sketches for a video shoot, reference photos for a product demo — none of these are usable as a plan until someone puts them in order and writes down what each one means. That's the core job of this tool.
Upload your images, drag them into sequence with SortableJS, and attach a title, description, and duration to each one. Set a background color and font, then jsPDF lays each frame onto its own page — as one combined document, or as separate single-page files.
What you can add to each frame
Upload & reorder frames
Add JPG, PNG, WEBP, or GIF images and drag them into your narrative sequence.
Titles & descriptions
Add a title and a script or description to give each frame useful context.
Scene duration
Set a duration in seconds per scene to plan pacing before production begins.
Custom PDF styling
Choose the PDF background color, font style, and font size for a consistent look.
Save & load drafts
Save progress to your browser and continue later — useful for larger projects.
Order the frames first, then add the context
Set the sequence first, then add titles and descriptions to avoid unnecessary rework.
Upload your images
Drag them onto the upload area, or click Upload images. Add several at once — each becomes its own frame.
Arrange and annotate
Drag frame cards into your final sequence, then fill in the details:
Generate
Choose Generate Single PDF for one combined document, or Generate Individual PDFs for one file per frame.
Rename and download
Rename the output file if you like, then download the finished storyboard.
From a folder of images to a structured document
The same visuals, now with order, context, and pacing attached.
A folder of disconnected images with no sequence, notes, or context.
A structured PDF with numbered frames, titles, descriptions, and durations for review or sharing.
Projects that need to be planned before they're made
Cases where getting the sequence and notes right up front saves rework later.
| Use case | What to plan | Typical user |
|---|---|---|
| Video pre-production | Plan scenes with dialogue, camera angles, and action notes in the frame description. | Filmmakers & directors |
| Animation | Visualize sequence and pacing for animated explainer videos. | Animators |
| Marketing campaigns | Lay out the visual flow of social media stories and ad sequences. | Marketers |
| UX/UI design | Upload screen mockups and arrange them into a visual sequence for documenting a user flow. | Designers & developers |
| Comics & children's books | Outline panels and pages before final illustration. | Authors & illustrators |
| Education | Create visual lesson plans and step-by-step visual guides. | Educators |
| Ad storyboards | Present campaign concepts to stakeholders in a clear visual format. | Agencies |
| Product documentation | Build step-by-step visual guides for products and features. | Technical writers |
The four parts of a storyboard frame
Each frame carries four pieces of information — here's how to use each one effectively.
The image (frame)
The visual anchor of the scene — a sketch, mockup, or reference image. Use a consistent aspect ratio (16:9, for example) across frames for a clean, uniform PDF.
The title
A short heading that names the scene — "Opening shot," "Login screen." Keep it brief so readers can scan the whole board quickly.
The description / script
The context for the frame — dialogue, action, camera movement, or interaction notes. Focus on key actions; brief and clear is most effective.
The duration
How long the scene lasts, in seconds. Useful for video and animation planning — it lets you estimate total runtime and pacing before production.
Storyboard troubleshooting
Common problems when uploading, reordering, saving, or generating storyboard PDFs — and how to fix them.
Images won't upload
The file isn't an image type the tool supports.
Use JPG, PNG, WEBP, or GIF files only.
Frames won't reorder
Dragging started from an input field instead of the card body.
Drag the frame card itself, not the text inputs, to reorder it.
Draft won't load
Drafts are stored per browser and computer.
Load the draft on the same computer and browser where you saved it.
PDF text overflows the page
The description is too long for one page.
Keep descriptions concise — text auto-wraps, but very long text may still overflow.
Individual PDF downloads blocked
The browser blocks multiple simultaneous downloads.
Allow multiple downloads for this site in your browser settings.
Large project is slow
Many high-resolution images use a lot of memory.
Save your draft periodically and close other tabs while working.
Images won't upload
Why: Unsupported file type.
Fix: Use JPG, PNG, WEBP, or GIF.
Frames won't reorder
Why: Dragged from an input field.
Fix: Drag the card body, not the inputs.
Draft won't load
Why: Drafts are per browser.
Fix: Load on the same browser/computer.
Text overflows the page
Why: Description too long.
Fix: Keep descriptions concise.
Downloads blocked
Why: Browser blocks multiple downloads.
Fix: Allow multiple downloads.
Large project is slow
Why: Many high-res images.
Fix: Save draft, close other tabs.
Storyboard best practices
Practical tips for organizing frames, writing notes, and preparing a cleaner PDF.
Use consistent image aspect ratios
All 16:9 (or all 4:3) images make the final PDF look clean and uniform instead of mismatched.
Save your draft often
For larger projects, save your draft so you can close the tab and continue later without losing work.
Keep descriptions concise
Focus on key actions, dialogue, or camera movements — brief, clear descriptions make a storyboard most effective.
Use durations for pacing
Adding a duration per scene lets you estimate total runtime and plan pacing before production.
Choose background for the destination
Choose a background based on where the PDF will be used; lighter backgrounds generally suit printed documents, while darker backgrounds can work well for screen viewing.
Reorder before generating
Drag frames into the final sequence first, then add titles and descriptions — it's faster than reordering afterward.
Frequently asked questions
Answers to common questions about privacy, drafts, frames, PDF generation, and editing.
Are my uploaded images secure?
Yes. All images are processed directly in your browser — they're never uploaded to a server, and your original files stay on your computer.
How does the Save Draft feature work?
Save Draft stores your current progress — images, text, and order — in your browser's local storage. Close the tab and return later, then click Load Draft to pick up where you left off. The draft is only available on the same computer and browser you used to save it.
Is there a limit to how many frames I can add?
No fixed frame limit is enforced by the tool, but performance depends on your browser and available memory. Larger projects, especially those containing many high-resolution images, may take longer to process.
What's the difference between the Generate buttons?
Generate Single PDF combines every frame into one multi-page document, each frame on its own page. Generate Individual PDFs creates and downloads a separate one-page PDF per frame — useful for sharing specific scenes.
Can I edit my storyboard after generating the PDF?
The generated PDF is a final output file. To make changes, edit the frames, text, or settings in the tool, then click Generate again to create a new, updated PDF.
The write-up on how this was built
Because reordering, drafts, and export all run client-side, I wrote up the implementation — SortableJS drag-reorder, saving progress to localStorage, and how jsPDF lays each frame's image and text onto its own page.
How to Build a Browser-Based Image Storyboard to PDF Tool Using JavaScript
Covers drag-and-drop reordering, browser draft storage, and generating multi-page and single-page PDFs entirely client-side.