DEV Community: Amna Anjum

Automatically Turn Blog Posts Into Multi-Slide Carousels With an API

Amna Anjum — Sun, 30 Nov 2025 09:51:30 +0000

A Practical Developer Tutorial Using the ContentDrips Carousel Maker

Long-form blog posts are excellent for SEO but not ideal for platforms like Instagram or LinkedIn, where multi-slide carousels perform significantly better. This guide shows how you can automatically transform any blog post into a multi-slide, professionally designed carousel using the ContentDrips API.

The workflow:

Fetch or parse a blog post
Split it into readable slide chunks
Send those chunks to the ContentDrips carousel endpoint
Receive ready-to-publish PNG or PDF slides

Step 0 — Label Your Template (One-Time Setup, Mandatory)

Before calling the API, ensure your carousel template has clearly named editable fields (meta_labels). This is a one-time setup per template and must be done before automation:

Example labels: intro_heading, intro_description, slide_heading, slide_description, ending_heading, image_url
Match these labels exactly in your API carousel payload. Label mismatches cause 400 errors.
Once labeled, you do not need to relabel the same template again unless you change the template structure.

Get a Free API Key (No Credit Card Required)

Get a free API key with 10 free API calls here:
https://app.contentdrips.com/api-management

No credit card required.

Cost model:
1 credit = 1 API call
Each carousel or image generation uses one credit.

Templates Are Ready for You

You do not need to design templates yourself.

ContentDrips provides a large library of ready-made templates for:

carousels
social graphics
quotes
summaries
announcements
stat cards

If you need additional templates, you can request them and they will be provided. This means you can run the automation without building templates manually.

What You Will Build

A script that:

Parses a blog post
Splits it into slide text chunks
Sends those chunks to the carousel-maker endpoint
Polls for job completion
Returns downloadable PNG or PDF slides

Prerequisites

A free ContentDrips API key
A carousel template with labeled fields (one-time setup)
Node.js or a similar environment
Access to a blog post (URL or raw text)

Documentation: https://developer.contentdrips.com/

Step 1 — Fetch or Parse Blog Content

Example of fetching a blog post and extracting its text:

import fetch from "node-fetch";
import { JSDOM } from "jsdom";

const res = await fetch("https://example.com/blog/post");
const html = await res.text();

const dom = new JSDOM(html);
const blogPost = dom.window.document.querySelector("article").textContent;

Or manually define the text:

const blogPost = `
Content repurposing helps extend the lifespan of long-form articles...
`;

Step 2 — Split Content Into Slide Chunks

function splitIntoSlides(text, maxSentences = 2) {
  const sentences = text
    .split(".")
    .map(s => s.trim())
    .filter(Boolean);

  const slides = [];
  for (let i = 0; i < sentences.length; i += maxSentences) {
    slides.push(sentences.slice(i, i + maxSentences).join(". ") + ".");
  }
  return slides;
}

const slideTexts = splitIntoSlides(blogPost, 2);

Step 3 — Build the Carousel Payload

Map your labeled template fields to the carousel payload. Ensure labels match the template meta_labels exactly.

const carouselPayload = {
  template_id: "YOUR_TEMPLATE_ID",
  output: "png",
  carousel: {
    intro_slide: {
      heading: { text: "Key Insights From This Blog Post" }, // matches intro_heading
      description: { text: "A programmatically generated summary" } // matches intro_description
    },
    slides: slideTexts.map((chunk, idx) => ({
      heading: { text: `Slide ${idx + 1}` }, // matches slide_heading
      description: { text: chunk } // matches slide_description
    })),
    ending_slide: {
      heading: { text: "End of Carousel" } // matches ending_heading
    }
  }
};

Step 4 — Submit the Carousel Job

const apiKey = process.env.CONTENTDRIPS_API_KEY;

const submit = await fetch(
  "https://generate.contentdrips.com/render?tool=carousel-maker",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${apiKey}`
    },
    body: JSON.stringify(carouselPayload)
  }
);

const job = await submit.json();
console.log("Job ID:", job.job_id);

Step 5 — Poll for Completion

async function waitForCompletion(jobId) {
  while (true) {
    const res = await fetch(
      `https://generate.contentdrips.com/job/${jobId}/status`,
      { headers: { "Authorization": `Bearer ${apiKey}` } }
    );
    const json = await res.json();

    if (json.status === "completed") return true;
    if (json.status === "failed") throw new Error("Job failed");

    await new Promise(r => setTimeout(r, 3000));
  }
}

