@lightningjs/blits 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## v1.3.0
+
+_19 aug 2024_
+
+- Fixed bug in for-loop when key is not a string but a number
+- Added `$shallow`-modifier to for-loop
+- Added several performance optimizations
+- Added support for dynamic arguments in object notation (i.e. `mount="{x: $x, y: $y}"`)
+
+## v1.2.0
+
+_5 aug 2024_
+
+- Added plugin system for Blits
+- Added Language plugin, modeled after L2-SDK Language plugin
+- Removed unused built-in Image component
+- Marked `this.trigger()`-method as deprecated in definition file
+- Removed double assignment of `this.node` during element creation
+
 ## v1.1.0
 
 _25 july 2024_

package/NOTICE

@@ -1,3 +1,12 @@
 This component contains software that is Copyright 2023 Comcast Cable Communications Management, LLC.
 The component is licensed to you under the Apache License, Version 2.0 (the "License").
 You may not use the component except in compliance with the License.
+
+The component may include material which is licensed under other licenses / copyrights as
+listed below. Your use of this material within the component is also subject to the terms and
+conditions of these licenses. The LICENSE file contains the text of all the licenses which apply
+within this component.
+
+This repository uses components from the Lightning-SDK. Any components from the Lightning-SDK are:
+Copyright (c) 2020 Metrological
+Licensed under the Apache License, Version 2.0

package/docs/_sidebar.md

@@ -24,3 +24,4 @@
   - [For loop](/built-in/for-loop.md)
 - Plugins
   - [Text-to-Speech / Announcer](/plugins/text-to-speech-announcer.md)
+  - [Language](/plugins/language.md)

package/docs/built-in/directives.md

@@ -1,10 +1,8 @@
-# Blits - Lightning 3 App Development Framework
-
-## Directives
+# Directives
 
 Blits comes with a few built-in attributes that tap into specific behaviour provided by the framework - also known as _directives_. Most of them can be used in the template on both Elements and Components.
 
-### Show-directive
+## Show-directive
 
 The `show` attribute allows you to conditionally show and hide Components and Elements.
 
@@ -17,7 +15,7 @@ When passed a _truthy_ value, such as `true` or `1`, the element will be made vi
 </Element>
 ```
 
-### Is-directive
+## Is-directive
 
 The `is` directive allows you to dynamically instantiate a Component based on a `state` variable or a passed `prop`.
 
@@ -39,7 +37,7 @@ export default Blits('DynamicComponents', {
 
 At the moment it's not possible to use the `is`-attribute as a _reactive_ attribute and have a component change type after instantiation.
 
-### Ref-attribute
+## Ref-attribute
 
 The declarative coding style that is promoted in Blits components, should generally remove the need to directly interact with individual Elements or Components in your template. However, in some cases you may need to reference them directly. For example, in order to delegate the focus.
 

package/docs/built-in/for-loop.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## For loop
+# For loop
 
 The for loop is technically also a [directive](../directives.md), but such an important one that it deserves it's own section.
 
@@ -11,7 +9,7 @@ The for loop take an `Array` of data, loops over it and for each Array-item an E
 > Important: the for loop is a powerful and often used directive. Within Blits it's optimized to be as performant as possible. But if used incorrectly, it can be the cause of slow performance. So please read carefully through this entire section.
 
 
-### Basic syntax
+## Basic syntax
 
 The for-loop directive should be added as an attribute on the Element or Component that you want to repeat for each item in your Array. In the template syntax a `for ... in` construct is used. This ultimately transpiles down to a classic, optimized for loop.
 
@@ -33,7 +31,7 @@ export default Blits('ForLoop', {
 The example above will generate 3 _lime green_ elements, based on the array of `items` in the Component state. They will appear on top of each other though, since they have no `x` and `y` positioning (which default to 0).
 
 
-### Using the index
+## Using the index
 
 In order to fix the example above and make all 3 elements visible, we can use the `index` of the Array, to position each item correctly.
 
@@ -59,7 +57,7 @@ export default Blits('ForLoop', {
 You will now see that each Element is positioned next to each other, with a 50px space in between.
 
 
-### Using variables inside a for loop
+## Using variables inside a for loop
 
 When iterating over an Array in the for loop, you can reference the current Array item under the name specified in the for-in construct, prefixed with a `$`-sign. Besides this scoped Array item context, you _also_ have access to any `prop`, `state` or `computed` variable as you loop over an Array.
 
@@ -99,7 +97,7 @@ export default Blits('ForLoop', {
 
 This will generate 3 squares aligned next to each other, each with a differrent color and they will use the _alpha_ specific in the Component state.
 
-### The importance of using the key attribute
+## The importance of using the key attribute
 
 The examples above have demonstrated the basic usage of the for-loop. But they are all missing one _very important_ ingredient to make sure that for-loops that are subject to change, continue to perform well. Meet the `key`-attribute.
 
@@ -160,7 +158,7 @@ In the example above we have added the `key`-attribute in the template. Now when
 
 If we would ommit the `key`-attribute, then whenever we push a new item to the Array, the for-loop would dispose all the old Elements and create new instances for _each_ item in the array.
 
-### Referencing elements in the for loop
+## Referencing elements in the for loop
 
 When you specify a `for`-attribute on an Element or a Component, it will effectively create multiple Elements / Components depending
 on the length of the Array.

package/docs/components/component_state.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Component State
+# Component State
 
 In Blits, a component can be as simple as a template with fixed, hardcoded values. However, for dynamic behavior and logic, you'll often want to give your components an _internal state_.
 
@@ -36,13 +34,13 @@ export default Blits.Component('MyComponent', {
 })
 ```
 
