kod.so

Beautiful Code Screenshots

7 followers

Beautiful Code Screenshots

7 followers

Visit website

Convert code snippets into screenshots with API support.

Free

Launch tags:Productivity•Developer Tools

Launch Team

CloudflareStill paying to deploy your apps? Try Cloudflare Workers for free

Promoted

Nice, cool product. Few things that I observed. In the mobile version, the image gets deformed on resizing, you could maintain aspect ratio to make it look neat. The loader seems to take more time for switching themes, it's better to shorten that loading effect time. All the best. Congrats on the lauch.

Report

4yr ago

Visily

Maker

@basharath thank you! You're right that performance is far from being ideal right now. Also, the site was under heavy load yesterday and that put a toll on the cheap computer instance I used :). Will check the mobile version.

Report

4yr ago

@buunguyen Hey, btw, why are you running it on the server, you could run it on the clients machine. That would be much better isn't it? Most of the these tools run on the client side.

Report

4yr ago

Visily

Maker

@basharath yeah, I could make it client-side only. But I needed to build the API to generate screenshots (my own personal use case). The web app was actually an afterthought.

Report

4yr ago

@buunguyen Ok. So your main use case is API. But this use case is limited I think, unlike API image generation where we have just few fields that can be directly typed in as parameters to generate images. So in this case most probably the code gets typed at client interface only then it is used for generating API images(Because we can't type code space characters etc directly as parameters) So a small idea is that, whichever the code snippets need API URL, only they can generated and stored somewhere using third party tools, and can be accessed with the URL generated. This could save running a dedicated machine for this. BTW, did you try serverless implementation of this? I made one serverless implementation of image generation tool where I used node canvas for generating images. Do you mind sharing the technology you're using for generating this API code snippet images?

Report

4yr ago

Visily

Maker

@basharath > Because we can't type code space characters etc directly as parameters Not sure I understand you correctly, but I do it through code. Something like const params = new URLSearchParams(); params.append('code', YOUR_CODE_STRING); fetch(`https://kod.so/gen?${params.toSt... > did you try serverless implementation of this I didn't. It is a great idea though. > Do you mind sharing the technology you're using for generating this API code snippet images? Sure. It's basically puppeteer :). Create an HTML loading a code formatter (Shiki), style it with CSS (e.g. blur lines, background etc.), then render it using puppeteer and take the screenshot of it.

Report

4yr ago

Very impressive. I have not really ever tinkered with any of the alternatives, but this is very cool. I can hardly wait to share code snippets with fellow devs and knock their socks off. Well done!

Report

4yr ago

Visily

Maker

@nel_prinsloo thank you! Glad you like it.

Report

4yr ago

xperi.nz

Congratulations on the launch!! We are also launching tomorrow, we should definitely connect. @buunguyen

Report

4yr ago

Visily

Maker

@tanya_gupta0502 thanks, Tanya. Good luck with the launch!

Report

4yr ago

Visily

Maker

There were a few websites that converted code to screenshot, but I wanted an API that did that and couldn't find one. After building the API, I put together a UI because... why not. Hope you find it useful. Privacy notice: all data is stored in browser local storage, nothing is stored on the server.

Report

4yr ago