await waitForCompletion(job.job_id);

Poll every 3–5 seconds and set a reasonable timeout to avoid infinite loops.

Step 6 — Retrieve Final Slides

const finalRes = await fetch(
  `https://generate.contentdrips.com/job/${job.job_id}/result`,
  { headers: { "Authorization": `Bearer ${apiKey}` } }
);

const data = await finalRes.json();
console.log("Slides:", data.export_url);

If PNG output is used, the result is an array of slide URLs. If PDF output is used, a single file URL is returned.

Full Pipeline Example

async function generateCarouselFromBlog(blogText) {
  const slides = splitIntoSlides(blogText, 2);

  const payload = {
    template_id: "YOUR_TEMPLATE_ID",
    output: "png",
    carousel: {
      intro_slide: {
        heading: { text: "Blog Summary" },
        description: { text: "Key insights" }
      },
      slides: slides.map((chunk, idx) => ({
        heading: { text: `Slide ${idx + 1}` },
        description: { text: chunk }
      })),
      ending_slide: {
        heading: { text: "End of Carousel" }
      }
    }
  };

  const submit = await fetch(
    "https://generate.contentdrips.com/render?tool=carousel-maker",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${apiKey}`
      },
      body: JSON.stringify(payload)
    }
  );

  const job = await submit.json();
  await waitForCompletion(job.job_id);

  const finalRes = await fetch(
    `https://generate.contentdrips.com/job/${job.job_id}/result`,
    { headers: { "Authorization": `Bearer ${apiKey}` } }
  );

  return await finalRes.json();
}

Use Cases

Convert blogs into social carousels automatically
Build a “convert blog to carousel” SaaS feature
Repurpose articles for LinkedIn and Instagram
Create automated content workflows with Zapier or n8n
Generate slide decks from long-form content
Build agency tools for bulk carousel creation

Best Practices

Label template fields exactly once during setup; matching labels are required for automation.
Keep slides short; 1–3 sentences per slide.
Use publicly accessible image URLs if inserting images.
Poll every 3–5 seconds and set a maximum timeout.
Use PNG for social media, PDF for documents.
Confirm template labels match template meta_labels exactly to avoid 400 errors.
Each carousel/image generation consumes 1 credit per API call.

Conclusion

With a one-time template labeling step and a few lines of code, you can convert any blog post into a clean, multi-slide carousel ready for Instagram, LinkedIn, or other platforms. ContentDrips handles rendering and layout; you handle automation. You can get a free API key with 10 free calls (no credit card) at https://app.contentdrips.com/api-management. Additional templates are available and can be requested if you do not want to design them yourself.

Automate Open Graph Image Generation for Your Blog Posts

Amna Anjum — Thu, 27 Nov 2025 20:03:06 +0000

Most teams still design open graph images manually — opening a file, adjusting text, exporting, re-uploading. It works for a few posts… but breaks completely once you publish at any sort of scale.

This guide shows how to automate open graph image generation using the Contentdrips API.

You'll turn any blog title, description, or author name into a clean, branded open graph image — generated instantly with one API call. For example, this one:

You can grab ready-made templates here:

👉 Contentdrips Templates

And you can get a free API key (no credit card required) here:

👉 API Management

Why Manual Open Graph Images Don't Scale

Manually creating these preview images leads to:

Inconsistent designs
Outdated brand elements
Missing images when publishing fast
Time wasted building the same layout again
Zero automation possibilities

Automating open graph generation gives you:

Perfectly consistent branding
Readable layouts on every post
Instant generation
Fully automated publishing workflows

What You'll Build

By the end, you'll be able to:

Take a blog title + subtitle
Inject it into a template
Generate a clean open graph image automatically
Get a CDN URL you can embed anywhere

Everything starts with a template. You'll find open graph–ready layouts here:

👉 Contentdrips Templates

