Creating a Markdown Editor with Google AI Studio
Inspired by the recent announcements from Google’s AI Studio at the Google I/O event, I embarked on a journey to develop a Markdown editor. Initially, my ambition was to create a native Android application, but as I delved into the process, I found myself crafting a web app instead. Despite this shift in direction, the quality of the application I produced is nothing short of remarkable, and the speed at which it came together is truly astonishing.
My original intent was to explore Kotlin and Jetpack Compose, the modern toolkit for Android app development. I was eager to leverage Google AI Studio to create a project that I could later export to Android Studio for further refinement. However, I soon realized that the feature for creating native Android apps might not be readily available. After a relaxing evening spent unwinding in front of the television, I felt a spark of curiosity and decided to revisit Google AI Studio.
To my surprise, I discovered a new button labeled “Build an Android app.” Intrigued, I decided to give it a try. I crafted the following prompt:
I would like a native Android desktop app that looks and works like the Markdown editor app Typora. It should include the ability to open and save files, use a WYSIWYG editing view by default, and support all the normal keyboard shortcuts as per a word processor. The design should be minimalist, with no sidebar. It’s just an editor, not a file manager.
This time, Gemini 3.5 Flash took its time, running for 542 seconds—nearly ten minutes—while keeping me informed of its progress before presenting a detailed report of its accomplishments.
Upon reviewing the report, I noticed a discrepancy: the Ctrl + K keyboard shortcut had been assigned to “Monospace code wrapper” instead of “Insert hyperlink,” which is my preference. I promptly prompted it to make the necessary adjustment:
It also needs a way to add hyperlinks, and with the Ctrl + K keyboard shortcut.
Additionally, a pop-up suggestion led to another enhancement:
Add a theme customization feature to the Typora-like Markdown editor. Include a few pre-built minimalist themes (e.g., light, dark, sepia). Also, provide the functionality for users to define their own custom themes by selecting colors for background, text, headings, and links. Ensure themes are easily switchable.
These modifications took 219 and 292 seconds, respectively, culminating in another comprehensive report confirming that both features had been successfully compiled and optimized without errors, all while maintaining a minimalist interface.
As I watched Google AI Studio generate an Android virtual device in the preview pane, I was able to interact with the app, ensuring it functioned as intended. Satisfied with its performance, I was eager to take the next step: installing the app on a physical device, starting with the Pixel 10 Pro XL. With a simple click of the “Install” button in AI Studio, I followed the instructions to facilitate the installation process.
Having already enabled the necessary developer features on my device, I clicked “Install via USB,” approved a prompt on my phone, and within a minute, the app appeared on my device—just like any other application.
The experience was nothing short of exhilarating. However, I was also keen to explore the testing capabilities of AI Studio. While Google provides an extensive array of virtual devices through Android Studio, the emulator in AI Studio seemed limited to a single phone configuration. This raised the possibility that we are witnessing an early iteration of this functionality, with improvements likely on the horizon.
To test the app on different devices, I connected my Pixel 10 Pro Fold to the laptop via USB, ensuring that developer features were enabled. After a brief installation process, the app was ready to be explored on the larger display of the Fold.
The result was visually stunning, aligning perfectly with my expectations for this type of application. Yet, my curiosity about the integration with Android Studio remained. I could see the code generated by Gemini in AI Studio and considered using it as a foundation for a new project in Android Studio. Google’s announcement indicated that transferring the app to Android Studio for further development was possible, either by downloading a ZIP file or exporting it directly to GitHub.
Having previously saved my Markdown editor project to GitHub, I opted for the latter. After connecting my GitHub account, I created a new repository for this project. Once completed, I cloned the repository into Android Studio, following the provided instructions. However, I encountered challenges when attempting to compile and run the project due to unclear steps in the README file.
As I explored AI Studio again, I noted the absence of an option to download the project as a ZIP file for local experimentation. While sharing the app is straightforward, the lack of a clear method for downloading the code posed a challenge.
Moving forward, I plan to continue experimenting with this process. Perhaps starting with a simpler app will yield better results, or I may create a new Android project in Android Studio and integrate the code from this app. Although my inexperience with Android Studio, Kotlin, and Jetpack Compose presents hurdles, the rapid pace of development is undeniably thrilling.
In its current form, the app is functional and feature-rich, showcasing the potential of this technology. While I cannot make the app publicly available due to the inclusion of my Google API key, Google has indicated that sharing it on the Google Play Store is forthcoming. The future holds exciting possibilities.
