Template requirements checklist

Template uses the @withkoji/vcc package to expose the necessary VCC controls.

Users can create a remix in one minute or less.

Template shows live updates when values in VCCs are changed.

VCCs specify human-readable names and clear descriptions for the expected input, including any constraints (for example, character limits on text inputs).

Template displays VCCs only for values that are used in the template experience.

Template provides VCCs for values that users are most likely to customize. It does not allow customization of elements that a developer should define (for example, border width for pictures, speed of game actions).

Template uses common VCCs and provides choices that improve remix efficiency, where possible. For example, it uses a range VCC to specify font size, because it’s easier to use and can enforce sensible minimum and maximum values. It uses a select VCC instead of a text VCC, where appropriate, because it’s easier to choose from a list of predefined options than to type a response.

Template uses nested VCCs (arrays and composed objects) only if necessary to enable effective customization. VCCs are not nested excessively and do not create a difficult or confusing remix experience.

During remix, template exposes editable items with standard styles (see UI Elements). It uses buttons to trigger VCCs only when an editable element cannot be indicated effectively with the standard styles (for example, to change the entire layout).

For text input, values are not case sensitive and whitespace is trimmed from the beginning and end of the input.

Template uses states to break up the remixing experience into manageable and logical steps, where appropriate.

Template preloads resources to ensure a smooth experience. For example, templates with multiple states load images in the background.

Frontend URL of published template was tested with Pingdom and has a performance grade of B or better. To access the frontend URL, go to the published template, inspect the element, and use the iframe source URL.

Template size (bundle and assets) is less than 2 MB.

Image assets and backgrounds are sized at the correct aspect ratio to avoid distortion. The standard portrait aspect ratio is 9:16 (for example, 1080x1920).

Template uses the Fastly API to automatically size image assets.

Template uses Fastly image optimization to reduce the image size wherever possible.

Template sets a default background color to handle images with transparent backgrounds.

Template was tested on iPhone 6S / 6S Plus (iOS 9.0.1) or newer. Works in mobile Safari and Chrome browsers.

Template was tested on Android Oreo 8.0 or newer. Works in Chrome and Firefox browsers.

Template was tested on desktop. Works in Chrome, Firefox, and Safari browsers.

Template is responsive; presents same experience on desktop and mobile devices.

Background and image sizes, aspect ratios, and crops are consistent across device sizes.

Template displays content correctly, regardless of device orientation. It does not rely on the deviceorientation event to enforce a specific orientation, which can fail for embedded content in iframes.

Template uses a library that provides cross-browser support for audio features, if applicable. For example, howler.js.

The FeedEvents and InstantRemixing entitlements are enabled.

Template uses FeedSdk from the @withkoji/vcc package and calls the load event to ensure it is preloaded correctly in the Koji feed.

If the template has auto-playing content or audio, it plays and pauses in response to feed events. To test feed events, append ?feedDebug=true to the URL, which loads the template in the feed 10 times.

If the default view does not represent the functionality well, template renders a custom preview page with a responsive, square aspect ratio when visited with a query parameter of koji-screenshot=1. Koji uses a screenshot of this page as the preview image when users share their posts on social media.

If the template uses gestures, the gestures are implemented to work correctly when the template is in focus in the feed. That is, the template actions take precedence over the feed actions.

Template is published with an appropriate name and description for better sharing and discoverability on the platform.

During remix, editable elements are indicated with a semi-transparent, white rectangle and a rotating dashed line. See example in this project.

On-screen instructions use the mobile-first variant (for example, “Tap” instead of “Click”).

UI elements support touch gestures.

Primary content fits on the screen without zooming or horizontal scrolling.

Tappable elements measure at least 44x44 points.

Text is large enough to be legible at default size (at least 11 points).

Font size for user input elements is at least 16 px to prevent unintended page zooming on iOS.

Text and background colors or images have sufficient contrast to make text legible (contrast ratio of 4.5:1 or higher, for default values).

Template meets the design-guidelines.html.

Template was tested with different images (portrait, landscape, small, large).

Template uses standard web fonts (fonts.google.com) with a default font that matches the use case. For examples, see the design-guidelines.html#_fonts_are_appropriate_and_convey_information.

Template uses the Koji standard loading indicator. See example in this package for React and this package for vanilla JavaScript.

When loading takes more than 2 seconds, loading indicator is displayed until all of the assets have loaded.

All content loads at the same time, providing a coordinated start for all images, sounds, and other content.

Template transitions gracefully from loading indicator to loaded content (for example, fade in from indicator to fully loaded image, rather than showing a black area and having the image flash in after it loads).