Bedkit

Embed tweets (and other stuff, too) without killing your site's performance. Launching December 1, 2022.

TL;DR

Bedkit is a REST API that takes URLs as inputs and returns semantic HTML (or in Tailwind or inlined CSS, if you prefer). Use it instead of first-party social media embeds to improve your website's performance and SEO. Twitter support is launching this winter, with Instagram, Tiktok, and Facebook coming in Q1 2023. Buy now for 33% off with promo code PREORDER.

Subscribe for updates

Most social media embeds are bad

Let's say you want to embed a tweet on your site. You grab a snippet that looks like this from Twitter:

<blockquote class="twitter-tweet">
    <p lang="en" dir="ltr">
        TAke a look, y&#39;all: IMG_4346.jpeg
    </p>
    &mdash; Stephen A Smith (@stephenasmith)
    <a href="https://twitter.com/stephenasmith/status/603384079044759552?ref_src=twsrc%5Etfw">
        May 27, 2015
    </a>
</blockquote>
<script async
    src="https://platform.twitter.com/widgets.js"
    charset="utf-8">
</script>

This is... not ideal. It's completely unstyled (and missing a bunch of data) until that JavaScript snippet loads — and as soon as that JavaScript snippet loads a whole bunch of things happen:

Your Lighthouse score drops by 17 points
Your Time-to-interactive drops by 4 seconds
Your accessibility plummets
Your reader's privacy goes out the window (unless they have an adblocker on, at which point they can't even read the Tweet!)

Bedkit is better

I've spent the past four years building a newsletter tool which means I've spent a lot of time trying to get HTML-friendly versions of rich content. What I wanted was a clean version of embeds that wasn't just an iframe — I wanted something that was portable, accessible, semantic, and performant.

So I built one, and now I'm turning it into its own API so you can use it too.

Instead of that gross snippet, imagine something like this (an example output snippet mercifully free of SVG and a bunch of other stuff, for simplicity's sake):

<div class="tweet-container">
  <div class="tweet">
    <div>
      <a><img class="tweet-author" src="https://pbs.twimg.com/profile_images/1564786293153927169/xxuQGHB2_normal.jpg"></a>
    </div>
    <div class="author">
      <div class="author__name">
        <a>Stephen A Smith</a>
      </div>
      <div class="author__username"><a>@stephenasmith</a></div>
    </div>
  </div>
  <div class="tweet__text">TAke a look, y'all: IMG_4346.jpeg</div>

  <div class="tweet__metadata">
    <div><a href="https://twitter.com/stephenasmith/status/603384079044759552">2:15 AM · May 27, 2015</a></div>
    <div class="tweet__metrics">
      <div>130K retweets</div>
      <div>89K likes</div>
      <div>2K replies</div>
    </div>
  </div>
</div>

Yes, that's a lot of HTML.... but it's just HTML. It's lightning-quick to render, it's portable and stylable and hackable to your heart's content and your reader's delight. And Bedkit can render it in the way that makes most sense for your front-end workflow:

With semantic CSS classes, like above. (And we supply the CSS, of course.)
With Tailwind classes, so you don't need to even increase your CSS footprint
Completely inlined, so it looks great in email
As an image, for editing & prepub workflows

Why you shouldn't roll your own

Tweets are complicated. Here's a short list of things you need to handle:

Dark mode
Quote tweets
Videos
Images
Threads
Polls
Spaces
Internationalization
Hashtags
a11y

It's... a lot of stuff, and those things have a certain level of fractal complication (quote tweeting a tweet with multiple images! threads with deleted tweets!), and you're going to spend so much time debugging esoteric Twitter API edge cases instead of actually moving your business forward. Let Bedkit handle it instead.

What an API request will look like

Pretty simple, really:

{
    "url": "https://twitter.com/jmduke/status/1568620789057847297",
    "style": "tailwind",
}

Open core

I will be open sourcing the core rendering pipelines of Bedkit. I haven't yet, because the API is still in flux. This will be structured as a series of individual Python packages (one per source) that you can install and (with the right API keys from Twitter or whomever) run yourself.

Pricing

For individuals and organizations wanting to use Bedkit in a commercial context, I will be offering two plans:

Personal ($9/mo or $90/yr), for up to one hundred requests per month
Professional ($199/mo or $1990/yr), for unlimited requests

The commercial edition of Bedkit will be offering some functionality missing from the open core. This includes:

Web interface
Caching
Bulk rendering
99.95% Uptime SLA
Image rendering
Zapier support

You can pre-order a year of Bedkit at any plan at a ⅓ discount by using the coupon code PREORDER. This offer expires on December 1st.

Subscribe for updates

Any questions?

I tried to cover most of the bases here but if you have any questions, please email me.