Pick any and make sure your textboxes use clear labels like:

post_title
post_subtitle

These labels will be used in your API call.

Prerequisites

You'll need:

Node.js (or any environment that can send HTTP requests)
A Contentdrips API key — free and no credit card required: 👉 Get API Key
A template ID from the templates gallery

Step 0: Prepare Your Template

Inside Contentdrips:

Open any open graph template
Or create your own design
Click Automate
Confirm your textboxes follow intuitive labels

You can explore template options here:

👉 Contentdrips Templates

Step 1: Send Your Blog Data to the API

async function generateOG({ title, subtitle, templateId, apiKey }) {
  const response = await fetch("https://generate.contentdrips.com/render", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${apiKey}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      template_id: templateId,
      output: "png",
      content_update: [
        { type: "textbox", label: "post_title", value: title },
        { type: "textbox", label: "post_subtitle", value: subtitle }
      ]
    })
  });

  const json = await response.json();
  return json.job_id;
}

Step 2: Poll the Job

async function checkStatus(jobId, apiKey) {
  const res = await fetch(
    `https://generate.contentdrips.com/job/${jobId}/status`,
    { headers: { "Authorization": `Bearer ${apiKey}` } }
  );
  const json = await res.json();
  return json.status;
}

Step 3: Retrieve the Final Open Graph Image

async function getImage(jobId, apiKey) {
  const res = await fetch(
    `https://generate.contentdrips.com/job/${jobId}/result`,
    { headers: { "Authorization": `Bearer ${apiKey}` } }
  );
  const json = await res.json();
  return json.export_url;
}

Complete Function: Blog Data → Automated Open Graph Image

async function createOpenGraphImage(title, subtitle, templateId, apiKey) {
  const jobId = await generateOG({ title, subtitle, templateId, apiKey });

  let status = "queued";
  while (status !== "completed") {
    await new Promise(r => setTimeout(r, 2000));
    status = await checkStatus(jobId, apiKey);
  }

  return await getImage(jobId, apiKey);
}

How to Automate This in Your Publishing Workflow

1. Static Site Generators (Next.js, Astro, Hugo)

Generate the image whenever a new markdown file is created.

2. CMS-Driven Sites (Ghost, WordPress, Sanity)

Trigger an image render whenever a post is published.

3. Developer Docs

Auto-create new open graph images for every documentation page.

4. Weekly or Daily Content Pipelines

Use your CI pipeline to auto-generate open graph visuals for scheduled posts.

Throughout all these workflows, you'll be using the same simple API — and you can grab the required key here:
👉 API Key (Free)

Why This Approach Works

Eliminates manual design work
Guarantees consistent branding
Reduces publishing friction
Works at any scale
Fully scriptable and automatable

Your open graph images become something that "just happens" — no effort, no design bottleneck, no delays.

What You Can Build Next

Auto-generate open graph + social graphics together
Add author photos, categories, or publish dates
Pull templates dynamically from your workspace
Build a real-time "design-as-a-service" pipeline
Generate entire batches of open graph images with a single script

Template options are here:
👉 Contentdrips Templates

Get your free API key and start automating:
👉 API Management

Final Thoughts

Open graph images shouldn't require design work. With automated templates and a simple API call, you can turn every blog post into a polished, branded visual — instantly and programmatically.

Automation makes your publishing pipeline cleaner, faster, and far more consistent.

⭐ Build "AI Moodboards From Tweets" Using the Contentdrips API

Amna Anjum — Tue, 25 Nov 2025 20:16:36 +0000

UX and product teams collect insights from users daily — feature requests, frustrations, praise, patterns. Most of these insights live inside scattered tweets, screenshots, Slack messages, and internal threads.

This guide shows how to turn all that chaos into clean, branded visual cards and then automatically group them into AI-generated moodboards using the Contentdrips API.

Paste a tweet → extract text → render → categorize → drop into moodboards.

No designers. No screenshots. No editing.

Why Screenshots Don't Work

Most teams screenshot tweets for internal decks and research docs. But screenshots:

Look inconsistent
Capture random UI elements
Break brand guidelines
Don't scale
Aren't easy to automate

Rendering tweets as structured visual cards gives you:

