hyper_render_devtools

Flutter DevTools extension for HyperRender — inspect UDT node trees, computed styles, layout fragments, and performance metrics directly inside Flutter DevTools.

Features

  • UDT Tree Inspector — browse the full Universal Document Tree with node types, tag names, and inline text content
  • Computed Style Viewer — inspect every CSS property resolved on any node (font, box model, display, float, grid, CSS variables)
  • Layout Fragment & Line Data — see every inline fragment with its width/height/offset, and every line with its baseline
  • Performance Summary — fragment count, line count, and phase timing (when wired with HyperRenderDebugHooks.getPerformanceData)
  • Timeline — layout + paint time for every renderer (each virtualized chunk is one), slowest first, with a paint sparkline and a 1-second live mode. Paint is canvas recording time on the UI thread, not GPU raster time. Keeps the last 120 samples per renderer.
  • Selection debug — the current selection range and every text/ruby fragment's global character boundaries [start, end), with the selected part highlighted and ruby annotation text/height/position
  • CSS Variables — where each --custom-property is defined or changes value. Click ✎ to override one live: every HyperViewer in the app re-resolves its styles (needs hyper_render 1.10.0+; a bare HyperRenderWidget with a prebuilt document is not re-resolved). Use sites are not shown: var() is substituted when styles resolve
  • Export snapshot — one JSON object (tree with computed styles, fragments, lines, selection, timing, CSS variables) for offline analysis; copy from the dialog
  • Auto-discovery — all HyperViewer / HyperRenderWidget instances register automatically; no per-widget setup needed
  • Demo Mode — open the panel without a running app to explore the inspector UI with sample data

Getting Started

Add the package to your app's dev_dependencies (debug-only usage):

dev_dependencies:
  hyper_render_devtools: ^1.8.0

Or add to dependencies if you want it available in profile builds:

dependencies:
  hyper_render_devtools: ^1.8.0

Usage

Call HyperRenderDevtools.register() once at app startup, before runApp:

import 'package:flutter/material.dart';
import 'package:hyper_render/hyper_render.dart';
import 'package:hyper_render_devtools/hyper_render_devtools.dart';

void main() {
  // Register DevTools service extensions (debug mode only, no-op in release).
  assert(() {
    HyperRenderDevtools.register();
    return true;
  }());

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: HyperViewer(
          html: '<h1>Hello <strong>HyperRender</strong></h1>'
                '<p>Open Flutter DevTools → HyperRender tab to inspect.</p>',
        ),
      ),
    );
  }
}

Opening the DevTools panel

  1. Run your app in debug mode: flutter run
  2. Open Flutter DevTools (via IDE or flutter devtools)
  3. Select the hyper_render_devtools tab in the sidebar
  4. Use the dropdown to pick an active renderer instance

Service extensions

The package registers ten VM service extensions:

Extension Description
ext.hyperRender.listRenderers List all active renderer IDs
ext.hyperRender.getUdt Full UDT node tree for a renderer
ext.hyperRender.getNodeStyle Computed style for a specific node
ext.hyperRender.getFragments Layout fragments + lines from last pass
ext.hyperRender.getPerformance Performance summary (fragment/line counts + timing)
ext.hyperRender.getTimeline Last 120 layout/paint timings per renderer (all renderers, or one via id)
ext.hyperRender.getSelection Current selection start/end (global character offsets)
ext.hyperRender.getCssVariables CSS custom property definition sites
ext.hyperRender.exportSnapshot Everything above for one renderer, as one JSON object
ext.hyperRender.setCssVariable Override a --var live (name, value; empty value removes it, name: * clears all)

Manual registration

If you need to expose a custom document source that does not go through RenderHyperBox, use the manual API:

HyperRenderDevtools.registerRenderer('my-id', () => myDocument);
// ...
HyperRenderDevtools.unregisterRenderer('my-id');

Architecture

hyper_render_devtools (this package)
├── lib/src/service_extensions.dart  — VM service extension registration
│                                      + HyperRenderDebugHooks wiring
├── lib/src/udt_serializer.dart      — UDT → JSON serialization
└── extension/devtools/
    ├── config.yaml                  — DevTools panel metadata
    └── build/                       — compiled Flutter Web panel (devtools_ui)

The devtools_ui sub-directory contains the Flutter Web source for the panel UI. It is pre-compiled and included in extension/devtools/build/ so no extra build step is required for package consumers.

HyperRender Ecosystem

Package Description
hyper_render Main package — HyperViewer widget, HTML + Markdown rendering
hyper_render_core Core engine: UDT model, RenderHyperBox, plugin API
hyper_render_html HTML + CSS → UDT parser
hyper_render_markdown Markdown (GFM) → UDT parser
hyper_render_highlight Syntax highlighting for <code> / <pre> blocks
hyper_render_epub EPUB 2/3 reader container & archive decoder (opt-in)
hyper_render_clipboard Image copy / save / share (opt-in)
hyper_render_math LaTeX / MathML rendering (opt-in)
hyper_render_devtools Flutter DevTools inspector ← you are here

Source · Issues · Changelog

Libraries

hyper_render_devtools
HyperRender DevTools Extension