JSX to PNG
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
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.
API
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>"}' \
https://components.ai/api/jsx-to-png/publish
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
Roadmap
We'll be iterating on an early beta to fit our upcoming needs.
- Fine grained viewport and canvas padding control.
- Return multiple images for matrix of viewports, resolutions, and rendering engines.
- Custom themes and theme swapping.
- Auto download - we currently make you click a button to generate an image and then give a link to the hosted image. Ideally this would be a one click download experience.
- Component integration - we'll be adding image generation to each of our existing components.
- Additional input types - URL, HTML block with CSS and inline styles, etc.
- Additional export types - JPG, ICO, SVG
- Background transparency support.
Drop us a line if you build anything with it!
Update
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".