Consistent formatting
Proper brand alignment
High readability
Customizable layouts
Fully automated workflows

Perfect for UX research, VOC dashboards, planning sessions, and product reviews.

What You'll Build

By following this tutorial, you'll be able to:

Extract tweet text from any tweet URL
Send that text to the Contentdrips API
Render it into a polished card image
Generate a shareable CDN URL
Use these cards to build moodboards of customer insights

The final output looks like neatly designed "insight cards" that can be grouped under themes like:

"Feature Requests"
"Bugs & Pain Points"
"Delight / Praise"
"Confusion / Misunderstanding"

These visual boards are massively helpful for PMs, UX teams, founders, and researchers.

Prerequisites

You'll need:

Node.js or any environment that supports HTTP requests
A Twitter API bearer token (for extracting tweet text)
A Contentdrips API token (free, no credit card)
A Contentdrips template with a text field labeled tweet_text

Step 0: Prepare Your Template (One-Time Only)

Inside Contentdrips:

Open Templates → Tweet Styles and choose any layout OR open your own template and click Automate
Make sure the tweet-body textbox is labeled tweet_text

You'll use this label in the API calls.

Step 1: Extract the Tweet Text

function getTweetId(url) {
  const match = url.match(/status\/(\d+)/);
  return match ? match[1] : null;
}

async function getTweetText(url, twitterToken) {
  const id = getTweetId(url);
  if (!id) throw new Error("Invalid tweet URL");

  const response = await fetch(
    `https://api.twitter.com/2/tweets/${id}`,
    {
      headers: { "Authorization": `Bearer ${twitterToken}` }
    }
  );

  const json = await response.json();
  return json.data.text;
}

Step 2: Render the Tweet as a Card

async function renderTweetCard(text, cdToken, templateId) {
  const response = await fetch("https://generate.contentdrips.com/render", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${cdToken}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      template_id: templateId,
      output: "png",
      content_update: [
        { type: "textbox", label: "tweet_text", value: text }
      ]
    })
  });

  const json = await response.json();
  return json.job_id;
}

Step 3: Poll the Rendering Job

async function checkJobStatus(jobId, cdToken) {
  const response = await fetch(
    `https://generate.contentdrips.com/job/${jobId}/status`,
    { headers: { "Authorization": `Bearer ${cdToken}` } }
  );

  const json = await response.json();
  return json.status;
}

Step 4: Get the Final Image URL

async function getRenderedImage(jobId, cdToken) {
  const response = await fetch(
    `https://generate.contentdrips.com/job/${jobId}/result`,
    { headers: { "Authorization": `Bearer ${cdToken}` } }
  );

  const json = await response.json();
  return json.export_url;
}

Complete Function: Tweet URL → Rendered Card

async function tweetToCard(tweetUrl, twitterToken, cdToken, templateId) {
  const tweetText = await getTweetText(tweetUrl, twitterToken);

  const jobId = await renderTweetCard(tweetText, cdToken, templateId);

  let status = "queued";
  while (status !== "completed") {
    await new Promise(r => setTimeout(r, 2000));
    status = await checkJobStatus(jobId, cdToken);
  }

  return await getRenderedImage(jobId, cdToken);
}

How to Turn These Cards Into Moodboards

Once you have images for each tweet, you can build moodboards automatically using:

Keyword grouping

Look for patterns:

"pricing"
"signup"
"loading"
"mobile"
"AI"
etc.

Sentiment analysis

Positive → Praise
Negative → Pain points
Mixed → Confusion

Product area tagging

Auto-tag based on:

Onboarding
Billing
Collaboration
Performance
Search
Editor

AI clustering

Feed tweet texts into an embedding model and cluster them into themes.

Your moodboard becomes:

Feature requests cluster
Frustrations cluster
UX issues cluster
Compliments cluster

Generate a visual board

Drop the exported card images into:

Notion galleries
FigJam boards
Miro boards
Custom dashboards
Internal portals
Research docs

You now have a living, visual "Voice of Customer" wall.

Real Use Cases for Product Teams

1. VOC Dashboards

Turn daily tweets into categorized, auto-updating visual boards.