-### Accessing State in Templates
+## Accessing State in Templates
 
 As explained in the [template section](../essentials/template_syntax.md), you can refer to state variables in a template by prefixing the state variable name with a _dollar sign_ (e.g., `$alpha`). Think of the `$`-sign as a reference to the `this`-scope of the component.
 
 For nested objects, you can use _dot notation_ (e.g., `$style.dimensions.w`).
 
-### Accessing State in Component Code
+## Accessing State in Component Code
 
 In your component's code, you can reference state variables directly within the `this`-scope. For instance, a state variable named `color` can be accessed (and modified) by referencing `this.color`.
 

package/docs/components/computed_properties.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Computed properties
+# Computed properties
 
 So far we've learned how to utilize a Component's [internal state](./component_state.md) and [props](./props.md) passed by a parent into a child component.
 
@@ -10,7 +8,7 @@ However, as these operations become more complex it's more clear and more mainta
 Computed properties are a powerful tool for enhancing the readability of your component code. By abstracting complex or frequently used calculations from your template into computed properties, you can make your code more concise and easier to understand.
 
 
-### Defining computed properties
+## Defining computed properties
 
 Within the `computed`-key of the Component configuration object, you can specify an object of `functions`. Each function name you define (`offset()` for example) becomes accessible as a _computed property_.
 
