Rapid TV-app development with new Lightning UI Components

5 min readMar 16, 2023

Time is everything in today’s day and age. Whether it’s time for development, or a quick time to market... being able to deliver fast is key in the world of OTT. Luckily, that’s exactly where Lightning’s new UI Components come into play! Let’s take a look at what they are, and how they can help us deliver great Lighting apps.

What are Lightning UI Components

Lightning in itself is, as you know, a ‘simple’ framework that doesn’t offer too many components out of the box. While it does come with a lot of the building blocks you need for your tv-app, many of the components, like an easy-to-use carousel, grid, keyboard and others — are simply not available from the core. Enter Lightning UI Components! With this separate package you get access to a bunch of components that make your development a lot easier, and above all, a lot quicker.

Now, this isn’t the first release of this components package. It is however a major upgrade over the previous version. And with this package, most of the work you would previously have to do yourself is now taken care of. In this release, you can find carousels (or rows), grids, keyboards, focus management, lists, tabs and a whole lot more.

For reference, the Lightning UI Components package is open-source and available through Github: https://github.com/rdkcentral/Lightning-UI-Components

Theming options

Arguably one of the most powerful parts of these components is the fact that you can theme and adjust them very easily. Of course, you don’t want your app to look like all the others, and you don’t have to either! Each of the components comes with a basic theme that you can adjust to your liking.

The major benefit of allowing theming is the ability to build a white-label app. Given that you can configure theming based on your needs, you can easily use that white-label app for any of your applications, simply adjusting the theme as you go. Reusing code was never this easy!

There are a bunch of theming options available, for which I’d recommend you check out the official documentation: https://rdkcentral.github.io/Lightning-UI-Components/?path=/story/docs-theming-overview--page

Trying out the components

Interested in actually seeing the components in action? The folks over at Comcast have got you covered! They’ve made all of the components, including theming options, available through Storybook. This makes it incredibly easy to play with the components and see their capabilities, without having to write any code.

You can access the Storybook here: https://rdkcentral.github.io/Lightning-UI-Components/

Quickstart with Lightning UI Components

You’ve seen the components, and you’ve played around with them in the Storybook. Now it’s time for the next step, actually integrating some of the components in your app! I’m assuming here you’ve already worked with Lightning before. If you have not, I would recommend starting with this introduction to Lightning, before continuing here.

Step 1: Installation

We’ll start by installing the package and setting it up for use. Run the following command in the folder you have your Lightning project:

npm install --save @lightningjs/ui-components

Funny enough, in most cases, that’s all you need! If you’ve just scaffolded your project, you can now start using the new UI components. There are some additional steps required if you have an older project using wpe-lightning, for which you can use these instructions.

Step 2: Using components

Honestly another simple step, as with most cases all you have to do is import and then use the components! Say you want to use a button, we’ll first import it into our project:

import { Button } from '@lightningjs/ui-components';

And then define it in our template:

static override _template () {
        return {
            Button: {
                type: Button,
                title: 'Test'
            }
        }
    }

In this case, I’ve only defined a title, ‘Test’, which changes the title in the button. There are a bunch of other options, like being able to add a checkbox before or after the title, an option for icons and much more. For all of the configurable options, I’d recommend reviewing the official documentation.

Step 3: Changing the theme of a component

I can imagine that the button isn’t exactly how you imagined it to be in your project. So let’s change that to a style we want, maybe the style of Netflix? For this we’ll use the so-called theme context, which we can use to update the theme for our button:

import {Button, context} from "@lightningjs/ui-components";

override _init() {
        context.updateTheme({
            componentConfig: {
                Button: {
                    style: {
                        backgroundColor: '#E50914'
                    }
                }
            }
        });
    }

As you can see in the example, we’ve updated the backgroundColor property of our Button to be a nice Netflix-red. The same can be used to change other values, like text colour and border radius. But you’re already off to the races, with such a simple setup!

Next steps

As you can imagine, I’ve only scratched the surface of the options made available with these new Lightning UI Components. The amount of options from the various components is very extensive and should cover your UI needs 9 out of 10 times more than fine. So what I’d recommend is simply getting started! You’ll have to keep the documentation in hand for the configurations, but it’s very easy to get started with building up your UI. It makes your life as a developer a whole lot easier. Lightning in itself is a great SmartTV framework, and with the release of these UI components, it makes the framework a whole lot easier to use.

Is that all you’ll need for a SmartTV app? Well... it’s a great start! You can build the majority of UI features more than fine. You will however still, for example, need a video player, build out your backend integrations, and of course, test if everything works on every TV. For the video player, I’d recommend starting out with this blog about open-source video players, it’s a great start with any information you might need. For everything else, also with using Lightning, happy to help! You can reach me through matthijs.langendijk@wearetriple.com, or through my LinkedIn.