skills.rest
frostime
frostimeCOMMUNITY
Explore all skills by this author →
GitHub

hspa

Build SiYuan plugin UIs as standalone HTML pages loaded in iframes.

29|7|Updated Mar 19, 2024
Search Tags:#sdk#iframe#plugin-ui#siyuan#hspa#html-page
One-click install
npx skills add https://github.com/frostime/sy-f-misc --skill hspa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hspa
Source: https://github.com/frostime/sy-f-misc/tree/main/.github/skills/hspa
Command: npx skills add https://github.com/frostime/sy-f-misc --skill hspa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables developers to build plugin UIs quickly by authoring standalone HTML pages that load inside SiYuan as iframes, reducing bundle size and avoiding heavy UI frameworks.

Core Features & Use Cases

  • Iframe-based pages are authored in the src/ directory and built into standalone pages that render inside SiYuan, enabling modular interfaces without committing to a full SPA bundle.
  • Open UIs with openIframeTab or openIframeDialog, with injected window.pluginSdk (preset or customSdk) and optional theming via data-theme-mode.
  • Works with Vanilla JS, Alpine.js, or Vue 3, and can leverage optional styling via hspa-mini.css for rapid UI prototyping.

Quick Start

Create an HTML page under src/ for your feature, wait for pluginSdkReady, then render it with openIframeTab or openIframeDialog.

Frequently Asked Questions about hspa

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build SiYuan plugin UIs with iframe-based HTML pages?▼

To build SiYuan plugin UIs with iframe-based HTML pages, author standalone HTML files in the src/ directory and render them inside SiYuan using openIframeTab or openIframeDialog. This approach reduces bundle size by avoiding heavy UI frameworks.

How does pluginSdk injection work for iframe UIs in SiYuan?▼

PluginSdk injection for iframe UIs works by flat-merging window.pluginSdk into the iframe context. Developers can use a preset SDK or inject a customSdk, waiting for the pluginSdkReady event before rendering the page.

Can I use Vue 3 or Alpine.js to develop SiYuan plugin interfaces?▼

Yes, you can use Vue 3, Alpine.js, or Vanilla JS to develop SiYuan plugin interfaces. The iframe-based architecture supports these frameworks, and you can leverage optional hspa-mini.css styling for rapid UI prototyping.

What is the best way to open standalone UI components in a SiYuan plugin?▼

The best way to open standalone UI components in a SiYuan plugin is using the openIframeTab or openIframeDialog APIs. These methods load your authored HTML pages as iframes, supporting optional theming via data-theme-mode.

Do I need a full SPA bundle to create modular plugin interfaces in SiYuan?▼

No, you do not need a full SPA bundle to create modular plugin interfaces in SiYuan. Authoring standalone HTML pages loaded as iframes enables modular interfaces without committing to a heavy UI framework bundle.

Why use iframe HTML pages instead of a standard SPA for SiYuan plugins?▼

Using iframe HTML pages instead of a standard SPA for SiYuan plugins reduces bundle size and avoids heavy UI frameworks. It enables modular interface development by rendering standalone HTML pages directly within the SiYuan workspace.

Related Skills

Explore More Software Engineering Skills→
OpenAuthorityOpenAuthority
8

git_add

Stage specific files or glob patterns for the next git commit.

Official
Basic
boludo00boludo00
80

tailwind

Apply Tailwind CSS utility classes with custom themes and dark mode.

Community
Intermediate
RedWoodOGRedWoodOG
174

frontend-design

Design accessible, responsive frontend components for React, Vue, Svelte, or vanilla HTML/CSS/JS.

Community
Advanced
OptimusPiOptimusPi

convert-web-app

Convert existing web applications into hybrid MCP Apps with iframe embedding.

Community
Advanced