Share
Explore

icon picker
Itsy Documentation

Web Apps in Coda
Bill French
IMPORTANT UPDATE: Itsy’s technical approach caused the Codans to recognize a potential security risk and has since remove the ability of the
temporary blob storage
⁠
from hosting content embedded in documents. As such, Itsy() no longer works as expected. However, I will leave this as an interesting legacy Pack with source for no other reason that to demonstrate how to save content into the temporary blob storage.
Read on if you want to see some cool stuff that will never work. Itsy() has bitsy the dust.
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, 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.

Source Code Openly Available

Itsy() is one of those Packs that should be openly available to all Makers to do as they please to enhance and explore new possibilities. The source code is amazingly simple; just another validation that the Codans really understood agile architecture.
If there was a way to sell this in the Pack in the Gallery, I would have charged 299 [us] cents for it. Even so, there are some very clever Makers in learning mode who deserve access to this without cost. Certainly, I believe there is a horizon of opportunities to build more advanced applications based on this work. I’m happy to take your money but I’m hopeful this inspires other Makers beyond imagination.
⁠
Pay If You Like
⁠
⁠
⁠
Pay What You Like
⁠
⁠

A Challenge Using Embed()

There are two actually -
HTML and web app content that you want to blend into your Coda solution must be hosted somewhere, and;
Content hosted on other domains create a little security friction that isn’t ideal for user experiences (you have to authorize embedded apps to play inside your Coda documents).
There are many clever approaches that have been explored; this one by
Xyzor_Max
⁠
use Github to render the content reliably.
⁠
Render HTML Document (HTML + CSS + JavaScript) in Coda (no Pack)
⁠
⁠
Itsy is 100% self contained in the Coda document environment because its temporary storage acts as a proxy server for your own HTML, CSS, and Javascript code.
You can use Itsy inside Coda tables, formulas, and all the great actions and automations to generate HTML; Itsy will render with the Embed() formula anywhere and everywhere. In a Coda document, or in a table cell - Itsy just works everywhere and avoids the need for external servers while sidestepping the delicate cross-domain integration issues that come from integrating externally-produced HTML code.
Itsy components can be constructed with HTML, CSS, and Javascript. Itsy components can also be used for just about anything you can imagine. In the true spirit of typical development tools, the expected “Hello World!” app is the most fundamental way to convey the simplicity of Itsy. And I was extremely delighted to try this example from
Xyzor_Max
⁠
to see if Coda itself could serve this dynamic app from its temporary storage layer.
You can actually use this app. Try it! →

⁠
⁠
⁠

Eliminate Embed?

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 includes ItsyPlus(), a version of the original Itsy() formula that simplifies the integration of web app code while adding a far easier sizing experience.
Click to Enlarge →

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(<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.

Expand Embedding Possibilities

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. This capability is possible with any web apps that use script libraries; this Lottie File demonstration is just an example of this ability.
Click to Enlarge →
<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>
If you remove the word “controls” from the code for this Lottie file, the animation control bar vanishes making this into a simple clean animation. If you change the speed value to 2, it accelerates the animation.
This also makes it possible to control the embedded object through user controls.
Speed:
1
⁠
Controls:
controls
⁠
⁠
Player Embedding Example →

Dynamic Example

This late-binding approach comes in handy when you have a KPI widget that you want to populate with other Coda data. For example, here’s a sales input field -
My Sales:
$25,000
⁠
⁠
Dynamic Embedding Example →




⁠
image.png
⁠
⁠







⁠
image.png
⁠
⁠
Actual Live Lottie File
⁠
⁠
⁠
⁠
⁠
⁠

Basic HTML and CSS

This HTML code block will run in Itsy with the formula shown here. Pass to the Embed() formula the itsy() function containing the HTML code. Itsy can also get that code from any reference in the Coda document.
Click to Enlarge →

<h1 style='color:#D915A8; height:32px;'>Hello World!</h1>
<p style='font-style:italic; font-size:120%;'>Itsy is so simple to use.</p>
HTML by Value
⁠
image.png
⁠
⁠
HTML by Reference
⁠
image.png
⁠
⁠
⁠
⁠
⁠

Imported Styles and Libraries

How about a reusable and deeply styled card with links?
The code for this example is a little more complex and leans on an imported stylesheet to demonstrate more web-serving capabilities.
Click to Enlarge →
⁠
⁠
⁠
⁠
image.png
⁠
⁠

Itsy’s are Reusable Too!

Like any named objects in Coda, Itsy components are reusable. They can be defined in a separate page or even in a data table and referenced wherever they may be needed. Here we use the original Hello World Itsy defined above.
⁠
[ ]
⁠
⁠
This makes it possible to change the original Itsy and propagate changes to all references in your document.

⁠
image.png
⁠
⁠
⁠
image.png
⁠
⁠

Embed() Refresh Rate

If you’ve tried to use the Embed() formula, you know that the user experience can be a bit annoying from time-to-time. Packs have a number of levers we can use to improve the user experience from caching intervals, to manual synching options. I tend to believe that manual steps are not the favored approach; some users just don’t want to be bothered, and the remaining are apprehensive about clicking buttons that tend to evoke some degree of technical underpinning.
Ideally, these itsy components should be a fire-and-forget proposition. Craft the code, set the formula, and never worry about it again.
Itsy uses Coda’s internal temporary file system to host your code. As such, URLs to these assets expire. To overcome this, we can adjust the cache expiration, but that would probably cause Coda to ignore excessively long cache settings.
To avoid this possible outcome (which is an Embed() referencing a “signed” URL that has expired), Itsy uses a number of powerful Coda features that the designers thought carefully to include.
Example Embed() Cache Error Message
⁠
image.png
⁠
⁠

Disabled Cache in the Pack

The Itsy Pack has a disabled cache. This is not advised for all packs, but I can square this setting with a simple architectural explanation.
Itsy does one thing - it takes your web app code, instantiates it as a web page, and then provides a signed URL representing that page which it then returns to the Embed() formula. This is an extremely light-weight and efficient process. Refreshing these temporary file references seems like a reasonable step given that it is better to refresh often than to set the cache higher than the typically time frame a document might be open.

Forcing Itsy Pack Refresh

Packs can always be refreshed manually, but you can also set an optional second parameter to do this perhaps every minute. By passing the formula Minute(Now()), the Pack will re-establish the latest signed URL keeping the rendered HTML component always fresh.
I suspect some clever Makers could think of ways to make this refresh every 10 minutes or every hour.
I’ve used Itsy in many cases without this additional parameter and I think it depends on the general use case of a Coda document.
Example Forced Refresh
Embed(itsy("<h1>Hello World!</h1>", Minute(Now())), 240, 110, true)
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.