The Obsidian Web Clipper: A Game Changer for Research & Note-Taking

We will take a closer look at the new Obsidian Web Clipper. Starting with its installation and configuration, we then move on to templates and common use cases. There are a few disclaimers at this point.

To use it fully, you need to be on Obsidian version 1. 7. 2 or higher.

In this video, I am using version 1. 7. 4.

Web Clipper cannot do everything Omnivore did. Your specific use case might not be covered, but you might get some inspiration. With all this out of the way, let's get to it.

The Obsidian Web Clipper is not a plugin for Obsidian, but an extension for your browser. We can navigate to the Obsidian Clipper website and, depending on the browser, we will be asked to install the extension. I am working with Microsoft Edge.

Clicking on "Add to Edge" takes me to the extension page. In my case, it says "Remove" instead of "Add" because I installed it already. Once installed, we can click on the extension icon and go to "Manage Extension".

Here we find the same options as for most other extensions in a browser. I am not changing anything here and close the tab again. And this is all for installing the extension.

Let's move on to configuring it so it works with our vault. After installing the extension, we have to configure it so it works with our vault. This is very straightforward and easy to do.

In our browser, we click on the extension icon and then on the gear icon. This takes us to the extension's settings page. Under "General", we can define multiple vaults to work with the clipper.

If we don't define any, it will automatically use the currently open vault. I will add my main vault called "Lean Notes" and another one called "Core". You could of course add your own vault in this list as well.

Next, we can define hotkeys for opening the clipper, quick clipping and toggling the highlighter mode. By default, there is no hotkey for opening the clipper. The other actions can be triggered with "ALT+SHIFT+O" and "ALT+H" respectively.

By default, any newly clipped notes will be opened in the target vault. If we don't want that, we can turn this off under the advanced settings. Here, we can also enable the legacy mode to make the clipper work with Obsidian 1.

6. 7. Lastly, we have the option to reset the default template - in case we messed it up - and export or import the clipper settings.

This is very handy if we want to back up our settings or simply migrate them to a different PC or browser. This includes all our templates and the clipper properties. Under "Properties", we can use the same import and export options for properties only.

And we can also remove any unused ones. Here we can also find a list of all defined properties across our templates. In the "Highlighter" options, we can export all our highlights to a single file.

A second option allows us to always show previously defined highlights on a web page or to hide them in general and only show them when we are using the highlighter mode. And the last setting here lets us define the clip behavior. We have the choice between replacing the page content or doing nothing.

Once everything is as we want it, we move on to the templates. The Obsidian Web Clipper comes with one predefined default template. This is a great starting point and will work fine for many use cases.

Before we see it in action, let's understand templates in general a little bit better. First, every template needs a unique name. That's easy.

Next, we can decide what the clipper shall do when we use a specific template. Here we can choose between. "Create a new note", "Add to an existing note at the bottom", "Add to an existing note at the top", "Add to daily note at the bottom", and "Add to daily note at the top".

For all but the first option, we need to be using Obsidian 1. 7. 2 or higher.

For defining a note name, we can use variables. We will see those in more detail when we look at custom templates. For now, we just use the "title" variable using the web page's title as our note name.

Under note location, we can define the target folder inside our vault. In my case, that's "00 inbox/clippings". As we have seen, we can configure the clipper to work with multiple vaults.

Here we have the option to define one of them as the default vault. We can opt for the most recently used one or define one of the previously defined vaults from our list. Having multiple templates also means that we need to tell the clipper which one to use when.

Of course, we can do this manually each time we clip something. But if we often clip contents from certain websites and perhaps even want to grab different information in different formats from each site, then we can define a "template trigger" for each template. We won't set one for the default template, but in our custom ones, we will see them in action.

In the "Properties" section, we can define which properties should be added to our Obsidian note and what value each property should have. Once again, we can use variables here as well as static values. For the default template, only the tags value is static and set to "clippings".

Before delving deeper into custom templates, let's see how to actually clip something. At last. Creating clippings is very simple and really fast.

Everything you see in this chapter is shown in real time, no time saving cuts or accelerated videos here. For this demo, I will open an article on the New York Times website. If we click the clipper icon, we notice a few things right away.

First, it is using the "Default" template. If we don't want that, we can pick another one. Depending on the template, we see the list of properties and their values as well as the note's content.

Below that, we can choose the target vault from the ones we defined earlier in chapter 3 And if we wanted to, we could also change the target folder in that vault. I don't want to change anything right now, so I just click on Add to Obsidian. And right away, Obsidian opens the clipped note.

We can see that the webpage title has indeed become our note name. All the properties and their values are where they should be. And in the note's content, we have the article image and the full text including links.

So this was really easy and extremely fast. However, scrolling down, we can see that the note also includes the webpage's "related" and "recommended" section. If we really need the full article, we can easily clean this up manually, of course.

Alternatively, we could opt not to clip the whole page, but just parts of it. It's . .

. highlights, one might say. We will see how this works in chapter 7, "Common Use Cases".

But before that, let's take a closer look at the power of custom templates. As mentioned in chapter 4, the default template will be just fine for many of our clipping needs. But if we want a tad more flexibility or are dealing with slightly more demanding clipping needs, then custom templates are our friends.

