DEV Community

Cover image for Make code tutorials in seconds with explanations from AI.
Ianeta Hutchinson
Ianeta Hutchinson

Posted on

Make code tutorials in seconds with explanations from AI.

We're using explanations from ExplainDev to help you make and share beautiful, useful images that explain code.

app.explain.dev is an image creation tool that uses ExplainDev to provide explanations to the code that's entered. Users bring their own code, then have full rein on customizations.

Here I am making the image used in the banner:

How it works:

  • Head to app.explain.dev and start typing your code into the box provided. (You can choose the language in the side-bar for improved syntax highlighting, etc.)
  • As soon as you stop typing, an explanation will appear at the top of the image.
  • All elements in the image are editable including the text that was generated by AI. Resize and/or drag the snippet to wherever you'd like it placed.
  • Select portions of the code to get specific explanations for what you have selected. Click the "explain code" button to generate the new explanation.
  • Use the side bar to customize text, background, arrow positioning/style/color, and more!
  • Add any additional code or text boxes using the options at the top banner.

Download the image and SHARE!!

The technology behind the images is ExplainDev, an AI powered programmer's assistant. You can think of it as an expert that's always available to answer your technical questions and explain code. This nifty app idea came while working on our API in preparation for a big move to VS Code.

Content that is useful and teaches me stuff is the best kind of content. So we decided to try and enable more of it. I hope that this tool might also unlock some folks who don't share much about their new programming discoveries to go for it!

Let me know what you think! Or better, tag me in your creations!!

Latest comments (1)

Collapse
 
omrisama profile image
Omri Gabay

Neat little utility :)