Loading Local Resources

User Assets

It is possible to load local assets from the file system using the file:// URL scheme. This makes it possible to display images in a user's directory or visualize other assets that are don't lend themselves well to the terminal's text based formatting.

The following example displays all .png files in on our Desktop.

        fig.init = (input) => {
    let preview = () => {
      fig.execute('ls -1', (out) => {
            let files = out.split('\n')
            let pngs = files.filter(p => p.endsWith(".png"))
            let thumbnails = pngs.map(p => { return `<img draggable = "true" src = "file://${fig.env.HOME}/Desktop/${p}"></img>`}).join("")

            document.getElementById("view").innerHTML = thumbnails
        img {
            height: 50px;
            width: 50px;
            object-fit: cover;

        <div id = "view">

Using the fig:// URL scheme, you can load native assets for file icons and processes. There are a few different types of assets that can accessed this way.

Icons from File Path

Prefixing a file path with fig:// creates a reference to the native icon for that file, just like what would be displayed in Finder.

<img src = "fig:///Users/user/folder/file.ext">

Icons by Type

You might also want to get an icon for a file type, rather than by path. This is often used when displaying icons for files on a remote machine.


Icons for PID

To display icons for running processes, use the icon path with the pid as a query parameter.


Sizing Assets

For any fig:// URL, you can specify the size of the asset using query parameters. (The default size is 32px by 32px.)


Last updated