Application · Clean SaaS · 5 blocks
File processing workspace
A focused media workspace with local file selection, output controls, a filterable task queue, downloadable demo previews, and a clear usage summary.
The page, block by block
Install and compose these blocks in this order.
Keep the design intact
- Keep the workspace heading to one short sentence and file names to their original values, truncating visual labels when needed.
- Use shared state for file selection, queue progress, and results; keep the upload controls disabled while a task runs.
- Provide empty, processing, completed, and error states. Status must remain understandable without relying on color.
- The preview is a local interface simulation. Selected videos are never uploaded or converted; downloads are labeled SVG demo previews.
- Connect the upload and retry callbacks to your own authenticated processing service before using this as a production tool.
- Keep demo credits and illustrative usage separate from real billing data. Validate the layout with long file names and mobile widths.
Hand this recipe to your AI assistant
Build a file-processing workspace using the UIBlocks tool-workspace recipe and clean-saas style. Install workspace-header-01, upload-workflow-01, task-queue-01, results-gallery-01, and usage-panel-01. Keep a single source of state for file selection, task status, search, and results. Inspect the full preview and preserve the neutral surfaces, violet accent, type scale, and spacing. Implement empty, processing, completed, and error states. Connect the provided callbacks to my actual backend; do not present the browser-only demo as real conversion or real billing. Check keyboard navigation, long file names, and the stacked mobile layout.
Read the recipe JSON