Quick start
Loaf is a static creator-design workspace. You can run the package immediately, create a local account and start designing without a framework or build process.
Create an account
Use the signup flow. Demo accounts are stored in this browser.
Pick a template
Choose a starter from Templates and open it directly in Studio.
Edit layers
Adjust text, media, brand assets, effects and backgrounds.
Export
Save PNG designs or export motion presets according to your plan.
Accounts & sessions
The included account system is intentionally local-first. User records, session state, selected plan and projects are stored in localStorage.
Templates
Templates open Studio with a prebuilt composition. The library includes gaming, creator, vlog, tech, news, podcast and premium starter styles.
Open exact template
Template URLs use editor.html?template=<id>. Login preserves the selected template through authentication.
Preview polish
Cards use richer HTML artwork, category accents, badges and visual composition to better represent the final canvas.
Premium locks
Selected template collections can require Essential, Plus+ or Ultimate.
Editor tool map
Studio is a custom canvas workspace with a tool rail, left content panel, central canvas, top toolbar and layer inspector.
Layer editing
- Drag selected objects directly on the canvas.
- Resize using the corner control and use the inspector for exact values.
- Reorder layers using drag & drop or Front / Back actions.
- Hide, duplicate or delete layers from the layer list.
- Use autosave, explicit Save and undo/redo history while experimenting.
Animation library & export
Animations are interactive previews with categories for Text, CTA, UI, Loading, Audio, Decor, Social, Logo and Transitions.
Transparency
Transparent browser video export uses WebM/VP9 where supported. MP4/H.264 transparency is not reliable in browsers, so MP4 exports use an opaque background.
Plans & demo billing
The included checkout is a visual demo. It simulates plan activation locally and never charges money or sends payment details.
Projects & autosave
Projects are stored per local user. Save writes the current canvas state and updates the dashboard project index; autosave keeps a recoverable working snapshot.
Uploads can be embedded as data URLs, so large images can eventually hit browser storage limits.
Keyboard shortcuts
| Action | Shortcut |
|---|---|
| Undo | Ctrl/Cmd + Z |
| Redo | Ctrl/Cmd + Y or Shift + Cmd + Z |
| Duplicate | Ctrl/Cmd + D |
| Delete selected layer | Delete / Backspace |
| Nudge selected layer | Arrow keys |
| Move by 10 px | Shift + Arrow keys |
Cloudflare Pages / Netlify deployment
Deploy the contents of the Loaf folder directly. No build step is needed.
Cloudflare Pages
Upload or connect a repository and publish the project root.
Netlify
Drag the extracted project folder into manual deploy or connect Git.
Static headers
The package includes _headers and _redirects.
Troubleshooting
My account disappeared
Local accounts live in browser storage. Clearing site data or switching browser/device removes that local data.
An uploaded image disappeared
Re-open the same browser profile and avoid clearing storage. Production uploads should move to object storage such as R2.
Transparent export is not MP4
Use WebM/VP9 for browser alpha. MP4 transparency is not consistently available in browsers.
My static host shows a 404
Confirm that index.html is at the publish root and that you uploaded the extracted folder contents, not an empty project.
Taking Loaf to production
Keep the interface and replace demo-only browser state with secure services.
- Authentication: Supabase Auth, Clerk or a Worker-backed account system.
- Projects: Postgres/D1 plus object storage for larger assets.
- Uploads: Cloudflare R2 or another compatible object store.
- Billing: Stripe Checkout/Billing through secure server endpoints.
- Email: transactional mail from a server-side environment.