Itsy™ is a Coda Pack intended to help you render web apps as components in Coda. You craft the web code; Itsy renders it - plain and simple. No frills, just your HTML apps, widgets, snippets, and entire page documents if you like – all transformed in a manner that requires no servers and no special technical configuration.
This is a “beta” release intended to get some exercise and play time from developers who might find this useful. It is far from perfect or complete, but it is certainly useful for some of my work.
I asked, is this even possible? Turns out, it is — because Coda supports the ability for a Pack formula to emulate the properties of the Embed() formula. This is an important improvement because it makes use of Itsy so much simpler.
The Itsy pack now includes ItsyPlus(), a version of the original Itsy() formula that simplifies the integration of web app code while adding a far easier sizing experience.
With ItsyPlus …
- You don’t need to wrap it inside an Embed() formula; you simply call ItsyPlus with your your web code — i.e., itsyPlus(“your web code”).
- You don’t need to specify width and height; it supports dynamic sizing of the web app. Just click and drag.
- You can also embed web apps that depend on external media players like Lottie Files that support configurable parameters.
Ideally, we want to be able to create better usability and dynamic rendering of embedded web apps. If you attempt to embed this Lottie file in Coda using the embed URL they provide, it works, but it is static.
In contrast, ItsyPlus makes it possible to modify the Lottie parameters in the formula, thus changing how it is rendered. Itsy’s architecture accepts and exposes the Lottie file’s configuration parameters and these can be modified manually or dynamically from your Coda data.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <lottie-player src="https://assets5.lottiefiles.com/private_files/lf30_ps1145pz.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
This makes it fully dynamic -