Get AI summaries of any video or article — Sign up free
An Intro to Making Logseq Plugins ft. Sawhney thumbnail

An Intro to Making Logseq Plugins ft. Sawhney

Logseq·
5 min read

Based on Logseq's video on YouTube. If you like this content, support the original creators by watching, liking and subscribing to their content.

TL;DR

Start with open-source Logseq sample plugins and modify a close match instead of building from scratch.

Briefing

Logseq plugin development is presented as a practical, learn-by-doing path: start from existing open-source plugins, modify them until they work for a real need, and use quick feedback loops (console logs, small changes, rebuilds) to gradually build confidence. The session’s core message is that coding experience isn’t a prerequisite so much as a willingness to understand basic programming concepts (functions, variables, loops) and then iterate on working examples—especially because Logseq’s plugin ecosystem is open and accessible.

Ariane Sany (a Logseq power user) traces his entry into plugins to a gap he felt in earlier note-taking tools. After using Notion—particularly its templator blocks for repeated and dynamic content—he found Logseq covered “a ton of stuff” but lacked that specific templating workflow. ClojureScript, the language behind Logseq’s codebase, initially felt daunting, and bug-fixing attempts stalled. Plugins became the easier route to contribute features he wanted, while also helping others who might need similar functionality.

To learn plugin basics, he recommends using the Logseq sample plugins repository on GitHub as a primary reference. He chose a Pomodoro timer plugin as a close starting point for his own “template plugin” idea, then treated the code like pseudo-code—reading line by line, identifying what each part does, and experimenting by changing or deleting functions. He emphasizes that learning doesn’t require mastering everything upfront; it’s enough to know how code runs at a conceptual level, then translate that thinking into JavaScript. His approach also leans heavily on “scratch your own itch”: pick a feature you wish existed, then build it rather than waiting for the core team.

The session then moves into a live walkthrough of setup and execution. Ariane uses Visual Studio Code and a GitHub template for Logseq plugins, highlighting the three key files: index.html (entry point), index.js (plugin logic), and package.json (metadata and build configuration). Running yarn installs dependencies, and yarn build compiles the plugin into a dist folder that Logseq can load. In Logseq, developer mode must be enabled, then the plugin can be loaded via “Load unpack plugin.”

A simple starter plugin demonstrates the lifecycle: Logseq runs initialization code, registers commands (slash commands), and triggers a function that inserts blocks. From there, the tutorial builds a new plugin from scratch: a right-click context menu item that converts the selected block’s text to uppercase. The implementation proceeds in stages—first confirming the block UUID arrives correctly, then retrieving block data (noting that calls return Promises and require await), then computing uppercase text, and finally updating the block via the editor API. The walkthrough also surfaces best practices: rely on IDE autocomplete, consult Logseq’s plugin documentation and source code when docs are unclear, and use console logging after each step to verify behavior.

By the end, the conversation broadens into learning strategy and community resources. Ariane points to javascript.com for a fast JavaScript foundation, Stack Overflow for targeted questions, and the Odin Project for deeper practice. He also argues for documentation improvements—more plain-English explanations and concrete examples per API function—because newcomers can feel overwhelmed. The session closes with encouragement to use the Logseq Discord (especially plugin developer channels) and to propose a “pain point” plugin as homework, reinforcing that the fastest path to skill is building something useful, even if the first version is messy.

Cornell Notes

Ariane Sany’s Logseq plugin tutorial frames development as an iterative process: start with open-source sample plugins, modify them until they work, and use rapid feedback (console logs, small edits, rebuilds) to learn. He explains how to set up a plugin project using a GitHub template, Visual Studio Code, and the yarn workflow (yarn to fetch dependencies, yarn build to generate a dist folder). After loading the plugin in Logseq developer mode, he demonstrates the plugin lifecycle: initialization runs, commands/context menus get registered, and callbacks trigger block operations. The live build of an “uppercase block” context menu shows the practical steps—get the block UUID from the event, await block retrieval, transform content with toUpperCase, then update the block via the editor API.

