A New Developer Experience for our Live Apps Community

By Niccolò Zapponi

We have dramatically improved our developer experience for building and releasing live apps

If you are new to live apps, they are new components developers can build to integrate Quip with third party services, and to add new types of content to Quip documents. Live apps are built as self-contained web apps using the React framework, plus our very own Live Apps API to sprinkle some Quip magic all over the new component.

In the past, publishing and releasing live apps was not the easiest process to follow. It was a manual process involving running commands on the developer’s machine, manually uploading a bundle to Quip Developer Console, and manually releasing the live app to Quip users at a company.

First and foremost, we completely reimagined the tooling a developer needs to publish a live app: now, we provide developers with a friendly, all-encompassing command line interface tool, called quip-cli.

With quip-cli, developers can initialize new projects, build them, test them, publish them to Quip, and release updates to users, all with just a few commands. Plus, it works great on Windows too.

This not only makes it easier for developers to build, publish and release live apps, but it also allows to embed the live app testing, publishing and releasing process into existing CI/CD pipelines, and automate the release of live apps using tools like GitHub Actions and Jenkins. No more manual uploads and clicks! 🎉

We decided to freshen up our live app templates!

We have also updated and improved our boilerplate live apps: now, whenever you run quip-cli init, you’ll be served with a modern, lightweight and powerful live app template, supporting TypeScript as well as unit testing. Other updated examples include our official GitHub repository, now including OAuth 2.0 integrations with Salesforce, embedding the Salesforce Lightning Design System into a live app, and more.

Dark mode support across Quip

Your live app can – and should – take advantage our new dark mode support! Adding support to dark mode in your live app is easy: first off, add "use_color_theme": true to your manifest.json. Next, we added a number of CSS variables you can access within the live app environment: --quipBackground, --quipSecondaryBackground, --quipBackgroundInverse, --quipUserText(Primary/Secondary), --quipUiText(Primary/Secondary), and --quip(Red/Blue/Orange/Violet/Green/Yellow). These adapt to light and dark mode. To use them, simply add them into a CSS rgb function, for example: rgb(var(--quipBackground)). Your users will thank you.

Updating a live app’s data model

We have made updating live apps simple and easy. In the past, if you updated the data type of one of your live app’s Quip record’s properties, existing live app instances would crash. Now, thanks to migrations, you can provide migration scripts as part of your live app, which allows Quip to know how your app’s data model has changed which ensures a smooth experience for users.

We hope you enjoy these updates. There’s a lot more to come, in the meantime, if you need any support or have any questions, feel free to reach our on the Salesforce Stack Exchange!

Until next time!