App store asset generator. Create screenshot mockups, feature graphics, promo banners, app icon showcases, and social cards for iOS and Android.
Built with SvelteKit + Svelte 5.
npm install
npm run dev
Moksha exposes a server-side rendering API for programmatic asset generation.
GET /api/renderReturns the full API schema — all asset types, sizes, layouts, backgrounds, phone frames, fonts, and examples.
curl http://localhost:5173/api/render | jq .
POST /api/renderRender a single asset. Returns a PNG image.
JSON body (no images):
curl -X POST http://localhost:5173/api/render \
-H "Content-Type: application/json" \
-d '{
"assetType": "screenshot-mockup",
"layout": "tilt-right",
"background": { "type": "gradient", "id": "sunset-pink" },
"texts": { "title": "My App", "subtitle": "Best app ever" }
}' \
--output mockup.png
Multipart form (with images):
curl -X POST http://localhost:5173/api/render \
-F 'config={
"assetType": "screenshot-mockup",
"sizeId": "android-phone",
"layout": "hero-center",
"background": { "type": "gradient", "id": "blue-violet" },
"texts": { "title": "Amazing App", "subtitle": "Download now" },
"fonts": { "title": "Bebas Neue", "subtitle": "Lato" },
"phoneFrame": "iphone-dynamic-island"
}' \
-F [email protected] \
--output mockup.png
POST /api/render/batchRender multiple assets. Returns a ZIP file with all images and a manifest.json.
curl -X POST http://localhost:5173/api/render/batch \
-F 'configs=[
{
"assetType": "screenshot-mockup",
"layout": "tilt-right",
"background": { "type": "gradient", "id": "sunset-pink" },
"texts": { "title": "Screen 1" },
"imageRefs": { "screenshot": "screen1" }
},
{
"assetType": "feature-graphic",
"layout": "logo-center",
"background": { "type": "gradient", "id": "emerald" },
"texts": { "tagline": "My App", "subtitle": "A great app" },
"imageRefs": { "logo": "applogo" }
}
]' \
-F [email protected] \
-F [email protected] \
--output assets.zip
Use imageRefs to map config image inputs to uploaded file field names. If omitted, defaults to screenshot, logo, icon.
| Field | Type | Description |
|---|---|---|
assetType |
string (required) | screenshot-mockup, feature-graphic, promo-banner, app-icon-showcase, social-card |
sizeId |
string | Size variant. Defaults to first size. See GET /api/render for options per type. |
layout |
string | Layout id. Defaults to first layout. See GET /api/render for options per type. |
background |
object | `{ type: "gradient" |
texts |
object | Key/value pairs matching the asset type's text inputs (e.g. title, subtitle, tagline, headline) |
fonts |
object | { title: "Font Family", subtitle: "Font Family" } — any Google Font. Defaults: Montserrat / Open Sans |
phoneFrame |
string | iphone-dynamic-island, iphone-notch, ipad, android-punch-hole, android-clean, frameless |
transforms |
object | { phone: { x, y, scale, rotation }, logo: { x, y, scale, rotation } } — position/size/rotation offsets |
imageRefs |
object | Batch only. Maps input ids to uploaded field names: { "screenshot": "myfield" } |
| Field | Used by |
|---|---|
screenshot |
screenshot-mockup, promo-banner, social-card |
logo |
feature-graphic, promo-banner, social-card |
icon |
app-icon-showcase |
Screenshot Mockup: android-phone (1080x1920), android-7inch (1200x1920), android-10inch (1600x2560), ios-6.7 (1290x2796), ios-6.5 (1242x2688), ios-6.1 (1284x2778), ios-5.5 (1242x2208), ipad-12.9 (2048x2732), ipad-10.5 (1668x2224)
Feature Graphic: play-store (1024x500)
Promo Banner: play-1024x500 (1024x500), general-1024x1024 (1024x1024)
App Icon Showcase: 1024 (1024x1024), 512 (512x512)
Social Card: og (1200x630), twitter (1200x675), instagram (1080x1080)
Gradients: sunset-pink, blue-violet, emerald, hot-magenta, ocean, indigo-dream, amber, dark-teal, red-orange, midnight-blue
Solids: pure-black, dark-charcoal, navy, forest-green, deep-purple, crimson, slate, white
Patterns: dots, waves, mesh, geometric, noise, circles
npm run build
node build
Runs on http://localhost:3000 by default.