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

[axetroy]

One year has passed

Is there any plan for this API? Is there anyone to implement it?

[Jeepeo]

@briandennis Is there any talks about API ? This is open for a year Now

[BaileyJM02]

I opened a discussion about this on Spectrum the other day: https://spectrum.chat/carbon-now/general/allowed-to-write-an-api-in-go~33b1fe22-1564-48e5-b189-50c960ccc347

[mfix22]

Hey all,
I know this issue has been open for a long time, but we have not been ignoring it — rather we have been cultivating a plan for the future of Carbon.

The goal of Carbon is simple: to make sharing snippets of code easier and more enjoyable. An API will definitely help further that goal.

The API will enable:

• Programmatically generating screenshots in your servers and applications
• Creating <img /> tags using a Carbon URL as it’s src
• Accessing Carbon snippets on your domain (CORS access)

I will post a more complete progress update soon, but I just wanted to say that we are working on it!

...more soon

[RohitMidha23]

@mfix22 any developments on the API?

[ashifa454]

@mfix22 whats the progress on this, I wanted to contribute on this.

[mfix22]

Hey all, we are working on a bunch of new features on this front, which will start launching soon. Many of these details are non-technical (happy to discuss privately or in another thread).

I apologize for the continued delay. We have wanted to support this feature for a long time now, and we hope that time comes to an end soon.

[jonasgeiler]

Need the API as well for a project.
When can we expect it to be released?

[KalobTaulien]

Looks like a lot of excitement around this. But it's now March 2020 and I'm wondering if this issue could be closed with no progress?

[mfix22]

@KalobTaulien there has been progress on this feature, so I am going to keep this issue open, especially since this is something we really would like to support.

Releasing it is not a matter of engineering effort, but a question of sustaining the cost of it into the future. We want to make sure the cost does not damage the sustainability of Carbon and its community.

[petersolopov]

Hi everyone! @mfix22 thanks for the great project!

Carbonara is an attempt to create API for carbon. Check example. You can use exported carbon config for customizing images via API.

The project at the beginning and any suggestions are welcome!

[KalobTaulien]

@petersolopov this works REALLY well, thank you!

[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.