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:

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 #

Source · Issues · Changelog