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 is 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 not easy to capture the exact same pixel dimensions each time - plus it involves a lot of dragging and clicking. As several items on our roadmap are reliant on dynamically generating hosted images, we decided to spike on building this out as part of our first sprint.

Our components are authored with JSX and Theme UI. 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 as well as 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. This enables 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


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


It's an early beta that we'll be iterating on 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.