[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1340":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":14,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":30,"discoverSource":31},1340,"Snapframe","Pawandeep-prog\u002FSnapframe","Pawandeep-prog","Local Screenshot generator for play store and app store","https:\u002F\u002Fbuymeacoffee.com\u002Fpawandeep",null,"TypeScript",260,30,6,0,2,12,4.47,"MIT License",false,"main",true,[24,25,26],"generator","screenshot","snapframe","2026-06-12 02:00:26","\u003Cp align=\"center\">\n  \u003Cimg src=\"public\u002Flogo.png\" width=\"128\" height=\"128\" alt=\"Snapframe Logo\" style=\"border-radius: 24px;\" \u002F>\n\u003C\u002Fp>\n\n# Snapframe 🖼️\n\nA professional web-based screenshot builder designed for app developers and designers. Create stunning, marketing-ready screenshots for your apps with ease.\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fpawandeep-prog.github.io\u002FSnapframe\u002F\" target=\"_blank\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTry%20it%20Live-GitHub%20Pages-blue?style=for-the-badge&logo=github\" alt=\"Live Demo\" \u002F>\n  \u003C\u002Fa>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FChrome-Supported-brightgreen?style=for-the-badge&logo=googlechrome\" alt=\"Chrome Supported\" \u002F>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFirefox-Known%20Issues-orange?style=for-the-badge&logo=firefox\" alt=\"Firefox Known Issues\" \u002F>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"public\u002Fthumbnail.jpg\" alt=\"Snapframe Editor\" style=\"border-radius: 12px; max-width: 100%;\" \u002F>\n\u003C\u002Fp>\n\n![Snapframe Demo](public\u002Fsnapframe_video.mp4)\n\n## ✨ Features\n\n- **Professional Templates**: Choose from curated themes or create your own custom styles.\n- **Device Frames**: High-quality device mockups (iPhone, etc.) to showcase your app in context.\n- **Per-Slide Theming**: Customize individual slides or apply global themes across your entire project.\n- **Dynamic Text Blocks**: Add professional typography with customizable layouts and positioning.\n- **Real-time Preview**: See your changes instantly as you edit.\n- **High-Quality Export**: Export your screenshots as PNG, JPG, or a compressed ZIP archive for all resolutions.\n- **Undo\u002FRedo Support**: Full history management to iterate quickly without fear.\n- **Offline First**: Fast and responsive UI with local state management.\n- **JSON Editor**: Build entire screenshot sets programmatically — paste JSON directly and see a live preview side by side. Perfect for AI-assisted workflows.\n\n## 🚀 Tech Stack\n\n- **Framework**: [React 19](https:\u002F\u002Freact.dev\u002F)\n- **Build Tool**: [Vite](https:\u002F\u002Fvitejs.dev\u002F)\n- **Styling**: [Tailwind CSS 4](https:\u002F\u002Ftailwindcss.com\u002F)\n- **State Management**: [Zustand](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fzustand)\n- **Icons**: [Lucide React](https:\u002F\u002Flucide.dev\u002F)\n- **Export Engine**: `html-to-image` & `jszip`\n\n## 🤖 JSON Editor & AI Workflow\n\nThe **JSON Editor** (toolbar → `JSON` button) lets you create and edit projects entirely in JSON — no clicking through the UI required.\n\n**Split-panel interface:**\n- **Left** — editable JSON with live validation and a status bar showing error details\n- **Right** — live `ScreenshotCard` preview that updates as you type, with slide navigation for multi-slide projects\n\n**Typical AI-powered flow:**\n1. Open the JSON Editor and click **Copy** to grab the current project JSON\n2. Paste it into Claude, ChatGPT, or any AI tool with a prompt like:\n   > *\"Add 3 slides for a meditation app using a calm green theme\"*\n3. Paste the AI response back into the editor — the live preview updates instantly\n4. Click **Apply & Close** to load it into the project, then export as usual\n\nSee [`JSON_SCHEMA.md`](JSON_SCHEMA.md) for the full field reference, all valid values, and copy-paste examples.\n\n---\n\n## ⚠️ Browser Compatibility\n\n| Browser | Status |\n|---------|--------|\n| Chrome | Fully supported |\n| Firefox | Known rendering issues — investigation in progress |\n\n## 🌐 Live Demo\n\nNo install needed — just open it in your browser:\n\n**[https:\u002F\u002Fpawandeep-prog.github.io\u002FSnapframe\u002F](https:\u002F\u002Fpawandeep-prog.github.io\u002FSnapframe\u002F)**\n\n## 🛠️ Local Setup\n\nGetting started with Snapframe locally is simple:\n\n1. **Clone the repository:**\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002FPawandeep-prog\u002FSnapframe.git\n   cd Snapframe\n   ```\n\n2. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n\n3. **Run the development server:**\n   ```bash\n   npm run dev\n   ```\n\n4. **Open in browser:**\n   Navigate to `http:\u002F\u002Flocalhost:5173`\n\n## 📦 Building for Production\n\nTo create an optimized production build:\n\n```bash\nnpm run build\n```\n\nThe output will be in the `dist\u002F` directory.\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\nBuilt with ❤️ by [Pawandeep Singh](https:\u002F\u002Fgithub.com\u002FPawandeep-prog)\n","Snapframe 是一个专为应用开发者和设计师设计的网页截图生成器，用于轻松创建适用于应用商店的专业级营销截图。其核心功能包括多种专业模板、高质量设备框架、单页主题定制、动态文本块、实时预览及高分辨率导出等。技术上，Snapframe 基于 React 框架构建，使用 Vite 作为构建工具，并采用 Tailwind CSS 进行样式设计，利用 Zustand 管理状态，支持离线工作模式，还提供了一个 JSON 编辑器以实现更灵活的项目编辑方式。非常适合需要快速生成高质量应用展示截图的开发团队或个人使用。","2026-06-11 02:43:08","CREATED_QUERY"]