React Static Tweets Save

Extremely fast static renderer for tweets.

Project README

React Static Tweets

React Static Tweets

Extremely fast static renderer for tweets.

NPM Build Status Prettier Code Formatting


Twitter's embedding SDK is horribly slow and inefficient. For embedding tweets on your site (including SSR), this solution is 10-100x faster! ?

This project takes Vercel's work on static tweet rendering and packages it up into two easy-to-use NPM packages.

This project is being used in production by



npm install react-static-tweets static-tweets date-fns
# or
yarn add react-static-tweets static-tweets date-fns


The easiest way to get started is to render tweets client-side (which will fetch the tweet data on-the-fly).

import React from 'react'
import { Tweet } from 'react-static-tweets'

export default Example({ tweetId }) => (
  <Tweet id={tweetId} />

For more optimized SSR usage, you'll want to pre-fetch the tweet AST data server-side:

import React from 'react'
import { value fetchTweetAst } from 'static-tweets'
import { value Tweet } from 'react-static-tweets'

const tweetId = '1358199505280262150'

export const getStaticProps = async () => {
  try {
    const tweetAst = await fetchTweetAst(tweetId)

    return {
      props: {
      revalidate: 10
  } catch (err) {
    console.error('error fetching tweet info', err)

    throw err

export default function Example({ tweetId, tweetAst }) {
  return <Tweet id={tweetId} ast={tweetAst} />

Add to your next.config.js since we use next/image to load images.

module.exports = {
  images: {
    domains: ['']


You'll need to import some CSS styles as well. If you're using Next.js, we recommend you put these in pages/_app:

import 'react-static-tweets/styles.css'

Next.js Example

Here is an example Next.js project, with the most important code in pages/[tweetId].tsx. You can view this example live on Vercel.

Here is a live demo showing how different types of tweets render.

For more advanced exammples, check out:


Package NPM Docs Environment Description
react-static-tweets NPM docs Browser + SSR Fast React renderer for Tweets.
static-tweets NPM docs Node.js Fetches tweet ASTs.


My main contribution is packaging the Vercel team's excellent work into two isolated packages: static-tweets for server-side fetching of tweet ASTs and react-static-tweets for client-side rendering as well as SSR.

  • Inspired by this demo from the Vercel team
  • And the underlying repo by Luis Alvarez
  • Most of the core code is adapted from Guillermo Rauch's blog
  • Converted the JS codebase to TypeScript
  • Removed styled-jsx because using a flat CSS file (with a .static-tweet class prefix) makes bundling for NPM easier
  • Fixed some minor formatting bugs


MIT © Travis Fischer

Support my OSS work by following me on twitter twitter

Open Source Agenda is not affiliated with "React Static Tweets" Project. README Source: transitive-bullshit/react-static-tweets
Open Issues
Last Commit
2 months ago

Open Source Agenda Badge

Open Source Agenda Rating