Service to turn JSX styled with Theme UI into a hosted image

Last week was our first official sprint together as a team. We're excited to get going.

Over the last year, the most common feature request has been to download an image of a design. While it's possible to take a screenshot, or for some components download an SVG file, it's difficult to capture the exact same pixel dimensions each time–plus, it involves a lot of clicking and dragging. As several items on our roadmap are reliant on dynamically generating hosted images, we decided to build this out as part of our first sprint.

As a starting point, we created a service that can generate a hosted screenshot from a block of JSX, styled with Theme UI. We've made the service available in our app and our API.

JSX Playground

JSX to PNG Author and edit JSX to preview your designs. Generate an image of your design whenever you're ready. This JSX playground currently references our own theme file, enabling you to utilize scales for color, typography, border radii, and spacing. In the future, we'll allow for constraining to your own custom theme. Check it out here.


Integrate our API into your own automated workflows for generative image creation.

curl \
  -X POST \
  -d '{"src": "<h1 sx={{ color: \"tomato\", lineHeight: 1, margin: 0 }}>Hello, world!</h1>"}' \

You'll get a response like this, with a hash and a url to the image:

  "hash": "7ecdee251e5ca60e0ed1351573e680a8a596a52586773b6c1b7a6f29ce1c5e96",
  "url": "https://compai.pub/v1/png/7ecdee251e5ca60e0ed1351573e680a8a596a52586773b6c1b7a6f29ce1c5e96"

Save a local image

If you don't want to host the image with our service and save the image locally, you can do so by removing /publish from the URL.

curl \
  -X POST \
  -d '{"src": "<h1 sx={{ color: \"tomato\", lineHeight: 1, margin: 0 }}>Hello, world!</h1>"}' \
  https://components.ai/api/jsx-to-png > img.png


We'll be iterating on an early beta to fit our upcoming needs.

Drop us a line if you build anything with it!



Figma hosted export Cole Bemis has used our API to create a new Figma plugin called Hosted Export which "...allows you to copy hosted image URLs for any frame inside Figma".

Hosted Export is an open source project.