@@ -35,7 +33,7 @@ export default Blits.Component('MyComponent', {
 })
 ```
 
-### Reactivity
+## Reactivity
 
 Within a computed property, you can reference one or more state variables or props and _return_ a value based on calculations or logical operations.
 

package/docs/components/lifecycle_events.md

@@ -1,12 +1,10 @@
-# Blits - Lightning 3 App Development Framework
-
-## Hooking into Lifecycle Events
+# Hooking into Lifecycle Events
 
 Blits components follow a defined flow of lifecycle events. You can integrate specific logic into these events by specifying them in the `hooks` key of the Component configuration object.
 
 For each available lifecycle event, you can define a function with the same name as the event itself. This function will then execute each time the lifecycle event is triggered for your component's instance. It's essential to use a regular function instead of an arrow function if you intend to access the `this` scope of your component instance.
 
-### Lifecycle Events
+## Lifecycle Events
 
 The following lifecycle events are available in Blits components.
 

package/docs/components/methods.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Methods
+# Methods
 
 Within a Blits component, you have quite some freedom where to put specific logic.
 

package/docs/components/props.md

@@ -1,12 +1,10 @@
-# Blits - Lightning 3 App Development Framework
-
-## Props
+# Props
 
 Components in Blits have their own [internal state](./component_state.md) and logic, and as such a Component is self-contained. However, as each component is part of a larger App scope, they may need to display different behaviors or appearances based on the rest of the app.
 
 To achieve this, components can receive `props` from their parent component.
 
-### Defining and passing props
+## Defining and passing props
 
 In the Component configuration object, you can specify exactly which props a component accepts. These props are passed to the component via attributes in the parent component's template. Any attributes that are not explicitly defined as a prop will be ignored.
 
@@ -27,7 +25,7 @@ there is no need to specifically reference the `props`-key. Blits automatically
 
 Since props are used to pass information from a parent to a child, it's important not to attempt to _modify_ props inside your child component. If changes based on the prop from the parent are needed, you should probably use the prop in a so called [computed property](./computed_properties.md).
 
-### Advanced usage
+## Advanced usage
 
 For more advanced usage, you can define props using an array with an `object` for each prop, instead of just a string with the accepted name. Within each prop object, you can:
 

package/docs/components/user_input.md

@@ -1,13 +1,11 @@
-# Blits - Lightning 3 App Development Framework
-
-## Handling User Input
+# Handling User Input
 
 In order to allow users to interact with your app, you will want to capture and handle _user input_. If you are developing a TV based app this will
 often be key input via a remote control.
 
 Blits offers an intuitive and straightforward interface to handle key input in Components.
 
-### Focus
+## Focus
 
 Before diving into the specifics of key handling, it is important to understand the basic concept of _focus_.
 
@@ -17,7 +15,7 @@ The component that has focus, is the one that is responsible for handling the us
 
 For example, when a user clicks the _right_ or _left_ button while a _Poster Component_ has focus, it is that instance of the Poster Component that will _receive_ the first key press event.
 
-### Configuring Input Handling
+## Configuring Input Handling
 
 Within the Component configuration object, the `input` key is used to define how the component should react to specific key presses when it has focus. The `input` key should be an `object literal` of `functions` for each input event that the component wants to handle.
 
@@ -40,7 +38,7 @@ export default Blits.Component('MyComponent', {
 }
 ```
 
-### Catch-All Handling
+## Catch-All Handling
 
 To allow a focused component to respond to any key and act as a _catch-all_, you can add an `any()` function to the input object. As it receives the `InputEvent` object as the first argument, you can abstract the key press in there and handle (or ignore) it as you wish.
 
@@ -54,7 +52,7 @@ To allow a focused component to respond to any key and act as a _catch-all_, you
 }
 ```
 
-### Event Handling Chain
+## Event Handling Chain
 
 If the currently focused component does not handle a key press, Blits will traverse up the component hierarchy, checking for any _parent_ component that does have a function defined for that key press in the `input`-key. This input event handling chain continues until it reaches the root Application component.
 
@@ -75,7 +73,7 @@ When a component handles a key press by having a corresponding function specifie
 }
 ```
 
-### Custom Keycode mapping
+## Custom Keycode mapping
 
 Blits comes with a default keycode mapping. This mapping is a sensible default that works in your desktop browser and with most RDK based devices.
 

package/docs/components/utilities.md

@@ -1,4 +1,3 @@
-# Blits - Lightning 3 App Development Framework
 
-## Utilities
+# Utilities
 

package/docs/components/watchers.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Watchers
+# Watchers
 
 In some cases, you may want to execute specific actions whenever the value of a state variable, a prop, or a computed property changes. These actions could involve dispatching an event or updating another state variable.
 
@@ -8,7 +6,7 @@ You might be tempted to handle this functionality inside a computed property, bu
 
 Instead, Blits allows you to specify **watchers** to trigger functionality when certain variables change.
 
-### Using Watchers
+## Using Watchers
 
 Within the `watch` key of the _Component configuration object_, you can define an object of _watcher functions_.
 

package/docs/essentials/application_root.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Application root
+# Application root
 
 Every Blits App starts with a base Application component.
 

package/docs/essentials/components.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Components
+# Components
 
 Like any modern front-end framework, Blits is built around the concept of Components. Components allow you to split the UI of your App into
 reusable pieces of code and logic.
@@ -14,7 +12,7 @@ Components in Blits follow a clearly defined structure, which helps keep your co
 
 This universal structure is also valuable for creating drop-in components that can be easily shared across projects.
 
-### Creating a new Component
+## Creating a new Component
 
 Let's see how to create a new component and explore the basic anatomy of a component.
 

