Quick Tour of Google IDX | Develop Apps In Your Browser

Google has released a new tool called Project IDX. It is a basically cloud development environment but comes with more features than that. Let’s look at it.

What is Google Project IDX ?

Project IDX is a fullstack development environment in your browser. You can start a new development project with a variety of languages and frameworks (Next.js, golang, flutter ) and run IDX editor in your browser (Which is basically a different version of VSCode).

With Project IDX =>

  • You can code in your browser with power of open source vscode ide.
  • Test your application on a real cloud server
  • Access Gemini AI helper and Android virtual device
  • Deploy to Firebase or Google Cloud with one click
  • Additionally you can add Mysql or Postgresql to your project via configuration
Project IDX
Image from https://developers.google.com/idx

IDX also provides a free cloud server for your project when you initialize it. So you can see changes and share link with your friends.

A sample next.js app on Project IDX :

Google IDX Editor screen

You can see code and live preview of Next.js app on the browser.

Project IDX editor also have free gemini extension to help your coding :

Gemini AI in project IDX

How to create a new Google IDX Project

Let’s create a sample project with IDX.

Creating a IDX account

First : Go to https://idx.dev/ page and click the Get Started button from top right corner.
Note : After that, you should log in with a Google account to use IDX.

Project IDX Home Screen

After Logging in, you will be prompted to accept the terms of service. Continue

Project IDX terms

Then, you can also add Gemini AI to your project. I will select Enable AI Features

Gemini AI

Creating a new project on IDX

Now it is time to create a new project on Project IDX

On the home screen of IDX, select a new template, I will select Next.js, but there are many options, and I’m sure there will be more in the future.

Project IDX Templates

Choose some starting options for your project.
Note : This screen can be different for different frameworks and languages.

New workspace for google project idx

Once you hit the Create button it will start a new development environment for you and launch your project on the cloud server.

Congratulations! Now you can edit your project and share link.

Example Next.js app on project idx

Google Project IDX FAQ

  • What is Project IDX ? Simply it is a cloud development environment for your project. It includes code editor and cloud server.
  • Is Project IDX Free ? Yes! As of the time I’m writing this post (June 2024) it is free!.
  • What Languages Does Project IDX Support ? It currently supports Javascript, Typescript, Go, Python, Rust, PHP (With laravel project) and Dart (Flutter).
  • Which Frameworks Does Project IDX Support ? It currently supports almost all popular frontend frameworks like Angular, Next.js, React Vue.
    and also supports Laravel, Django, Flask, Node.js, .Net and Flutter
  • How to Use Project IDX ? Go to https://idx.google.com/ address, log in with your google account and create a new project from a pre-made template.
  • What Are the Benefits of Using Google IDX ? You can create a new project with one click, access your project everywhere and test it on cloud servers for free.
  • How Can I Share My IDX Project ? In the preview window you can see a share link button on the top right corner.
  • Can I Add Database To My IDX Project ? Yes Project IDX supports database. With Google IDX config you can add MySQL or PostgreSQL to your project.
  • Which IDE Does IDX Use ? It uses a different version of open source VSCode. With that you can add your favorite vscode extensions to IDX Editor.
Scroll to Top