Transformers

In order to convert between different web formats, we offer a collection of conversion APIs for JSX, HTML, and PNGs.

Url to MD(X)

Turn a url and its HTML into a Markdown string.

curl 'https://components.ai/api/url-to-md?url=components.ai'

HTML to PNG

Convert a string of HTML to a PNG.

curl \
  -X POST \
  -H "Content-Type: application/json" \
  -d '{"src": "<body style=\"width:1200px; height:675px; text-align:center;\"><h1 style=\"color:tomato\">Hello, world! <br />HTML IS NOW PNG</h1>"}' \
  https://components.ai/api/html-to-png > img.png

JSX to HTML

Convert JSX styled with Theme UI's sx prop to a string of HTML.

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

You'll receive a JSON response that includes a string of HTML.

{
  "html": "\n    <head>\n      <meta charset=\"utf-8\">\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      <style>\n        * {\n          box-sizing: border-box;\n        }\n\n        body {\n          margin: 0;\n          \n          font-family: system-ui, sans-serif;\n          display: block;\n        }\n      </style>\n    </head>\n    <body id=\"body\">\n      <style data-emotion=\"css-global 381i8l\">body{color:text;background-color:background;}</style><style data-emotion=\"css-global 1d7m1w5\">*{box-sizing:border-box;}body{margin:0;}</style>undefined\n    </body>\n  "
}

JSX to PNG

Convert JSX styled with Theme UI's sx prop to a hosted PNG image.

Publish

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

You'll receive a response which includes the image hash and a URL.

{
  "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 \
  -H "Content-Type: application/json" \
  -d '{"src": "<h1 sx={{ color: \"tomato\", lineHeight: 1, margin: 0 }}>Hello, world!</h1>"}' \
  https://components.ai/api/jsx-to-png > img.png

Syntax highlighting

Turn a string of code into tokenized HTML for Prism or highlight.js.

curl \
  -X POST \
  -H "Content-Type: application/json" \
  -d '{"src": "<h1 sx={{ color: \"tomato\", lineHeight: 1, margin: 0 }}>Hello, world!</h1>", "language": "html", "highlighter": "prism"}' \
  https://components.ai/api/syntax-highlight

You'll receive a response which includes the tokenized HTML.

{
  "html": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;</span>h1</span> <span class=\"token attr-name\">sx</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span>{{</span> <span class=\"token attr-name\"><span class=\"token namespace\">color:</span></span> <span class=\"token attr-name\">\"tomato\",</span> <span class=\"token attr-name\"><span class=\"token namespace\">lineHeight:</span></span> <span class=\"token attr-name\">1,</span> <span class=\"token attr-name\"><span class=\"token namespace\">margin:</span></span> <span class=\"token attr-name\">0</span> <span class=\"token attr-name\">}}</span><span class=\"token punctuation\">></span></span>Hello, world!<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&#x3C;/</span>h1</span><span class=\"token punctuation\">></span></span>"
}

URL to JSON

Convert a URL into a JSX-like JSON structure.

💡

This API is prone to timeouts. If you'd like, you can use the npm package.

curl https://components.ai/api/url-to-json?url=https://johno.com

MQIFY

Convert a string of CSS to utility-based classes for given media queries.

curl \
  -X POST \
  -H "Content-Type: application/json" -d '{"src": ".f1 { font-size: 1rem }", "mediaQueries": [16, 32, 64]}' \
  https://components.ai/api/css/mqify