2. Weekly UX Moodboards

Generate cards from all tweets mentioning your product that week.

3. Feature Demand Maps

Group "feature request" cards and count frequency visually.

4. Sprint Planning Inputs

Show developers a board of the exact user pain points.

5. Design Critique Sessions

Discuss clusters of UX frustration tweets with visuals.

These boards become part of your team's decision-making process.

Why This Approach Works

Clean visuals remove noise
Consistency helps with pattern recognition
Cards are easier to share internally
Automation saves countless hours
Insights become searchable and scannable
Works at any scale

It transforms raw, messy tweets into structured research assets.

What You Can Add Next

A Slack bot that generates a card whenever someone pastes a tweet
A Notion integration for automatic board updates
A daily cron job that fetches brand mentions
A dashboard showing "top recurring themes"
Export moodboards as PDFs for leadership

The entire system can become hands-free.

Resources

Contentdrips API documentation
Twitter API documentation
Template automation guide

Final Thoughts

Screenshots are the past.
Rendered insight cards + automated moodboards are the future of customer understanding.

With just a few API calls, you can give your product team a high-signal, automated, visual voice-of-customer system that runs itself.

We understood it's difficult to start from scratch to make a system that creates good image posts - if you make social media tools, this one is for you. Just your good ol' image based posts.

Amna Anjum — Mon, 24 Nov 2025 15:47:30 +0000

Turn Tweets Into Beautiful Images With <25 Lines of Code - A Practical Guide

Amna Anjum ・ Nov 24

#api #tutorial #programming #automation

Turn Tweets Into Beautiful Images With <25 Lines of Code - A Practical Guide

Amna Anjum — Mon, 24 Nov 2025 15:40:49 +0000

Social platforms love visuals. Tweets perform great, but screenshots? They're messy. Cropped weird. Inconsistent. Hard to brand.

What if you could turn any tweet into a clean, polished, branded image with just a few lines of code?

In this tutorial, you'll learn how to convert tweets into beautiful social-ready graphics using a simple REST API — no browser automation, no manual screenshots, and definitely no fiddling with design tools.

Why Not Just Screenshot Tweets?

Traditional screenshot APIs:

Capture the whole browser with UI clutter
Break when Twitter's layout changes
Aren't consistent across devices
Give you zero control over branding

With a rendering-based endpoint, you can:

Apply your brand fonts, colors, and watermarks
Get a clean tweet layout every time
Automate the whole process
Use it for IG posts, LinkedIn quotes, newsletters, or app UI

This tutorial uses the Contentdrips API, but the concepts apply broadly.

What We're Building

By the end of this tutorial, you'll be able to extract tweet text from any tweet URL and convert it into a branded image like this:

The process involves two steps: extracting the tweet text using Twitter's API, then rendering it as a branded image using the Contentdrips Graphics Generation API.

Prerequisites

Before we start, you'll need:

Node.js (or any environment that supports fetch/HTTP requests)
A Twitter Developer account with API access (for extracting tweet text)
A Contentdrips API key (takes 30 seconds to get)
A template with a textbox labeled tweet_text

Getting Your Twitter API Access

Go to Twitter Developer Portal
Apply for a developer account (free tier works fine)
Create a new app and generate your Bearer Token
You'll use this to fetch tweet data

Getting Your Contentdrips API Key

Go to Contentdrips Dashboard
Sign up for free (no credit card required)
Navigate to Contentdrips API in the sidebar
Click "API Key" in the tabs
Copy your token

API Documentation: https://developer.contentdrips.com/

Step 0: Prepare Your Template (One-Time Setup)

Before you start using the API, set up your template once inside Contentdrips:

Open Contentdrips App → Templates Design → Tweet Styles and pick any tweet-style template
OR open your template in the editor and click Automate to view the labels.

Make sure your textbox for the tweet content is labeled (example: tweet_text).

You only need to do this once — after it’s labeled, every API call will use it automatically.

Step 1: Extract Tweet Text from URL

First, we need to extract the tweet ID from the URL and fetch the tweet data:

// Extract tweet ID from URL
function getTweetId(tweetUrl) {
  const match = tweetUrl.match(/status\/(\d+)/);
  return match ? match[1] : null;
}

