Carbon as an API

[deadcoder0904]

Send the code & it returns a dynamic image. It can have all the other options as well. That way it would be easy to embed it dynamically with just code. I can't think of any other use cases right now. What do you think?

[KennethWussmann]

I thought about the same and found this related issue: #179

[briandennis]

Cool idea! #179 seems to be focused on rendering an embeddable editor. From your description, it seems to me that this is more tuned towards an API the returns the image data. Am I understanding that correctly?

[deadcoder0904]

Not sure what the use case might be though 😂

If you find a use case, keep this open otherwise we have other issue that requests embedding it. I can't think of anything useful though, what I needed was embeddable editor only. I just kinda put it the wrong way. The embeddable editor would have the specified theme, font size & all the other features but it will be a replacement of Github Gist for Medium or any other Blog so we can select text just like we do on the Carbon website rather than an actual Image.

As for the API, if its there then extensions might be easier to make.

Just send a POST request to

https://api.carbon.now.sh?code={console.log('GIMME A HELL YEAH')}&lang=js&theme=monokai

& it will download the image in the same directory & after downloading it will then delete it from the server or imgur whatever you prefer.

I am assuming the current way might be a little bit tedious without the API like

1. Select the code
2. Then Select the extension
3. Then Use Puppeteer to visit Carbon Website
4. Then put in the code & call the Download Button

Idk if its gonna be required or there are any other use cases. But I can't think of anything else at this moment. So close it if you want.

[KennethWussmann]

@deadcoder0904 Why sending a POST request and use query parameters?
Large code can not fit in the URL and messes with encoding/formatting.

Better use POST with JSON as payload with your desired settings and code.
The response could be the image the API client can download/display.

[briandennis]

gotcha @deadcoder0904 , I understand what you mean now. Well if you're primarily interested in the embeddable part, keep an eye on #179 because that's exactly what we're working on over there!

As for the image API aspect, I agree that could be useful for building extensions! Fortunately with #213 we've ended up needing to implement most of this already. @KennethWussmann the way that is shaping up, it will be similar to what you're talking about. Client can POST with a base64 encoded state string or a state object and the response JSON will include the image 👍

[drcmda]

@briandennis

I love the idea, a service would be so useful. The downside right now is that it's some hassle to update.

For instance i'm using carbon on a github project: https://github.com/drcmda/react-contextual

But silly like i am i set it to javascript, not jsx, so all the images are mangled, on top of it there's a bug i oversaw. It means i have to go through all the trouble again, preparing code in the editor so that it looks good even though prettier wants it to stretch, making sure all images have the same width (something i couldn't find out how to do with the settings, so i inserted a long blank-space line in them), etc.

If you could link to an image generator service that creates the png on the fly with some caching maybe, that would make it so much easier to maintain a series of snippets ...

