Working on technical content means that you usually need to show real code. But other times, you need to show something that looks like code but isn't – faux code.

These are super useful in explainer-style videos where you want to use placeholder code and not distract viewers with actual code, like in this slide I'm currently working on:

Bonus points if you recognize the schema

You don't need to be a graphic designer to make these. This was generated from a REAL code snippet!

To generate the image above, I am using a neat little open source VS Code extension PolaFaux:

It creates the faux code using a vector image format which I prefer but isn't always supported in whatever tool you might be using to create content. To convert it to a PNG format which is more widely supported, I like SVG-to-PNG:

SVG to PNG
Use this free online SVG to PNG converter to convert SVG files to PNG images, quickly and easily, without having to install any software.

I love little tools that make life easier, especially when I don't have to build them!

Have a lovely day,
Kamran

Generate faux code in a jiffy

Ditch content that doesn't convert.

Hi 👋 I'm Kamran. I help B2B tech companies fix low conversion rates with open source lead magnets so they can attract and activate more developers that use their products.
jamie@example.com
Sign up