If you’ve experimented with the preview of Firebase Studio, you likely know the basics: how to prompt the App Prototyping agent to iterate on your app idea, swap to code view to modify your code directly or debug issues, and publish your app with Firebase App Hosting. However, there are a lot of more subtle features built into Firebase Studio to make the app development lifecycle smoother and significantly quicker. This post will dive into practical tips and tricks to harness the full potential of Firebase Studio.
Design your way
They say a picture is worth a thousand words – in app design, it can save you a thousand prompts! Instead of wrestling with lengthy descriptions, why not show the App Prototyping agent exactly what you envision? Firebase Studio offers two intuitive ways to do this:
Annotation Tools: Draw Your Vision
While in Prototyper mode, click the Annotate icon to draw directly on the preview window. Use the available shape and text tools to pinpoint exactly what you want the App Prototyping agent to change. It’s a quick and effective way to communicate visual feedback.
Image upload
Have a wireframe, a specific color palette, or an inspirational image you want the App Prototyping agent to use as guidance? Click the Attachment icon to add an image to accompany your prompt. This option is available when writing your initial prompt, while iterating in Prototyper mode, or when using Gemini in Firebase in Code view.
Specify the element you want to change
Tired of trying to describe which button, icon, or text block you want to change? In Prototyper mode, click the Select icon, choose the specific element on your app’s preview, and then describe the change you want. This direct approach ensures the App Prototyping agent knows exactly what you’re referring to, saving you time and iterations.
When in doubt, roll back
Sometimes the App Prototyping agent misunderstands a prompt or introduces a difficult-to-solve bug. When that happens, it’s often easier to click Restore on a previous version of the app to quickly return to a previous state and try again. If you change your mind, you can always swap back to the most recent version by clicking Restore again.
Swap between Gemini models
In Code view, Gemini in Firebase can suggest code as you type, help debug issues, answer questions about your code, and even write and modify code for you. You can configure the Gemini model that Gemini in Firebase chat uses. You have a choice of the built-in model, models configured in the chat window (including Gemini 2.5 models), or any Gemini model to which you have access. For full instructions, check the documentation.
Collaborate with others
Need some help from a friend? Firebase Studio includes two ways to share your app-in-progress.
Share your workspace
For deeper collaboration like pair programming or letting a teammate test thoroughly, Firebase Studio allows you to share your workspace with anyone who has a Google Account. It’s important to remember that this gives them access to your entire workspace, including any sensitive files, such as private keys and access tokens. So, only share with trusted collaborators and be sure to coordinate your changes. Currently, there isn’t a merge conflict notification system, so simultaneous edits to the same file could lead to overwritten changes. For the full rundown and necessary precautions, head over to the documentation.
Preview your app on other devices
In both Prototyper mode and Code view, the preview window displays your web app as you make updates to it. But what if you want others to help test your app on different devices? Click Preview > Make Preview Public to generate a QR code and URL you can share with others to open the same preview in a web browser. As you make changes to your app in Firebase Studio, those same changes appear in the shared preview.
Bring it all together with Firebase Studio
Firebase Studio is more than just its core features; it’s packed with clever capabilities designed to accelerate your app development workflow. From visually guiding the App Prototyping agent with your own drawings and images, to pinpointing specific elements for modification and easily rolling back to previous versions, you have fine-grained control over the creative process. And with the flexibility to switch Gemini models or bring in a friend (or several!) with seamless collaboration options, you’re empowered to optimize how you build.
If you have additional tips you think others should know about, share them via social media using #FirebaseStudio. What will you build next?