Creating HTML View Plugins (using AI)

• NotePlan 3.20 or later
• An AI coding assistant (recommended):
  • Cursor — AI-powered code editor (limited free, then $20/month)
  • Claude Code — Terminal-based AI coding assistant (included in Claude or $20/month)
  • Any desktop AI that can write JavaScript works. ChatGPT is fine, but involves more copy & paste. Cursor and Claude Code offer the smoothest experience.

No JavaScript experience required — the AI will generate and update the code for you.

Step 1: Download the Plugin Template

Download the plugin template ZIP file and extract it.

The template includes:

• getting-started.md — basic setup instructions (you or your AI can read this)
• plugin.json — plugin metadata and configuration
• script.js — example plugin code
• API documentation — reference for the AI

Step 2: Install the Plugin

Move the extracted plugin folder into NotePlan’s Plugins directory and rename it.

1. Open NotePlan
2. Go to Settings → AI & Plugins
3. Click Open Plugins Folder
4. Copy np.myplugin into the Plugins folder
5. Rename it, for example to em.LinearCalendar (using your initials is recommended)

Step 3: Set Up Your First HTML View Plugin

1. Open your renamed plugin folder in your AI tool:
   1. Cursor: Click Open Folder. Since the Plugins folder is very deep in the system, the easiest way is to drag & drop your renamed plugin folder directly into the folder picker dialog.
   2. Claude Code: Open Terminal, type cd (note the space after cd), then drag your plugin folder into the Terminal window. Press Enter, then run claude.
2. Ask the AI to set up an HTML View plugin.
   Be explicit that this plugin should open a visible HTML view in the main editor area, and that a command is needed to launch it.

You can copy & paste the following prompt and just fill in the parts marked in  **double asterisks**:

I want to create a NotePlan plugin using the provided template and API files.

Plugin name: **YOUR_PLUGIN_NAME**
Plugin description: **SHORT DESCRIPTION OF WHAT THE PLUGIN DOES**

Please set this up as an HTML View plugin that:
- Opens a visible HTML view in the main NotePlan editor area
- Adds one clear command to launch this HTML view (like "open")
- Updates plugin.json and script.js with a suitable name, description, command structure

Context:
- Read the file getting-started.md to learn about NotePlan plugins
- Find in this project a template plugin.json and script.js file to modify that contains examples you can read and replace
- Read the included API documentation files like HTMLView.md, NotePlan.md, etc.

Step 4: Launch Your Plugin

In NotePlan, press CMD + J, then type /. You can either enter the command name directly, or type your plugin name to see all available commands.

A plugin can expose multiple commands. One of them should launch the HTML view. If you’re unsure which command does this, ask your AI or check the command names shown in the CMD+J menu. You can also type the name of your plugin after the slash to see all commands.

Once launched, your plugin should appear in the left sidebar and open in the main editor.

To iterate, describe changes to the AI, let it update the code, then click the Reload button next to the plugin title to instantly see your updates.