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