package/docs/essentials/displaying_images.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Displaying Images
+# Displaying Images
 
 Now that we've covered the basics of creating Elements, as well as styling and positioning them, it's time to move away from these boring rectangles and explore how you can incorporate _images_ into your App.
 
@@ -15,13 +13,13 @@ Remote images are also supported and can be linked directly (e.g., `http://mycdn
 <Element src="http://mycdn.com/artists/jimi_hendrix/woodstock.jpg" w="1920" h="1080" />
 ```
 
-### Sizing and Scaling
+## Sizing and Scaling
 
 Make sure to give your Element a width (`w` ) and a height (`h`) attribute. Images will _not_ be rendered if they don't have both attributes present. The Lightning renderer will scale the image to fit these exact dimensions
 
 For the best performance, it's important to keep your source images as small as possible. If you're displaying an image at `200px x 200px`, make sure the image is exactly that size or _smaller_. The latter option may lead to some quality loss, but can positively impact the overall performance of your App.
 
-### Colorization
+## Colorization
 
 You also have the option to _colorize_ an image on the fly. Just add a `color` attribute to the Element with a `src` attribute. You can use a single color, or apply a gradient.
 
@@ -36,7 +34,7 @@ By default, all Elements with a `src` attribute get a solid white background, wi
 />
 ```
 
-### Asynchronous Loading
+## Asynchronous Loading
 
 All images are loaded asynchronously (and can possibly fail to load), even those local to your App. Blits allows you to easily hook into the `loaded` and `error` events of image Elements.
 

package/docs/essentials/displaying_text.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Displaying Text
+# Displaying Text
 
 Besides displaying images, it is also very common to have _texts_ in an App.
 
@@ -17,7 +15,7 @@ Blits comes with a built-in `<Text>`-tag for displaying and styling texts in a s
 ```
 You can use the Text-tag anywhere in your template, without the need to explicitly import and register it in your Component.
 
-### Available attributes on the Text tag
+## Available attributes on the Text tag
 
 The Text-tag accepts the following attributes:
 
@@ -35,7 +33,7 @@ The Text-tag accepts the following attributes:
 - `textoverflow` - the suffix to be added when text is cropped due to bounds limits, defaults to `...`
 
 
-### SDF and Canvas2d
+## SDF and Canvas2d
 
 Compared to Lightning 2, texts have improved a lot in Lightning 3, thanks to the SDF (Signed Distance Field) Text renderer.
 
@@ -43,7 +41,7 @@ With the SDF text renderer, texts appear a lot _sharper_ on screen. The SDF tech
 
  In general, it's recommended to use the SDF text renderer, but Lightning 3 still has a Canvas2d text renderer as a backup, and you can use both text renderers within the same App.
 
-### Using custom fonts
+## Using custom fonts
 
 The `font`-attribute on the `<Text>`-tag is used to define which font family should be used for a certain piece of text.
 

package/docs/essentials/element_attributes.md

@@ -1,12 +1,10 @@
-# Blits - Lightning 3 App Development Framework
-
-## Supported Element attributes
+# Supported Element attributes
 
 The core building block of a Blits template is the `<Element>`-tag. The Element tag corresponds directly to a node in the Lightning 3 Renderer. You can style and position Elements via _attributes_, much like you would do in plain HTML.
 
 Blits Elements have a specific set of attributes that can be used. The available attributes are loosely modeled after the properties of a Lightning 3 renderer node. In certain cases, Blits provides more developer friendly names or accepts a wider range of values, and transparently takes care of the translation into L3 renderer instructions.
 
-### Positioning and Dimensions
+## Positioning and Dimensions
 
 In order to position and set the dimensions of an Element, the following attributes can be used.
 
@@ -25,7 +23,7 @@ All positioning and dimension related attributes, when not specified, will defau
 </Element>
 ```
 
-#### Using percentages
+### Using percentages
 
 Besides using values in pixels (i.e. `w="100" h="300"`), you can also specify _percentages_ for the positioning and dimensions attributes.
 
@@ -38,7 +36,7 @@ Besides using values in pixels (i.e. `w="100" h="300"`), you can also specify _p
 The percentage value specified for `w` and `x` will be calculated as the percentage of the _width_ (`w`) of the parent element.
 And the percentage specified for `h` and `y` will use the _height_ (`h`) of the parent element as the base of the percentage calculation.
 
-### Colors
+## Colors
 
 By default, Elements have a transparent background color. The `color` attribute can be used to give an Element a color.
 
@@ -66,7 +64,7 @@ _HSL and HSLA formats are planned to be added in the future._
 <Element w="200" h="200" color="skyblue" />
 ```
 
-#### Basic linear gradients
+### Basic linear gradients
 
 The color attribute can also be used to specify basic linear gradients.
 
@@ -81,7 +79,7 @@ Again, you can use "normal" notation for the colors (like hexadecimal or rgba) a
 <Element w="200" h="200" color="{bottom: 'black'}" />
 ```
 
-### Alpha and visibility
+## Alpha and visibility
 
 The opacity of an Element can be controlled by setting the `alpha` attribute. This attribute accepts a value between `0` (fully transparent) and `1` (completely visible).
 
@@ -93,7 +91,7 @@ The value of alpha is also applied recursively to the children of the Element th
   </Element>
 ```
 
-### Rotation and scaling
+## Rotation and scaling
 
 If you want to rotate an Element, you can use the `rotation` attribute. The rotation attribute in Blits accepts values in _degrees_.
 
@@ -121,7 +119,7 @@ Similar to rotation, scale is also applied recursively to children down the tree
 <Element w="200" h="200" color="#000" scale="{x: 1, y: 3.14}" />
 ```
 
-### Mounting point
+## Mounting point
 
 For advanced positioning, the `mount` attribute can come in handy. By default when you set the `x` and `y` position of an Element, the _top-left_ corner will be set to that position. But in some cases, you may want to align the position starting at a different corner, or even any arbitrary point in between.
 
@@ -139,7 +137,7 @@ In the case where the `x` and `y` values are the same (i.e. centering with `{x:
 <Element w="200" h="200" x="800" y="700" color="#333" mount="0.5" />
 ```
 
-### Pivot point
+## Pivot point
 
 The pivot point of an Element comes into play when it's rotated or scaled. The pivot point defaults to the _center_ of the Element, which means that when setting `rotation` it rotates around the middle. And when the Element is scaled it scales from the center out.
 
@@ -156,7 +154,7 @@ In the case where the `x` and `y` values are the same, you can also just supply
 <Element w="200" h="200" x="800" y="700" pivot="0.9" rotation="42" />
 ```
 
-### Clipping / overflow
+## Clipping / overflow
 
 By default contents inside an Element (i.e. child Elements) will overflow the boundaries of the parent, even when you give the parent Element fixed dimensions.
 

package/docs/essentials/template_syntax.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Template syntax
+# Template syntax
 
 Blits uses an easy-to-read _XML-style_ template syntax. The syntax is inspired by frameworks like VueJS, so if you are familiar with Vue, you will probably recognize certain concepts.
 
@@ -22,12 +20,12 @@ Now let's consider the following template example:
 </Element>
 ```
 
-### Hardcoded arguments
+## Hardcoded arguments
 
 In the template above, you'll observe certain arguments with hardcoded values (i.e. `w="100"` and `color="#0891b2"`).
 You can use hardcoded arguments to configure the parts of your template that you know will never change.
 
-### Dynamic arguments
+## Dynamic arguments
 
 Additionally, some arguments contain a value prefixed with a dollar sign (`$`). These are so called _dynamic_ arguments.
 
@@ -37,7 +35,7 @@ these arguments with dynamic values based on the initial state of your Component
 It's important to realize that dynamic arguments are only set _once_. Changing a value used in a dynamic argument, won't be reflected
 on screen. For that you will need to use _reactive_ arguments.
 
-### Reactive arguments
+## Reactive arguments
 
 If you look at the template example above you'll notice that certain arguments are prefixed with a colon sign (`:`). Prefixing an argument
 with a colon makes it not only dynamic but also _reactive_.
@@ -52,7 +50,7 @@ Reactive arguments also support _interpolation_. This enables the use of simple
 
 For more complex logic, it's recommended to abstract this into a [Component method](../components/methods.md) or a [Computed property](../components/computed_properties.md).
 
-## Abstracting template portions to custom components
+# Abstracting template portions to custom components
 
 As your template grows in complexity, you may want to organize your codebase with custom components, abstracting a complex template into smaller, reusable pieces.
 

package/docs/getting_started/file_structure.md

@@ -1,12 +1,10 @@
-# Blits - Lightning 3 App Development Framework
-
-## File structure
+# File structure
 
 Once you have created a new Blits App using the boilerplate described in the [Getting started](getting_started.md), you should have a project with all the basics you need.
 
 Let's review the basic file structure, and take a closer look at the important ones.
 
-### package.json
+## package.json
 
 In the root of your newly created app, you will obviously find a `package.json` with all the necessary (dev) dependencies.
 
@@ -14,23 +12,23 @@ In order to build a Blits based Lightning 3 app, all you need is `@lightningjs/b
 
 Feel free to install and import any custom library that your App may need. But always be mindful of the size and impact an external dependency may have - especially when developing for low powered devices (as is often the case with Lightning apps).
 
-### index.html
+## index.html
 
 You will also find an `index.html` at the root of your project. This is where the browser will be pointed to, in order to launch your Blits App.
 
 If you inspect the source you will see some minimal HTML. The essential parts of the HTML are the `<div>` where the canvas will be injected into, and the `<script>`-tag that points to the `index.js` of the App.
 
-### public
+## public
 
 There is also a `public` folder in your project. This folder is used for storing public assets, such as App images and fonts.
 
 During development, your assets are loaded directly from this folder. And if you run a production build, the entire `public` folder is copied over to the distributable version.
 
-### src
+## src
 
 The `src`-folder is where all your custom App code lives.
 
-#### index.js
+### index.js
 
 `src/index.js` is the entry point of your App. This file imports the Blits `Launch`-method which initializes the App.
 
@@ -40,11 +38,11 @@ The `Blits.Launch()`-method accepts 3 parameters:
 2) `target` - the HTML target to append the canvas to. This can either be an `id` of an HTML element in `index.html`, or you can pass a reference to HTML element itself
 3) `settings` - an `object` with settings
 
