Add an "Open in Firebase Studio" button

With Firebase Studio, you can simplify the steps for someone new to your codebase to set up their development environment and get productive.

For example:

  • If you're working on a team with other contributors, you can customize your environment precisely for your project and then commit your .idx/dev.nix file to your project's Git repository. That way, when a teammate imports your Git repository in Firebase Studio, their new workspace will have the exact same configuration as yours, complete with the same system packages, IDE extensions, starter scripts, and more.

  • If you're building a framework or library for others to use, you can include a .idx/dev.nix file in your sample code repositories, so that when a user imports your samples into Firebase Studio, they can skip the environment setup and jump straight into trying out your framework. You can even build your own, custom template as an opinionated, customizable starting point for your users.

After you're happy with your environment customizations, you can make it even easier for others to import your project into Firebase Studio by adding an "Open in Firebase Studio" button to your documentation, such as your project's README.md file.

Common "Open in Firebase Studio" entry points

There are several URL patterns available for an "Open in Firebase Studio" button:

  • To link to the import a Git repository flow, prefilled with your Git repository URL, use this URL pattern:

    https://studio.firebase.google.com/import?url=https://github.com/my-org/my-repo

    At this time, only GitHub repositories are supported (both private and public).

  • To link to a predefined workspace template, find the template you're looking for in the Templates page in Firebase Studio, and copy its URL, which should follow this URL pattern:

    https://studio.firebase.google.com/new/gemini

  • To link to a custom template, prefilled with your template's GitHub URL, use this URL pattern:

    https://studio.firebase.google.com/new?template=https://github.com/my-org/my-template

Add an "Open in Firebase Studio" button

Install the Open in Firebase Studio SDK or use this tool to generate the HTML for a Firebase Studio button: