[{"data":1,"prerenderedAt":664},["ShallowReactive",2],{"\u002Fdocs\u002Frender-your-first-template":3},{"id":4,"title":5,"body":6,"category":654,"date":655,"description":656,"extension":657,"heroImage":658,"meta":659,"navigation":406,"path":660,"readingMinutes":96,"seo":661,"stem":662,"tool":654,"__hash__":663},"docs\u002Fdocs\u002Frender-your-first-template.md","Render your first template",{"type":7,"value":8,"toc":643},"minimark",[9,14,29,33,36,117,124,128,131,150,166,170,180,248,255,259,433,437,440,489,506,510,538,580,583,587,610,614,639],[10,11,13],"h2",{"id":12},"the-idea","The idea",[15,16,17,18,23,24,28],"p",{},"You design a template once in ",[19,20,22],"a",{"href":21},"\u002Fdocs\u002Fbuilding-templates-in-bluepic-studio","Bluepic Studio",", where every field is an input. Then you render it from your own code by sending its ",[25,26,27],"code",{},"templateId"," and the data to drop in, and you get an image (or, if the template is animated, a video) back. The engine re-fits text and images so the layout stays correct no matter what you send.",[10,30,32],{"id":31},"try-it-with-no-key","Try it with no key",[15,34,35],{},"There is one public demo template you can render with no API key and no credit cost. Copy this:",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-bash shiki shiki-themes github-dark","curl -X POST \"https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Frender\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\n    \"templateId\": \"efa8ff2c-262b-4488-b8cf-e01521c6fbb5\",\n    \"format\": \"png\"\n  }' \\\n  --output render.png\n","bash","",[25,44,45,68,79,88,94,100,108],{"__ignoreMap":42},[46,47,50,54,58,62,65],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"svObZ","curl",[46,55,57],{"class":56},"sDLfK"," -X",[46,59,61],{"class":60},"sU2Wk"," POST",[46,63,64],{"class":60}," \"https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Frender\"",[46,66,67],{"class":56}," \\\n",[46,69,71,74,77],{"class":48,"line":70},2,[46,72,73],{"class":56},"  -H",[46,75,76],{"class":60}," \"Content-Type: application\u002Fjson\"",[46,78,67],{"class":56},[46,80,82,85],{"class":48,"line":81},3,[46,83,84],{"class":56},"  -d",[46,86,87],{"class":60}," '{\n",[46,89,91],{"class":48,"line":90},4,[46,92,93],{"class":60},"    \"templateId\": \"efa8ff2c-262b-4488-b8cf-e01521c6fbb5\",\n",[46,95,97],{"class":48,"line":96},5,[46,98,99],{"class":60},"    \"format\": \"png\"\n",[46,101,103,106],{"class":48,"line":102},6,[46,104,105],{"class":60},"  }'",[46,107,67],{"class":56},[46,109,111,114],{"class":48,"line":110},7,[46,112,113],{"class":56},"  --output",[46,115,116],{"class":60}," render.png\n",[15,118,119,120,123],{},"You get a ",[25,121,122],{},"render.png"," back. That is the whole loop: one POST, one image.",[10,125,127],{"id":126},"get-your-api-key","Get your API key",[15,129,130],{},"For your own templates you need a key.",[132,133,134,143],"ol",{},[135,136,137,138,142],"li",{},"Sign in at ",[19,139,141],{"href":140},"\u002Fidml\u002Faccount","your account",". A key is issued automatically the first time.",[135,144,145,146,149],{},"Copy the key (it starts with ",[25,147,148],{},"bpk_",").",[15,151,152,153,156,157,161,162,165],{},"Pass it as the ",[25,154,155],{},"Authorization"," header, with ",[158,159,160],"strong",{},"no"," ",[25,163,164],{},"Bearer"," prefix.",[10,167,169],{"id":168},"render-your-own-template","Render your own template",[15,171,172,173,175,176,179],{},"Once you have built and saved a template in Studio, grab its ",[25,174,27],{}," (the Studio editor's ",[158,177,178],{},"Code"," button shows a ready-made snippet for that template). Then:",[37,181,183],{"className":39,"code":182,"language":41,"meta":42,"style":42},"curl -X POST \"https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Frender\" \\\n  -H \"Authorization: bpk_your_key_here\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\n    \"templateId\": \"YOUR_TEMPLATE_ID\",\n    \"data\": { \"headline\": \"Hello from the API\" },\n    \"format\": \"png\"\n  }' \\\n  --output render.png\n",[25,184,185,197,206,214,220,225,230,234,241],{"__ignoreMap":42},[46,186,187,189,191,193,195],{"class":48,"line":49},[46,188,53],{"class":52},[46,190,57],{"class":56},[46,192,61],{"class":60},[46,194,64],{"class":60},[46,196,67],{"class":56},[46,198,199,201,204],{"class":48,"line":70},[46,200,73],{"class":56},[46,202,203],{"class":60}," \"Authorization: bpk_your_key_here\"",[46,205,67],{"class":56},[46,207,208,210,212],{"class":48,"line":81},[46,209,73],{"class":56},[46,211,76],{"class":60},[46,213,67],{"class":56},[46,215,216,218],{"class":48,"line":90},[46,217,84],{"class":56},[46,219,87],{"class":60},[46,221,222],{"class":48,"line":96},[46,223,224],{"class":60},"    \"templateId\": \"YOUR_TEMPLATE_ID\",\n",[46,226,227],{"class":48,"line":102},[46,228,229],{"class":60},"    \"data\": { \"headline\": \"Hello from the API\" },\n",[46,231,232],{"class":48,"line":110},[46,233,99],{"class":60},[46,235,237,239],{"class":48,"line":236},8,[46,238,105],{"class":60},[46,240,67],{"class":56},[46,242,244,246],{"class":48,"line":243},9,[46,245,113],{"class":56},[46,247,116],{"class":60},[15,249,250,251,254],{},"The ",[25,252,253],{},"data"," object holds one entry per input field in your template. Any field you leave out keeps its default.",[10,256,258],{"id":257},"from-javascript","From JavaScript",[37,260,264],{"className":261,"code":262,"language":263,"meta":42,"style":42},"language-js shiki shiki-themes github-dark","const res = await fetch(\"https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Frender\", {\n  method: \"POST\",\n  headers: {\n    \"Authorization\": \"bpk_your_key_here\",\n    \"Content-Type\": \"application\u002Fjson\",\n  },\n  body: JSON.stringify({\n    templateId: \"YOUR_TEMPLATE_ID\",\n    data: { headline: \"Hello from the API\" },\n    format: \"png\",\n  }),\n});\n\nconst blob = await res.blob(); \u002F\u002F the rendered image\n","js",[25,265,266,294,305,310,323,335,340,357,367,378,389,395,401,408],{"__ignoreMap":42},[46,267,268,272,275,278,281,284,288,291],{"class":48,"line":49},[46,269,271],{"class":270},"snl16","const",[46,273,274],{"class":56}," res",[46,276,277],{"class":270}," =",[46,279,280],{"class":270}," await",[46,282,283],{"class":52}," fetch",[46,285,287],{"class":286},"s95oV","(",[46,289,290],{"class":60},"\"https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Frender\"",[46,292,293],{"class":286},", {\n",[46,295,296,299,302],{"class":48,"line":70},[46,297,298],{"class":286},"  method: ",[46,300,301],{"class":60},"\"POST\"",[46,303,304],{"class":286},",\n",[46,306,307],{"class":48,"line":81},[46,308,309],{"class":286},"  headers: {\n",[46,311,312,315,318,321],{"class":48,"line":90},[46,313,314],{"class":60},"    \"Authorization\"",[46,316,317],{"class":286},": ",[46,319,320],{"class":60},"\"bpk_your_key_here\"",[46,322,304],{"class":286},[46,324,325,328,330,333],{"class":48,"line":96},[46,326,327],{"class":60},"    \"Content-Type\"",[46,329,317],{"class":286},[46,331,332],{"class":60},"\"application\u002Fjson\"",[46,334,304],{"class":286},[46,336,337],{"class":48,"line":102},[46,338,339],{"class":286},"  },\n",[46,341,342,345,348,351,354],{"class":48,"line":110},[46,343,344],{"class":286},"  body: ",[46,346,347],{"class":56},"JSON",[46,349,350],{"class":286},".",[46,352,353],{"class":52},"stringify",[46,355,356],{"class":286},"({\n",[46,358,359,362,365],{"class":48,"line":236},[46,360,361],{"class":286},"    templateId: ",[46,363,364],{"class":60},"\"YOUR_TEMPLATE_ID\"",[46,366,304],{"class":286},[46,368,369,372,375],{"class":48,"line":243},[46,370,371],{"class":286},"    data: { headline: ",[46,373,374],{"class":60},"\"Hello from the API\"",[46,376,377],{"class":286}," },\n",[46,379,381,384,387],{"class":48,"line":380},10,[46,382,383],{"class":286},"    format: ",[46,385,386],{"class":60},"\"png\"",[46,388,304],{"class":286},[46,390,392],{"class":48,"line":391},11,[46,393,394],{"class":286},"  }),\n",[46,396,398],{"class":48,"line":397},12,[46,399,400],{"class":286},"});\n",[46,402,404],{"class":48,"line":403},13,[46,405,407],{"emptyLinePlaceholder":406},true,"\n",[46,409,411,413,416,418,420,423,426,429],{"class":48,"line":410},14,[46,412,271],{"class":270},[46,414,415],{"class":56}," blob",[46,417,277],{"class":270},[46,419,280],{"class":270},[46,421,422],{"class":286}," res.",[46,424,425],{"class":52},"blob",[46,427,428],{"class":286},"(); ",[46,430,432],{"class":431},"sAwPA","\u002F\u002F the rendered image\n",[10,434,436],{"id":435},"render-a-video","Render a video",[15,438,439],{},"If your template is animated, ask for a video format and you get an MP4 instead. There is a public video demo you can call with no key:",[37,441,443],{"className":39,"code":442,"language":41,"meta":42,"style":42},"curl -N -X POST \"https:\u002F\u002Fapi.bluepic.io\u002Fapi\u002Frender\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\n    \"templateId\": \"7ccf097c-10f2-4efc-bd03-8abe967c4711\",\n    \"format\": \"mp4\"\n  }'\n",[25,444,445,460,468,474,479,484],{"__ignoreMap":42},[46,446,447,449,452,454,456,458],{"class":48,"line":49},[46,448,53],{"class":52},[46,450,451],{"class":56}," -N",[46,453,57],{"class":56},[46,455,61],{"class":60},[46,457,64],{"class":60},[46,459,67],{"class":56},[46,461,462,464,466],{"class":48,"line":70},[46,463,73],{"class":56},[46,465,76],{"class":60},[46,467,67],{"class":56},[46,469,470,472],{"class":48,"line":81},[46,471,84],{"class":56},[46,473,87],{"class":60},[46,475,476],{"class":48,"line":90},[46,477,478],{"class":60},"    \"templateId\": \"7ccf097c-10f2-4efc-bd03-8abe967c4711\",\n",[46,480,481],{"class":48,"line":96},[46,482,483],{"class":60},"    \"format\": \"mp4\"\n",[46,485,486],{"class":48,"line":102},[46,487,488],{"class":60},"  }'\n",[15,490,491,492,495,496,500,501,505],{},"A video takes longer to produce, so the response is a stream: live progress events, then a final event carrying the hosted MP4 URL. That is what ",[25,493,494],{},"-N"," is for. See ",[19,497,499],{"href":498},"\u002Fdocs\u002Fgenerate-video-via-api","generate video via API"," for how to read the stream, and ",[19,502,504],{"href":503},"\u002Fdocs\u002Fone-template-two-outputs","one template, two outputs"," for the still-vs-video idea.",[10,507,509],{"id":508},"formats-and-options","Formats and options",[15,511,512,515,516,519,520,519,523,519,526,529,530,533,534,537],{},[25,513,514],{},"format"," can be ",[25,517,518],{},"png",", ",[25,521,522],{},"jpeg",[25,524,525],{},"pdf",[25,527,528],{},"svg",", or the video formats ",[25,531,532],{},"mp4"," and ",[25,535,536],{},"mov",". A few optional fields:",[539,540,541,551,559,567],"ul",{},[135,542,543,546,547,550],{},[25,544,545],{},"width"," \u002F ",[25,548,549],{},"height",": override the output size in pixels.",[135,552,553,556,557,350],{},[25,554,555],{},"dpi",": resolution for ",[25,558,525],{},[135,560,561,564,565,350],{},[25,562,563],{},"quality",": 0 to 1 for ",[25,566,522],{},[135,568,569,317,572,575,576,579],{},[25,570,571],{},"svgVectorizeText",[25,573,574],{},"true"," outlines text in SVG output, ",[25,577,578],{},"false"," keeps it as live text.",[15,581,582],{},"Video formats return a Server-Sent Events stream rather than the file bytes; the image formats return the file directly.",[10,584,586],{"id":585},"credits-and-limits","Credits and limits",[15,588,589,590,593,594,597,598,601,602,606,607,350],{},"Every account includes ",[158,591,592],{},"100 free render credits per month",". An image render is ",[158,595,596],{},"1 credit","; a video is metered by length and resolution, at ",[158,599,600],{},"1 credit per second of 2K at 24fps"," (see ",[19,603,605],{"href":604},"\u002Fdocs\u002Fvideo-credits","how video credits work","). The public demo templates above are free and unmetered. Check your balance any time on the ",[19,608,609],{"href":140},"account page",[10,611,613],{"id":612},"next","Next",[539,615,616,626,634],{},[135,617,618,619,621,622,350],{},"Render a personalized clip: ",[19,620,499],{"href":498},", or ",[19,623,625],{"href":624},"\u002Fdocs\u002Fbatch-animate-videos","batch many at once",[135,627,628,629,633],{},"The complete ",[19,630,632],{"href":631},"\u002Fdocs\u002Fapi-reference","API reference",", including rendering a raw IDML file and every error you'll hit.",[135,635,636,350],{},[19,637,638],{"href":21},"Building templates in Bluepic Studio",[640,641,642],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":42,"searchDepth":70,"depth":70,"links":644},[645,646,647,648,649,650,651,652,653],{"id":12,"depth":70,"text":13},{"id":31,"depth":70,"text":32},{"id":126,"depth":70,"text":127},{"id":168,"depth":70,"text":169},{"id":257,"depth":70,"text":258},{"id":435,"depth":70,"text":436},{"id":508,"depth":70,"text":509},{"id":585,"depth":70,"text":586},{"id":612,"depth":70,"text":613},"platform","2026-07-17","A five-minute API quickstart. Get a key, POST a templateId with your data, and get a rendered image or video back. Includes public demo templates you can call with no key at all.","md","\u002Fdocs-images\u002Frender-first-template.svg",{},"\u002Fdocs\u002Frender-your-first-template",{"title":5,"description":656},"docs\u002Frender-your-first-template","PSe61GFjP7LMKvsOLNdHmSZKr1neP9jtfdo__kHhlUo",1785414150078]