@appshoteditor/shot-dsl

The layout DSL behind appshoteditor.com — framework-free building blocks for composing editable App Store / Play Store screenshot layouts, plus device-frame geometry.

It is the single source of truth shared by the web editor, the Cloudflare Worker (handoff validation), and the App Store Screenshots agent skill's composer — so a layout composed by the skill renders identically in the editor.

What's inside

• Types — Template, ScreenLayersJSON, LayerJSON, BackgroundJSON, CURRENT_SCHEMA_VERSION.
• Validators — validateTemplate() (strict, error-reporting), isValidTemplate, migrateScreenLayersJSON.
• Builders — makeTextLayer, makeImageLayer, makeShapeLayer, makeSolid/GradientBackground, makeScreen, makeTemplate.
• Device geometry — deviceFrames, getDeviceFrame, makeDeviceFrameLayers, calculateDeviceScale.
• Composer — composeTemplate(plan): a benefit/screenshot plan → a validated, device-framed Template.

import { composeTemplate, validateTemplate } from '@appshoteditor/shot-dsl';

const template = composeTemplate({
  name: 'My App',
  screens: [
    {
      headline: 'Track every workout',
      background: { type: 'gradient', gradient: { type: 'linear', colorStops: [/* … */] } },
      deviceId: 'iphone_16_pro',
      screenshot: { url: '…', width: 1179, height: 2556 }
    }
  ]
});
validateTemplate(template); // { valid: true, errors: [] }

Zero runtime dependencies. The schemaVersion is the compatibility contract between producers and the editor.

Intended for use via a bundler (Vite, esbuild, etc.). Device frameAsset values are URL paths the editor serves; this package ships only the geometry, not the frame images.