https://github.com/DioxusLabs/blitz Skip to content Navigation Menu Toggle navigation Sign in * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + GitHub Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions By size + Enterprise + Teams + Startups By industry + Healthcare + Financial services + Manufacturing By use case + CI/CD & Automation + DevOps + DevSecOps * Resources Topics + AI + DevOps + Security + Software Development Explore + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Enterprise + Enterprise platform AI-powered developer platform Available add-ons + Advanced Security Enterprise-grade security features + GitHub Copilot Enterprise-grade AI features + Premium Support Enterprise-grade 24/7 support * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up Reseting focus You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} DioxusLabs / blitz Public * Notifications You must be signed in to change notification settings * Fork 34 * Star 1.3k High performance HTML and CSS renderer powered by WGPU License MIT license 1.3k stars 34 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings * Code * Issues 15 * Pull requests 7 * Actions * Projects 0 * Security * Insights Additional navigation options * Code * Issues * Pull requests * Actions * Projects * Security * Insights DioxusLabs/blitz This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main BranchesTags Go to file Code Folders and files Name Name Last commit Last commit message date Latest commit History 283 Commits .github/workflows .github/ workflows examples examples packages packages tests tests .gitignore .gitignore CONTRIBUTING.MD CONTRIBUTING.MD Cargo.toml Cargo.toml LICENSE LICENSE README.md README.md View all files Repository files navigation * README * MIT license Blitz: A lightweight, modular, extensible web renderer Blitz is a "native" HTML/CSS renderer built to support the "Dioxus Native" project. It is effectively a lightweight webview except that the JavaScript engine is replaced with a native Rust API which allows Rust reactivity / state management libraries like Dioxus to interface with it directly. Talk to us in: the #native channel in the Dioxus Discord It currenly has two frontends: * An HTML/markdown frontend that can render an HTML string. This is useful for previewing HTML and/or markdown files but currently lacks interactivity. * A Dioxus frontend that can render a Dioxus VirtualDom. This has full interactivity support via Dioxus's event handling. Blitz builds upon: * Stylo (Firefox's parallel browser-grade CSS engine) for CSS resolution * Vello + WGPU for rendering * Taffy for box-level layout * Parley for text/inline-level layout * AccessKit for accessibility * Winit for windowing and input handling Note: This repo contains a new version of Blitz which uses Stylo. The source code for the old version is still available on the legacy branch but is not under active development. Screenshots The Dioxus renderer: screenshot The HTML renderer (rendering google.com): screenshot Trying it out 1. Clone this repo 2. Run an example: + cargo run --example google + cargo run --example url https://myurl.com + Other example available + Add --release for better runtime performance 3. Press Ctrl/Cmd + + / Ctrl/Cmd + - to change the scaling, press F1 to show layout rectangles Goals Blitz is designed to render HTML and CSS - we don't want to support the entirety of browser features (or at least we want to make all such "extra" features opt-in). In our opinion, the browser is bloated for the basic usecase of rendering HTML/CSS. We do intend to support: * Modern HTML layout (flexbox, grid, table, block, inline, absolute /fixed, etc). * Advanced CSS (complex selectors, media queries, css variables) * HTML Form controls * Accessibility using AccessKit * Extensibility via custom widgets Notably we don't provide features like webrtc, websockets, bluetooth, localstorage, etc. In a native app, much of this functionality can be fulfilled using regular Rust crates and doesn't need to be coupled with the renderer. We don't yet have Blitz bindings for other languages (JavaScript, Python, etc) but would accept contributions along those lines. Architecture Blitz is split into several pieces: * blitz-dom: The core DOM abstraction that includes style resolution and layout but not drawing/painting. Combines the best of Stylo and Taffy that allows you to build extendable dom-like structures. * blitz: Adds a Vello/WGPU based renderer to blitz-dom * dioxus-blitz: A dioxus integration layer for blitz. Render your Dioxus app using Blitz. Currently dioxus-blitz also contains the HTML renderer but this will likely be split out into it's own package in future. Status Blitz is currently experimental. We are actively working on bringing into a usable state but we would not yet recommend building apps with it. TODO * [*] Core DOM tree abstraction * [*] Parse styles using html5ever * [*] Compute styles for html5ever document * [*] Compute layout with Taffy * [*] Render using WGPU Rendering * [*] Render to window * [*] Render to image * [*] Gradients * [*] Border/Outline * [*] Raster images (png, jpeg, etc) * [*] Zoom * [ ] SVG + [*] External SVGs (basic support) + [ ] Inline SVGs * [ ] Shadows * [ ] Animations/Transitions * [ ] Standard form controls (Checkbox/Dropdown/slider/etc) * [ ] Custom widgets * [ ] Shadow elements Layout * [*] Inline (partial support - implementation still immature) * [*] Block * [*] Flexbox * [*] Grid + [ ] Named grid lines + [ ] Subgrid * [ ] Table * [ ] Z-index * [ ] Additional CSS features + [*] box-sizing: content-box + [ ] calc() + [ ] position: static + [ ] direction: rtl + [ ] transform Text * [ ] Font loading + [*] System font loading + [ ] Web font loading * [*] Text + [*] Shaping / Bidi + [*] Layout / line breaking + [*] Font size / line height + [*] Text color + [*] Bold / Italic + [*] Underline / Strikethrough * [ ] Text selection Input * [ ] Scrolling + [*] The root view + [ ] Any overflow: scroll element * [*] Hover detection * [*] Click handling * [*] Text input Performance * [*] Hot reloading * [ ] Scrolling without re-resolving style and layout * [ ] Style caching * [ ] Layout caching Other * [*] Multiwindow * [*] Accessibility tree * [*] Focus * [ ] Devtools * [ ] Hooks for context menu * [ ] use_wgpu_context() to grab an element as an arbitrary render surface License This project is dual licensed under the Apache 2.0 and MIT licenses Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in stylo-dioxus by you, shall be licensed as MIT, without any additional terms or conditions. About High performance HTML and CSS renderer powered by WGPU Resources Readme License MIT license Activity Custom properties Stars 1.3k stars Watchers 13 watching Forks 34 forks Report repository Releases No releases published Packages 0 No packages published Contributors 7 * @nicoburns * @jkelleyrtp * @matthunz * @DavidHusicka * @mrgzi * @luoxiaozero * @kokoISnoTarget Languages * Rust 94.0% * CSS 6.0% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.