# Obsidian Web Clipper The Obsidian Web Clipper is a free and [open-source](https://github.com/obsidianmd/obsidian-clipper) Web browser extension created by [[Steph Ango]], the CEO of Obsidian, and maintained by the [[Obsidian]] team. It makes it a breeze to curate/capture content and highlights from anywhere on the Web, convert it to [[Markdown]], and to send it all to your Obsidian vault(s). ![[Supercharge Your PKM Workflow with the Obsidian Web Clipper (Article) - Obsidian Web Clipper UI.png]] Caption: Content captured by the Obsidian Web Clipper is automatically converted to Markdown, and additional metadata is also captured ![[Obsidian Web Clipper - Example of highlighting.png]] Caption: Highlighting experience with the Obsidian Web Clipper The Obsidian Web Clipper not only captures and converts content to Markdown, but also extract useful metadata (e.g., page title, tags, og meta, and more!). ![[Obsidian Web Clipper - Example once captured.png]] Caption: Once captured, content is saved to your vault(s) along with the captured metadata One of the coolest features of the Obsidian Web Clipper is its Interpreter. It uses AI to extract data from pages based on natural language. For example, you can use prompt variables such as `{{" a summary of the page"}}` to tell the extension that you want to extract information in a certain way. This is mighty powerful! Note that this feature uses [[Large Language Models (LLMs)]], and might cost you money, since it will use API credits with your model provider. Many browsers are already supported. As of December 2024: - Chrome - Safari - Firefox - Edge - Brave - Arc - Orion - Vivaldi ## Key Concepts of the Obsidian Web Clipper - **Extension**: the Obsidian Web Clipper is an extension that runs inside of your Web browser and enables you to capture information - **Templates**: create and use templates to customize the information and metadata to capture depending on the Website or type of content - **Highlighter**: enables highlighting different parts of the page, and seeing all the already highlighted elements - **Variables**: enables capturing different elements (e.g., the page title, the description, the content, etc) - **Prompt variables**: variables that use natural language prompts and AI to transform information - **Interpreter**: uses AI to process/transform information using Large Language Models based on the prompt defined in a prompt variable - **Filters**: functions that you can add to variables and prompt variables to further transform the information (e.g., transform text, dates, and a lot more) ## How to Install the Obsidian Web Clipper To install the Obsidian Web Clipper, just go to the official website: https://obsidian.md/clipper and install the extension. ## How to use the Obsidian Web Clipper To capture information on a page, you can either click on the icon of the extension, or highlight content and right click to invoke the Obsidian Web Clipper: ![[Obsidian Web Clipper - right click.png]] Caption: Invoking the Obsidian Web Clipper using the context menu In that context menu, you can choose to - Capture the whole page - Add the selected text to the list of highlights you want to capture - Open the side panel ![[Obsidian Web Clipper - side panel.png]] Caption: The side panel always remains visible and accessible You can also enable/disable the highlighter by clicking on the extension icon, and clicking on the highlighter button: ![[Obsidian Web Clipper - highlighter button.png]] Caption: You can enable or disable the highlighter Once the highlighter is enabled, you can highlight elements on the page: ![[Obsidian Web Clipper - highlighting elements.png]] Caption: Using the highlighter Next to that button, you can also select the template to use for capturing content: ![[Obsidian Web Clipper - template selection.png]] Caption: Select the template to use If you click on the three dots, you can see the list of metadata that the Obsidian Web Clipper has detected on the current page: ![[Obsidian Web Clipper - page variables list.png]] Caption: The list of page variables and values for the current page At the bottom of the extension pane, shown when clicking on the extension icon, you can: - Change the folder in which the information will be saved to in your Obsidian vault - Capture the content and send it to your vault - Capture the content and send it to the clipboard - Capture the content and save it to a file on your computer ![[Obsidian Web Clipper - save options.png]] Caption: Configuring where to save the captured content Last but not least, to use the Interpreter, you'll first need to enable and configure it in the settings. I will cover this in the next section. ## Configuration In the settings, you can configure various things. Let's explore the main parts. ### Target vault(s) First, you can define the vault(s) in which you want the extension to save captured content. You can add multiple ones if needed: ![[Obsidian Web Clipper - capture to vault.png]] Caption: Vaults configuration ### Hotkeys You can also customize the hotkeys used to open the clipper, quickly clip information, and toggle the highlighter mode: ![[Obsidian Web Clipper - hotkeys.png]] Caption: Hotkeys configuration ### Templates You can create custom templates, defining what to capture, how to name the created notes, which note templates to use, etc: ![[Obsidian Web Clipper - capture templates.png]] Caption: Custom template definition When creating or editing templates, under "Behavior", you can choose what the extension should do: - Create a new note - Add the content to an existing note, either at the bottom or at the top - Add to a daily note, either at the bottom or at the top When creating new notes, the name and location can also be configured. It's also possible to define template triggers, defining a set of rules that the extension will use to automatically select the right template depending on various conditions (e.g., URL pattern, etc). Note metadata can also be captured thanks to the "Properties" section. In there, you configure mappings between note metadata property names and variables exposed by the extension. Those variables correspond to different pieces of information that the extension can automatically extract for you (when available). Those variables can be used not only within the properties section, but also to define note names, etc. ![[Obsidian Web Clipper - example with note names.png]] Caption: An example of how to use variables to define note names As of today (December 2024), the following ones are supported: |Variable|Description| |---|---| |`{{author}}`|Author of the page| |`{{content}}`|Article content, [highlights](https://help.obsidian.md/web-clipper/highlight), or selection, in Markdown format| |`{{contentHtml}}`|Article content, [highlights](https://help.obsidian.md/web-clipper/highlight), or selection, in HTML format| |`{{date}}`|Current date, can be formatted using the `date` filter| |`{{description}}`|Description or excerpt| |`{{domain}}`|Domain| |`{{favicon}}`|Favicon URL| |`{{fullHtml}}`|Unprocessed HTML for the full page content| |`{{highlights}}`|[Highlights](https://help.obsidian.md/web-clipper/highlight) with text and timestamps| |`{{image}}`|Social share image URL| |`{{published}}`|Published date, can be formatted using the `date` filter| |`{{site}}`|Site name or publisher| |`{{title}}`|Title of the page| |`{{time}}`|Current date and time| |`{{url}}`|Current URL| It's also possible to use [filters](https://help.obsidian.md/web-clipper/filters) to modify variables and post-process the information. For instance, filters enable converting dates to certain formats, text to uppercase or lowercase, etc. Filters are used like this: `{{variable | filter1 | filter2 }}`. This is a pretty common syntax for chaining filters. You can think of it like this: the extension will extract information that corresponds to the variable (e.g., the page title). Then it will apply `filter1`. Then it will apply `filter2`, etc. Here are some of the currently supported filters: - Dates - [date](https://help.obsidian.md/web-clipper/filters#%60date%60): converts a date to the specified [format](https://day.js.org/docs/en/display/format) - [date_modify](https://help.obsidian.md/web-clipper/filters#%60date_modify%60): modifies a date by adding or substracting a specified amount of time - [duration](https://help.obsidian.md/web-clipper/filters#%60duration%60): converts ISO 8601 duration strings or seconds into formatted time strings - Text conversion and capitalization - [capitalize](https://help.obsidian.md/web-clipper/filters#%60capitalize%60): capitalizes the first character of the value and converts the rest to lowercase - [lower](https://help.obsidian.md/web-clipper/filters#%60lower%60): converts text to lower case - [upper](https://help.obsidian.md/web-clipper/filters#%60upper%60): convers text to upper case - [title](https://help.obsidian.md/web-clipper/filters#%60title%60): converts text to `Title Case` - [camel](https://help.obsidian.md/web-clipper/filters#%60camel%60): converts text to `camelCase` - [kebab](https://help.obsidian.md/web-clipper/filters#%60kebab%60): converts text to `kebab-case` - [pascal](https://help.obsidian.md/web-clipper/filters#%60pascal%60): converts text to `PascalCase` - [snake](https://help.obsidian.md/web-clipper/filters#%60snake%60): converts text to `snake_case` - [replace](https://help.obsidian.md/web-clipper/filters#%60replace%60): replaces occurrences of specified text - [trim](https://help.obsidian.md/web-clipper/filters#%60trim%60): remove white space from both ends of the text - [safe_name](https://help.obsidian.md/web-clipper/filters#%60safe_name%60): converts text to a safe file name (using conservative and OS-specific sanitization rules) - ... - Text formatting - [blockquote](https://help.obsidian.md/web-clipper/filters#%60blockquote%60): adds a Markdown quote prefix (`> `) to each line of the text - [callout](https://help.obsidian.md/web-clipper/filters#%60callout%60): creates a callout with optional parameters - [footnote](https://help.obsidian.md/web-clipper/filters#%60footnote%60): converts an array or object into a list of Markdown footnotes - [image](https://help.obsidian.md/web-clipper/filters#%60image%60): converts strings, arrays, or objects into Markdown image syntax - [link](https://help.obsidian.md/web-clipper/filters#%60link%60): converts strings, arrays, or objects into Markdown link syntax (not the same as wikilink) - [list](https://help.obsidian.md/web-clipper/filters#%60list%60): converts an array to a Markdown list - [table](https://help.obsidian.md/web-clipper/filters#%60table%60): converts an array or array of objects into a Markdown table - ... - Numbers - [calc](https://help.obsidian.md/web-clipper/filters#%60calc%60): performs basic arithmetic operations on numbers - [length](https://help.obsidian.md/web-clipper/filters#%60length%60): returns the length of strings, arrays, or number of keys in objects - [round](https://help.obsidian.md/web-clipper/filters#%60round%60): rounds a number to the nearest integer or to a specific number of decimal places - HTML processing - [markdown](https://help.obsidian.md/web-clipper/filters#%60markdown%60): converts a string to an Obsidian Flavored Markdown formatted string - ... - ... You can find the full list of filters [here](https://help.obsidian.md/web-clipper/filters) ### Interpreter In the settings, you can enable/disable the Interpreter feature, and configure it. You can either let it run automatically, which will automatically run prompt variables, or you can turn it off if you only want to run interpreter manually to save money. If you turn it off, then you'll need to click on the "Interpret" button when capturing information: ![[Obsidian Web Clipper - running interpreter manually.png]] Caption: Prompt variables are very powerful and versatile You can also add [[Large Language Models (LLMs)]] and API keys. Out of the box, the following ones are pre-defined: ![[Obsidian Web Clipper - AI models.png]] Caption: AI Models configuration Once your model(s) and API key(s) are configured, you can add expressions known as [prompt variables](https://help.obsidian.md/web-clipper/variables#Prompt+variables) within your templates (cfr previous point) using natural language. Some examples: - `{{"Summary of the article}}` - `{{"5 bullet points summary}}` - `{{"Chinese version of the article}}` - ... ## Pro Tips Here are a few recommendations: - Create your own templates for specific purposes (e.g., article, discussion, research article, etc) - Leverage variables, prompt variables and filters to extract exactly what you need - Capture the metadata you want to keep - Consider that pages on the Web disappear all the time, so you might not have a second chance - Use the Interpreter to enrich the information you capture - Use it to generate summaries, extract key concepts and definitions, identify supporting or contrarian ideas, list key takeaways, etc - Store the captured information in a specific location within your vault to avoid mixing what you have captured and your own ideas - Consider using daily notes for quick captures - Consider using a separate vault for captured content, even though I'm not a big fan of that idea for practical reasons - Use consistent naming conventions for your captured notes - [Regularly review](https://www.dsebastien.net/2022-05-16-periodic-reviews/) what you have captured - If you do nothing with what you capture, it's meaningless to capture in the first place - Connect the ideas with the rest of your knowledge base - Don't forget to [backup your Obsidian vault](https://www.dsebastien.net/how-i-synchronize-and-backup-my-obsidian-notes/) Generally speaking, consider that content capture is an important part of your [[Personal Knowledge Management System (PKMS)]] ## References - Official Website: https://obsidian.md/clipper - Documentation: https://help.obsidian.md/web-clipper - Templates: https://help.obsidian.md/web-clipper/templates - Variables: https://help.obsidian.md/web-clipper/variables - Prompt Variables: https://help.obsidian.md/web-clipper/variables#Prompt+variables - When to use Prompt Variables: https://help.obsidian.md/web-clipper/variables#When+to+use+prompt+variables - Roadmap: https://github.com/obsidianmd/obsidian-clipper#roadmap - Source code: https://github.com/obsidianmd/obsidian-clipper - Community-created Web Clipper Templates - https://github.com/obsidian-community/web-clipper-templates - https://github.com/kepano/clipper-templates - Web Clipper channel on Obsidian's Discord server: https://discord.com/channels/686053708261228577/1285652864089198672 - Videos - Overview by [[Prakash Joshi Pax]]: https://www.youtube.com/watch?v=icsQeiqDa34 - Overview by [[Sascha D. Kasper]]: https://www.youtube.com/watch?v=oEtSLrfEj5o