// Fetch tweet data from Twitter API
async function getTweetText(tweetUrl, twitterBearerToken) {
  const tweetId = getTweetId(tweetUrl);

  if (!tweetId) {
    throw new Error("Invalid tweet URL");
  }

  const response = await fetch(
    `https://api.twitter.com/2/tweets/${tweetId}`,
    {
      headers: {
        "Authorization": `Bearer ${twitterBearerToken}`
      }
    }
  );

  const data = await response.json();
  return data.data.text;
}

// Usage
const tweetUrl = "https://twitter.com/user/status/1234567890";
const tweetText = await getTweetText(tweetUrl, "YOUR_TWITTER_BEARER_TOKEN");
console.log("Tweet text:", tweetText);

What just happened?

We extracted the tweet ID from the URL, made a request to Twitter's API v2, and retrieved the actual text content. Now we can pass this text to Contentdrips for rendering.

Step 2: Render the Tweet Text as an Image

Now that we have the tweet text, let's convert it into a branded image. Get a free API key without adding any credit card details at Contentdrips API Management:

async function renderTweetImage(tweetText, contentdripsApiToken, templateId) {
  const response = await fetch("https://generate.contentdrips.com/render", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${contentdripsApiToken}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      template_id: templateId,
      output: "png",
      content_update: [
        { 
          type: "textbox", 
          label: "tweet_text", 
          value: tweetText 
        }
      ]
    })
  });

  const job = await response.json();
  console.log("Job ID:", job.job_id);
  return job.job_id;
}

What just happened?

You've told the Contentdrips API: "Please render this tweet text inside my template and give me a job ID so I can check when it's done."

The rendering happens asynchronously, which means you get an instant response with a job_id, and the actual image generation happens in the background.

Note: The content_update array should match the labels you defined in your template. If you labeled your textbox differently (e.g., tweet_content or text), use that label instead. You can find the exact payload structure by clicking the "AUTOMATE" button in your template editor.

Step 3: Poll the Job Status

Since rendering takes a few seconds, you need to check when the image is ready:

async function checkJobStatus(jobId, contentdripsApiToken) {
  const checkStatus = await fetch(
    `https://generate.contentdrips.com/job/${jobId}/status`,
    { 
      headers: { 
        "Authorization": `Bearer ${contentdripsApiToken}` 
      } 
    }
  );

  const statusData = await checkStatus.json();
  return statusData.status; // "queued", "processing", or "completed"
}

Poll every 2-3 seconds — no need to hammer the server. Once the status returns "completed", you're ready for the final step.

Step 4: Retrieve the Final Image URL

Once the job is marked completed, grab your image:

async function getImageUrl(jobId, contentdripsApiToken) {
  const result = await fetch(
    `https://generate.contentdrips.com/job/${jobId}/result`,
    { 
      headers: { 
        "Authorization": `Bearer ${contentdripsApiToken}` 
      } 
    }
  );

  const data = await result.json();
  return data.export_url;
}

You now have a direct CDN URL to your final PNG. Download it, embed it, post it to social media, or feed it into your workflow automation.

Real-World Use Cases

This isn't just a fun experiment. Here's where tweet-to-image conversion becomes genuinely powerful:

1. Automatic Instagram Posts

Trigger this API when a new tweet is published → send the image to Zapier or n8n → auto-publish to Instagram.

2. Social Proof Widgets

Pull positive customer tweets and convert them into branded graphics that live on your landing page or dashboard.

3. Weekly "Best Tweet" Graphics

Perfect for newsletters, blog recap posts, or LinkedIn content. Automate your weekly roundup.

4. Creator Tools

Build a SaaS feature where users paste a tweet URL and get a downloadable branded image instantly.

5. Batch Content Generation

Pipeline hundreds of tweets through templates for large-scale content campaigns. Great for agencies or multi-brand workflows.

⚙️ Template Tips for Best Results

If you want your images to look polished and shareable:

Label your textbox as tweet_url so the API knows where to inject the tweet content
Add a watermark or brand handle for attribution
Use consistent fonts across all your templates
Keep spacing and padding generous for readability
Use your brand colors for backgrounds

