Hi everyone,
I’ve built some more custom widgets. This time: the Playground!
What does this do? Well, it’s more of a glorified HTML viewer. You give it some HTML and, pointedly, Javascript, and it’ll run and display it. But there’s more:
- Auto-reload on changes
- Makes Grist’s theming CSS variables available to hosted Javascript code
- You can define a HTML/JS “prelude”, i.e. code that always gets prepended to whatever else the widget is currently showing.
- Playground saves its own internal config to the linked Grist table. This way, the widget options (i.e. what you get when you click the three dots, then “Open Configuration”) can be used by the hosted code instead. This is incredibly useful for developing custom widgets, and is something that @berhalak’s otherwise excellent custom widget builder doesn’t do.
Take a look:
- Widget source
- Widget in action
- URL to load it into your document:
https://tomnitschke.github.io/gristwidgets/playground
I hope this proves as useful to you as it’s been to me. Pair it up with the Monaco Editor for a truly fluent widget-building experience!