You can create custom apps - called Mario apps - in Spaces, accessible from your apps library or importable into your Space via API. Mario apps allow you to extend the functionality of Spaces however you’d like, and provide unique personalized and / or collaborative experiences without the development hassle. Many of our existing apps, including our polls app, our YouTube player, and our timer, are built with this technology.

We achieve this by providing a client JS library - called Mario - that allows your app to interact with users inside a particular Space. We take care of all the state synchronization and storage for you, so you can focus on building the best user experience. All you’ll need to do is write your app and host it on an infrastructure of your choice.

Using our libraryCopied!

To get started, please review our example on Github (in particular, review App.tsx).

Once you’re ready to get started, simply run yarn add @pncl/mario or npm install @pncl/mario on your local app to install our client library.

Our library exposes the following functionality:

• The SpaceUsersInfo event, which provides the current spaceId of the Space where the app is embedded, the userId of the user using the app, as well as the userId , name, and profile picture of all the users in that Space.

• The Sync event, which emits the latest state of that app that has been synchronized with all users. We handle conflict resolution, and will automatically recover the apps state in cases of network disconnection. To ensure reliability, we strongly recommend that you use Typescript, and that you require that the state conforms to a specific type.

• Custom event listeners, which allows you to subscribe to events broadcasted to a particular channel id that you specify.

Testing your appCopied!

We only allow you to test unsecured localhost Mario apps on our staging server. When you’re ready, head to staging.pencilapp.com and create a Space.

To test your app locally, go to Apps > Import a Mario App and paste the link to your app (e.g., running on localhost). If you do not see this option, please contact Pencil Spaces support and we’d be glad to add you to our list of app developers.

After you import your app, you should be good-to-go! We generally recommend testing with our example app first, so you become familiar with how our client library works.

Publishing your appCopied!

When you’re ready to publish, please deploy your app on a hosting service of your choice. We recommend using a service like Firebase Hosting.

Send us your deployment link along with the information below. After we receive your submission, we’ll briefly review it for security reasons and add it to your App Library once approved.

• App name: The name of your app

• App subtitle: 5-8 word description of your app

• App icon: An svg or 100px ×100px png with your app’s logo

• Deployment URL: The link to your app deployment. We recommend providing staging and production links, so you can test your app in our production build prior to launch.

Once published, this app will appear in the “Your institution’s apps” section in your App Library. This app will only show in Spaces owned by your institution.

Additional dataCopied!

Additional data and events can be made available to you in the library on-request. Please contact Pencil Spaces support and we’d be happy to assist you.