Obsidian - Embed A Website With Iframe

Embedding live websites inside Obsidian notes is done with a built-in iframe mechanism—no plugins required. By inserting a simple iframe snippet and pointing it at a URL, notes can display interactive content like character sheets, menus, generators, and even spreadsheet tools directly inside the workspace. That matters because it turns Obsidian from a static note-taking app into a dashboard for game prep and day-to-day reference, without forcing extra setup or workflow changes.

The practical payoff shows up in tabletop roleplaying workflows. A DM can keep an NPC generator or tavern/menu site open inside a note, click through options, and read the results at the table. The same approach can support quick character sheets for players who may not want to wrestle with reading or editing in Obsidian itself. Instead of building a character-sheet plugin, the workflow keeps players on their own character sheets (for example on DND Beyond) and lets Obsidian act as a window into the latest version. When the note is revisited, the embedded page loads the current state, so the DM gets updated information without taking control of players’ sheets.

Technically, the iframe setup is straightforward: use an iframe tag with parameters such as height and width, optionally padding, and—most importantly—the source URL (the “src” value). The transcript emphasizes that iframe support is already present in Obsidian (via obsidian.md), so the only real task is copying the snippet into a note and swapping in the desired URL. The creator references basic iframe documentation from W3Schools for background, but the core requirement remains simple: correct HTML formatting and the right URL.

To make this repeatable, a template is used. A saved template note containing the iframe code can be inserted with a hotkey, then edited by replacing the URL. This reduces the chance of formatting mistakes and speeds up adding new embedded tools.

Beyond RPG generators, the same iframe method works for spreadsheets. By embedding Google Sheets, interactive spreadsheet features—formulas, dropdowns, and calculations—remain usable inside Obsidian. The transcript describes using a sheet with inventory-style math (e.g., SUM formulas) and adjusting iframe height so the embedded grid fits the screen. With enough layout control, spreadsheets can become inventory checkers, random table tools, or even quick “maps” by coloring cells.

Finally, the workflow can leverage websites that export content in formats useful to Obsidian. Some generators can output markdown, which can be downloaded and saved as a note so formatting lands correctly. Overall, the central takeaway is that iframe embedding turns existing web tools into native-feeling Obsidian components—fast to set up, easy to reuse via templates, and flexible enough to support both interactive web apps and spreadsheet-driven utilities for game prep.