# How to build an LG webOS TV app with web technologies An LG webOS TV app is a web app: HTML, CSS and JavaScript in a folder, described by an appinfo.json file and packaged as an .ipk. The packaging takes an… Source: https://webkodingtheme.com/blog/build-lg-webos-tv-app/ --- Applications sold as source # How to build an LG webOS TV app with web technologies AÖ Arif Özelci , developer of Vela · Published 31 Oct 2026 · 9 min read An LG webOS TV app is a web app: HTML, CSS and JavaScript in a folder, described by an appinfo.json file and packaged as an .ipk. The packaging takes an afternoon. What takes weeks is everything a browser never asked of you — a remote instead of a mouse, a Back key that must behave, a screen that might report 1280 pixels wide, and an engine several years older than your laptop’s. A webOS web app at 1920×1080: every element here is reached with the arrow keys. ## What a webOS app is A “web app” on webOS is a folder with an index.html, your scripts and styles, two icons, and appinfo.json. The TV runs it in its own Chromium-based web engine, full screen, with no address bar and no browser chrome. There is no native code to write, and a static bundle from any modern build tool works, as long as it uses relative paths: the app is served from the package, not from a web server root. { "id": "com.example.myapp", "version": "1.0.0", "vendor": "Example Ltd", "type": "web", "main": "index.html", "title": "My App", "icon": "icon.png", "largeIcon": "largeIcon.png", "bgColor": "#0a0e17", "disableBackHistoryAPI": true } The id is permanent once you publish, so pick it with the same care as a package name. disableBackHistoryAPI matters more than it looks: without it, the Back key walks the browser history, which is almost never what a TV app means by “back”. ## The tools: the webOS CLI and a TV in developer mode LG’s command-line tools are an npm package. They package, install and launch apps, and they are all you need besides an editor. npm install -g @webos-tools/cli ares-package dist # → com.example.myapp_1.0.0_all.ipk ares-setup-device # register your TV once ares-install --device tv com.example.myapp_1.0.0_all.ipk ares-launch --device tv com.example.myapp To install on a real TV you need an LG developer account and the Developer Mode app from the LG Content Store on that TV. Developer mode runs for a limited session and has to be extended from the app, so a TV that “suddenly” refuses installs has usually just timed out. LG also ships a webOS TV simulator for each platform version; it is useful for layout, but test playback and performance on hardware. ## Design at 1920×1080, then scale Many webOS TVs report a 1280×720 viewport even on a 4K panel, and some report 1920×1080. If you lay out in CSS pixels against the viewport you get two different apps. The simplest fix is a fixed 1920×1080 canvas, scaled to the window with a transform: function fit() { const s = Math.min(innerWidth / 1920, innerHeight / 1080) tv.style.transform = `scale(${s})` } addEventListener('resize', fit) fit() Everything inside the canvas is then designed once, in real pixels, and looks identical on 720p and 1080p sets. Keep text at 20px or more on that canvas: a TV is read from three metres away. ## The Back key, and exiting the app On webOS the remote’s Back button arrives as keyCode 461. Your app decides what it means on every screen: player to detail, detail to list, list to home. On the home screen, Back should leave the app — store review checks this — which on webOS you can do with window.close() or the platform’s own back call from the webOSTV library. - Arrow keys: 37, 38, 39, 40. Enter / OK: 13. - Back: 461 on webOS (10009 on Samsung Tizen). - Media keys: Play 415, Pause 19, Rewind 412, Fast-forward 417. ## Target the oldest engine you support A TV’s web engine is frozen at whatever shipped with its firmware. A 2019 set runs a Chromium several years behind today’s, and it will stay that way. Build to ES2015, avoid features newer than your oldest target supports without a polyfill, and test on the oldest model year you claim. In our own testing, the bugs that only appear on TVs were almost always about engine age, not webOS itself. ## Submitting to the LG Content Store Apps go to LG through the LG Seller Lounge, with the .ipk, store artwork, descriptions and the countries you want to sell in. Review covers functionality on the TV models you list, remote-only operation, Back behaviour and your content’s rights. Plan for at least one round of feedback; the most common rejections are about navigation dead ends and Back. Vela: a webOS and Tizen streaming app, already built $ 199 once. If what you are building is a streaming app, Vela is the TV side finished: remote-control navigation, adaptive HLS playback, a live TV guide, continue watching and picture-in-picture, packaged for webOS with one command and for Tizen with a manifest included. You connect your catalogue with one JSON file. Open the demo → AÖ Arif Özelci Builds the WebKoding plugins. Answers support himself. Share on X LinkedIn Copy link In this article What a webOS app is The tools: the webOS CLI and a TV in developer mode Design at 1920×1080, then scale The Back key, and exiting the app Target the oldest engine you support Submitting to the LG Content Store Related Remote-control navigation for TV web apps Playing HLS on Samsung Tizen and LG webOS The product this is about: Vela , $ 199 . Live demo, no signup.