Enhancement: Custom HTML rendering on the card view #403

New Issue

2026-10-05T02:45:16+02:00

adam commented

2026-10-05 02:45:16 +02:00

Allow custom HTML to be rendered on the card view. This allows authors to extend their dashboards/cards experience.

Allow custom HTML to be rendered on the card view. This allows authors to extend their dashboards/cards experience.

adam closed this issue

2026-10-05 02:45:16 +02:00

adam commented

2026-10-05 02:45:17 +02:00

I started using the https://visitorbadge.io service on my blog to get simple visitor stats per page. That gave me the idea to have a custom renderer that allows me to quickly drop some HTML per card to check these stats on the card/dashboard.

The outcome of this looks as follows:

This is not yet implemented; just a POC on my end for now to check the possibilities and what the best way would be to get the HTML on the card view.

I started using the https://visitorbadge.io service on my blog to get simple visitor stats per page. That gave me the idea to have a custom renderer that allows me to quickly drop some HTML per card to check these stats on the card/dashboard. The outcome of this looks as follows: ![image](https://user-images.githubusercontent.com/2900833/221244056-f89243d6-c87b-4d61-b633-6d23ce911eea.png) This is not yet implemented; just a POC on my end for now to check the possibilities and what the best way would be to get the HTML on the card view.

adam commented

2026-10-05 02:45:18 +02:00

Option 1

~~Reference is like a script, which will be invoked when the card renders; you can use node/bash/... to execute, all you need to return is the HTML string.~~

Note

: ~~This would work similarly like custom actions and post scripts.~~

Update

It will become option 2. The reason for this is that it is more powerful to create dynamic components and generates less overhead.

### ~Option 1~ ~Reference is like a script, which will be invoked when the card renders; you can use node/bash/... to execute, all you need to return is the HTML string.~ > **Note**: ~This would work similarly like custom actions and post scripts.~ ### Update It will become **option 2**. The reason for this is that it is more powerful to create dynamic components and generates less overhead.

adam commented

2026-10-05 02:45:19 +02:00

Option 2

Ability to reference a JS file that provides a function like getCardHtml, this will be called when the card gets rendered.

Example:

fmExternal = window.fmExternal || {};

fmExternal.getCardHtml = function (filePath, data) {
  console.log('getCardHtml', filePath, data)
  if (data && data.slug) {
    return `<div style="margin-top:0.5rem">html to render</div>`
  }
  return '';
}

Note

: with this kind of approach, we might be able to get more functionality and extensibility points in and it would also fit in the marketplace idea. It also has less overhead, as there is no external script execution required.

## Option 2 Ability to reference a JS file that provides a function like `getCardHtml`, this will be called when the card gets rendered. Example: ```js fmExternal = window.fmExternal || {}; fmExternal.getCardHtml = function (filePath, data) { console.log('getCardHtml', filePath, data) if (data && data.slug) { return `<div style="margin-top:0.5rem">html to render</div>` } return ''; } ``` > **Note**: with this kind of approach, we might be able to get more functionality and extensibility points in and it would also fit in the marketplace idea. It also has less overhead, as there is no external script execution required.

adam commented

2026-10-05 02:45:20 +02:00

Investigating option 2, and must say that this has a lot of potential.

Here is an example of how it can be used with, for instance Handlebars

import handlebars from 'https://cdn.skypack.dev/handlebars';

const getHtml = (data) => {
  const source = `
  <div style="margin-top: .5em; font-style: italic;">
    {{title}}
  </div>
  `;

  const template = handlebars.compile(source);
  return template(data);
}

window.fmExternal = window.fmExternal || {};

fmExternal.getCardHtml = async (filePath, data) => {
  return getHtml(data);
}

Investigating option 2, and must say that this has a lot of potential. Here is an example of how it can be used with, for instance Handlebars ```js import handlebars from 'https://cdn.skypack.dev/handlebars'; const getHtml = (data) => { const source = ` <div style="margin-top: .5em; font-style: italic;"> {{title}} </div> `; const template = handlebars.compile(source); return template(data); } window.fmExternal = window.fmExternal || {}; fmExternal.getCardHtml = async (filePath, data) => { return getHtml(data); } ```

adam commented

2026-10-05 02:45:20 +02:00

Question 1

If we would bring this functionality, where would you like to add your HTML?

Thinking of the following zones:

Replace the card header/image
Add a card footer

Feel free to suggest other zones to which you want to add your HTML.

## Question 1 If we would bring this functionality, where would you like to add your HTML? Thinking of the following zones: - Replace the card header/image - Add a card footer Feel free to suggest other zones to which you want to add your HTML.

adam commented

2026-10-05 02:45:21 +02:00

Registering your extensibility script(s)

"frontMatter.extensibility.scripts": [
  "[[workspace]]/external.js"
],

Registering your extensibility script(s) ```json "frontMatter.extensibility.scripts": [ "[[workspace]]/external.js" ], ```

adam commented

2026-10-05 02:45:22 +02:00

It is now available in the latest beta, be sure to enable the experimental feature setting: "frontMatter.experimental": true.

Register your script

Add the frontMatter.extensibility.scripts setting, with the path to your script. You can use an external URL (https only), or a file reference within your project. You can use the [[workspace]] placeholder.

The script

All you need to do for the script is register the window.fmExternal.getCardFooter method. Example:

window.fmExternal = window.fmExternal || {};

window.fmExternal.getCardFooter = async (filePath, data) => {
  return `<span>This is the HTML to render</span>`
}