As mentioned earlier, we can use several variables in our Clipper Templates. These and many other things are explained and described in detail on the Obsidian Web Clipper's GitHub page, the link to which you can find in the description. As we have seen, we can import and export templates.

While this is great for backing up our own, it is also really useful for importing already existing ones. I left the links to four different repositories in the description for you. They all contain several templates ready for you to use and easy to adapt.

These repositories include the one created by Kepano, Obsidian's CEO, the community collection of templates for the Obsidian Web Clipper, and two more created by Espen Odegard and Josh Klein. I will demo some of the templates in the next chapter. I am prepared to demonstrate five Common Use Cases for Clipping Web Content to Obsidian.

We will start with the one I promised you in chapter 5: "Clipping Highlights". We are back at the same article page that we clipped in its entirety earlier. Now we don't want to do that, so we can click on the Clipper icon, activate the Highlighter Mode and start selecting the bits of the article that we are interested in.

I will just take one paragraph for now. When we are done, we click on "Clip Highlights", followed by "Add to Obsidian", and the note will be created in Obsidian accordingly. As you can see, it really includes only the highlighted part.

Alternatively, we can use the hotkey - by default "ALT+H" - to activate the highlighter. Right away, we can see that there is already one highlight on that page. Let's select another one and send it to Obsidian.

Again, a new note is created, this time with two highlights. Let's go back one more time. My preferred way of clipping highlights is to open the clipper in the browser's sidebar.

We can do that by clicking on the extensions icon and then on "Open in Sidebar" next to the Obsidian Web Clipper. This gives us a preview of how our highlights will look like. We enter the highlighter mode again and add more highlights, including the article image.

You will notice that the clipper is smart enough to insert any new highlights at the right place instead of just adding them in order of being selected. When we are done, we click "Add to Obsidian" again and find a new note with the image and the three text highlights in Obsidian. But what if we don't want to clip any content but just add the article's URL to a note in our vault for later reading?

Well, then we can simply create a custom template for doing just that. Here is the one I use. I creatively called it "URL".

One important difference to the default template is that I don't want to create a new note. Instead, I want the clipper to add the URL at the bottom of an existing one. In this case, I don't want to create a dynamic note title either.

I have one note in my vault for all these URLs called "URLs to check". The note location is the same as before, "00 Inbox/Clippings". I also removed all properties from this template except for the tags property with the value "clippings".

And in the note content, I add the webpages title, URL and the current date. With this done, we go back to the article, click the clipper icon and change the template to URL. We can see the effect right away.

Just one property and the three bullet points in our content area. We click on "Add to Obsidian", and my "URLs to check" note opens with the new entry added at the bottom. Apart from reading the news online, many of us watch videos on YouTube.

The Obsidian webclipper can help us with getting them into our vault too. I go to one of my earlier videos, in this case about habit tracking inside of Obsidian, and click the clipper icon. You will notice that the clipper is not set to use the default template but one called "YouTube".

Before we proceed, let me show you how it knows to use this template. Back in the clipper settings, we go to the YouTube template and find the template triggers. As you can see, it has a trigger based on URLs starting with "https://youtube.

com/watch". This is the part of a video URL before the video ID. Using such a trigger is really helpful as it makes sure that the correct template will be used for our clippings automatically.

But let's go back to the video. We click the clipper icon, see that all the settings are correct and simply click on "Add to Obsidian", which of course creates a new note in our vault based on the YouTube template, which also includes the embedded video. If you're anything like me, you spend quite some time on Reddit - perhaps even too much.

So far, getting them into Obsidian was always a bit of a hassle for me, even with Omnivore. The Obsidian webclipper makes it very easy, especially with this custom template. Once again, we create a new note, define a note name using variables and create a note in the same folder as before.

We also set the Reddit URL to be the trigger for this template. Down below, we define our properties and their respective values. Let's go over to Reddit, where we have this post, we click on the clipper icon, check the settings and if all is fine, click on "Add to Obsidian".

And with just a few clicks, we get the post with relevant metadata and the image directly into our vault. For our last use case, let's head over to Wikipedia, pick an article, click the clipper icon and then "Add to Obsidian". As we would expect by now, the whole page gets clipped, metadata added and all images embedded in the new note.

Of course, these are just a few common use cases. With the Obsidian Web Clipper's templates, we have almost endless possibilities to clip what we like and how we want it. Well, what do you think?

Do you like the Obsidian Web Clipper? Will it help you get over losing Omnivore? Why not share your use case, challenges - and ideally solutions - with the rest of us in the comments?

I hope this quick overview of the Obsidian Web Clipper will help you get the most out of it. If so, perhaps drop a like, subscribe to the channel and ring the notification bell to make sure you won't miss the next videos. And if you could share it with whoever might be interested, that would be great, too.

If you need help or have any questions, the YouTube comments might not be the easiest way to interact with each other. Alternatively, you can find me on your preferred social media platform. You can find the links to all my profiles in the description below.

And that's it for today. Thanks for watching and see you next time.