index.html

---
layout: home.html
title: WPE
description: WebKit port optimized for embedded devices
htmlSitemapOrder: -10
htmlSitemapTitle: Home
sitemapPriority: 1.0
sitemapChangeFrequency: yearly
---
<script type="module" src="./js/slide-show.js"></script>

<style>

/* specific to home page */
body {
	overflow-x: hidden;
}
main, main > .full-width {
	display: grid;
	grid-template-columns: 1fr [dash] 1px [main] calc(100% - 4px) 1px 1fr;
	grid-template-rows: repeat(10,auto);
}


::part(prev-button),::part(next-button){
	top: 0; height: 100%;
	background-image: linear-gradient(42deg,hsl(0 80 0 / 0),40%,hsl(0 100 0 / 0.1),60%,hsl(0 80 0 / 0));
}

.use-cases section {
	padding-inline: 3rem;
}

.use-cases  {
	width: 100%;
}

.use-cases > section .spotlight > img {
	display: block;
}

h2:has(+ .use-cases) {
	margin-block: 0;
	padding-block: 1.5em 0.5em;
	padding-inline: 1.5rem 0;
}

@media (min-width: 45rem) {
	h2:has(+ .use-cases) {
		padding-inline-start: 5rem;
	}
	.use-cases { 
	--padding-left: 2rem;
	--padding-right: 0;
	}
	.use-cases section {
		padding-inline: 2.5rem;
	}
	.use-cases > section .spotlight {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 1rem;
	}

	.use-cases > section .spotlight > * {
		align-self: start;
	}

	.use-cases > section .spotlight > img {
		align-self: start;
		grid-row: 1 / 3;
		max-height: 300px;
	}
}



@media (min-width: 45rem) {
	main, main > .full-width {
		grid-template-columns: 1fr [dash] 1px [main] minmax(30rem,var(--mainColMax)) 1px 1fr;
	}
}
main > * {
	grid-column: main / -2;
}
main > .full-width {
	grid-column: 1 / -1;
}
main > .full-width > div {
	grid-column: main / -2;
}

main {
	padding-inline: 0;
}
main > * {
	background: var(--dashV);
}
main > section > * {
	position: relative;
	padding-left: 5px;
	margin-left: 1rem;
}