![](https://png.carbon.now.sh?code=...&language=jsx&theme=dracula)

Or even better if it could point to a plain-text url

![](https://png.carbon.now.sh?url=raw.githubusercontent.com/username/project/master/examples/demo.js&language=jsx&theme=dracula)

[haze]

Hi, I kinda wanted to use carbon for auto screenshotting images of my code whenever I posted them into an IO service. I decided to self host an API I wrote using puppeteer. I know it's a bit basic as of now, but I want to know if anyone wants to help with PRs or issues. (this is my first node project btw)

Repo Here

EDIT: Currently a lot of the features are supported but some issues like long typing times (because puppeteer types it out char by char and not pasting the code into the box) and drop shadow configuration aren't there yet. You can still however use code, set background colors and padding and more.

EDIT 2: Just realized I could use the code endpoint for using code, will add and update when I get home. This should reduce the time by a big %.

[deadcoder0904]

The Image generated via Carbon is awesome. But its not good for accessibility & I think blind people would not be able to read the code so for that I think a Service where we can embed beautiful looking code with colour formatting, themes but still accessible.

Something like CodePen, CodeSandbox or Github Gist but just that you get beautiful looking code & can copy/paste the code & its still accessible.

I just hope this doesn't overload your server though. Or as this is an open source project maybe someone like Now would give it for free. Just an idea. Not sure how embedding works.

[thebetterjort]

Running carbon locally in docker and outputting our company code automatically to our document server would be a killer feature. Devs won't do this thing by themselves and we will need to automate this process. Great for versioning, and onboarding.

[popey456963]

I'm currently using it to embed code automatically in chat clients (like Discord, Whatsapp, etc):

Since most clients don't support embeds, I would find an API useful.

[mittalyashu]

What's the progress in the Carbon API?

[flxwu]

Hey, we would like to use Carbon via an API for the 30-seconds projects aswell! Is there any progress on this?

[mittalyashu]

Why not send a file using API? Instead of sending data in JSON format or inside the URL.

The concept with handling the file it start forward the user can send a POST request to the API and carbon can read the content inside file and return the beautiful formatted code in the form of image.

Benefits

1. Data handling in files is easy we can add 2 lines or 1000 lines of code.
2. Implement file handling inside carbon can bring new by drag and drop file directly inside carbon website
3. Carbon doesn't support all the Prettier features yet, but uploading a file which is already formatted locally can solve a big problem.
4. Carbon doesn't have to auto decide the language type if there is a file type extension along with the file.

@mfix22

[cyberboysumanjay]

I was learning Pyppeteer so thought of writing an API using Python and Flask.
Check out Carbon-API

[cyberpirate92]

Trying to create something similar with code2img, although I must say Carbonara looks a lot better than my hackish version.

Also check out Themeify, A Google chrome extension that uses code2img API to generate images directly from webpages.

[CrackleCreeper]

So, I wanted to use this to convert code to an image and send it on discord. Any api's to use with nodejs?

[k-tten]

you can use node-fetch or some other http client to interact with carbon's api

[mfix22]

Hey folks, Carbon has always had an API, which you can see if you generate a screenshot using Safari. It works by passing an encoded JSON blob to https://carbon.now.sh/api/image.

I really would like to open-source the API, but I just haven't had time to accurately document it.

Hopefully I'll have time to release the first class-API soon.

[adasq]

I created some utility, which returns a blob with a image (generated by carbon.now.sh) based on github code snippet:
https://github.com/adasq/github-code-screenshot.
Live preview here:
https://github-code-screenshot.herokuapp.com/

[tycrek]

I just haven't had time to accurately document it.

@mfix22 I'd be more than happy to help with this, so long as I know which file(s) needs to be documented (I assume this one? https://github.com/carbon-app/carbon/blob/main/api/image/index.js)

[mfix22]

@mfix22 I'd be more than happy to help with this, so long as I know which file(s) needs to be documented (I assume this one? https://github.com/carbon-app/carbon/blob/main/api/image/index.js)

Yes 👍

[hashlash]

Any update on this? @tycrek @mfix22

I've successfully tried the API with some catches (I'm not really familiar with Next.js code):

• Only for GitHub gists, can't pass the code directly yet.
• Can't pass the styling configuration yet.
• I don't understand the auth code. I tried using a POST request with empty Origin and Authorization headers.

Btw, the code has moved to pages/api/image/[id].js since a327b44.

[DeveloperBlue]

Would it be possible to generate an embed to a github gist and pass theme and background color parameters to it?
e.g. https://carbon.now.sh/<gist-id>?theme=monokai&backgroundColor=e55555 via the api?

Would be great for embedding in Medium posts

[mfix22]

Would it be possible to generate an embed to a github gist and pass theme and background color parameters to it? e.g. https://carbon.now.sh/<gist-id>?theme=monokai&backgroundColor=e55555 via the api?

Would be great for embedding in Medium posts

@DeveloperBlue This is already a supported feature. 👍 E.g. https://carbon.now.sh/embed/3208813b324d82a9ebd197e4b1c3bae8?bg=blue

[DeveloperBlue]

Would it be possible to generate an embed to a github gist and pass theme and background color parameters to it? e.g. https://carbon.now.sh/<gist-id>?theme=monokai&backgroundColor=e55555 via the api?
Would be great for embedding in Medium posts

@DeveloperBlue This is already a supported feature. 👍 E.g. https://carbon.now.sh/embed/3208813b324d82a9ebd197e4b1c3bae8?bg=blue

Fantastic, is there any API documentation I can find for this and other parameters? I can't seem to get https://carbon.now.sh/embed/3208813b324d82a9ebd197e4b1c3bae8?bg=0077db&theme=nord working.

[AussieDev81]

I know this is a bit of an aging thread now, but I was just looking for the same thing and here's what I've discovered so far.
It might be helpful to some one 🤷‍♂️

https://carbon.now.sh/embed/ {GitHub_Gist_ID} ? {params}

For example:
https://carbon.now.sh/embed/be319173a84e2d3cb8d05bfed79823bc?bg=rgba%28121%2C72%2C185%2C1%29&t=seti&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=143%25&si=false&es=2x&wm=false

param	Description	Example
bg	Background color (name/RGB/RGBA)	green/rgb(31,129,109)/rgba(31,129,109,1)
t	Theme	Monokai
wt	Window trim	none/sharp/bw
l	Language (programming)	auto/javascrip/php
width	Width (in pixels)	680
ds	Drop shadow	true/false
dsyoff	Drop shadow Y offset	200px
dsblur	Drop shadow blur	68px
wc	Window controls ( _ ⬜ X )	true/false
wa	Width-adjust auto	true/false
pv	Padding vertical	56px
ph	Padding horizontal	56px
ln	Line numbers (show/hide)	true/false
fm	Font family	Hack/Monoid
fl	?	?
fs	Font size	14px
lh	Line height (scale)	1/1.5 etc
si	?	?
es	Export size (default 2x)	1x/2x/4x
wm	Watermark (show/hide)	true/false

[mixn]

Thanks for all the input, everyone.

I’m looking to release v2 of carbon-now-cli this year, and one of the things I’d like to have the most is not having to use Puppeteer inside the CLI.

After going through this entire thread + several other open/closed PRs/issues, am I right to assume that, as of March 2023, there is no

a) official Carbon API yet
and
b) I can’t create screenshots from Carbon offline without having to run the entire web app locally first

Or am I mistaken?

Thank you all in advance; much appreciated.

@mfix22 @AussieDev81

[pioupia]

Hello @mixn ,
Then my answer will probably be far from the one expected, as I don't follow all the updates made by carbon these days. However, it seems that a friend needed a system that turns code into an image via Node.js (obviously thinking of a Carbon API).

But the problem was that none of them were present, and all the other solutions used Puppeteer (i.e. a chromium instance), which was far too greedy for its purpose.

So after a lot of research, I don't feel that there have been any progress for this subject.

Because of all this, I decided to create a Node.js package myself using 2 other modules (canvas, and prismjs). For obvious ad reasons, I don't know if I have the authorization to put the Github link here.
(PS: the package really sucks, a lot of features are missing, and there are probably a lot of bugs, so I don't recommend integration into a large project like carbon-now-cli without prior testing).

But if someone has another solution (an API for example), don't hesitate to submit it, it would interest many people I think.

Thank you all in advance.

[soumen45]

fm whatsapp very good app i always suggested.

[JamieCee20]

Also related to the comment above, also still waiting for an API solution, is one still not available or anyone made an API version of this?