# Obsidian Custom Frames: web apps as panes, with a Markdown mode

> Obsidian Custom Frames is an MIT licensed Obsidian plugin that embeds web applications inside your vault as iframes with custom styling, ships presets for Google Keep, Todoist, Notion and others, and adds a code block syntax that turns a frame into an inline embed in a note. The judgement is that the plugin is a small, well understood piece of work whose real limits are the ones Electron and the web platform impose, not the ones the author chose.

**Ellpeck/ObsidianCustomFrames** — An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.

- Repository: https://github.com/Ellpeck/ObsidianCustomFrames
- Website: https://community.obsidian.md/plugins/obsidian-custom-frames
- Stars: 850 · Forks: 49
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/ellpeck-obsidiancustomframes

## Turning a web app into a pane

Obsidian Custom Frames is an Obsidian plugin that turns web apps into panes using iframes with custom styling, and it comes with presets for Google Keep, Todoist and more. The mechanism is the browser frame embedded inside the application, which is why the plugin is a desktop-first tool and why so much of its configuration is about making a foreign web page behave in a narrow column. The screenshots in the README show both shapes of the result, Google Keep attached as a narrow side pane on the right, and Google Calendar opened in the center of the editor with the mouse hovering over the corresponding ribbon button, plus the settings screen. The plugin is published in the Obsidian community plugin directory, the type is a plugin rather than a theme or a snippet, the code is TypeScript, and the licence is MIT, so anyone can fork it and change the presets.

## Adding a frame, then opening it as a pane

The usage path is short. You go into the plugin settings and add a new frame, either from a preset shipped with the plugin or a custom one that you can edit yourself, and then you open it as a pane with the Custom Frames: Open command. The settings are where the customisation lives, and the README lists what is available: adding custom CSS to the site, adding a ribbon icon, displaying the frame in the center of the editor, and more. The custom CSS option is the important one, because it is how a preset is made to fit a narrow pane, by hiding buttons that take vertical space, by removing margins, or by otherwise editing the page as it appears inside the frame. The ribbon icon and the center display are about where the frame appears in the Obsidian window, which is a layout decision rather than a web one, and the two together are what turn an embedded page into something you can work alongside.

## Markdown mode turns a code block into a frame

The second display path is the one that makes the plugin feel native to a vault. Custom Frames adds a special code block syntax that transforms the code block into a custom frame in Live Preview and Reading mode, so an embed can live inside an ordinary document. The block carries the name of the frame, and it can optionally pass style settings to the embed, which lets you change the height of the embed and an additional suffix appended to the frame's regular URL. The URL suffix is the clever part, because it turns a fixed preset into a parameterised one, so a Google Keep frame can be pointed at a specific note rather than at the list. A frame from the Google Keep preset with a height and a reminders suffix looks like this:

```text
frame: Google Keep
style: height: 1000px;
urlSuffix: #reminders
```

The three keys are the whole interface, which is a deliberate choice, since a Markdown note with embedded panes stays portable and readable as text.

## The mobile limitation is a platform limitation

The section on Obsidian Mobile explains why the plugin behaves differently there, and the reason is not a missing feature. Obsidian Mobile does not run on Electron, and Electron is what allows iframes and webviews to be displayed with very few restrictions related to cookies, cross-origin resource sharing and so on. The consequence is direct. A lot of sites will not work there, especially the ones you have to log in to, because a session that depends on cookies the mobile build will not give you is simply not available to the frame. The plugin's answer is a per frame toggle, the Disable on Mobile option, which hides a desktop only frame on Obsidian Mobile so that it does not appear broken in a vault you read on a phone. If your workflow is mostly mobile, this is a hard limit, and no amount of configuration changes it.

## The presets are tuned per site, and open to contributions

The shipped presets are the fastest way to see what the plugin can do, and each one is adjusted for the shape it will be displayed in. The Obsidian Forum frame is plain. Google Keep is optimized for a narrow pane on the side. Google Calendar is optimized by removing some buttons, and the note says to close the side panel with the top-left button. Todoist is optimized for a narrow, half-height side panel by removing some buttons and slimming margins. Notion is included with a recommendation to close Notion's own sidebar when it is used as a side pane, and Twitter and Readwise Daily Review round out the list. The consistency across them is the lesson, that a usable preset is mostly a list of what to hide. If you build a frame you think others would like, the README asks you to open a pull request with a new preset, and it points at the settings file as where the presets live.

