# Kwote

Kwote is a simple open source webapp for creating beautiful images of quotes.

Canonical URL: https://www.transitivebullsh.it/kwote

Author: Travis Fischer

Published: 2022-04-26

Updated: 2026-08-23T16:37:00.000Z

Tags: Projects

![Kwote](<https://assets.cultural-alignment.com/personal-site/media/4b6b99a5a3ad8469759e0d8c87f59dff6aa5ce0827b572f570f5bb7ac7108bf8.jpg>)

![https://kwote-pi.vercel.app](<https://assets.cultural-alignment.com/personal-site/media/233157c0e3fcdd6c7bc9536b9e0206e1d8127d98a6500b274ef245d8913653df.png>)

[https://kwote-pi.vercel.app](<https://kwote-pi.vercel.app/>)



<a id="e725e21daff3427f921d9d9b4d59b6d9"></a>

## Intro

[Kwote](<https://kwote.app/>) is a simple open source webapp for creating beautiful images of quotes.



<a id="4ac436eda0a54414bfe89b14f8660ab3"></a>

## Inspiration

I was inspired by [David Perell’s](<https://twitter.com/david_perell>) tweets where he frequently includes screenshots of essays with highlighted parts to make skimming easier.

David Perell (@david\_perell):

> Write. 
> Shorter.
> Sentences. https://t.co/lwyhg8UzHY

[View original post](<https://twitter.com/david_perell/status/1351410252604964865>)

David Perell (@david\_perell):

> When you read the great books, you think the best thoughts that've ever been thought, which improves your thinking.
> 
> It's called "The Theory of Maximum Taste." https://t.co/2Eyb9w9Omg

[View original post](<https://twitter.com/david_perell/status/1346537412269277184>)

I was also inspired by code image snapshotting tools like [Ray](<https://ray.so/>), [Carbon](<https://carbon.now.sh/>), and [Chalkist](<https://chalk.ist/>).



<a id="ada2240898c0484980a1fe2f14e343a4"></a>

## Features

- Easy text highlights via normal rich text formatting

  - Yellow = Bold, Blue = Italic
- Export to png, jpeg, svg, or copy png to clipboard
- Supports locking the aspect ratio
- Supports aspect ratio optimization for twitter

  - For twitter inline images, max 2.0, min 0.75 (otherwise the image will be cropped)
  - For twitter social card images, preferably 2.0 or 1.91
- Background gradient images
- Google fonts
- Syncs state to local storage
- Simple, free, and open source 💕



<a id="494b6b7b80c542ebaac0bb07efb26fa7"></a>

## Examples

![https://kwote.app](<https://assets.cultural-alignment.com/personal-site/media/a85d85eb9fceabedb321b9c41093bc2fb57a4a50e90f8f75ea0c73dcf65455e5.jpg>)

https://kwote.app

![By Richard Hamming](<https://assets.cultural-alignment.com/personal-site/media/290157fd1a4374e7745f2d75413b4ee2ed8c9771c578ff070b87d35355105d30.jpg>)

By [Richard Hamming](<https://www.cs.virginia.edu/~robins/YouAndYourResearch.html>)

![By Steven Pressfield](<https://assets.cultural-alignment.com/personal-site/media/d5d1ac029975fba37ec957704384784af39631d7610783cb545b391bc315de69.jpg>)

By [Steven Pressfield](<https://stevenpressfield.com/2009/10/writing-wednesdays-2-the-most-important-writing-lession-i-ever-learned/>)

![By Aza Raskin](<https://assets.cultural-alignment.com/personal-site/media/cac307ac520fcc133063996c83601fd67e19e73731dacca53c1a9fc9daf281d9.jpg>)

By [Aza Raskin](<https://uxmag.com/articles/you-are-solving-the-wrong-problem>)

![By Richard Hamming](<https://assets.cultural-alignment.com/personal-site/media/a30b579659b29be156a15d634e4e5cd3afb1ae7d5a03da5e4bde1b1dedacb300.jpg>)

By [Richard Hamming](<https://www.cs.virginia.edu/~robins/YouAndYourResearch.html>)



<a id="102f2741fd6348f0b199021da93b1661"></a>

## FAQ

<a id="2b7416db5f3743e5913adc60486f3973"></a>

### How do I use Kwote?

1. Open [kwote.app](<https://kwote.app/>)
1. Replace the main text with your favorite quote
1. Highlight any important parts of the text that you want to call out
1. Export your image 👻

Note that Kwote is a webapp optimized for desktop browsers, though mobile is also supported.



<a id="7863e87dbf0a414691cf11ddb34e9cee"></a>

### How do I highlight things?

Select any text you want to highlight and mark it as bold (yellow) or italic (blue) using either your standard system keyboard shortcuts or by selecting the color from the selection popup.

*Italic text will have a blue highlight.* (CMD + I or Control + I)

**Bold text will have a yellow highlight.** (CMD + B or Control + B)

![](<https://assets.cultural-alignment.com/personal-site/media/2e007c31fd78e46e7fe8bdbc2553845b18366c59b1f34099d704ecece3294258.png>)



<a id="58a24e4a81e849b29313208d70c25e5e"></a>

### How does Kwote work?

Kwote's editor is built using the [Lexical](<https://github.com/facebook/lexical>) text editing framework from Facebook. We replaced the normal bold formatting with a yellow highlight and the normal italic formatting with a blue highlight ([via CSS](<https://github.com/transitive-bullshit/kwote/blob/858212b8e1605dea90cba669cdedf76a1f17f39f/components/Editor/styles.module.css#L61-L77>)).

We use [html-to-image](<https://github.com/bubkoo/html-to-image>) to render the resulting image client-side via some cool [SVG magic](<https://github.com/bubkoo/html-to-image#how-it-works>).

The webapp itself is built using [Next.js](<https://nextjs.org/>), [React](<https://reactjs.org/>), and [Vercel](<https://vercel.com/>).



<a id="f4be24634f1c422593b2bbdffc1d8e53"></a>

### How can I add a quote to this readme?

Post the image on Twitter and tag me [@transitive\_bs](<https://twitter.com/transitive_bs>). I'll retweet my favorite quotes, and if I receive enough submissions, I'll add them to a gallery on the main site.



<a id="30d734fd8ff441189518aaaf75b3f09e"></a>

## Source

Check out the [full source code on GitHub](<https://github.com/transitive-bullshit/kwote>).