OpenSkillIndex← back to search
claude-code

Learn-skills.dev logseq-plugin-dev

Comprehensive guide and resources for developing Logseq plugins. Use this skill when asked to: (1) Create a new Logseq plugin, (2) Implement features using the Logseq Plugin API (Editor, App, DB, UI), (3) Debug or refactor existing Logseq plugins, (4) Set up a development environment for Logseq plugins.

install
source · Clone the upstream repo
git clone https://github.com/NeverSight/learn-skills.dev
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/NeverSight/learn-skills.dev "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/skills-md/0xrichardh/agent-skills/logseq-plugin-dev" ~/.claude/skills/neversight-learn-skills-dev-logseq-plugin-dev && rm -rf "$T"
manifest: data/skills-md/0xrichardh/agent-skills/logseq-plugin-dev/SKILL.md
source content

Logseq Plugin Development

This skill helps you build high-quality plugins for Logseq using the 

@logseq/libs
SDK.

Core Concepts

Logseq plugins run in a sandboxed 

iframe
and communicate with the main Logseq application via an RPC bridge.

  • Manifest: Every plugin needs a 
    package.json
    with a 
    logseq
    field.
  • SDK: Use 
    @logseq/libs
    to interact with Logseq.
  • Lifecycle: Use 
    logseq.ready(main)
    to initialize your plugin.

Getting Started

  1. Scaffold:
    • Basic TS: 
      assets/template/
    • React + Vite: 
      assets/template-react/
  2. Install Dependencies: 
    npm install @logseq/libs
    .
  3. Build: Use Vite or a similar bundler to package your JS/TS code.
  4. Load: In Logseq, go to 
    Settings -> Plugins -> Developer Mode
    , then 
    Load unpacked plugin
    and select your plugin directory.

Common Workflows

1. Registering Commands

Use 

logseq.Editor.registerSlashCommand
or 
logseq.App.registerCommandPalette
.

2. Interacting with Content

  • Read: 
    logseq.Editor.getCurrentPageBlocksTree()
  • Write: 
    logseq.Editor.insertBlock(parentBlockId, content)
  • Query: 
    logseq.DB.datascriptQuery(query)

3. UI and Theming

  • UI: Use 
    logseq.provideUI
    to inject HTML or 
    logseq.showMainUI
    to show a full-screen app.
  • Theming: Use Logseq CSS variables (e.g., 
    --ls-primary-background-color
    ) for consistency.

Resources