## Known issues the author asks you not to file

The Known Issues section has an unusual instruction, that if you run into these you should not report them on the issue tracker, and the reason is that they are not fixable inside the plugin. The first is that popups and new tabs are opened in the default browser rather than in the custom frame by default, which causes issues logging in to websites that use external logins, since the browser window is a different session from the frame. The documented workaround is to enable the web viewer core plugin, which shares its session information with Custom Frames, so popups open inside Obsidian. The second is that some links refuse to open from within custom frames, especially before Obsidian 1.3.7, with the detail in a linked issue. Both are consequences of embedding a browser page in a desktop application, and both are the kind of thing an adopter should verify against their own sites rather than take on trust.

## Roadmap, licence and how the plugin is built

The roadmap shows what is planned and what has already been done, with the finished items struck through. Still open are links outside Obsidian that open in a custom frame, more Markdown mode options such as back and forward buttons, and possibly extracting selected text into a note in the manner of the Note composer plugin, potentially with a note template that includes the link to the site extracted from. Already finished are a custom icon per pane, displaying custom frames in Markdown code blocks, a ribbon button that opens a frame in the main view, and executing custom JavaScript inside iframes, which is marked as still needing security implications explored. The repository is a modern TypeScript project with esbuild for bundling, eslint with the eslint-plugin-obsidianmd rules, a manifest.json and versions.json that a version-bump script updates together, a test-vault for manual testing, and a styles.css. The releases move at a moderate pace, with 2.6.0 on 2026-08-09, 2.5.0 on 2025-01-19 and 2.4.7 on 2024-02-21, and the last push was on 2026-08-09 with the repository not archived.

## Conclusion

Obsidian Custom Frames fits a writer who keeps a task list, a calendar or a read later service in a side pane next to the note they are working on, and it fits a team that wants those embeds to live in documents rather than in a separate browser tab. It is the wrong choice if you work on mobile, because Obsidian Mobile does not run on Electron and most login-gated sites will not render, and note that executing custom JavaScript inside iframes, while listed as done on the roadmap, came with unresolved security considerations. Before you build a workflow around it, test the specific sites you intend to embed while signed in, and check the known issues list, because popups opening in the default browser rather than in the frame is a documented behaviour with a documented workaround.

## FAQ

### How do I add a web app to Obsidian with Obsidian Custom Frames?

Open the plugin settings and add a new frame, either from a preset that ships with the plugin or a custom one you edit yourself. Then open it as a pane with the Custom Frames: Open command, and adjust the settings for the site with custom CSS, a ribbon icon or the option to show the frame in the center of the editor.

### Can I embed a custom frame inside an Obsidian note?

Yes. A custom-frames code block is transformed into a frame in Live Preview and Reading mode. The block names the frame, and it can optionally carry style settings such as the embed height and a urlSuffix that is appended to the frame's regular URL, which is how you can point a Google Keep frame at a specific note.

### Does Obsidian Custom Frames work on Obsidian Mobile?

Not for most sites. Obsidian Mobile does not run on Electron, and Electron is what lets iframes and webviews be displayed with few restrictions on cookies and cross-origin resource sharing, so many sites, particularly ones you must log in to, will not work there. You can hide a desktop only frame on mobile with the Disable on Mobile option.

## Sources

- [Ellpeck/ObsidianCustomFrames on GitHub](https://github.com/Ellpeck/ObsidianCustomFrames)
- [License: MIT](https://github.com/Ellpeck/ObsidianCustomFrames/blob/master/LICENSE)
- [Project website](https://community.obsidian.md/plugins/obsidian-custom-frames)
- [README](https://github.com/Ellpeck/ObsidianCustomFrames/blob/master/README.md)
- [Releases](https://github.com/Ellpeck/ObsidianCustomFrames/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ellpeck-obsidiancustomframes