It is now available in the latest beta, be sure to enable the experimental feature setting: `"frontMatter.experimental": true`. ### Register your script Add the `frontMatter.extensibility.scripts` setting, with the path to your script. You can use an external URL (https only), or a file reference within your project. You can use the `[[workspace]]` placeholder. ## The script All you need to do for the script is register the `window.fmExternal.getCardFooter` method. Example: ```js window.fmExternal = window.fmExternal || {}; window.fmExternal.getCardFooter = async (filePath, data) => { return `<span>This is the HTML to render</span>` } ```

adam commented

2026-10-05 02:45:22 +02:00

I've just published a new extensibility dependency, which makes registration easier.

Your script its content looks as follows:

import { registerCardFooter } from "https://cdn.skypack.dev/@frontmatter/extensibility";

registerCardFooter(async (filePath, data) => {
  return `<span>Your HTML</span>`;
});

I've just published a new extensibility dependency, which makes registration easier. Your script its content looks as follows: ```js import { registerCardFooter } from "https://cdn.skypack.dev/@frontmatter/extensibility"; registerCardFooter(async (filePath, data) => { return `<span>Your HTML</span>`; }); ```

adam commented

2026-10-05 02:45:23 +02:00

Testing a bit more with lit webcomponents

https://user-images.githubusercontent.com/2900833/221435369-ae65d592-eb86-4eac-a538-e7c63826e4e2.mov

The code

import {
  registerCardFooter
} from "https://cdn.skypack.dev/@frontmatter/extensibility";

import {html, css, LitElement} from 'https://cdn.skypack.dev/lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: #44FFD2 }`;

  static properties = {
    count: {type: Number},
  };

  constructor() {
    super();
    this.count = 0;
  }

  _increment(e) {
    this.count++;
  }

  render() {
    return html`
      <p><button @click="${this._increment}">Click Me!</button></p>
      <p>You've clicked me: ${this.count}!</p>
    `;
  }
}
customElements.define('simple-counter', SimpleGreeting);

registerCardFooter(async (filePath, data) => {
  const slug = encodeURIComponent(data.slug);
  return `
    <simple-counter></simple-counter>
  `;
});

I think this has the potential to allow you to create custom field renderers as well.

Testing a bit more with [lit webcomponents](https://lit.dev/) https://user-images.githubusercontent.com/2900833/221435369-ae65d592-eb86-4eac-a538-e7c63826e4e2.mov **The code** ```js import { registerCardFooter } from "https://cdn.skypack.dev/@frontmatter/extensibility"; import {html, css, LitElement} from 'https://cdn.skypack.dev/lit'; export class SimpleGreeting extends LitElement { static styles = css`p { color: #44FFD2 }`; static properties = { count: {type: Number}, }; constructor() { super(); this.count = 0; } _increment(e) { this.count++; } render() { return html` <p><button @click="${this._increment}">Click Me!</button></p> <p>You've clicked me: ${this.count}!</p> `; } } customElements.define('simple-counter', SimpleGreeting); registerCardFooter(async (filePath, data) => { const slug = encodeURIComponent(data.slug); return ` <simple-counter></simple-counter> `; }); ``` I think this has the potential to allow you to create custom field renderers as well.

adam commented

2026-10-05 02:45:24 +02:00

Another place could be a custom view panel.

Another place could be a custom view panel. ![image](https://user-images.githubusercontent.com/2900833/221522423-dd0b2b69-e5c6-4d99-b2ff-d48cfc3a1138.png)

adam commented

2026-10-05 02:45:25 +02:00

💥 CUSTOM FIELDS 💥

https://user-images.githubusercontent.com/2900833/221549235-221f45f5-005e-4365-bbd0-0941d51c1aee.mov

💥 CUSTOM FIELDS 💥 https://user-images.githubusercontent.com/2900833/221549235-221f45f5-005e-4365-bbd0-0941d51c1aee.mov

adam commented

2026-10-05 02:45:25 +02:00

Examples have been added here: https://github.com/FrontMatter/extensibility

Examples have been added here: https://github.com/FrontMatter/extensibility

adam commented

2026-10-05 02:45:26 +02:00

With the enableDevelopmentMode method from the extensibility dependency, you can turn on the development mode.

This allows you to quickly reload the webview without the need to reload vscode or close and open the dashboard again and again.

With the `enableDevelopmentMode` method from the extensibility dependency, you can turn on the development mode. This allows you to quickly reload the webview without the need to reload vscode or close and open the dashboard again and again. ![image](https://user-images.githubusercontent.com/2900833/221843513-f6b8fac1-17af-4464-bcc9-515c6e60ade0.png)

Sign in to join this conversation.

main

beta

dependabot/npm_and_yarn/js-yaml-4.3.1

dependabot/npm_and_yarn/multi-7958ac4c45

dependabot/npm_and_yarn/postcss-8.5.25

dependabot/npm_and_yarn/multi-670d462a53

dependabot/npm_and_yarn/http-proxy-middleware-2.0.10

dependabot/npm_and_yarn/shell-quote-1.10.0

dependabot/npm_and_yarn/websocket-driver-0.7.5

dependabot/npm_and_yarn/multi-6aaed2ab8e

copilot/validate-issue-1043

dependabot/npm_and_yarn/multi-84120a5570

dependabot/npm_and_yarn/launch-editor-2.14.1

dependabot/npm_and_yarn/multi-9dd3b9b346

estruyf/smart-file-rename

copilot/fix-unwanted-auto-update-publish-date

copilot/fix-content-view-sorting-issue

copilot/fix-virtual-workspace-folder-selection

copilot/fix-937

copilot/fix-965

copilot/fix-958

copilot/fix-950

copilot/fix-932

copilot-integration

hotfix/10.2.1

issue/816

issue/671

i18n

azure-translator

issue/747

issue/673

poc/content-tagging

combobox

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#403