See the Plugins page on the Thymer website for a general introduction to Thymer plugins. The plugins page includes screenshots and demo videos of the examples (which you'll find in the examples directory).

This repository contains a minimal starter kit showing how to develop, hot-reload, and debug a Thymer Plugin with Chrome DevTools Protocol (no local HTTPS server required).

thymer-plugin-dev
├─ plugin.js                 # your plugin code (edit this file)
├─ plugin.json               # your plugin conf (edit this file)
├─ dev.js                    # build & push script; run 'npm run dev'
├─ types.d.ts                # API Documentation
├── examples/                # Example plugins
│   ├── app-plugins/         # Global app plugin examples
│   └── collection-plugins/  # Collection plugin examples
└── dist/                    # Built plugin output

App plugins extend the entire Thymer application with global functionality, for example:

• Status bar items - Display information in the app's status bar
• Sidebar items - Add navigation items to the sidebar
• Command palette commands - Add custom commands
• Custom panels - Create new panel types
• Toaster notifications - Show user notifications

Collection plugins extend a specific note Collection, for example:

• Base view hooks - Overrides/render hooks for table, boards, gallery and calendar views
• Custom views - Create custom view types
• Custom properties - New data fields with custom rendering
• Navigation buttons - Collection-specific actions
• Formulas - Computed properties
• Filters and sorting - Custom data organization

This guide shows how to get started with plugin development using your favorite code IDE and Hot Reload in Thymer:

git clone https://github.com/thymerapp/thymer-plugin-sdk.git
cd thymer-plugin-sdk
npm install

chrome --remote-debugging-port=9222 --no-first-run https://myaccount.thymer.com

or on macOS:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir="/tmp/chrome-debug-profile" --no-first-run https://myaccount.thymer.com

Edge Chromium works too.

• Open Thymer running in your debugging Chrome Window from the step above.
• Press Cmd+P/Ctrl+P to bring up the Command Palette, select "Plugins".
• Find your Global/Collection Plugin. To get started with a quick test, click "Create Plugin" to create a test Global Plugin.
• In the Code Editor dialog, select the "Developer Tools" tab.
• Click "Enable Plugin Hot Reload"

npm run dev

or, with verbose output (shows the code being pushed):

npm run dev:verbose

Start developing your plugin in plugin.js and plugin.json.

If you've created a new Global Plugin in step 3 to give it a quick test, simply uncomment the export class Plugin extends AppPlugin example in plugin.js and save.

The development loop started in step 4 watches your plugin files for changes. When you save changes to plugin.js or plugin.json:

1. The code is bundled into dist/plugin.js with inline sourcemaps for debugging
2. The bundle is automatically pushed to Chrome via the debugger connection
3. Thymer detects the changes and hot-reloads your plugin with the updates

This allows you to rapidly iterate and test changes without saving to your workspace. Once you're satisfied with the changes, you can save them permanently.

Finished developing?

npm run build    # emits dist/plugin.js

Copy the contents of dist/plugin.js in your plugin's Edit Code > Custom Code dialog. Copy the contents of plugin.json in your plugin's Edit Code > Configuration dialog.

For Collection Plugins, the list of custom properties and views (their name, icon, types, order and other settings) can be found in plugin.json. Behavior for those properties and views (like render hooks, defining custom view types, writing formulas) can then be added in plugin.js.

Of course you can also simply write your JS and JSON directly int othe Edit Code dialog and skip all the steps above. That's typically what you want when making quick changes like adding a formula to one of your collection properties. For example, adding a Total column to your database table view which shows the value of Hours * Amount:

class Plugin extends CollectionPlugin {

   onLoad() {
     this.properties.formula("Total", ({record}) => {
         const quantity = record.number("Hours");
         const unitPrice = record.number("Amount");
         if (quantity == null || unitPrice == null) return null;
         return quantity * unitPrice;
     });
   }

}

When using the development environment as described in Quick Start, you can bundle small assets along by simply importing them:

This should work great for CSS, small images, and so on. As the plugins become part of your workspace data, we recommend hosting large assets externally.

• Your plugin code is stored in your Workspace data and needs to be downloaded, so make sure the asset bundle isn't too big.
• We use localStorage for Hot Reloading, which adds an additional size limit of a few MB.
• Consider using external URLs/fetch/import to import large dependencies or assets.
• If you're writing/pasting code directly into the Edit Code dialog in Thymer, make sure not to include and export or import keywords. They only work in the development set up and are removed by the build step.

You can find several examples of app plugins and collection plugins in the examples directory.

To test any of the examples, follow the Quick Start instructions above and copy its .js contents into plugin.js, and its .json contents into plugin.json.

Copy-pasting the examples directly into the Edit Code dialog in Thymer only works if they don't use any assets/imports, and the export keyword is removed. Otherwise you need to use the build step first as described in Quick Start step 6.

Review the types.d.ts file for complete API documentation. This should also provide autocomplete in most IDEs.

The Plugin SDK is currently in beta and actively being developed, breaking changes are very likely to happen.

We'd love to get your feedback and suggestions for improvements, please let us know what features you'd like to see or any problems you encounter.

Join the Thymer community to participate in discussions and get support.

Happy hacking! 🛠️