Skip to main content

Saving Screenshots and Optical Code Recognition

Dragging a screenshot to Pieces and then extracting the code via OCR

Why Would I need a Screenshot of Code?​

Sometimes the code you need is not in a location where it can be copied, such as in YouTube videos, tutorials, onboarding docs, or messages. You can capture this code, then modify and manipulate it as you wish by taking a screenshot using ⌘ + Shift + 4 or Windows Key + Shift + S.

Adding a Screenshot via "Add a File"​

You can quickly add a screenshot using the File Picker by pressing ⌘/CTRL + U, which will bring up the Native File browser window based on your OS.

To add an image from a specific file location, you can follow these steps:

  • Press + Add Snippets to open the Add Code Snippets & Developer Material Layouts dialog
  • Select Add a file
  • Once the File Picker opens, you can select an image file, and it will be added to as a resource to Pieces Desktop and any extensions or plugins you have installed

On macOS, you'll see a quick preview of a screenshot in the bottom corner of your screen. Drag it to the Pieces Desktop App from there, or select it from your file picker.

The Windows Snipping Tool Preview attaches the code block to your clipboard, so you can immediately paste it into Pieces. Or, you can click the screenshot and select the copy button to copy and paste the snippet into the Pieces Desktop App.

Getting Code Out of a Screenshot​

To get the code out of a screenshot, all you have to do is click the { } icon, located in the Action Menu on the right side of the Pieces Desktop App.

This will allow you to do a few things:

  • You now can edit the code snippet if there are any inconsistencies.
  • You can also see related links, tags, and other data that was enriched from the code inside the image.
  • Plus, you can copy and paste the extracted code and add it to your IDE or terminal.

Learn about Enrichment, Metadata, and more