1"use strict";(self.webpackChunkdocs_site=self.webpackChunkdocs_site||[]).push([["8933"],{9718(e,t,n){n.r(t),n.d(t,{metadata:()=>i,default:()=>h,frontMatter:()=>s,contentTitle:()=>o,toc:()=>d,assets:()=>l});var i=JSON.parse('{"id":"getting-started/generate-first-image","title":"Generate Your First Image","description":"Step-by-step guide to generating your first image with APITemplate.io. Design a drag-and-drop template and generate images via API or no-code tools.","source":"@site/docs/getting-started/generate-first-image.md","sourceDirName":"getting-started","slug":"/getting-started/generate-first-image","permalink":"/docs/getting-started/generate-first-image","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_position":6,"title":"Generate Your First Image","description":"Step-by-step guide to generating your first image with APITemplate.io. Design a drag-and-drop template and generate images via API or no-code tools.","keywords":["generate image","image API","image template","social media image","banner generation","image generation tutorial"]},"sidebar":"docsSidebar","previous":{"title":"Generate Your First PDF","permalink":"/docs/getting-started/generate-first-pdf"},"next":{"title":"Make Your First API Request","permalink":"/docs/getting-started/first-api-request"}}'),r=n(4848),a=n(8453);let s={sidebar_position:6,title:"Generate Your First Image",description:"Step-by-step guide to generating your first image with APITemplate.io. Design a drag-and-drop template and generate images via API or no-code tools.",keywords:["generate image","image API","image template","social media image","banner generation","image generation tutorial"]},o="Generate Your First Image",l={},d=[{value:"Step 1: Create an image template",id:"step-1-create-an-image-template",level:2},{value:"Step 2: Design your template",id:"step-2-design-your-template",level:2},{value:"Step 3: Test with the API Console",id:"step-3-test-with-the-api-console",level:2},{value:"Step 4: Generate via the API",id:"step-4-generate-via-the-api",level:2},{value:"No-code alternatives",id:"no-code-alternatives",level:3},{value:"Learn more",id:"learn-more",level:2}];function c(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"generate-your-first-image",children:"Generate Your First Image"})}),"\n",(0,r.jsx)(t.p,{children:"APITemplate.io's image generation lets you create banners, social media graphics, and personalized visuals from reusable templates. No HTML or CSS knowledge required."}),"\n",(0,r.jsx)(t.h2,{id:"step-1-create-an-image-template",children:"Step 1: Create an image template"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["Go to ",(0,r.jsx)(t.strong,{children:"Manage Templates"})," and click ",(0,r.jsx)(t.strong,{children:"New Image Template"})]}),"\n",(0,r.jsx)(t.li,{children:"Choose a preset (like an Instagram post, Facebook banner, or Pinterest pin) or start from a blank canvas"}),"\n",(0,r.jsxs)(t.li,{children:["Click ",(0,r.jsx)(t.strong,{children:"Launch Image Editor"})," on your new template"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"step-2-design-your-template",children:"Step 2: Design your template"}),"\n",(0,r.jsx)(t.p,{children:"The image editor is a visual drag-and-drop canvas where you can:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Add ",(0,r.jsx)(t.strong,{children:"text elements"})," \u2014 headlines, subtitles, body text"]}),"\n",(0,r.jsxs)(t.li,{children:["Add ",(0,r.jsx)(t.strong,{children:"images"})," \u2014 backgrounds, logos, photos"]}),"\n",(0,r.jsxs)(t.li,{children:["Add ",(0,r.jsx)(t.strong,{children:"shapes"})," \u2014 rectangles, circles, lines"]}),"\n",(0,r.jsxs)(t.li,{children:["Add ",(0,r.jsx)(t.strong,{children:"dynamic components"})," \u2014 QR codes, barcodes"]}),"\n",(0,r.jsx)(t.li,{children:"Resize and position elements with precision controls"}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Image template editor with drag-and-drop canvas, layers panel, and property controls",src:n(1385).A+"",width:"2853",height:"1504"})}),"\n",(0,r.jsxs)(t.p,{children:["Give each dynamic element a meaningful name (like ",(0,r.jsx)(t.code,{children:"headline"}),", ",(0,r.jsx)(t.code,{children:"subtitle"}),", ",(0,r.jsx)(t.code,{children:"logo"}),"). These names map to JSON properties when generating images via the API."]}),"\n",(0,r.jsx)(t.h2,{id:"step-3-test-with-the-api-console",children:"Step 3: Test with the API Console"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["Click the ",(0,r.jsx)(t.strong,{children:"Preview/API Console"})," tab in the editor"]}),"\n",(0,r.jsxs)(t.li,{children:["Click ",(0,r.jsx)(t.strong,{children:"Generate JSON Data"})," to populate the sample JSON"]}),"\n",(0,r.jsx)(t.li,{children:"Modify the JSON to change text, images, or other properties"}),"\n",(0,r.jsxs)(t.li,{children:["Click ",(0,r.jsx)(t.strong,{children:"Qu
1ick Preview (Free)"})," to see the result"]}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Preview/API Console with JSON editor on the left and live image preview on the right",src:n(4318).A+"",width:"2857",height:"1531"})}),"\n",(0,r.jsx)(t.h2,{id:"step-4-generate-via-the-api",children:"Step 4: Generate via the API"}),"\n",(0,r.jsxs)(t.p,{children:["Once your template is ready, you can generate images by sending a POST request to the ",(0,r.jsx)(t.code,{children:"create-image"})," endpoint. Replace ",(0,r.jsx)(t.code,{children:"YOUR_TEMPLATE_ID"})," with the template ID from your dashboard and ",(0,r.jsx)(t.code,{children:"YOUR_API_KEY"})," with your ",(0,r.jsx)(t.a,{href:"/getting-started/get-api-key",children:"API key"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"overrides"})," array lets you swap out any named element in your template \u2014 pass the element's ",(0,r.jsx)(t.code,{children:"name"})," and the new ",(0,r.jsx)(t.code,{children:"text"}),", ",(0,r.jsx)(t.code,{children:"src"})," (for images), or other properties."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:'curl -X POST "https://rest.apitemplate.io/v2/create-image?template_id=YOUR_TEMPLATE_ID" \\\n -H "X-API-KEY: YOUR_API_KEY" \\\n -H "Content-Type: application/json" \\\n -d \'{\n "overrides": [\n {\n "name": "headline",\n "text": "Welcome to APITemplate.io!"\n },\n {\n "name": "subtitle",\n "text": "Generate images at scale"\n }\n ]\n }\'\n'})}),"\n",(0,r.jsxs)(t.p,{children:["The response includes a ",(0,r.jsx)(t.code,{children:"download_url"})," for the generated image."]}),"\n",(0,r.jsxs)(t.p,{children:["For the full list of parameters, output options, and error codes, see the ",(0,r.jsx)(t.a,{href:"https://apitemplate.io/apiv2/",children:"REST API Reference (v2)"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"no-code-alternatives",children:"No-code alternatives"}),"\n",(0,r.jsx)(t.p,{children:"If you prefer not to write code, you can generate images through no-code integrations:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"/integrations/zapier",children:"Zapier"})})," \u2014 Set up a Zap that triggers image generation from events in Google Sheets, HubSpot, Airtable, or hundreds of other apps"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"/integrations/make",children:"Make.com"})})," \u2014 Build a scenario that generates images as part of a multi-step automation workflow"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"/integrations/n8n",children:"n8n"})})," \u2014 Use an open-source, self-hostable workflow platform to automate image generation with 300+ integrations"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"/integrations/bubble",children:"Bubble.io"})})," \u2014 Generate images directly from your Bubble app using the official APITemplate.io plugin"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"/integrations/airtable",children:"Airtable"})})," \u2014 Connect Airtable records to templates and generate images in bulk"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"/image-generation/direct-url",children:"Direct URL"})})," \u2014 Generate images with just a URL and query string parameters \u2014 no API call needed"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"/integrations/rest-api",children:"REST API"})})," \u2014 Integrate image generation into any application with full control over the API"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"learn-more",children:"Learn more"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/image-generation/overview",children:"Image Template Editor"})," \u2014 full guide to the editor"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/image-generation/direct-url",children:"Direct URL Generation"})," \u2014 generate images with just a URL"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/integrations/zapier",children:"Zapier Integration"})," \u2014 automate image generation"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/integrations/make",children:"Make.com Integration"})," \u2014 connect with Make.com workflows"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/integrations/n8n",children:"n8n Integration"})," \u2014 automate with an open-source workflow platform"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/integrations/bubble",children:"Bubble.io Integration"})," \u2014 generate images from Bubble apps"]}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1385(e,t,n){n.d(t,{A:()=>i});let i=n.p+"assets/images/image-template-editor-00ab1c5dd4703d155b14130709ff9e21.png"},4318(e,t,n){n.d(t,{A:()=>i});let i=n.p+"assets/images/preview-api-console-112a528ae2bd7eda7f7e3155b0d72f97.png"},8453(e,t,n){n.d(t,{R:()=>s,x:()=>o});var i=n(6540);let r={},a=i.createContext(r);function s(e){let t=i.useContext(a);return i.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(a.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.