{"id":48844361,"url":"https://github.com/blaineam/monkr","last_synced_at":"2026-04-15T04:03:02.586Z","repository":{"id":349907398,"uuid":"1203583189","full_name":"blaineam/Monkr","owner":"blaineam","description":"Local Device Mockup Maker","archived":false,"fork":false,"pushed_at":"2026-04-08T04:51:40.000Z","size":75209,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-08T05:17:47.010Z","etag":null,"topics":["app-store-optimization","device-mockup","image-editor","mockup","placement","screenshot-editor"],"latest_commit_sha":null,"homepage":"https://monkr.wemiller.com/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blaineam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-07T07:08:26.000Z","updated_at":"2026-04-08T04:51:43.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/blaineam/Monkr","commit_stats":null,"previous_names":["blaineam/monkr"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/blaineam/Monkr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaineam%2FMonkr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaineam%2FMonkr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaineam%2FMonkr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaineam%2FMonkr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blaineam","download_url":"https://codeload.github.com/blaineam/Monkr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaineam%2FMonkr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31825514,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"online","status_checked_at":"2026-04-15T02:00:06.175Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app-store-optimization","device-mockup","image-editor","mockup","placement","screenshot-editor"],"created_at":"2026-04-15T04:02:45.955Z","updated_at":"2026-04-15T04:03:02.576Z","avatar_url":"https://github.com/blaineam.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://monkr.wemiller.com\"\u003e\n    \u003cimg src=\"static/icon-512.png\" width=\"120\" alt=\"Monkr Logo\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eMonkr\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eBeautiful device mockups in seconds.\u003c/strong\u003e\u003cbr/\u003e\n  Free, open-source, and runs entirely in your browser.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://monkr.wemiller.com\"\u003e\u003cstrong\u003eTry it live\u003c/strong\u003e\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#getting-started\"\u003eGet Started\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#tech-stack\"\u003eTech Stack\u003c/a\u003e \u0026bull;\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"MIT License\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/svelte-5-ff3e00.svg\" alt=\"Svelte 5\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/typescript-5.9-3178c6.svg\" alt=\"TypeScript\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/tailwind-4-38bdf8.svg\" alt=\"Tailwind CSS 4\" /\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"static/og-image.jpg\" width=\"700\" alt=\"Monkr Preview\" /\u003e\n\u003c/p\u003e\n\n---\n\n## Why Monkr?\n\nMost mockup tools are either bloated desktop apps, locked behind subscriptions, or require uploading your screenshots to someone else's server. **Monkr is different** - it's a fast, privacy-first mockup generator that runs 100% in your browser. No accounts, no uploads, no watermarks.\n\nDrop in a screenshot, pick a device, choose a background, and download a polished mockup in seconds. Need App Store screenshots? Animated previews? Multi-device compositions? Monkr handles it all.\n\n---\n\n## Features\n\n### 20+ Device Frames\n\nPixel-perfect frames for the devices people actually use:\n\n| Category | Devices |\n|----------|---------|\n| **iPhone** | 17 Pro Max, 17 Pro, 17 Air, 17, 16 Pro Max, 16 Pro, 16 Plus, 16, 15 series, 14 series |\n| **Android** | Pixel 7 Pro, Nothing Phone |\n| **iPad** | Pro 13\", Pro 11\", Air, Mini |\n| **Mac** | MacBook Pro 16\", MacBook Air M2, MacBook Air 13\" |\n| **Desktop** | iMac 24\", iMac Pro, Pro Display XDR |\n| **Other** | Apple TV 4K, Flat Screen TV, Browser (Light \u0026 Dark) |\n\nEach device includes multiple color variants and can be freely positioned, scaled, rotated, and tilted in 3D.\n\n### Backgrounds That Pop\n\n- **30+ gradient presets** - Cosmic, warm, cool, nature, pastel, neon, and mesh gradients\n- **100+ curated images** - Abstract, cosmic, earth, holographic, mystic, glass, radiant, vintage, and classic macOS wallpapers (Big Sur through Tahoe)\n- **Solid colors** with full color picker\n- **Transparent** backgrounds for compositing\n- **Custom uploads** - drag \u0026 drop any image\n- **Unsplash integration** - search millions of free photos\n\n### Scene Presets\n\nOne-click layouts that look professional instantly:\n\n- **Single device** - Hero shots, centered, tilted\n- **Duo layouts** - Side by side, overlapping, responsive pairs\n- **Multi-device** - Fan spreads, perspective rows, cascades\n- **Ecosystem** - Full Apple lineup in one shot\n- **App Store** - Pre-configured multi-slide layouts for iPhone and iPad\n\n### App Store Screenshot Mode\n\nBuilt specifically for shipping apps:\n\n- Toggle App Store mode and pick your platform (iPhone 6.7\", 6.1\", iPad 12.9\", 11\")\n- Canvas automatically sizes to App Store guidelines\n- Choose 1-10 sections that split the canvas into slides\n- Design across all slides using the same tools\n- Export slices each section into a separate screenshot\n- Visual divider lines and section labels keep you oriented\n\n### Text Overlays\n\n- Multiple font families with weight control (100-900)\n- Alignment, letter spacing, and line height\n- Text shadow with color, blur, and offset\n- **Arc text** for curved headlines\n- Position above, below, or anywhere on canvas\n- 3D tilt and rotation\n\n### Animation \u0026 Video Export\n\nCreate animated mockups and export as video:\n\n- **6 animation presets** - Full Spin, Rock, Tilt Showcase, Float, Zoom Pulse, Slide In\n- Adjustable duration and FPS\n- Loop support\n- Export as **MP4** (H.264), **MOV**, or **WebM** (VP9)\n- Powered by FFmpeg WASM - encoding happens entirely in your browser\n\n### Export Options\n\n| Format | Use Case |\n|--------|----------|\n| **PNG** | Lossless quality, transparency support |\n| **JPG** | Smaller files, great for web |\n| **MP4** | Animated mockups, social media |\n| **MOV** | QuickTime-compatible video |\n| **WebM** | Web-optimized video |\n\nAll image exports support **1x, 2x, and 3x** scale for retina-quality output. One-click **copy to clipboard** for quick sharing.\n\n### Device Customization\n\nEvery device on the canvas can be individually tuned:\n\n- **Position** - Drag or use precise X/Y controls\n- **Scale** - Pinch or slider from tiny to oversized\n- **Rotation** - Free rotation in degrees\n- **3D Tilt** - Perspective tilt on X and Y axes\n- **Shadow** - Color, blur, spread, and offset\n- **Glow** - Edge glow with customizable color and intensity\n- **Frame style** - Full device frame, outline only, or frameless\n\n### Layout Templates\n\n20+ arrangement templates for multi-device compositions:\n\n- Single Center, Tilted, Hero Left/Right\n- Side by Side, Overlap, Stacked\n- Fan, Cascade, Perspective Row\n- Grid 2x2, Scattered, Isometric\n- Phone+Tablet, Laptop+Phone, Floating Stack\n- Showcase 5 and more\n\n### Canvas Presets\n\nPre-configured sizes for every platform:\n\n- **General** - 16:9, 9:16, 1:1, Ultrawide\n- **Social** - Dribbble, Twitter, Instagram (Post \u0026 Story), LinkedIn, Product Hunt, Open Graph\n- **App Store** - All iPhone sizes, iPad, Mac, Apple TV, Apple Watch\n- **Google Play** - Phone, Tablet 7\" \u0026 10\", Feature Graphic\n\n### Quality of Life\n\n- **Auto-save** - Your project persists in localStorage automatically\n- **Import/Export** - Save and load `.monkr` project files\n- **Reset** - One-click clean slate\n- **Mobile friendly** - Responsive sidebar with swipe navigation\n- **Zero server dependency** - Everything runs client-side\n\n---\n\n## Getting Started\n\n### Use it now\n\nHead to **[monkr.wemiller.com](https://monkr.wemiller.com)** and start creating.\n\n### Run locally\n\n```bash\ngit clone https://github.com/blaineam/Monkr.git\ncd Monkr\nnpm install\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) and you're in.\n\n### Build for production\n\n```bash\nnpm run build\nnpm run preview  # preview the build locally\n```\n\nThe static build outputs to `build/` and can be deployed anywhere - GitHub Pages, Netlify, Vercel, Cloudflare Pages, or your own server.\n\n---\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|-----------|\n| **Framework** | [SvelteKit](https://kit.svelte.dev) 2 + [Svelte](https://svelte.dev) 5 (runes) |\n| **Language** | [TypeScript](https://typescriptlang.org) 5.9 |\n| **Styling** | [Tailwind CSS](https://tailwindcss.com) 4 |\n| **Icons** | [Lucide](https://lucide.dev) |\n| **Image Export** | [html-to-image](https://github.com/bubkoo/html-to-image) |\n| **Video Export** | [FFmpeg WASM](https://ffmpegwasm.netlify.app) |\n| **Build** | [Vite](https://vitejs.dev) 7 |\n| **Deploy** | Static adapter (GitHub Pages) |\n\n---\n\n## Project Structure\n\n```\nsrc/\n├── lib/\n│   ├── components/     # Svelte components (Canvas, Sidebar, ExportButton, etc.)\n│   ├── stores/         # State management with Svelte 5 runes\n│   ├── animation.ts    # Animation system + FFmpeg video export\n│   ├── backgrounds.ts  # Curated background image registry\n│   ├── export.ts       # Image export + App Store section slicing\n│   ├── fonts.ts        # Font loading and management\n│   ├── gradients.ts    # Gradient preset definitions\n│   ├── mockups.ts      # Perspective mockup scenes\n│   ├── presets.ts      # Canvas size presets\n│   ├── scenes.ts       # One-click scene presets\n│   ├── templates.ts    # Layout arrangement templates\n│   ├── types.ts        # TypeScript type definitions\n│   └── unsplash.ts     # Unsplash API integration\n├── routes/\n│   └── +page.svelte    # Main app page\n└── app.html            # HTML shell\nstatic/\n├── backgrounds/        # 100+ curated background images\n├── devices/            # Device frame PNGs (all sizes + colors)\n└── ...                 # Favicons, OG image, manifest\n```\n\n---\n\n## Contributing\n\nContributions are welcome! Feel free to open issues or submit pull requests.\n\n1. Fork the repo\n2. Create a feature branch (`git checkout -b feature/cool-thing`)\n3. Commit your changes\n4. Push to the branch (`git push origin feature/cool-thing`)\n5. Open a Pull Request\n\n---\n\n## License\n\n[MIT](LICENSE) - do whatever you want with it.\n\n---\n\n\u003cp align=\"center\"\u003e\n  Made by \u003ca href=\"https://wemiller.com\"\u003eBlaine Miller\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblaineam%2Fmonkr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblaineam%2Fmonkr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblaineam%2Fmonkr/lists"}