blitz-architecture

Explain the Blitz rendering engine's architecture and data flow from input to GPU output.

1|Updated Mar 15, 2026
One-click install
npx skills add https://github.com/hafley66/claude-research --skill blitz-architecture
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: blitz-architecture
Source: https://github.com/hafley66/claude-research/tree/main/skills/blitz-architecture
Command: npx skills add https://github.com/hafley66/claude-research --skill blitz-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a comprehensive blueprint of the Blitz rendering engine, detailing its architecture, data flow, and integration points to aid engineers in designing, auditing, or extending a native rendering pipeline.

Core Features & Use Cases

  • Architecture overview of core crates: blitz-dom, blitz-shell, blitz-paint, and the stylo_taffy bridge, clarifying responsibilities and data paths from input to paint.
  • End-to-end data flow: HTML5 parsing via html5ever, DOM state, style resolution, layout computation, and paint command emission to back-end renderers like anyrender/Vello.
  • Embedding and headless applicability: scenarios for native apps, embedded systems, and browser-like interfaces without a webview.

Quick Start

Provide a simple HTML or Dioxus RSX input to observe the end-to-end Blitz rendering pipeline.

Frequently Asked Questions about blitz-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How does a native rendering pipeline like Blitz process HTML to GPU output?

A native rendering pipeline processes HTML to GPU output by parsing input via html5ever, resolving styles, computing layout, and emitting paint commands to a backend renderer like Vello. Blitz documents this three-phase flow: STYLE, LAYOUT, and EVENTS.

Can I build a headless rendering engine for embedded systems without a webview?

Yes, you can build a headless rendering engine for embedded systems without a webview. Blitz is designed specifically for native apps and embedded systems, providing a browser-like interface pipeline that bypasses traditional webview dependencies.

What is the best way to integrate Dioxus RSX into a native rendering architecture?

The best way to integrate Dioxus RSX into a native rendering architecture is to feed it as input into the rendering pipeline. The architecture processes Dioxus RSX alongside standard HTML5, routing it through DOM state and style resolution before reaching the GPU.

Does the Blitz rendering engine use Stylo and Taffy for layout computation?

Yes, the Blitz rendering engine uses Stylo and Taffy for layout computation through a dedicated stylo_taffy bridge. This bridge connects style resolution and layout computation within the pipeline's core architecture.

How do I start rendering a simple HTML input end-to-end with Blitz?

To start rendering a simple HTML input end-to-end, provide the HTML or Dioxus RSX input directly into the Blitz pipeline. The engine will handle DOM state, style resolution, layout, and paint command emission to observe the full output.

What are the core package responsibilities in a native rendering pipeline architecture?

Core package responsibilities in a native rendering pipeline architecture are divided among blitz-dom for DOM state, blitz-shell for structure, blitz-paint for command emission, and the stylo_taffy bridge for style and layout computation.