Fig Docs
  • 🏠Welcome to Fig
  • 👋Get Started
    • Download and Install
    • `fig home`
      • My Apps
      • The Sidebar
      • Settings
    • The Fig App Store
    • Hotkeys
  • 💪Autocomplete
  • 😀The Fig CLI
    • 1. Fig Overrides
    • 2. Fig Aliases
    • 3. $FIGPATH
    • 4. Fig Apps
  • 📖Interactive Runbooks
    • Form Elements
      • Input
      • Textarea
      • Dropdown
      • Checkboxes
      • Buttons
    • Templating & Interpolation
    • Scripting Language (Psilo)
      • Full List of Functions
    • Running Runbooks
    • Full Examples
  • ⚒️ Build your own CLI
    • `fig build`
    • .fig Files
  • 🧰Build your own App
    • Get Started
    • App Lifecycle
    • Key Concepts
      • Running Shell Commands
      • Reading Environment Variables
      • Accessing Files & Saving Data
      • Loading Local Resources
    • Window Managment
      • Setting Window Properties
      • Repositioning the Window
      • Focusing & Blurring the Window
    • Advanced
      • Creating a Pseudo-Terminal Session
  • Other
    • Fig for Teams
    • Security & Privacy
    • FAQ
    • Contact Us
  • Interactive Runbooks
Powered by GitBook
On this page
  1. Build your own App

Get Started

Start building Fig apps today

PreviousBuild your own AppNextApp Lifecycle

Last updated 4 years ago

In order to start building Fig apps, you'll need to download .

  1. Currently, Fig is a limited beta. To sign up for the developer preview, please fill out and join our . We're really excited to see what you build. :)

  2. Once you have Fig, you'll need to create the project structure for your Fig app.

    Luckily, this is very simple. The minimal project requires no dependencies (besides fig.js which is included automatically at runtime) and no build process.

sample.html
<html>
  <head>
    <meta fig:app = "sample-app">
    <script>
      fig.init = (stdin, options) => {
        // fig.init is the entry point to your app's logic.
        // Calling any fig command prior will result in undefined behavior. 
        
        fig.title = fig.env.PWD
        fig.icon = `fig://${fig.env.PWD}`
        
        fig.execute('ls -1', (files) => {
          document.body.innerText = files
        })
      }
    </script>
  </head>
  <body>

  </body>
</html>

fig local sample.html

  1. Debugging your app.

  2. Running your app

    fig local path/to/app.html While testing, it can be useful to add this snippet to your sidebar for quick access.

    1. Run fig home

    2. Press "Add Code Snippet" button

    3. Choose an emoji and a name

    4. Add fig local path/to/app.html

  3. (Advanced) Adding apps to your $FIGPATH

    If you want to access your Fig apps without typing out the full path, you can add them to your FIGPATH - a colon separated list of paths where Fig will check for a matching app. For instance, if you run fig sample-app , Fig will check every directory added to your FIGPATH for...

    1. sample-app.html

    2. sample-app/index.html

    You can update your FIGPATH by adding something likeexport FIGPATH=/User/mschrage/path/to/apps to your .profile .

You can open the Safari Web Inspector by right clicking on your app. The Fig API is still maturing, so if you run into unexpected behavior, please let me know at or in the of the Slack community.

🧰
Fig
this form
developer community
matt@withfig.com
#bugs channels