Customizing Obsidian on your iPad

I live on my iPad, working from it at least a few hours every day. I have the iPad Pro 12.9" 2018 model with a keyboard. While the iPad is a few years old, it still performs amazingly well. Obsidian also is a joy to use on my iPad.

While Obsidian is not visually a native iOS, I appreciate that I can work on my iPad, iPhone, Windows PC, iMac, and Chromebook. Obsidian works and looks the same on all these hardware platforms. It amazes me that it works so well, and this includes all my customizations, whether CSS, plugins, and JavaScript code.

I struggled with the only thing I could not easily do advanced customizations on my iPad. I always need to be at a PC to make such changes.

This article will explain how you can do advanced customization of Obsidian while working on your iPad (or iPhone if you need to).

You can turn your iPad into a mini development environment for Obsidian.

In the following picture, I have Obsidian open on the left and a program called Textastic on the right, using the native iOS Split Pane feature. As you can see, we can have two programs visible, one next to the other.

Modifying CSS for Obsidian on my iPad using Textastic

Setting up your development environment

I will assume Obsidian is installed and working as you like on your iPad.

Now we need a code editor for the iPad that can access the local file system of the iPad. I am using Textastic; however other editors are available in the Apple App Store.

I chose Textastic because it’s fast and has good support for CSS, JavaScript, HTML, and Markdown. These are the essential file formats used inside of Obsidian. Therefore, for this article, I will describe the steps for configuring Textastic.

First, install Textastic from the App Store. The program costs $9.99 but is well worth it.

After installing Textastic, we will want to create a bookmark from Textastic to your Obsidian vault. Textastic can read files from the local file storage and your iCloud storage. My vault is called Dashboard++ and is located in Files in “On My iPad” and then in the “Obsidian” folder. Each vault on your iPad is stored in a sub-folder in the Obsidian root folder displayed in the following picture.

iOS Files App — Obsidian root folder on my iPad

From within Textastic, click on the Add External Folder button.

Textastic — Add External Folder

Then navigate the file system until finding your vault.

Once selected, you will see your vault listed in the External Files and Folders list of Textastic. In my case, as mentioned previously, it is called Dashboard++.

My vault named Dashboard++ is listed in external folders in Textastic.

When you open the external folder for your vault, you will notice that Textastic displays all the files and folders in the vault, including the heading .obsidian folder. This hidden folder contains all your plugins, CSS snippets, and Obsidian settings. With access to this folder on the iPad, you can extensively edit Obsidian files in your vault directly on your iPad.

.obsidian hidden folder accessible in Textastic

For example, in the first screenshot for this article, I have a CSS file open in Textastic. As I change the file in Textastic, Obsidian sees those changes and immediately updates the user interface to reflect the changes from the CSS file being edited. This allows us to tweak our CSS on the iPad and get instant feedback for these changes.

Templates and JavaScript

I have several Templater templates I use that have JavaScript in them. I find editing JavaScript in Obsidian to be clumsy. So using an external editor like Textastic makes it much more manageable.

I also find editing some Markdown, especially if it has code embeds, such as when using the Dataview plugin, Dataview queries are much easier to edit in Textastic. Therefore, I can use a real code editor to make more advanced modifications to markdown files while also seeing those changes to the markdown reflected in real-time in Obsidian.

Syncing changes across devices

Another nice thing about the Obsidian’s design is that all configuration information for a vault lives in the vault’s file structure. So if you make changes on your iPad to files in the vault, and that vault is configured for synchronization, all your changes made on the iPad will be synced to other devices.

Again, this makes it easy, regardless of the hardware platform, to customize Obsidian and have those changes reflected on all your other devices.

I use Obsidian Sync on the iPad, but many also use iCloud sync. If you want to learn more about Obsidian Sync, check out this video from Curtis McHale: Everything You Need to Know about Obsidian Sync.

JavaScript debugging on the iPad

One of the things everyone complains about is a lack of a debugging console on the iPad. This isn’t the fault of Obsidian, as it is a mobile app and isn’t designed for development on the iPad.

But there is a way to do some “lite” debugging on the iPad. There is a plugin not in the community plugin list that can be installed manually with the Obsidian42 BRAT plugin.

Obsidian42 BRAT is a plugin available in the community plugin list. It allows you to install plugins directly from their GitHub repository. For more information on BRAT, visit https://github.com/TfTHacker/obsidian42-brat.

Using BRAT, you can install a plugin called Obsidian Dev Tools plugin. This plugin can be found at this GitHub repository: https://github.com/KjellConnelly/obsidian-dev-tools.

I won’t detail the use of this plugin, but as seen in the following picture, you can get information from the console. This screenshot shows a Templater plugin JavaScript code snippet run inside Obsidian on the iPad and writes “Hi World” to the console.

Debugging JavaScript on Obsidian Mobile

Happy Coding

This article demonstrated an easy way to turn your iPad into a mobile development platform for Obsidian. While hacking on the iPad can’t ever fully match the desktop, it gets the job done and, in some cases, is even preferable since you can modify things no matter where you are while on the go.

Have you discovered effective ways of customizing and developing on the iPad for Obsidian? If so, I would love to hear more. Reach out to me on Twitter at https://twitter.com/tfthacker/

Thank you for reading this article. Please check out more of my work at https://tfthacker.com