Grist Fiddle

How to use this editor

This editor allows you to write code for a custom widget and "install" it inside a Grist document.

There are two tabs: JavaScript and HTML. The JavaScript tab is where you write code that interacts with the Grist plugin API, while the HTML tab is where you write the code that displays the results of the JavaScript code.

Modifying the Custom Widget

To open the editor, click the "Open configuration" button in the creator panel or clear saved filter settings for this tab.

Installing the Custom Widget

When you click the "Preview" button, the widget (both the JavaScript and HTML code) will be saved in the document's metadata, and the editor will then replace itself with the widget you have created.
After installing the widget, you need to press the "Save" button and save the configuration for a tab. It works similarly to saving filters in Grist.

Note: There is no autosave feature, so if you refresh the page without installing or saving, the widget content will be lost.

Note for Developers

The widget's state is persisted in the widget's metadata as JSON, with content encoded as two properties: _js and _html.


grist.setOptions({
  _installed: true, // Flat indicating that the widget is installed.
  _js: `...your js code....`,
  _html: `...your html code...`,
});

In the final widget, the _html field is inserted as is into an iframe, and the _js field is embedded within a script tag afterwards.

For more details on custom widget development, please refer to the official Grist documentation.