Why does starting from an existing Logseq plugin matter more than writing from scratch?

Because Logseq plugins are open source, a working plugin provides the correct structure and API usage patterns. Ariane recommends the Logseq sample plugins repository on GitHub, then using a close match (he referenced a Pomodoro timer plugin) as a base. From there, he deletes non-essential functions and makes incremental changes, treating the code like pseudo-code—identifying what each line does—until the behavior matches the new feature idea.

What are the three essential files in a Logseq plugin template, and what does each one do?

The template highlights three files: index.html (the entry point that calls into the plugin), index.js (the actual plugin logic), and package.json (metadata like name/version/description plus build scripts and dependency configuration). The tutorial focuses on editing package.json for naming and then working primarily in index.js.

What is the practical workflow to run and test changes while developing a plugin?

After editing code, the plugin must be recompiled with yarn build so Logseq can read the updated dist output. Then the plugin is reloaded in Logseq (developer mode must be enabled) using “Load unpack plugin” pointing at the plugin folder. Ariane also uses console.log to confirm each stage—first that the plugin loads, then that the correct command/context menu triggers, then that block data retrieval and updates behave as expected.

How does the “uppercase block” context menu plugin work at a high level?

When the user right-clicks and selects “make block uppercase,” the registered context menu callback receives an event object containing the block UUID (e.g., e.uuid). The plugin then awaits editor.getBlock to fetch the block, reads block.content, transforms it with JavaScript’s toUpperCase, and calls editor.updateBlock with the UUID and the new content string. The tutorial notes that getBlock returns a Promise, so await is required.

What should a beginner do when the documentation doesn’t clearly show an API method (like updating a block)?

Ariane suggests searching the Logseq codebase for the method name. In his walkthrough, he referenced a file in the main Logseq repository (lsplugin.ts) and used search (Command/Ctrl+F) for “update” to find the relevant editor API. This approach complements docs and IDE autocomplete when the documentation feels incomplete.

Which learning resources and tactics does Ariane recommend for picking up JavaScript enough to build plugins?

He points to javascript.com for a short, fast introduction to functions and calling them, Stack Overflow for specific function behavior questions, and the Odin Project for more structured practice. His learning tactic is to write pseudo-code for the desired feature, then translate it into JavaScript, testing each step with console logs and small changes rather than waiting to understand everything at once.

Review Questions

  1. What steps are required to load and run a newly built Logseq plugin locally, and where does yarn build fit in?
  2. In the uppercase context menu example, why is await necessary when retrieving a block, and what would likely happen if it were omitted?
  3. How would you use console.log to debug a plugin when you suspect the event object isn’t providing the expected block UUID?

Key Points

  1. 1

    Start with open-source Logseq sample plugins and modify a close match instead of building from scratch.

  2. 2

    Use pseudo-code to scope the plugin behavior, then implement in small steps with frequent rebuilds.

  3. 3

    Enable Logseq developer mode and load the compiled plugin from the plugin folder using “Load unpack plugin.”

  4. 4

    Treat API calls that return Promises as asynchronous—use await when fetching block data.

  5. 5

    Register UI entry points (slash commands or context menu items) through the editor API, then wire them to callback functions.

  6. 6

    Use Visual Studio Code autocomplete plus Logseq API docs and source-code search when documentation is unclear.

  7. 7

    Learn JavaScript fundamentals (functions, variables, loops) and rely on targeted resources like javascript.com and Stack Overflow to fill gaps quickly.

Highlights

The fastest way to learn plugin development is to take an existing open-source plugin, change one piece at a time, and verify behavior after each change with console logs.
The uppercase context menu walkthrough demonstrates the full loop: get block UUID from the event, await getBlock, transform block.content with toUpperCase, then call updateBlock.
yarn build is the key step that compiles code into a dist folder so Logseq can load the updated plugin.
When docs don’t show an API method clearly, searching the Logseq source code (e.g., for “update”) can reveal the exact function to use.

Topics

  • Logseq Plugins
  • JavaScript Basics
  • Plugin Setup
  • Context Menu
  • Editor API

Mentioned