Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

TVKit – TV Prototyping for Framer Classic

TVKit is a number of modules for TV prototyping that are highly customisable. It's designed with remote controls in mind but works just as well with keyboard input. I'd tried a number of libraries that attempted to guess your next move using some maths but I found some of these to be a little frustrating when creating custom components. For this I built Navigables which expects explicitly defined behaviour when defining interaction logic. Many of the following components are extended from the Navigables class.

Adding TVKit to your project

To add all the TVKit functionality to your project, just copy the modules folder into the root of your project folder and type the following at the top of your project.

TVKit = require "TVKit"


Navigables are essentially just a layer that require a highlight state and a removeHighlight state. In order to invoke these states, you'll also need a Highlight object. This can be viewed in the navigables-example.framer file.


Highlight must be defined after the rest of the Navigation logic as it attaches to the Navigables on creation. This can also be viewed in the navigables-example.framer file.


You can create as many menus as you like:

mainMenu = new Menu

Creating a menu in Framer

To define the contents of a menu, you can use:

itemsArray = ['Watch', 'Recordings', 'Explore','Settings']

contentArray = [watchCarousel, recordingsCarousel, exploreCarousel, settingsCarousel]

mainMenu = new Menu
    items: itemsArray
    menuContent: contentArray

Then, you can place the menu in 2 different states:


The number selects the index of the menu item so in this case MyTV would be selected.


Similarly with carousels...

{Carousel} = require 'Carousel'
featured = new Carousel

Creating a carousel in Framer


And finally with programme tiles –

{ProgrammeTile} = require 'ProgrammeTile'
heartbeat = new ProgrammeTile

Creating a Programme Tile in Framer

If you'd like to know more, give me a shout — @struanfraser


TVKit is a number of modules for TV prototyping that are highly customisable.



No releases published


No packages published