header.page {
	background: linear-gradient(155deg,#5A5A5A,#A4A8A7,#443468 80%);
	color: #FFF;
	position: relative;
}
header.page video, header.page > span {
	position: absolute;
	top: 0;
	left: 0;
	width: 99vw;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	aspect-ratio: 16/9;
	z-index: 1;
}
header.page > span {
	background: linear-gradient(111deg,#000C 30%,#0002 80%);
	z-index: 2;
}
header.page div {
	position: relative;
	z-index: 2;
	padding: 2em 1rem 3em;
	min-height: min-content;
}
header.page > div button {
	position: absolute;
	bottom: 0.5rem;
	right: 0.75rem;
	border: 0;
	background: transparent;
	opacity: 0.5;
}
header.page > div button svg {
	height: 3em;
	width: auto;
}
@media (min-width: 45rem) {
	header.page div {
		min-width: 30rem;
		max-width: calc(var(--mainColMax) - 5rem);
		margin: 0 auto;
		padding-block: 6rem 12rem;
		padding-inline: 2.5rem 1rem;
	}
	main > section > * {
		margin-left: 2.5rem;
	}
	header.page div > * {
		max-width: 80%;
	}
}

@media (min-width: 65rem) {
	header.page div {
		max-width: calc(var(--mainColMax) - 10rem);
		padding-inline: 5rem;
	}
	main > section > * {
		margin-left: 5rem;
	}
	header.page div > * {
		max-width: 60%;
	}
}

body header.page::after {
	content: none;
}

header.page div::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 1px;
	background: var(--dashV);
}
header.page div > * {
	filter: drop-shadow(0 0 1px #0008) drop-shadow(0 0 2px #0008) drop-shadow(0 0 4px #0008) drop-shadow(0 0 8px #0008);
}
header.page div h1 {
	font-size: 3em;
	font-weight: 400;
	background: url({{ '/assets/img/graphic-title-white.svg' | baseHtmlUrl }}) 0 100% / 7rem auto no-repeat;
}

.explore-embedded, .resources, .developers {
	padding-block-start: 0;
}
.explore-embedded .gallery {
	display: grid;
	grid-template-columns: 45% 45%;
}
.explore-embedded .gallery img {
	max-width: 100%;
}
.explore-embedded ul.arrows {
	margin-block-end: 1.5em;
}

.nodot {
	padding: 2em 0 1em;
}

.success-stories {
	padding: 0;
	align-items: center;
	overflow-x: clip;
	background: radial-gradient(13rem at 45% 55%, #FFF, transparent),
		#F1F1F1;
}
.success-stories > div {
	padding-block: 2em;
}
.success-stories > * + ::before {
	content: none;
}
.success-stories h2 {
	margin: 0;
	padding: 0.75em 0;
	font-size: 1.4em;
}
.success-stories h3 {
	font-size: 1.33em;
	margin-block-start: 0;
}
.success-stories h3 a {
  font-size: 3em;
  color: inherit;
  text-decoration: none;
  line-height: 1.1;
}
.success-stories img.hero {
	justify-self: start;
	object-fit: cover;
	object-position: 50% 50%;
}
.success-stories div + img {
	max-height: 20rem;
	display: block;
	margin-inline: auto;
}

@media (min-width: 45rem) {
	.success-stories > div {
		grid-column: main / -2;
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: min-content;
		align-items: center;
		gap: 4rem;
	}
	.success-stories > div:nth-of-type(even) {
		grid-template-columns: 2fr 1fr;
	}
	.success-stories > div:nth-of-type(even) .spotlight {
		padding-inline-end: 0;
	}
	.success-stories > * {
		margin: 0;
		padding: 0;
	}
	.success-stories div + img {
		max-height: 100%;
		margin-inline: 0;
	}
	.success-stories img.hero {
		max-width: 100%;
		height: auto;
		max-height: 30rem;
		margin-inline-start: -5rem;
		box-shadow: -0.25em 0 0.5em #06C3, 1em 1.5em 2.5em #0066DD99;
		  justify-self: end;
		  margin-inline: 0 -4rem;
	}
	.success-stories .spotlight {
	  padding-inline: 6rem;
	  padding-block: 2rem;
	}
}

section.igalia {
	padding-inline: 0;
	background: 
		url({{ '/assets/img/dotted-continents.svg' | baseHtmlUrl }}) 50% 25% / cover;
}
section.igalia > div {
	padding-block-end: 3em;
}
section.igalia.full-width a:not(.btn) {
	padding-inline-end: 0;
	background-image: none;
}
section.igalia > div > a img {
	display: block;
	height: 4em;
	margin-block-end: 1em;
}
section.igalia > div > div > img {
	display: none;
}

@media (min-width: 45rem) {
	section.igalia {
		background: 
			linear-gradient(to bottom right,#142B7AFA,#80A0B2) 100% 0 / 50% 100% no-repeat,
			url({{ '/assets/img/dotted-continents.svg' | baseHtmlUrl }}) 50% 25% / cover;
		background-blend-mode: multiply;
	}
	section.igalia > div {
		grid-column: main / -2;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: min-content auto;
		gap: 1rem 10rem;
	}
	section.igalia > div > h3 {
		grid-row: 1;
		grid-column: 1;
		margin-block-start: 5rem;
	}
	section.igalia > div > a {
		grid-row: 2;
		grid-column: 1;
	}
	section.igalia > div > div {
		grid-row: 2;
		grid-column: 2;
		color: white;
		width: 75%;
		justify-self: start;
		margin-block-end: 4rem;
	}
	section.igalia > div > div > img {
		display: block;
		max-height: 5em;
		margin-block: 0 1em;
	}
	section.igalia > div > div a {
		color: inherit;
	}
}
</style>

<header class="page full-width">
<video muted loop id="banner"><source src="/assets/video/homepage.mp4" type="video/mp4"></video>
<span></span>
<div>
<h1>
Create simple and performant systems based on <strong>Web platform technologies.</strong>
</h1>
<p>
An Open Source WebKit port for Linux-based embedded devices designed with flexibility and hardware acceleration in mind, leveraging common 3D graphics APIs for best performance.
</p>
<a class="cta btn large" href="/about/get-wpe.html">Get WPE</a>
<button id="bannerControl" aria-label="Play/Pause silent background video"><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" stroke="#FFF" fill="#FFF"><circle cx="50" cy="50" r="45" stroke-width="9" fill="none" /><path d="M 35,30 l 40,20 -40,20 z" /></svg></button></div>
</header>


<main>

<section class="explore-embedded dotsep">

<header class="c2 text full-bleed">
<h2>Explore Embedded Browsers</h2> 
<div><!-- placeholder for grid, whee -->
<p><big>The Web Platform is a frequently chosen foundational technology for many reasons, including:</big></p>
<ul class="arrows"> 
  <li>Web Platform technologies are built on standards, they have great longevity</li>
  <li>The standards are open, embedded systems can incorporate them without licensing fees or other worries.
Open standards with great longevity allows lots more things to benefit from the same investments</li>
  <li>The number of people with the basic skills to build things with web technologies is massive</li>
</ul>
<a class="cta btn" style="font-size: smaller;text-align: center;" href="/about/what-is-embedded.html">Learn more about embedded browsers</a>
</div>
</header>

<div class="c2 dotsep">
<h3><a href="/about/supported-hardware.html">Supported Hardware</a></h3>
<p>WPE is currently running on a wide range of hardware. This page lists configurations which are known to work, sorted by manufacturer:</p>
<ul class="gallery c2">
<li><img src="/assets/img/logo-rockchip@2x.png" alt=""></li>
<li><img src="/assets/img/logo-nvidia@2x.png" alt=""></li>
<li><img src="/assets/img/logo-nxp@2x.png" alt=""></li>
<li><img src="/assets/img/logo-qualcomm@2x.png" alt=""></li>
</ul>
</div>

<div class="c2 dotsep">
<h3><a href="/about/a-good-choice.html">Why Choose WPE?</a></h3>
<p>WPE WebKit is widely adopted by many industries, including digital signage, professional audio, home appliances, set-top-boxes, automotive, and inflight infotainment. Countless devices deployed around the globe are already using WPE WebKit as their web runtime platform, and use is growing rapidly.</p>
<img src="/assets/img/WhyChooseWPE-homepage.png" alt="">
</div>

</section>


<section class="success-stories full-width dotsep">

<div>
<img src="/assets/img/Metrological-hero.jpg" alt="" class="hero">
<div class="spotlight"><h2 id="success-stories">Success Story</h2>
<h3><a href="/blog/2022-success-metrological.html"><img src="/assets/img/logo-metrological@2x.png" alt="Metrological"></a></h3>
<p>WPE WebKit brought RDK, a modern, performant web browser, to millions of screens. It enables operators to manage devices and easily customize their UIs and apps and provides analytics to improve the customer experience and drive business results.</p>
<p><a href="/blog/2022-success-metrological.html" class="cta btn large">Read More</a></p>
</div>
</div>
</section>


<h2>Use Cases</h2>
<slide-show controls="navigation" class="use-cases">
  <section>
    <div class="spotlight">
      <h3><a href="/blog/2023-success-digital-signage.html">Digital Signage</a></h3>
      <p>Digital signage web rendering players have many advantages and are a trend nowadays. They feature use of HTML for composing the user interface, simple and effortless provisioning and scheduling new contents to the screen from the cloud, a robust environment with an automatic crash recovery system, and more.</p>
      <!-- p><a href="/blog/2023-success-digital-signage.html" class="cta btn large">Learn More</a></p -->
      <img height="250" src="/assets/img/use_case-digital_signage.png" alt="">
    </div>
  </section>
  <section>
    <div class="spotlight">
      <h3>Point of Sale</h3>
      <p>Just as the web helps billions of online users make purchases every day, embedded browsers can serve as the basis for building the point of sale systems used by brick and mortar merchants.</p>
    	<img height="250" src="/assets/img/pointofsale.jpg" alt="">
    </div>
  </div>
  </section>
  <section>
    <div class="spotlight">
      <h3>Infotainment Systems</h3>
      <p>The web’s ability to create interactive interfaces and stream media make embedded browsers an excellent choice for building the infotainment systems in automobiles, airplanes and trains.</p>
    	<img height="400" src="/assets/img/infotainment.jpg" alt="">
    </div>
  </section>
  <section>
    <div class="spotlight">
    	<h3>Smart TVs and set-top-boxes</h3>
      <p>Television has long used embedded browsers in many ways, from video playback to creating the guides and interactive menus. The Web, with its natural multimedia-related capabilities, is a natural fit for consuming both traditional TV-based content as well as on demand content from industry-leading streaming services.</p>
    	<img height="250" src="https://www.igalia.com/assets/i/pe-industries/mini-tv.jpg" alt="">
    </div>
  </section>
  <section>
    <div class="spotlight">
  		<h3 class="usecase">Home appliances</h3>
      <p>Embedded browsers are increasingly used in home appliances of all kinds: From providing temperature information and settings for climate control systems, to browsing recipes and engaging programs on your favorite cooking machine, to controlling the distribution of sound across smart speakers around your home.</p>
    	<img height="250" src="/assets/img/smart-appliance.jpg" alt="">
    </div>

  </section>
  <section>
    <div class="spotlight">
      <h3 class="usecase">Professional video and broadcasting</h3>
      <p>Graphics overlays are everywhere nowadays in the live video broadcasting industry. Embedded browsers can be used to deliver low-latency, web-augmented video broadcasts which provides with expands the capabilities of traditional systems with and added value.</p>
    	<img height="250" src="/assets/img/av-production.jpg" alt="">
    	<!-- Photo by <a href="https://unsplash.com/@kellysikkema?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Kelly Sikkema</a> on <a href="https://unsplash.com/photos/woman-in-black-long-sleeve-shirt-using-black-laptop-computer-X-etICbUKec?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> -->
    </div>
    
  </section>
</slide-show>
<section class="developers embedded dotsep">
  <div>
    <header class="full-bleed">
      <h2><a href="/developers">Developers</a></h2>
      <img src="/assets/img/illustration-resources.svg" alt="" class="decoration">
    </header>
    <div class="c2 dotsep">
      <h3><a href="/about/architecture.html">WPE Design</a></h3>
      <p>WPE is the official WebKit port for embedded platforms. WPE is uniquely designed for embedded systems in that it doesn’t depend on any user-interface toolkits such as the traditional Cocoa, GTK, etc toolkits.</p>
      <img src="/assets/img/diagram-WPE-design.svg" alt="" class="decoration">
    </div>
    <div class="c2 dotsep text">
      <h3><a href="/about/faq.html">WPE’s Frequently Asked Questions</a></h3>
      <p>We’ve been collecting answers to lots of common questions we’ve been asked. If you have questions, you might find a ready answer in the FAQ.</p>
    </div>
  </div>
</section>

<section class="developers embedded dotsep">
<div>

<header class="full-bleed">
<h2><a href="/developers">Developers</a></h2>
<img src="/assets/img/illustration-resources.svg" alt="" class="decoration">
</header>

<div class="c2 dotsep">
<h3><a href="/about/architecture.html">WPE Design</a></h3>
<p>WPE is the official WebKit port for embedded platforms. WPE is uniquely designed for embedded systems in that it doesn’t depend on any user-interface toolkits such as the traditional Cocoa, GTK, etc toolkits.</p>
<img src="/assets/img/diagram-WPE-design.svg" alt="" class="decoration">
</div>

<div class="c2 dotsep text">
<h3><a href="/about/faq.html">WPE’s Frequently Asked Questions</a></h3>
<p>We’ve been collecting answers to lots of common questions we’ve been asked. If you have questions, you might find a ready answer in the FAQ.</p>
</div>

</div>
</section>

<section class="igalia full-width">
<div>

<h3>Brought to you by</h3>
<a href="https://igalia.com/"><img src="/assets/img/igalia-larger.png" alt="Igalia"></a>

<div>
<img src="/assets/img/Igalia_tagline-white-1.png" alt="Open Source Consultancy">
<p>WPEWebKit is developed by <a href="https://igalia.com">Igalia</a>, an open-source consultancy with a lot of experience working on the Web platform.  As the maintainers of this official port of WebKit, Igalia has a great deal of experience with meeting hardware and software challenges in the embedded space and several others. <a href="https://igalia.com/contact/">Get in touch!</a></p>
<a href="https://igalia.com" class="cta btn large">igalia.com</a>
</div>

</div>
</section>

    <div class="survey">
    <p>
    If you’re using WPE WebKit, or are considering doing so, <strong><a href="https://docs.google.com/forms/d/e/1FAIpQLSchPgMGzuVc9ry5bdxF2uFnW2q3FcrSSqxJdOM4Fd2BD4s7dg/viewform?usp=pp_url&amp;entry.1179679285=WPEWebKit.org+website">please take our brief user survey</a></strong>. Your input will help us make WPE WebKit better for you!
    </p>
    </div>
    <style>
    .survey {
    position: relative;
    padding-block: 2em 3em;
    --bgrad: linear-gradient(180deg,#00C6 0.25em,#00B4 20%,40%,#00B2);
    background: var(--bgrad);
    border-image: var(--bgrad) 1;
    border-image-outset: 0 50vmax;
    border-image-width: 0 50vmax;
    font-size: 1.25em;
    }
    .survey::before {
    content: url(/assets/img/survey.svg);
    position: absolute;
    top: -1.5em;
    left: 0;
    right: 0;
    margin-inline: auto;
    height: 3em;
    width: auto;
    aspect-ratio: 1/1;
    filter: drop-shadow(0.25em 0.33em 0.33em #0006);
    }
    .survey p {
    padding-inline: 1em;
    }
    </style>
</main>
<script>
// https://www.codespeedy.com/play-pause-button-for-html5-video-in-javascript/
var ppbutton = document.getElementById("bannerControl");
ppbutton.addEventListener("click", playPause);
myVideo = document.getElementById("banner");
function playPause() { 
	if (myVideo.paused) {
		myVideo.play();
		ppbutton.innerHTML = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" stroke="#FFF" fill="#FFF"><circle cx="50" cy="50" r="45" stroke-width="9" fill="none" /><rect x="33" y="30" width="12" height="40" /><rect x="55" y="30" width="12" height="40" /></svg>';
	} else {
		myVideo.pause(); 
		ppbutton.innerHTML = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" stroke="#FFF" fill="#FFF"><circle cx="50" cy="50" r="45" stroke-width="9" fill="none" /><path d="M 35,30 l 40,20 -40,20 z" /></svg>';
	}
}
window.onload = function() {
	let mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
	if (mediaQuery || !mediaQuery.matches) {
		myVideo.play();
		ppbutton.innerHTML = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" stroke="#FFF" fill="#FFF"><circle cx="50" cy="50" r="45" stroke-width="9" fill="none" /><rect x="33" y="30" width="12" height="40" /><rect x="55" y="30" width="12" height="40" /></svg>';
	}
}
</script>