Skip to main content
Nick Marsceau

Frame-It

This is the first post in a new series, "This Week I Built". This time, I actually have something I built this week. In the future, I may resurrect some projects from the past as well.

I built a tool this week for adding borders into images: Frame-It. It might not make sense why a tool like this is necessary, but let me explain. If you're adding an image to a normal website, it is obviously preferable to just use CSS to put a border around it. However, when inserting images into a GitHub-flavored markdown document, there is not a great way to put a border around an image using CSS.

Here is a snippet of the GitHub README for Frame-It with a test image:


# Frame-It

This is an online tool for adding a border to an image.

See, wouldn't it be nice if the image below had a border around it?

<img width="277" alt="image" src="https://github.com/nmarsceau/frame-it/assets/53009141/10e46508-47dc-42a5-8ad4-8c442b286a01">

And here is what that looks like rendered:

Screenshot of the Frame-It README with a test image. The test image has no border.

I tried applying a border to that image with an inline style, but nothing changed in the output:


<img width="277" alt="image" src="https://github.com/nmarsceau/frame-it/assets/53009141/10e46508-47dc-42a5-8ad4-8c442b286a01" style="border: 1px solid black;">
Screenshot of the Frame-It README with a test image that has an inline CSS style that should give it a border. The test image still has no border.

I also tried wrapping the image in a div and applying the inline style there instead, but that did not work either:


<div style="border: 1px solid black;">
    <img width="277" alt="image" src="https://github.com/nmarsceau/frame-it/assets/53009141/10e46508-47dc-42a5-8ad4-8c442b286a01">
</div>
Screenshot of the Frame-It README with a test image that is wrapped in a div tag which has an inline CSS style that should give it a border. The test image still has no border.

I have Googled this issue, and I found a post on Stack Overflow that describes a hacky method people are using to add a border around images in GitHub markdown:


<kbd>
    <img width="277" alt="image" src="https://github.com/nmarsceau/frame-it/assets/53009141/10e46508-47dc-42a5-8ad4-8c442b286a01">
</kbd>
Screenshot of the Frame-It README with a test image that is wrapped in a kbd tag. The test image has a visual border given by the kbd tag.

That's something, but I don't love it, and most importantly, it's not semantically correct HTML. Given this situation, I've resorted to building a border directly into my screenshots.

I'm sure there are quicker ways to do this, but this was my previous workflow for adding a border to a screenshot:

  • Take a screenshot.
  • Paste it into GIMP.
  • Increase the canvas size by 10 pixels in each direction, centering the existing layer within the new canvas size.
  • Create a new layer beneath the existing layer.
  • Fill the layer with black.
  • Save the resulting image and insert it into my markdown document.

That process gets really tedious when you have 8 or 10 screenshots to assign a border.

That's why I created Frame-It. It uses an HTML canvas to instantly draw a border around an image. You can quickly change the border color and configure the border thickness as well. When you're happy, just download the image.

Frame-It looks pretty rough right now, and that's because I released it as soon as possible.

Screenshot of the Frame-It web application with the test image loaded. The test image has had border inserted into it by Frame-It.

Often, I tend to be a perfectionist, letting perfect be the enemy of good enough. I got this to a working state after several nights of tinkering on it for an hour here and there, and I wanted to practice shipping early, then shipping often. The beauty of this approach is that this tool is ready to be used in my day-to-day work, and I can circle back to clean up the styling and add a few more features at my own pace.

I'm excited to keep polishing this utility, so watch for a follow-up post when I get it to a "finished" state.