API

Components AI offers a collection of APIs that you can use to integrate with your own tooling. It's important to note that these APIs are experimental and subject to change.

Import

In order to get up and running with our tooling quickly, we offer import endpoints for themes.

Theme

Turn a url into a theme object.

curl 'https://components.ai/api/import-theme?url=google.com'

If you want a JS object rather than our internal schema you can use the as query param.

curl 'https://components.ai/api/import-theme?url=google.com&as=js'

If you have a Components AI theme id, you can pass that directly.

curl 'https://components.ai/api/import-theme?id=swcKAKDNDUUseUYPPwRj&as=js'

Palette

Turn a url into a palette.

curl 'https://components.ai/api/import-palette?url=google.com'

If you want a JS object rather than our internal schema you can use the as query param.

curl 'https://components.ai/api/import-palette?url=google.com&as=js'

Format

POST a string of code and receive a formatted version back.

Supported formats

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

Conversion

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

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

URL to JSON

Convert a URL into a JSX-like JSON structure.

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