-#### App.js
+### App.js
 
 `src/App.js` is the default file where the root application component lives. It's expected to export a `Blits.Application()`-instance, which is the base component of your App.
 
-### components and pages folder
+## components and pages folder
 
 The rest of your App can be built out using components. You are free to organize your components as you wish, but we recommend using a separate file for each component and placing them in the `src/components`-folder.
 
@@ -54,7 +52,7 @@ Feel free to further organize and possibly nest your Component files to your own
 
 Pages in your App are technically just Blits components as well. But to keep things clear, we often place them in a separate `pages`-folder alongside the `components`-folder (e.g. `src/pages/Home.js` and `src/pages/Details.js`)
 
-#### Custom code
+### Custom code
 
 If your App needs libraries for specific (business) logic that can be shared across components (such as API calls) you can place them anywhere in your `src` folder. For example in a folder named `src/lib` or `src/api`.
 

package/docs/getting_started/getting_started.md

@@ -1,10 +1,8 @@
-# Blits - Lightning 3 App Development Framework
-
-## Getting Started
+# Getting Started
 
 To get started with Blits, follow these simple steps to set up your development environment and create your first Lightning 3 App.
 
-### Installation
+## Installation
 
 1. Open your terminal or command prompt.
 
@@ -23,7 +21,7 @@ cd my_blits_app
 npm install
 ```
 
-### Running Your App
+## Running Your App
 
 4. After installing the dependencies, you can start your development server by running:
 
@@ -35,13 +33,13 @@ This command will create an application bundle and launch a development server u
 
 Once the server is up and running, open your web browser and navigate to the URL displayed in the console. Congratulations! You now have your brand new Blits Lightning 3 App up and running.
 
-### Coding environment
+## Coding environment
 
 You can use any code editor of your preference to further develop your Blits App.
 
 We recommend using VS code, since we have a dedicated [VS code extension for Blits](https://marketplace.visualstudio.com/items?itemName=LightningJS.lightning-blits) that provides better syntax highlighting, code completion, error
 checking, and other features to make working with Blits easier.
 
-### Next steps
+## Next steps
 
 You are now ready to dive into the world of App development using Blits. In the following sections, we will explore the core concepts and guide you through building your TV applications step by step.