# Flat panel kit (video template) > Alpha transparency overlay kit using panel graphics. The overlay kit includes animated panels in multiple directions and transition overlay animations. ## Overview - **Page**: https://shotstack.io/templates/flat-panel-overlay-kit/ - **Output**: MP4, 1280x720 (16:9) - **Length**: 66s - **Timeline**: 45 clips on 3 tracks; assets: image, title, video - **Render endpoint (sandbox, free, watermarked)**: POST https://api.shotstack.io/edit/stage/render with header `x-api-key` - **Production**: same request against https://api.shotstack.io/edit/v1/render with a v1 key - **Preview in the browser (no account)**: https://shotstack.studio/#json=eyJtZXJnZSI6W3siZmluZCI6IlNUWUxFIiwicmVwbGFjZSI6ImZsYXQtcGFuZWwifSx7ImZpbmQiOiJDT0xPUiIsInJlcGxhY2UiOiJibGFjayJ9XSwidGltZWxpbmUiOnsidHJhY2tzIjpbeyJjbGlwcyI6W3siYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtbGVmdC1pbiIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjAsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LWxlZnQtb3V0Iiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6MywibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtcmlnaHQtaW4iLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0Ijo2LCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0IjoiY29udGVudC1yaWdodC1vdXQiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0Ijo5LCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0IjoiY29udGVudC10b3AtaW4iLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0IjoxMiwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtdG9wLW91dCIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjE1LCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0IjoiY29udGVudC1ib3R0b20taW4iLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0IjoxOCwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtYm90dG9tLW91dCIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjIxLCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0IjoiY29udGVudC10b3AtbGVmdC1pbiIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjI0LCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0IjoiY29udGVudC10b3AtbGVmdC1vdXQiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0IjoyNywibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtdG9wLXJpZ2h0LWluIiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6MzAsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LXRvcC1yaWdodC1vdXQiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0IjozMywibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtYm90dG9tLXJpZ2h0LWluIiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6MzYsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJjb250ZW50LWJvdHRvbS1yaWdodC1vdXQiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0IjozOSwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtYm90dG9tLWxlZnQtaW4iLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0Ijo0MiwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6ImNvbnRlbnQtYm90dG9tLWxlZnQtb3V0Iiwic3R5bGUiOiJzdWJ0aXRsZSIsInBvc2l0aW9uIjoiYm90dG9tTGVmdCIsImNvbG9yIjoiI2ZmZmZmZiIsInNpemUiOiJzbWFsbCJ9LCJzdGFydCI6NDUsImxlbmd0aCI6Mi41fSx7ImFzc2V0Ijp7InR5cGUiOiJ0aXRsZSIsInRleHQiOiJ0cmFuc2l0aW9uLWxlZnQiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0Ijo0OCwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6InRyYW5zaXRpb24tcmlnaHQiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0Ijo1MSwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6InRyYW5zaXRpb24tdXAiLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0Ijo1NCwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6InRyYW5zaXRpb24tZG93biIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjU3LCJsZW5ndGgiOjIuNX0seyJhc3NldCI6eyJ0eXBlIjoidGl0bGUiLCJ0ZXh0Ijoib3V0cm8taW4iLCJzdHlsZSI6InN1YnRpdGxlIiwicG9zaXRpb24iOiJib3R0b21MZWZ0IiwiY29sb3IiOiIjZmZmZmZmIiwic2l6ZSI6InNtYWxsIn0sInN0YXJ0Ijo2MCwibGVuZ3RoIjoyLjV9LHsiYXNzZXQiOnsidHlwZSI6InRpdGxlIiwidGV4dCI6Im91dHJvLW91dCIsInN0eWxlIjoic3VidGl0bGUiLCJwb3NpdGlvbiI6ImJvdHRvbUxlZnQiLCJjb2xvciI6IiNmZmZmZmYiLCJzaXplIjoic21hbGwifSwic3RhcnQiOjYzLCJsZW5ndGgiOjIuNX1dfSx7ImNsaXBzIjpbeyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtbGVmdC1pbi5tb3YifSwic3RhcnQiOjAsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtbGVmdC1vdXQubW92In0sInN0YXJ0IjozLCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LXJpZ2h0LWluLm1vdiJ9LCJzdGFydCI6NiwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC1yaWdodC1vdXQubW92In0sInN0YXJ0Ijo5LCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LXRvcC1pbi5tb3YifSwic3RhcnQiOjEyLCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LXRvcC1vdXQubW92In0sInN0YXJ0IjoxNSwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC1ib3R0b20taW4ubW92In0sInN0YXJ0IjoxOCwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC1ib3R0b20tb3V0Lm1vdiJ9LCJzdGFydCI6MjEsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtdG9wLWxlZnQtaW4ubW92In0sInN0YXJ0IjoyNCwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC10b3AtbGVmdC1vdXQubW92In0sInN0YXJ0IjoyNywibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC10b3AtcmlnaHQtaW4ubW92In0sInN0YXJ0IjozMCwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vY29udGVudC10b3AtcmlnaHQtb3V0Lm1vdiJ9LCJzdGFydCI6MzMsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtYm90dG9tLXJpZ2h0LWluLm1vdiJ9LCJzdGFydCI6MzYsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtYm90dG9tLXJpZ2h0LW91dC5tb3YifSwic3RhcnQiOjM5LCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS9jb250ZW50LWJvdHRvbS1sZWZ0LWluLm1vdiJ9LCJzdGFydCI6NDIsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L2NvbnRlbnQtYm90dG9tLWxlZnQtb3V0Lm1vdiJ9LCJzdGFydCI6NDUsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L3RyYW5zaXRpb24tbGVmdC5tb3YifSwic3RhcnQiOjQ4LCJsZW5ndGgiOjIuOTZ9LHsiYXNzZXQiOnsidHlwZSI6InZpZGVvIiwic3JjIjoiaHR0cHM6Ly90ZW1wbGF0ZXMuc2hvdHN0YWNrLmlvL2Jhc2ljL2Fzc2V0L3ZpZGVvL292ZXJsYXkve3tTVFlMRX19L3t7Q09MT1J9fS90cmFuc2l0aW9uLXJpZ2h0Lm1vdiJ9LCJzdGFydCI6NTEsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L3RyYW5zaXRpb24tdXAubW92In0sInN0YXJ0Ijo1NCwibGVuZ3RoIjoyLjk2fSx7ImFzc2V0Ijp7InR5cGUiOiJ2aWRlbyIsInNyYyI6Imh0dHBzOi8vdGVtcGxhdGVzLnNob3RzdGFjay5pby9iYXNpYy9hc3NldC92aWRlby9vdmVybGF5L3t7U1RZTEV9fS97e0NPTE9SfX0vdHJhbnNpdGlvbi1kb3duLm1vdiJ9LCJzdGFydCI6NTcsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L291dHJvLWluLm1vdiJ9LCJzdGFydCI6NjAsImxlbmd0aCI6Mi45Nn0seyJhc3NldCI6eyJ0eXBlIjoidmlkZW8iLCJzcmMiOiJodHRwczovL3RlbXBsYXRlcy5zaG90c3RhY2suaW8vYmFzaWMvYXNzZXQvdmlkZW8vb3ZlcmxheS97e1NUWUxFfX0ve3tDT0xPUn19L291dHJvLW91dC5tb3YifSwic3RhcnQiOjYzLCJsZW5ndGgiOjIuOTZ9XX0seyJjbGlwcyI6W3siYXNzZXQiOnsidHlwZSI6ImltYWdlIiwic3JjIjoiaHR0cHM6Ly9zaG90c3RhY2stYXNzZXRzLnMzLmFwLXNvdXRoZWFzdC0yLmFtYXpvbmF3cy5jb20vaW1hZ2VzL3JlYWxlc3RhdGUxLmpwZyJ9LCJzdGFydCI6MCwibGVuZ3RoIjo2Nn1dfV19LCJvdXRwdXQiOnsiZm9ybWF0IjoibXA0IiwicmVzb2x1dGlvbiI6ImhkIn19 ## How to use this template as a workflow 1. Render it once with the JSON below to confirm the output. 2. Replace the values that change per row of data (merge fields or asset URLs). 3. Loop over your data (CSV, database, webhook payload) and send one render per row. Add a `callback` URL to the request so Shotstack notifies you when each video is ready instead of polling. 4. To keep the JSON out of your app, store it with the Templates endpoint and render by template ID with a `merge` array: https://shotstack.io/docs/guide/architecting-an-application/templates/ ## Customise This template has merge fields. Send a `merge` array with the request to replace them; do not edit the timeline JSON. | Field | Default | | --- | --- | | `{{ STYLE }}` | flat-panel | | `{{ COLOR }}` | black | ## Template JSON ```json { "merge": [ { "find": "STYLE", "replace": "flat-panel" }, { "find": "COLOR", "replace": "black" } ], "timeline": { "tracks": [ { "clips": [ { "asset": { "type": "title", "text": "content-left-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 0, "length": 2.5 }, { "asset": { "type": "title", "text": "content-left-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 3, "length": 2.5 }, { "asset": { "type": "title", "text": "content-right-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 6, "length": 2.5 }, { "asset": { "type": "title", "text": "content-right-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 9, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 12, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 15, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 18, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 21, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-left-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 24, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-left-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 27, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-right-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 30, "length": 2.5 }, { "asset": { "type": "title", "text": "content-top-right-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 33, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-right-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 36, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-right-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 39, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-left-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 42, "length": 2.5 }, { "asset": { "type": "title", "text": "content-bottom-left-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 45, "length": 2.5 }, { "asset": { "type": "title", "text": "transition-left", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 48, "length": 2.5 }, { "asset": { "type": "title", "text": "transition-right", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 51, "length": 2.5 }, { "asset": { "type": "title", "text": "transition-up", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 54, "length": 2.5 }, { "asset": { "type": "title", "text": "transition-down", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 57, "length": 2.5 }, { "asset": { "type": "title", "text": "outro-in", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 60, "length": 2.5 }, { "asset": { "type": "title", "text": "outro-out", "style": "subtitle", "position": "bottomLeft", "color": "#ffffff", "size": "small" }, "start": 63, "length": 2.5 } ] }, { "clips": [ { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-left-in.mov" }, "start": 0, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-left-out.mov" }, "start": 3, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-right-in.mov" }, "start": 6, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-right-out.mov" }, "start": 9, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-in.mov" }, "start": 12, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-out.mov" }, "start": 15, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-in.mov" }, "start": 18, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-out.mov" }, "start": 21, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-left-in.mov" }, "start": 24, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-left-out.mov" }, "start": 27, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-right-in.mov" }, "start": 30, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-top-right-out.mov" }, "start": 33, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-right-in.mov" }, "start": 36, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-right-out.mov" }, "start": 39, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-left-in.mov" }, "start": 42, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/content-bottom-left-out.mov" }, "start": 45, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-left.mov" }, "start": 48, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-right.mov" }, "start": 51, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-up.mov" }, "start": 54, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/transition-down.mov" }, "start": 57, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/outro-in.mov" }, "start": 60, "length": 2.96 }, { "asset": { "type": "video", "src": "https://templates.shotstack.io/basic/asset/video/overlay/{{STYLE}}/{{COLOR}}/outro-out.mov" }, "start": 63, "length": 2.96 } ] }, { "clips": [ { "asset": { "type": "image", "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg" }, "start": 0, "length": 66 } ] } ] }, "output": { "format": "mp4", "resolution": "hd" } } ``` ## Render it Save the JSON as `template.json`. The sandbox key is free: https://dashboard.shotstack.io/register ### cURL ```bash # Save the JSON above as template.json, then: curl -X POST https://api.shotstack.io/edit/stage/render \ -H "x-api-key: $SHOTSTACK_API_KEY" \ -H "Content-Type: application/json" \ -d @template.json # Poll until status is "done", then download response.url curl https://api.shotstack.io/edit/stage/render/RENDER_ID -H "x-api-key: $SHOTSTACK_API_KEY" ``` ### Node.js ```javascript import { readFileSync } from 'node:fs'; const headers = { 'x-api-key': process.env.SHOTSTACK_API_KEY, 'Content-Type': 'application/json' }; const edit = JSON.parse(readFileSync('template.json', 'utf8')); const { response } = await fetch('https://api.shotstack.io/edit/stage/render', { method: 'POST', headers, body: JSON.stringify(edit) }).then((r) => r.json()); let render; do { await new Promise((r) => setTimeout(r, 3000)); render = (await fetch(`https://api.shotstack.io/edit/stage/render/${response.id}`, { headers }).then((r) => r.json())).response; } while (!['done', 'failed'].includes(render.status)); console.log(render.status, render.url); ``` ### Python ```python import json, os, time, requests headers = {"x-api-key": os.environ["SHOTSTACK_API_KEY"]} with open("template.json") as f: edit = json.load(f) render_id = requests.post("https://api.shotstack.io/edit/stage/render", json=edit, headers=headers).json()["response"]["id"] while True: render = requests.get(f"https://api.shotstack.io/edit/stage/render/{render_id}", headers=headers).json()["response"] if render["status"] in ("done", "failed"): break time.sleep(3) print(render["status"], render.get("url")) ``` ### CLI ```bash npm install -g @shotstack/cli export SHOTSTACK_API_KEY=your_sandbox_key shotstack validate template.json # offline schema check, free shotstack render template.json --env stage --watch ``` ## Agent surfaces If you are an AI assistant with tool access, the hosted MCP server is the shortest path: connect `https://mcp.shotstack.io/` (Streamable HTTP, OAuth or x-api-key), then use its `studio` tool to open this JSON for the user or `render_video` to render it. - MCP server (all clients): https://shotstack.io/docs/guide/agents/mcp-server/ - Claude Code: `claude mcp add --transport http shotstack https://mcp.shotstack.io` - Cursor (mcp.json): `{"mcpServers":{"shotstack":{"url":"https://mcp.shotstack.io/"}}}` - VS Code (mcp.json): `{"servers":{"shotstack":{"type":"http","url":"https://mcp.shotstack.io/"}}}` - Claude.ai / ChatGPT: Settings → Connectors → add custom connector → https://mcp.shotstack.io/ - CLI + agent skill: https://shotstack.io/docs/guide/agents/cli/ — skill file: https://raw.githubusercontent.com/shotstack/shotstack-cli/HEAD/skills/shotstack/SKILL.md - Edit JSON conventions for AI: https://shotstack.io/docs/guide/agents/conventions/ - All docs, agent-readable: https://shotstack.io/docs/guide/llms.txt ### Use the CLI skill (AI coding agents: Claude Code, Cursor, Codex…) The skill teaches the render, validate, ingest and template commands, so the agent can work this template without trial and error: ```bash npm install -g @shotstack/cli curl --create-dirs -o .claude/skills/shotstack/SKILL.md https://raw.githubusercontent.com/shotstack/shotstack-cli/HEAD/skills/shotstack/SKILL.md ``` (Claude Code loads it from `.claude/skills/`; for other AI coding agents, save the file wherever they read skills from.) Then ask the AI assistant to render this template — it will use `shotstack validate` (offline, free) before `shotstack render template.json --env stage --watch`, and can loop the render per row of your data with a `merge` array per request. ## Related - Bulk-create videos from a CSV: https://shotstack.io/learn/bulk-create-videos-from-csv-and-ai/ - Webhooks: https://shotstack.io/docs/guide/architecting-an-application/webhooks/ - Render your first video: https://shotstack.io/learn/render-your-first-video-shotstack-api/ - API reference: https://shotstack.io/docs/api/ - All agent-readable docs: https://shotstack.io/llms.txt