{"id":28356155,"url":"https://github.com/danisss9/lite","last_synced_at":"2026-06-30T01:01:15.442Z","repository":{"id":294984535,"uuid":"988713368","full_name":"danisss9/Lite","owner":"danisss9","description":"Full HTML/CSS/JS renderer made in C#","archived":false,"fork":false,"pushed_at":"2026-06-25T22:45:27.000Z","size":949,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-25T23:13:42.571Z","etag":null,"topics":["csharp","css","electron","html","javascript","webview"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danisss9.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-23T01:01:46.000Z","updated_at":"2026-06-25T22:45:31.000Z","dependencies_parsed_at":"2025-06-20T21:47:31.112Z","dependency_job_id":null,"html_url":"https://github.com/danisss9/Lite","commit_stats":null,"previous_names":["danisss9/easy-app"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/danisss9/Lite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danisss9%2FLite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danisss9%2FLite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danisss9%2FLite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danisss9%2FLite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danisss9","download_url":"https://codeload.github.com/danisss9/Lite/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danisss9%2FLite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34948227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-29T02:00:05.398Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csharp","css","electron","html","javascript","webview"],"created_at":"2025-05-28T06:14:00.226Z","updated_at":"2026-06-30T01:01:15.414Z","avatar_url":"https://github.com/danisss9.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lite\n\nLite is a lightweight HTML/CSS/JS rendering engine for Windows, written in C#. It parses HTML and CSS, runs a custom layout engine, renders to a native Win32 window using SkiaSharp, and executes JavaScript via Jint. Same-origin links and form submissions navigate in-page — complete with a browser-style loading animation — backed by an event loop with `fetch`, Web Storage, and ES module support.\n\n![Lite App Demo](https://github.com/user-attachments/assets/994d4334-e96a-483a-94c6-b23fc5f0454b)\n\n---\n\n## Projects\n\n| Project       | Type          | Description                                                          |\n| ------------- | ------------- | ------------------------------------------------------------------- |\n| `Lite/`       | Class library | The rendering engine and `BrowserWindow` API                        |\n| `Lite.Media/` | Class library | Optional LibVLC-backed audio/video playback (`VlcMedia.Register()`) |\n| `Example/`    | Executable    | Demo app using the library with a local HTML/CSS/JS site            |\n\n---\n\n## Getting Started\n\n### Install\n\nReference the `Lite` project or build it as a DLL and add a project reference:\n\n```xml\n\u003cItemGroup\u003e\n  \u003cProjectReference Include=\"..\\Lite\\Lite.csproj\" /\u003e\n\u003c/ItemGroup\u003e\n```\n\n### Basic Usage\n\n```csharp\nusing Lite;\n\nvar window = new BrowserWindow(\"http://localhost:4444\");\nwindow.Run();\n```\n\n`Run()` is blocking — it parses the URL, creates a native window, and enters the Win32 message loop until the window is closed.\n\n---\n\n## API Reference\n\n### `BrowserWindow`\n\nThe main entry point for the library. Creates a native Win32 window that renders a web page.\n\n```csharp\npublic class BrowserWindow\n```\n\n#### Constructor\n\n```csharp\npublic BrowserWindow(string url, string title = \"Lite Browser\", int width = 800, int height = 600)\n```\n\n| Parameter | Description                                                 |\n| --------- | ----------------------------------------------------------- |\n| `url`     | The URL to load and render (e.g. `\"http://localhost:4444\"`) |\n| `title`   | Window title bar text                                       |\n| `width`   | Initial window width in pixels                              |\n| `height`  | Initial window height in pixels                             |\n\n#### Methods\n\n```csharp\npublic void Run()\n```\n\nLoads the URL, creates the window, and starts the message loop. Blocks until the window is closed.\n\n---\n\n## Architecture\n\n```\nBrowserWindow          Native window + message loop; in-page navigation (background-thread\n│                       document load), keyboard/mouse event dispatch, and the JS event loop pump\n│   ├── LoadingAnimation   Indeterminate loading bar shown while the next page loads\n│   └── PageTransition     Cross-fade + slide-up reveal of the loaded page\n│\n├── Parser              Fetches HTML, parses via AngleSharp, builds LayoutNode tree,\n│                       loads external CSS/modules, executes scripts via JsEngine;\n│                       ParseFragment() backs innerHTML/insertAdjacentHTML\n│\n├── StyleResolver       Re-applies the stylesheet cascade to nodes inserted at runtime\n│\n├── FormSubmitter       Builds the submission query + action URL for form navigation\n├── FormValidation      HTML5 constraint validation (required, email/url, pattern)\n├── HtmlSerializer      Serializes a node subtree for innerHTML/outerHTML\n│\n├── Drawer              Runs BoxEngine layout, then renders the tree to a SkiaSharp\n│                       bitmap; returns the pixel buffer and hit regions\n│\n├── BoxEngine           Two-pass CSS box model layout (block + inline line boxes,\n│                       absolute/fixed positioning, floats)\n│\n├── FlexEngine          CSS Flexbox Level 1 layout (flex-grow/shrink, wrapping,\n│                       alignment, gap, order, baseline)\n│\n├── TableEngine         Table layout (display:table, tr, td/th — two-pass row sizing)\n│\n├── AnimationEngine     CSS transitions and @keyframes animations with easing\n│   └── AnimationRegistry  Global @keyframes store\n│\n├── MediaQueryEvaluator Evaluates @media conditions against viewport size\n│\n├── PseudoClassState    Tracks :hover, :focus, :active state per element\n│\n├── SvgRenderer         Inline SVG rendering (rect, circle, path, text, etc.)\n├── CanvasRenderer      Blits Canvas2D bitmaps onto the page\n│\n├── JsEngine            Jint-based JavaScript runtime with DOM API; macrotask event loop\n│   │                   (timers/fetch) + Promise microtask checkpoint; ES module host\n│   ├── JsDocument      document.getElementById / querySelector / createElement /\n│   │                   createTextNode / createDocumentFragment / createTreeWalker;\n│   │                   URL / domain / cookie\n│   ├── JsElement       Element proxy: textContent, innerHTML/outerHTML, value, style,\n│   │                   events, classList, DOM traversal + mutation (append/before/after),\n│   │                   form association, validity\n│   ├── JsStyle         Inline style property get/set / setProperty / removeProperty\n│   ├── JsComputedStyle Read-only computed style proxy for getComputedStyle()\n│   ├── JsCanvasContext2D  CanvasRenderingContext2D (paths, rects, text, transforms)\n│   ├── JsEvent         Event / MouseEvent / KeyboardEvent / CustomEvent (target,\n│   │                   bubbling, preventDefault, coordinates, key/modifiers, detail)\n│   ├── JsTreeWalker    DOM tree traversal (nextNode, previousNode, parentNode)\n│   ├── JsXmlHttpRequest  Synchronous XMLHttpRequest (GET)\n│   ├── JsFetch         fetch() backing — background HTTP, resolved on the event loop\n│   ├── JsStorage       localStorage (persisted) / sessionStorage (in-memory)\n│   ├── HttpModuleLoader  Resolves \u0026 fetches ES modules over http(s)\n│   ├── JsConsole       console.log / error / warn\n│   ├── JsWindow        window.alert / setTimeout / setInterval / requestAnimationFrame\n│   └── SelectorEngine  CSS selector matching (compound, combinators, pseudo-classes)\n│\n├── FormState           Tracks text input values, checkbox/radio state, dropdowns, and focus\n├── EventDispatcher     Dispatches click/change/input events to JS handlers\n├── ResourceLoader      HTTP image fetching with bitmap cache\n└── StaticFileServer    (Example project) ASP.NET Core Kestrel server for local files\n```\n\n---\n\n## Supported HTML Elements\n\n| Element                                                                                 | Behaviour                                                                                                            |\n| --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |\n| `div`, `section`, `header`, `footer`, `main`, `article`, `nav`, `aside`, `form`, `span` | Generic block or inline containers                                                                                   |\n| `h1`–`h6`                                                                               | Headings with computed font size and weight                                                                          |\n| `p`                                                                                     | Paragraph with block layout                                                                                          |\n| `a`                                                                                     | Link — same-origin links navigate in-page (with a loading animation); cross-origin links open in the system browser  |\n| `img`                                                                                   | Image loaded via HTTP or `data:` URI (incl. percent-encoded base64); straight-alpha compositing; placeholder + alt   |\n| `object`                                                                                | Renders its `data` resource as a replaced image; falls back to child content (incl. nested `\u003cobject\u003e`) on failure    |\n| `iframe`                                                                                | Hosts a nested document (`srcdoc` or same-origin `src`) with its own DOM/JS; `contentWindow`/`contentDocument`, `postMessage`, `window.parent`/`frameElement`, `load` |\n| `audio`, `video`                                                                        | HTMLMediaElement API (`play`/`pause`/`currentTime`/`duration`/`canPlayType`…), `\u003csource\u003e` selection, poster, controls bar, and media events; simulated timeline by default, or real playback via the optional `Lite.Media` (LibVLC) backend |\n| `input` (text)                                                                          | Focusable text field with keyboard input and backspace                                                               |\n| `input` (password)                                                                      | Masked text field with bullet characters                                                                             |\n| `input` (number)                                                                        | Numeric input with up/down stepper arrows; `min`, `max`, `step`                                                      |\n| `input` (range)                                                                         | Range slider with click and drag support; `min`, `max`, `step`                                                       |\n| `input` (checkbox)                                                                      | Toggle on click                                                                                                      |\n| `input` (radio)                                                                         | Radio button with group selection logic by `name` attribute                                                          |\n| `textarea`                                                                              | Multi-line text input with placeholder, Enter key, monospace font                                                    |\n| `select`                                                                                | Dropdown with option list overlay, click to select                                                                   |\n| `button`, `input[type=submit]`                                                          | Triggers `click` handlers; submit controls submit the containing `\u003cform\u003e`                                            |\n| `form`                                                                                  | Submits on Enter / submit button — builds a query and navigates to `action` (cancelable `submit` event)             |\n| `label`                                                                                 | Inline by default                                                                                                    |\n| `strong`, `b`                                                                           | Bold text                                                                                                            |\n| `em`, `i`, `cite`, `dfn`                                                                | Italic text                                                                                                          |\n| `u`, `ins`                                                                              | Underline                                                                                                            |\n| `s`, `del`, `strike`                                                                    | Strikethrough                                                                                                        |\n| `small`, `sub`, `sup`                                                                   | Smaller text / subscript / superscript                                                                               |\n| `mark`                                                                                  | Yellow highlight                                                                                                     |\n| `code`, `kbd`, `samp`, `var`, `tt`                                                      | Monospace font                                                                                                       |\n| `pre`                                                                                   | Preformatted block with preserved whitespace                                                                         |\n| `blockquote`                                                                            | Indented block quote                                                                                                 |\n| `hr`                                                                                    | Horizontal rule                                                                                                      |\n| `br`                                                                                    | Forced line break                                                                                                    |\n| `ul`, `ol`, `li`                                                                        | Unordered (bullet) and ordered (numbered) lists                                                                      |\n| `dl`, `dt`, `dd`                                                                        | Definition lists                                                                                                     |\n| `table`, `thead`, `tbody`, `tfoot`, `tr`, `td`, `th`                                    | Table layout                                                                                                         |\n| `svg`                                                                                   | Inline SVG with `rect`, `circle`, `ellipse`, `line`, `polyline`, `polygon`, `path`, `text`, `g`; viewBox, transforms |\n| `canvas`                                                                                | HTML5 Canvas with `CanvasRenderingContext2D` via JavaScript                                                          |\n| `script`                                                                                | Inline and `src` scripts executed after parse                                                                        |\n\n---\n\n## Supported CSS Properties\n\n| Property                                             | Values                                                                                                                  |\n| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |\n| `display`                                            | `block`, `inline`, `inline-block`, `list-item`, `flex`, `inline-flex`, `table`, `table-row`, `table-cell`, `none`       |\n| `width`, `height`                                    | `px`, `%`, `vh`, `vw`, `auto`, `calc()`                                                                                 |\n| `min-width`, `max-width`, `min-height`, `max-height` | `px`, `%`, `calc()`                                                                                                     |\n| `margin`, `padding`                                  | Shorthand and individual sides; `px`, `%`, `em`, `auto`, `calc()`                                                       |\n| `border-width`                                       | `px` per side                                                                                                           |\n| `border-color`                                       | Any CSS color per side                                                                                                  |\n| `border-style`                                       | `solid`, `dotted`, `dashed`, `double`, `groove`, `ridge`, `inset`, `outset`, `none` per side                            |\n| `border-radius`                                      | `px`, `%`                                                                                                               |\n| `box-sizing`                                         | `border-box`, `content-box`                                                                                             |\n| `box-shadow`                                         | Multi-layer; offset, blur, spread, color, `inset`                                                                       |\n| `text-shadow`                                        | Offset, blur, color                                                                                                     |\n| `background-color`                                   | Any CSS color                                                                                                           |\n| `background-image`                                   | `url()`; raster formats (PNG, JPEG)                                                                                     |\n| `background-repeat`                                  | `repeat`, `repeat-x`, `repeat-y`, `no-repeat`                                                                           |\n| `background-position`                                | Keywords, `px`, `%`                                                                                                     |\n| `background-size`                                    | `cover`, `contain`, `auto`, `px`, `%`                                                                                   |\n| `background-attachment`                              | `scroll`, `fixed` (fixed backgrounds pin to the viewport)                                                              |\n| `color`                                              | Any CSS color                                                                                                           |\n| `opacity`                                            | `0`–`1`                                                                                                                 |\n| `font-size`                                          | `px`, `em`, keyword sizes                                                                                               |\n| `font-weight`                                        | `bold` / normal                                                                                                         |\n| `font-style`                                         | `italic` / normal                                                                                                       |\n| `font-family`                                        | Named families; `monospace` → Consolas, `system-ui` → Segoe UI                                                          |\n| `line-height`                                        | `px`, `em`, `%`, unitless multiplier                                                                                    |\n| `text-decoration`                                    | `underline`, `line-through`                                                                                             |\n| `text-transform`                                     | `uppercase`, `lowercase`, `capitalize`, `none`                                                                          |\n| `text-align`                                         | `left`, `center`, `right`, `justify`                                                                                    |\n| `text-indent`                                        | `px`, `em`, `%`                                                                                                         |\n| `letter-spacing`                                     | `px`, `em`                                                                                                              |\n| `word-spacing`                                       | `px`, `em`                                                                                                              |\n| `vertical-align`                                     | `baseline`, `top`, `middle`, `bottom`, `text-top`, `text-bottom`, `sub`, `super`                                        |\n| `white-space`                                        | `normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line`                                                                       |\n| `position`                                           | `static`, `relative`, `absolute`, `fixed`, `sticky`                                                                     |\n| `top`, `right`, `bottom`, `left`                     | `px`, `%`, `calc()`                                                                                                     |\n| `z-index`                                            | Integer                                                                                                                 |\n| `overflow`                                           | `visible`, `hidden`, `scroll`, `auto`                                                                                   |\n| `visibility`                                         | `visible`, `hidden`, `collapse`                                                                                         |\n| `float`                                              | `none`, `left`, `right`                                                                                                 |\n| `clear`                                              | `none`, `left`, `right`, `both`                                                                                         |\n| `flex-direction`                                     | `row`, `row-reverse`, `column`, `column-reverse`                                                                        |\n| `flex-wrap`                                          | `nowrap`, `wrap`, `wrap-reverse`                                                                                        |\n| `flex-grow`, `flex-shrink`                           | Number                                                                                                                  |\n| `flex-basis`                                         | `px`, `%`, `auto`, `calc()`                                                                                             |\n| `flex`                                               | Shorthand                                                                                                               |\n| `justify-content`                                    | `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`                                     |\n| `align-items`, `align-self`                          | `stretch`, `flex-start`, `flex-end`, `center`, `baseline`                                                               |\n| `align-content`                                      | `stretch`, `flex-start`, `flex-end`, `center`, `space-between`, `space-around`                                          |\n| `flex-flow`                                          | Shorthand                                                                                                               |\n| `gap`, `row-gap`, `column-gap`                       | `px`, `em`, `%`, `calc()`                                                                                               |\n| `order`                                              | Integer                                                                                                                 |\n| `outline`                                            | `outline-width`, `outline-color`, `outline-style`, `outline-offset`                                                     |\n| `list-style-type`                                    | `disc`, `circle`, `square`, `decimal`, `lower-alpha`, `upper-alpha`, `lower-roman`, `upper-roman`, `none`               |\n| `list-style-position`                                | `outside`, `inside`                                                                                                     |\n| `border-collapse`                                    | `collapse`, `separate`                                                                                                  |\n| `border-spacing`                                     | `px`                                                                                                                    |\n| `cursor`                                             | `pointer`, `text`, `default`                                                                                            |\n| `text-overflow`                                      | `ellipsis`, `clip`                                                                                                      |\n| `aspect-ratio`                                       | `width / height`, single value                                                                                          |\n| `pointer-events`                                     | `none`, `auto`                                                                                                          |\n| `transform`                                          | `rotate()`, `scale()`, `scaleX/Y()`, `translate()`, `translateX/Y()`, `skew()`, `skewX/Y()`; deg/rad/turn               |\n| `filter`                                             | `blur()`, `grayscale()`, `sepia()`, `brightness()`, `contrast()`, `saturate()`, `hue-rotate()`, `invert()`, `opacity()` |\n| `background-image` (gradient)                        | `linear-gradient()` with angle keywords, `Ndeg`, and multi-stop color lists                                             |\n| `animation-play-state`                               | `running`, `paused`                                                                                                     |\n| `transition`                                         | `property`, `duration`, `delay`, `timing-function`                                                                      |\n| `animation`                                          | `name`, `duration`, `delay`, `timing-function`, `iteration-count`, `direction`, `fill-mode`                             |\n| `calc()`                                             | `+`, `-`, `*`, `/`; `px`, `%`, `em`, `rem`, `vw`, `vh`                                                                  |\n| `--*` custom properties                              | Declared on any element; inherited via ancestor chain                                                                   |\n| `var()`                                              | `var(--name)`, `var(--name, fallback)`; recursive resolution                                                            |\n| `@media`                                             | `min-width`, `max-width`, `min-height`, `max-height`, `orientation`; `and`, `not`, comma                                |\n| `@keyframes`                                         | `from`/`to`, percentage offsets                                                                                         |\n| `:hover`, `:focus`, `:active`                        | Pseudo-class state with interactive re-render                                                                           |\n| Structural / form pseudo-classes                     | `:first-child`, `:last-child`, `:nth-child()`, `:not()`, `:empty`, `:checked`, `:disabled`, `:enabled`, `:link`, `:required`, `:optional`, `:valid`, `:invalid` |\n| `::before`, `::after`                                | Pseudo-elements with `content` property (strings, `open-quote`/`close-quote`, unicode escapes)                          |\n\n---\n\n## JavaScript DOM API\n\nScripts run in a Jint sandbox with a minimal browser-compatible API.\n\n### `document`\n\n```js\ndocument.getElementById(id); // → Element | null\ndocument.querySelector(selector); // → Element | null\ndocument.querySelectorAll(selector); // → Element[]\ndocument.createElement(tagName); // → Element\ndocument.createElementNS(ns, tagName); // → Element\ndocument.createTextNode(text); // → Element (#text node)\ndocument.createDocumentFragment(); // → Element (lightweight container)\ndocument.createTreeWalker(root, whatToShow); // → TreeWalker\n\ndocument.URL; // current page URL\ndocument.domain; // host of the current page\ndocument.cookie; // get/set (single in-memory cookie jar)\n```\n\nSelectors support: `#id`, `.class`, `tag`, compound (`tag.class#id`), attribute (`[attr=val]`, `[attr^=val]`, `[attr$=val]`, `[attr*=val]`, `[attr~=val]`), combinators (descendant, `\u003e`, `+`, `~`), pseudo-classes (`:first-child`, `:last-child`, `:nth-child()`, `:not()`, `:empty`, `:checked`, `:disabled`, `:enabled`, `:required`, `:optional`, `:valid`, `:invalid`, `:hover`, `:focus`, `:active`), and comma-separated lists.\n\n### Element\n\n```js\nelement.id; // string (read-only)\nelement.tagName; // string (read-only)\nelement.className; // get/set class attribute\nelement.textContent; // get/set displayed text\nelement.innerHTML; // get serializes the subtree; set parses an HTML fragment\nelement.outerHTML; // get/set including the element's own tag\nelement.insertAdjacentHTML(position, html); // beforebegin | afterbegin | beforeend | afterend\nelement.value; // get/set text input value\nelement.checked; // get/set checkbox state\nelement.type; // get/set (input type; \"text\" default for \u003cinput\u003e)\nelement.name; // get/set name attribute\nelement.nodeType; // 1 (Element)\nelement.nodeName; // same as tagName\nelement.ownerDocument; // → document\nelement.dataset; // proxy for data-* attributes\n\nelement.style.color = 'red'; // set any CSS property as camelCase or kebab-case\nelement.style.setProperty(name, val);\nelement.style.getPropertyValue(name);\nelement.style.removeProperty(name);\n\nelement.getAttribute(name); // → string | null\nelement.setAttribute(name, value);\nelement.hasAttribute(name); // → boolean\n\nelement.children; // → Element[]\nelement.childNodes; // → Element[]\nelement.parentElement; // → Element | null\nelement.firstElementChild; // → Element | null\nelement.lastElementChild; // → Element | null\nelement.nextElementSibling; // → Element | null\nelement.previousElementSibling; // → Element | null\nelement.appendChild(child); // → child\nelement.removeChild(child); // → child\nelement.insertBefore(newNode, ref); // → newNode\nelement.replaceChild(newNode, old); // → old\nelement.append(...nodesOrStrings); // append children\nelement.prepend(...nodesOrStrings); // prepend children\nelement.before(...nodesOrStrings); // insert into parent before this\nelement.after(...nodesOrStrings); // insert into parent after this\nelement.replaceWith(...nodesOrStrings); // replace this element\nelement.remove(); // detach from parent\nelement.cloneNode(deep); // → Element\nelement.contains(node); // → boolean\nelement.closest(selector); // → Element | null\nelement.matches(selector); // → boolean\nelement.getBoundingClientRect(); // → { x, y, width, height, top, left, right, bottom }\n\n// Form association \u0026 constraint validation\nelement.form; // → containing \u003cform\u003e | null\nelement.willValidate; // → boolean\nelement.validity; // → { valueMissing, typeMismatch, patternMismatch, valid }\nelement.checkValidity(); // → boolean\nelement.reportValidity(); // → boolean\nform.submit(); // submit the form (navigates to its action)\nform.reset(); // reset controls to defaults\n\nelement.classList.add(cls);\nelement.classList.remove(cls);\nelement.classList.contains(cls); // → boolean\nelement.classList.toggle(cls);\n\nelement.addEventListener(type, fn);\nelement.removeEventListener(type, fn);\nelement.click();\n```\n\n### Canvas\n\n```js\nvar canvas = document.getElementById('myCanvas');\nvar ctx = canvas.getContext('2d');\n\n// Drawing: fillRect, strokeRect, clearRect, fillText, strokeText, measureText\n// Paths: beginPath, moveTo, lineTo, arc, arcTo, ellipse, quadraticCurveTo,\n//        bezierCurveTo, closePath, rect, fill, stroke, clip\n// Transforms: save, restore, translate, rotate, scale, setTransform, resetTransform\n// Images: drawImage\n// State: fillStyle, strokeStyle, lineWidth, globalAlpha, font, lineCap, lineJoin\n```\n\n### `console`\n\n```js\nconsole.log(...)\nconsole.error(...)\nconsole.warn(...)\n```\n\n### `window`\n\n```js\nwindow.alert(message);\nalert(message); // shorthand\nwindow.getComputedStyle(element); // → CSSStyleDeclaration proxy\nwindow.innerWidth; // viewport width\nwindow.innerHeight; // viewport height\nwindow.scrollTo(x, y); // scroll viewport to absolute position\nwindow.scrollBy(dx, dy); // scroll viewport by relative amount\nwindow.scrollY; // current vertical scroll offset (read-only)\nwindow.scrollX; // current horizontal scroll offset (read-only)\nwindow.pageXOffset; // alias for scrollX\nwindow.pageYOffset; // alias for scrollY\nsetTimeout(fn, ms);\nsetInterval(fn, ms);\nclearInterval(id);\nrequestAnimationFrame(fn);\n```\n\n### `XMLHttpRequest`\n\n```js\nvar xhr = new XMLHttpRequest();\nxhr.open('GET', '/api/data');\nxhr.onload = function () {\n  console.log(xhr.responseText);\n};\nxhr.send();\n// Properties: responseText, status, readyState\n```\n\n### `fetch`\n\n```js\nfetch('/api/data', { method: 'GET' })\n  .then(function (res) {\n    // res.ok, res.status, res.statusText, res.url\n    return res.json(); // or res.text()\n  })\n  .then(function (data) {\n    console.log(data);\n  });\n```\n\nThe request runs on a background thread and the Promise resolves on the event loop. `http(s)` and `data:` URLs are supported. `queueMicrotask(fn)` is also available.\n\n### Web Storage\n\n```js\nlocalStorage.setItem('key', 'value'); // persisted per-origin to disk\nlocalStorage.getItem('key'); // → \"value\" | null\nlocalStorage.removeItem('key');\nlocalStorage.clear();\nlocalStorage.key(0); // → key name at index | null\nlocalStorage.length; // → number\n\nsessionStorage.setItem('key', 'value'); // in-memory for the process\n```\n\n\u003e Property-style access (`localStorage.foo`) is not supported — use `getItem` / `setItem`.\n\n### ES Modules\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { greet } from './greet.js';\n  greet('world');\n\u003c/script\u003e\n```\n\n`import` / `export` work for inline and `src` modules. Specifiers resolve relative to the page URL and are fetched over `http(s)`. Classic scripts run first; modules are deferred.\n\n### Event object\n\n```js\nelement.addEventListener('click', function (event) {\n  event.type; // \"click\"\n  event.target; // Element that triggered the event\n  event.currentTarget; // Element the handler is attached to\n  event.preventDefault();\n  event.stopPropagation(); // stop bubbling up the DOM tree\n  event.stopImmediatePropagation();\n\n  // MouseEvent: event.clientX/clientY, event.pageX/pageY, event.button\n  // KeyboardEvent: event.key, event.keyCode, event.code,\n  //                event.ctrlKey/shiftKey/altKey/metaKey\n});\n\n// Constructors\nnew Event('my-event', { bubbles: true, cancelable: true });\nnew CustomEvent('my-event', { detail: { count: 1 } }); // event.detail\n```\n\nDispatched DOM events include `click`, `mousedown` / `mouseup` / `mousemove`, `keydown` / `keyup`, `input`, `change`, and `submit`.\n\n### Inline event attributes\n\nStandard HTML inline handlers are supported:\n\n```html\n\u003cbutton onclick=\"handleClick()\"\u003eClick me\u003c/button\u003e\n\u003cinput oninput=\"handleInput()\" onchange=\"handleChange()\" /\u003e\n```\n\n---\n\n## Running the Example\n\n```bash\ndotnet run --project Example\n```\n\nThe example serves the `Example/resources/` folder on `http://localhost:4444` and opens it in a `BrowserWindow`. It is a multi-page site — typography, colors, layout, lists \u0026 tables, forms, graphics, transforms \u0026 animations, and JavaScript DOM — linked by an in-app nav bar, so clicking through it exercises in-page navigation and the loading animation. Between them the pages cover inline text elements, lists, forms (text, password, number, range, radio, checkbox, textarea, select) with submission and validation, flexbox layouts, tables, positioning, z-index, overflow clipping, percentage sizing, pseudo-classes (:hover/:focus/:active and structural/form), pseudo-elements (::before/::after), responsive design (@media), CSS animations/transitions (with lifecycle events), calc() expressions, CSS custom properties (var()), text transforms, letter/word spacing, border styles, outlines, background images, vertical alignment, table border collapse, linear gradients, CSS 2D transforms, CSS filters, text-overflow ellipsis, position:sticky, aspect-ratio, pointer-events, dataset, animation-play-state, programmatic scrolling, fetch, Web Storage, and ES modules.\n\n---\n\n## Dependencies\n\n| Package                                                        | Purpose                                     |\n| -------------------------------------------------------------- | ------------------------------------------- |\n| [AngleSharp](https://github.com/AngleSharp/AngleSharp)         | HTML parsing and CSS style computation      |\n| [AngleSharp.Css](https://github.com/AngleSharp/AngleSharp.Css) | CSS extension for AngleSharp                |\n| [Jint](https://github.com/sebastienros/jint)                   | JavaScript engine                           |\n| [Esprima](https://github.com/sebastienros/esprima-dotnet)      | JavaScript parser (used by Jint)            |\n| [SkiaSharp](https://github.com/mono/SkiaSharp)                 | 2D rendering                                |\n| Microsoft.AspNetCore.App                                       | Static file server _(Example project only)_ |\n\n---\n\n## Platform\n\nWindows only — the renderer uses Win32 APIs (User32, GDI32) for window creation and bitmap blitting.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanisss9%2Flite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanisss9%2Flite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanisss9%2Flite/lists"}