Clean, professional design → higher shareability → natural backlinks from people using your content.

Complete Working Example

Here's a production-ready function that combines everything:

// Extract tweet ID from URL
function getTweetId(tweetUrl) {
  const match = tweetUrl.match(/status\/(\d+)/);
  return match ? match[1] : null;
}

// Fetch tweet text from Twitter API
async function getTweetText(tweetUrl, twitterBearerToken) {
  const tweetId = getTweetId(tweetUrl);

  if (!tweetId) {
    throw new Error("Invalid tweet URL");
  }

  const response = await fetch(
    `https://api.twitter.com/2/tweets/${tweetId}`,
    {
      headers: {
        "Authorization": `Bearer ${twitterBearerToken}`
      }
    }
  );

  const data = await response.json();
  return data.data.text;
}

// Complete function: Tweet URL to Image
async function tweetToImage(tweetUrl, twitterToken, contentdripsToken, templateId) {
  try {
    // Step 1: Extract tweet text
    const tweetText = await getTweetText(tweetUrl, twitterToken);
    console.log("Extracted text:", tweetText);

    // Step 2: Submit render job
    const submitResponse = await fetch("https://generate.contentdrips.com/render", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${contentdripsToken}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        template_id: templateId,
        output: "png",
        content_update: [
          { type: "textbox", label: "tweet_text", value: tweetText }
        ]
      })
    });

    const job = await submitResponse.json();

    // Step 3: Poll for completion
    let status = "queued";
    while (status !== "completed") {
      const statusResponse = await fetch(
        `https://generate.contentdrips.com/job/${job.job_id}/status`,
        { headers: { "Authorization": `Bearer ${contentdripsToken}` } }
      );

      const statusData = await statusResponse.json();
      status = statusData.status;

      // Wait 2 seconds before checking again
      await new Promise(resolve => setTimeout(resolve, 2000));
    }

    // Step 4: Get final image URL
    const resultResponse = await fetch(
      `https://generate.contentdrips.com/job/${job.job_id}/result`,
      { headers: { "Authorization": `Bearer ${contentdripsToken}` } }
    );

    const resultData = await resultResponse.json();
    return resultData.export_url;

  } catch (error) {
    console.error("Error converting tweet to image:", error);
    throw error;
  }
}

// Usage
tweetToImage(
  "https://twitter.com/elonmusk/status/1234567890",
  "YOUR_TWITTER_BEARER_TOKEN",
  "YOUR_CONTENTDRIPS_API_TOKEN",
  "YOUR_TEMPLATE_ID"
).then(imageUrl => {
  console.log("Image ready:", imageUrl);
});

Error handling tip: Always wrap API calls in try-catch blocks and handle cases where:

The tweet URL is invalid
The Twitter API rate limit is hit
The job fails during processing
Network errors occur

Why This Approach Wins

Let's compare the traditional workflow vs. the API workflow:

Traditional way:

Open Twitter in browser
Take a screenshot
Open Photoshop or Canva
Crop and edit
Export and upload
Repeat for every tweet

API way:

Paste tweet URL
Extract text with Twitter API
Render with Contentdrips API
Get branded image in 3 seconds

You've just eliminated 90% of manual work.

Next Steps and Extensions

Once you've got the basics down, you can:

Build a Chrome extension that converts tweets with one click
Create a Slack bot that renders tweets when someone posts a URL
Set up a serverless function (AWS Lambda, Vercel) that auto-generates images on a schedule
Integrate with Airtable or Notion for bulk tweet processing
Add this as a feature in your existing SaaS product

The API is flexible enough to fit into almost any workflow.

Additional Resources

Final Thoughts

Turning tweets into branded visuals used to require:

Manual screenshots
Design tools
Cropping and editing
Inconsistent results

With two simple APIs, you can automate the entire workflow and generate clean, consistent tweet graphics in seconds — whether you're building:

Creator tools
Marketing automation
Dynamic content generators
Social media management apps

This is one of the easiest ways to add high-value functionality to your product with minimal code.

Have you built something with this workflow? Drop a comment below — I'd love to see what you create.

If you found this helpful, consider bookmarking it for later or sharing it with your dev friends.