A browser engine (also known as a layout engine or rendering engine) is a core software component of every major

web browser A web browser, often shortened to browser, is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's scr ...

. The primary job of a browser engine is to transform

HTML Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...

documents and other resources of a

web page A web page (or webpage) is a World Wide Web, Web document that is accessed in a web browser. A website typically consists of many web pages hyperlink, linked together under a common domain name. The term "web page" is therefore a metaphor of pap ...

into an interactive visual representation on a user's device.

Name and scope

Besides "browser

engine An engine or motor is a machine designed to convert one or more forms of energy into mechanical energy. Available energy sources include potential energy (e.g. energy of the Earth's gravitational field as exploited in hydroelectric power ge ...

", two other related terms are commonly used: "layout engine" and "rendering engine". In theory,

layout In general terms, a layout is a structured arrangement of items within certain limits, or a plan for such arrangement. Specifically, layout may refer to: * Page layout, the arrangement of visual elements on a page ** Comprehensive layout (comp), ...

and rendering (or "painting") could be handled by different engines. In practice, however, these

components Component may refer to: In engineering, science, and technology Generic systems *System components, an entity with discrete structure, such as an assembly or software module, within a system considered at a particular level of analysis * Lumped e ...

are tightly coupled and rarely encountered on their own outside of the browser engine. In addition to layout and rendering, a browser engine enforces the security policy between documents, handles navigation through

hyperlink In computing, a hyperlink, or simply a link, is a digital reference providing direct access to Data (computing), data by a user (computing), user's point and click, clicking or touchscreen, tapping. A hyperlink points to a whole document or to ...

s and data submitted through forms, and implements the document object model (DOM) exposed to scripts associated with the document. To provide a wide range of dynamic behavior for

s, every major browser supports

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

. However, JavaScript is implemented as a separate JavaScript engine, which has enabled its usage elsewhere. In a browser, the two engines are coordinated via the DOM and Web IDL bindings. Browser engines are also used in non-browser applications. An email client needs one to display HTML email. Beginning in the 2010s, many apps have been created with the frameworks based on

Google Google LLC (, ) is an American multinational corporation and technology company focusing on online advertising, search engine technology, cloud computing, computer software, quantum computing, e-commerce, consumer electronics, and artificial ...

's Chromium project; each of these standalone apps functions much like a

web app A web application (or web app) is application software that is created with World Wide Web, web technologies and runs via a web browser. Web applications emerged during the late 1990s and allowed for the server to Dynamic web page, dynamically ...

. (Two examples are

Spotify Spotify (; ) is a List of companies of Sweden, Swedish Music streaming service, audio streaming and media service provider founded on 23 April 2006 by Daniel Ek and Martin Lorentzon. , it is one of the largest providers of music streaming services ...

and Slack.)

Layout and rendering

The

of a

is typically specified by Cascading Style Sheets (CSS). Each style sheet is a series of rules for how the page should be presented. For example, some rules specify

typography Typography is the art and technique of Typesetting, arranging type to make written language legibility, legible, readability, readable and beauty, appealing when displayed. The arrangement of type involves selecting typefaces, Point (typogra ...

details, such as

font In metal typesetting, a font is a particular size, weight and style of a ''typeface'', defined as the set of fonts that share an overall design. For instance, the typeface Bauer Bodoni (shown in the figure) includes fonts " Roman" (or "regul ...

, color, and text size, while others determine the placement of images. The engine combines all relevant CSS rules to calculate precise graphical coordinates for the visual representation it will paint on the screen. Some engines may begin rendering before a page's resources are downloaded. This can result in visual changes as more data is received, such as images being gradually filled in or a flash of unstyled content.

Notable engines

Apple An apple is a round, edible fruit produced by an apple tree (''Malus'' spp.). Fruit trees of the orchard or domestic apple (''Malus domestica''), the most widely grown in the genus, are agriculture, cultivated worldwide. The tree originated ...

created the WebKit engine for its

Safari A safari (; originally ) is an overland journey to observe wildlife, wild animals, especially in East Africa. The so-called big five game, "Big Five" game animals of Africa – lion, African leopard, leopard, rhinoceros, African elephant, elep ...

browser by forking the KHTML engine of the KDE project. Apple mandates that all browsers on iOS must use WebKit as their engine. (In 2024, the mandate was removed for the

European Union The European Union (EU) is a supranational union, supranational political union, political and economic union of Member state of the European Union, member states that are Geography of the European Union, located primarily in Europe. The u ...

, but it is still enforced elsewhere.) *

originally used WebKit for its Chrome browser but eventually forked it to create the Blink engine. All Chromium-based browsers use Blink, as do applications built with CEF,

Electron The electron (, or in nuclear reactions) is a subatomic particle with a negative one elementary charge, elementary electric charge. It is a fundamental particle that comprises the ordinary matter that makes up the universe, along with up qua ...

, or any other framework that embeds Chromium. *

Microsoft Microsoft Corporation is an American multinational corporation and technology company, technology conglomerate headquartered in Redmond, Washington. Founded in 1975, the company became influential in the History of personal computers#The ear ...

has two proprietary engines, Trident and EdgeHTML. Trident, also called MSHTML, is used in the

Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated as IE or MSIE) is a deprecation, retired series of graphical user interface, graphical web browsers developed by Microsoft that were u ...

browser. EdgeHTML, being a fork of Trident, was the original engine of the Edge browser (now called Edge Legacy); it's still found in some UWP apps. The new, Chromium-based Edge was remade with the Blink engine. * Mozilla develops the

Gecko Geckos are small, mostly carnivorous lizards that have a wide distribution, found on every continent except Antarctica. Belonging to the infraorder Gekkota, geckos are found in warm climates. They range from . Geckos are unique among lizards ...

engine for its

Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements curr ...

browser and the Thunderbird email client.

Development timelines

This figure shows for various browser engines the duration of its active development, the period when relevant new web standards continue to be added to it. # header ImageSize = width:750 height:170 PlotArea = left:80 right:5 bottom:20 top:5 AlignBars = justify DateFormat = dd/mm/yyyy Period = from:01/01/1997 till:31/05/2022 TimeAxis = orientation:horizontal format:yyyy Colors = id:microsoft value:rgb(0.3, 0.5, 1) id:gecko value:rgb(1, 0, 0) id:khtml value:rgb(0.3,0.3,0.3) id:webkit value:rgb(0.3, 0.36, 0.36) id:blink value:rgb(0.3, 0.39, 0.39) id:mgray value:rgb(0.5, 0.5, 0.5) id:lgray value:rgb(0.75, 0.75, 0.75) ScaleMajor = gridcolor:mgray unit:year increment:1 start:01/01/1997 ScaleMinor = unit:month increment:3 start:01/01/1997 BackgroundColors = bars:lgray BarData = bar:Gecko text:Gecko bar:Trident text:Trident bar:EdgeHTML text:EdgeHTML bar:KHTML text:KHTML bar:WebKit text:WebKit bar:Blink text:Blink PlotData= align:center textcolor:black fontsize:8 mark:(line,black) width:15 shift:(0,-4) bar:Gecko from: 01/05/1997 till: 31/05/2022 color:gecko mark:(line,white) bar:Trident from: 01/10/1997 till: 15/07/2015 color:microsoft mark:(line,white) bar:EdgeHTML from: 12/11/2014 till: 15/12/2018 color:microsoft mark:(line,white) bar:KHTML from: 04/11/1998 till: 15/10/2016 color:khtml mark:(line,white) bar:WebKit from: 25/06/2001 till: 31/05/2022 color:webkit mark:(line,white) bar:Blink from: 03/04/2013 till: 31/05/2022 color:blink mark:(line,white)

References

{{Browser engines Browser engines

Name and scope

Layout and rendering

Notable engines

Development timelines

See also

References