diff --git a/lib/custom_render.dart b/lib/custom_render.dart
index 1115c3ae78..a497010cf4 100644
--- a/lib/custom_render.dart
+++ b/lib/custom_render.dart
@@ -11,39 +11,44 @@ import 'package:flutter_html/src/utils.dart';
 typedef CustomRenderMatcher = bool Function(RenderContext context);
 
 CustomRenderMatcher tagMatcher(String tag) => (context) {
-  return context.tree.element?.localName == tag;
-};
+      return context.tree.element?.localName == tag;
+    };
 
 CustomRenderMatcher blockElementMatcher() => (context) {
-  return context.tree.style.display == Display.BLOCK &&
-      (context.tree.children.isNotEmpty || context.tree.element?.localName == "hr");
-};
+      return context.tree.style.display == Display.BLOCK &&
+          (context.tree.children.isNotEmpty ||
+              context.tree.element?.localName == "hr");
+    };
 
 CustomRenderMatcher listElementMatcher() => (context) {
-  return context.tree.style.display == Display.LIST_ITEM;
-};
+      return context.tree.style.display == Display.LIST_ITEM;
+    };
 
 CustomRenderMatcher replacedElementMatcher() => (context) {
-  return context.tree is ReplacedElement;
-};
+      return context.tree is ReplacedElement;
+    };
 
-CustomRenderMatcher dataUriMatcher({String? encoding = 'base64', String? mime}) => (context) {
-  if (context.tree.element?.attributes == null
-      || _src(context.tree.element!.attributes.cast()) == null) return false;
-  final dataUri = _dataUriFormat.firstMatch(_src(context.tree.element!.attributes.cast())!);
-  return dataUri != null && dataUri.namedGroup('mime') != "image/svg+xml" &&
-      (mime == null || dataUri.namedGroup('mime') == mime) &&
-      (encoding == null || dataUri.namedGroup('encoding') == ';$encoding');
-};
+CustomRenderMatcher dataUriMatcher(
+        {String? encoding = 'base64', String? mime}) =>
+    (context) {
+      if (context.tree.element?.attributes == null ||
+          _src(context.tree.element!.attributes.cast()) == null) return false;
+      final dataUri = _dataUriFormat
+          .firstMatch(_src(context.tree.element!.attributes.cast())!);
+      return dataUri != null &&
+          dataUri.namedGroup('mime') != "image/svg+xml" &&
+          (mime == null || dataUri.namedGroup('mime') == mime) &&
+          (encoding == null || dataUri.namedGroup('encoding') == ';$encoding');
+    };
 
 CustomRenderMatcher networkSourceMatcher({
   List<String> schemas: const ["https", "http"],
   List<String>? domains,
   String? extension,
 }) =>
-        (context) {
-      if (context.tree.element?.attributes.cast() == null
-          || _src(context.tree.element!.attributes.cast()) == null) return false;
+    (context) {
+      if (context.tree.element?.attributes.cast() == null ||
+          _src(context.tree.element!.attributes.cast()) == null) return false;
       try {
         final src = Uri.parse(_src(context.tree.element!.attributes.cast())!);
         return schemas.contains(src.scheme) &&
@@ -55,34 +60,35 @@ CustomRenderMatcher networkSourceMatcher({
     };
 
 CustomRenderMatcher assetUriMatcher() => (context) =>
-    context.tree.element?.attributes.cast() != null
-    && _src(context.tree.element!.attributes.cast()) != null
-    && _src(context.tree.element!.attributes.cast())!.startsWith("asset:")
-    && !_src(context.tree.element!.attributes.cast())!.endsWith(".svg");
+    context.tree.element?.attributes.cast() != null &&
+    _src(context.tree.element!.attributes.cast()) != null &&
+    _src(context.tree.element!.attributes.cast())!.startsWith("asset:") &&
+    !_src(context.tree.element!.attributes.cast())!.endsWith(".svg");
 
 CustomRenderMatcher textContentElementMatcher() => (context) {
-  return context.tree is TextContentElement;
-};
+      return context.tree is TextContentElement;
+    };
 
 CustomRenderMatcher interactableElementMatcher() => (context) {
-  return context.tree is InteractableElement;
-};
+      return context.tree is InteractableElement;
+    };
 
 CustomRenderMatcher layoutElementMatcher() => (context) {
-  return context.tree is LayoutElement;
-};
+      return context.tree is LayoutElement;
+    };
 
 CustomRenderMatcher verticalAlignMatcher() => (context) {
-  return context.tree.style.verticalAlign != null
-      && context.tree.style.verticalAlign != VerticalAlign.BASELINE;
-};
+      return context.tree.style.verticalAlign != null &&
+          context.tree.style.verticalAlign != VerticalAlign.BASELINE;
+    };
 
 CustomRenderMatcher fallbackMatcher() => (context) {
-  return true;
-};
+      return true;
+    };
 
 class CustomRender {
-  final InlineSpan Function(RenderContext, List<InlineSpan> Function())? inlineSpan;
+  final InlineSpan Function(RenderContext, List<InlineSpan> Function())?
+      inlineSpan;
   final Widget Function(RenderContext, List<InlineSpan> Function())? widget;
 
   CustomRender.inlineSpan({
@@ -102,188 +108,242 @@ class SelectableCustomRender extends CustomRender {
   }) : super.inlineSpan(inlineSpan: null);
 }
 
-CustomRender blockElementRender({
-  Style? style,
-  List<InlineSpan>? children}) =>
+CustomRender blockElementRender({Style? style, List<InlineSpan>? children}) =>
     CustomRender.inlineSpan(inlineSpan: (context, buildChildren) {
-        if (context.parser.selectable) {
-          return TextSpan(
-            style: context.style.generateTextStyle(),
-            children: (children as List<TextSpan>?) ?? context.tree.children
-                .expandIndexed((i, childTree) => [
-              if (childTree.style.display == Display.BLOCK &&
-                  i > 0 &&
-                  context.tree.children[i - 1] is ReplacedElement)
-                TextSpan(text: "\n"),
-              context.parser.parseTree(context, childTree),
-              if (i != context.tree.children.length - 1 &&
-                  childTree.style.display == Display.BLOCK &&
-                  childTree.element?.localName != "html" &&
-                  childTree.element?.localName != "body")
-                TextSpan(text: "\n"),
-            ])
-                .toList(),
-          );
-        }
-        return WidgetSpan(
+      if (context.parser.selectable) {
+        return TextSpan(
+          style: context.style.generateTextStyle(),
+          children: (children as List<TextSpan>?) ??
+              context.tree.children
+                  .expandIndexed((i, childTree) => [
+                        if (childTree.style.display == Display.BLOCK &&
+                            i > 0 &&
+                            context.tree.children[i - 1] is ReplacedElement)
+                          TextSpan(text: "\n"),
+                        context.parser.parseTree(context, childTree),
+                        if (i != context.tree.children.length - 1 &&
+                            childTree.style.display == Display.BLOCK &&
+                            childTree.element?.localName != "html" &&
+                            childTree.element?.localName != "body")
+                          TextSpan(text: "\n"),
+                      ])
+                  .toList(),
+        );
+      }
+      return WidgetSpan(
           child: ContainerSpan(
-            key: context.key,
-            newContext: context,
-            style: style ?? context.tree.style,
-            shrinkWrap: context.parser.shrinkWrap,
-            children: children ?? context.tree.children
+        key: context.key,
+        newContext: context,
+        style: style ?? context.tree.style,
+        shrinkWrap: context.parser.shrinkWrap,
+        children: children ??
+            context.tree.children
                 .expandIndexed((i, childTree) => [
-              if (context.parser.shrinkWrap &&
-                  childTree.style.display == Display.BLOCK &&
-                  i > 0 &&
-                  context.tree.children[i - 1] is ReplacedElement)
-                TextSpan(text: "\n"),
-              context.parser.parseTree(context, childTree),
-              if (context.parser.shrinkWrap &&
-                  i != context.tree.children.length - 1 &&
-                  childTree.style.display == Display.BLOCK &&
-                  childTree.element?.localName != "html" &&
-                  childTree.element?.localName != "body")
-                TextSpan(text: "\n"),
-            ])
+                      if (context.parser.shrinkWrap &&
+                          childTree.style.display == Display.BLOCK &&
+                          i > 0 &&
+                          context.tree.children[i - 1] is ReplacedElement)
+                        TextSpan(text: "\n"),
+                      context.parser.parseTree(context, childTree),
+                      if (context.parser.shrinkWrap &&
+                          i != context.tree.children.length - 1 &&
+                          childTree.style.display == Display.BLOCK &&
+                          childTree.element?.localName != "html" &&
+                          childTree.element?.localName != "body")
+                        TextSpan(text: "\n"),
+                    ])
                 .toList(),
-          ));
+      ));
     });
 
-CustomRender listElementRender({
-  Style? style,
-  Widget? child,
-  List<InlineSpan>? children}) =>
-    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) =>
-        WidgetSpan(
-          child: ContainerSpan(
-            key: context.key,
-            newContext: context,
-            style: style ?? context.tree.style,
-            shrinkWrap: context.parser.shrinkWrap,
-            child: Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisSize: MainAxisSize.min,
-              textDirection: style?.direction ?? context.tree.style.direction,
-              children: [
-                (style?.listStylePosition ?? context.tree.style.listStylePosition) == ListStylePosition.OUTSIDE ?
-                Padding(
-                  padding: style?.padding?.nonNegative ?? context.tree.style.padding?.nonNegative
-                      ?? EdgeInsets.only(left: (style?.direction ?? context.tree.style.direction) != TextDirection.rtl ? 10.0 : 0.0,
-                          right: (style?.direction ?? context.tree.style.direction) == TextDirection.rtl ? 10.0 : 0.0),
-                  child: style?.markerContent ?? context.style.markerContent
-                ) : Container(height: 0, width: 0),
-                Text("\u0020", textAlign: TextAlign.right, style: TextStyle(fontWeight: FontWeight.w400)),
-                Expanded(
-                    child: Padding(
-                        padding: (style?.listStylePosition ?? context.tree.style.listStylePosition) == ListStylePosition.INSIDE ?
-                          EdgeInsets.only(left: (style?.direction ?? context.tree.style.direction) != TextDirection.rtl ? 10.0 : 0.0,
-                            right: (style?.direction ?? context.tree.style.direction) == TextDirection.rtl ? 10.0 : 0.0) : EdgeInsets.zero,
-                        child: StyledText(
-                          textSpan: TextSpan(
-                            children: _getListElementChildren(style?.listStylePosition ?? context.tree.style.listStylePosition, buildChildren)
-                              ..insertAll(0, context.tree.style.listStylePosition == ListStylePosition.INSIDE ?
-                            [
-                              WidgetSpan(alignment: PlaceholderAlignment.middle, child: style?.markerContent ?? context.style.markerContent ?? Container(height: 0, width: 0))
-                            ] : []),
-                            style: style?.generateTextStyle() ?? context.style.generateTextStyle(),
-                          ),
-                          style: style ?? context.style,
-                          renderContext: context,
-                        )
-                    )
-                )
-              ],
-            ),
-          ),
-));
-
-CustomRender replacedElementRender({PlaceholderAlignment? alignment, TextBaseline? baseline, Widget? child}) =>
-    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => WidgetSpan(
-  alignment: alignment ?? (context.tree as ReplacedElement).alignment,
-  baseline: baseline ?? TextBaseline.alphabetic,
-  child: child ?? (context.tree as ReplacedElement).toWidget(context)!,
-));
+CustomRender listElementRender(
+        {Style? style, Widget? child, List<InlineSpan>? children}) =>
+    CustomRender.inlineSpan(
+        inlineSpan: (context, buildChildren) => WidgetSpan(
+              child: ContainerSpan(
+                key: context.key,
+                newContext: context,
+                style: style ?? context.tree.style,
+                shrinkWrap: context.parser.shrinkWrap,
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  textDirection:
+                      style?.direction ?? context.tree.style.direction,
+                  children: [
+                    (style?.listStylePosition ??
+                                context.tree.style.listStylePosition) ==
+                            ListStylePosition.OUTSIDE
+                        ? Padding(
+                            padding: style?.padding?.nonNegative ??
+                                context.tree.style.padding?.nonNegative ??
+                                EdgeInsets.only(
+                                    left: (style?.direction ??
+                                                context.tree.style.direction) !=
+                                            TextDirection.rtl
+                                        ? 10.0
+                                        : 0.0,
+                                    right: (style?.direction ??
+                                                context.tree.style.direction) ==
+                                            TextDirection.rtl
+                                        ? 10.0
+                                        : 0.0),
+                            child: style?.markerContent ??
+                                context.style.markerContent)
+                        : Container(height: 0, width: 0),
+                    Text("\u0020",
+                        textAlign: TextAlign.right,
+                        style: TextStyle(fontWeight: FontWeight.w400)),
+                    Expanded(
+                        child: Padding(
+                            padding: (style?.listStylePosition ??
+                                        context.tree.style.listStylePosition) ==
+                                    ListStylePosition.INSIDE
+                                ? EdgeInsets.only(
+                                    left: (style?.direction ??
+                                                context.tree.style.direction) !=
+                                            TextDirection.rtl
+                                        ? 10.0
+                                        : 0.0,
+                                    right: (style?.direction ??
+                                                context.tree.style.direction) ==
+                                            TextDirection.rtl
+                                        ? 10.0
+                                        : 0.0)
+                                : EdgeInsets.zero,
+                            child: StyledText(
+                              textSpan: TextSpan(
+                                children: _getListElementChildren(
+                                    style?.listStylePosition ??
+                                        context.tree.style.listStylePosition,
+                                    buildChildren)
+                                  ..insertAll(
+                                      0,
+                                      context.tree.style.listStylePosition ==
+                                              ListStylePosition.INSIDE
+                                          ? [
+                                              WidgetSpan(
+                                                  alignment:
+                                                      PlaceholderAlignment
+                                                          .middle,
+                                                  child: style?.markerContent ??
+                                                      context.style
+                                                          .markerContent ??
+                                                      Container(
+                                                          height: 0, width: 0))
+                                            ]
+                                          : []),
+                                style: style?.generateTextStyle() ??
+                                    context.style.generateTextStyle(),
+                              ),
+                              style: style ?? context.style,
+                              renderContext: context,
+                            )))
+                  ],
+                ),
+              ),
+            ));
+
+CustomRender replacedElementRender(
+        {PlaceholderAlignment? alignment,
+        TextBaseline? baseline,
+        Widget? child}) =>
+    CustomRender.inlineSpan(
+        inlineSpan: (context, buildChildren) => WidgetSpan(
+              alignment:
+                  alignment ?? (context.tree as ReplacedElement).alignment,
+              baseline: baseline ?? TextBaseline.alphabetic,
+              child:
+                  child ?? (context.tree as ReplacedElement).toWidget(context)!,
+            ));
 
 CustomRender textContentElementRender({String? text}) =>
-    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) =>
-      TextSpan(text: (text ?? (context.tree as TextContentElement).text).transformed(context.tree.style.textTransform)));
-
-CustomRender base64ImageRender() => CustomRender.widget(widget: (context, buildChildren) {
-  final decodedImage = base64.decode(_src(context.tree.element!.attributes.cast())!.split("base64,")[1].trim());
-  precacheImage(
-    MemoryImage(decodedImage),
-    context.buildContext,
-    onError: (exception, StackTrace? stackTrace) {
-      context.parser.onImageError?.call(exception, stackTrace);
-    },
-  );
-  final widget = Image.memory(
-    decodedImage,
-    frameBuilder: (ctx, child, frame, _) {
-      if (frame == null) {
-        return Text(_alt(context.tree.element!.attributes.cast()) ?? "", style: context.style.generateTextStyle());
-      }
-      return child;
-    },
-  );
-  return Builder(
-      key: context.key,
-      builder: (buildContext) {
-        return GestureDetector(
-          child: widget,
-          onTap: () {
-            if (MultipleTapGestureDetector.of(buildContext) != null) {
-              MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
-            }
-            context.parser.onImageTap?.call(
-                _src(context.tree.element!.attributes.cast())!.split("base64,")[1].trim(),
-                context,
-                context.tree.element!.attributes.cast(),
-                context.tree.element
+    CustomRender.inlineSpan(
+        inlineSpan: (context, buildChildren) => TextSpan(
+            text: (text ?? (context.tree as TextContentElement).text)
+                .transformed(context.tree.style.textTransform)));
+
+CustomRender base64ImageRender() =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      final decodedImage = base64.decode(
+          _src(context.tree.element!.attributes.cast())!
+              .split("base64,")[1]
+              .trim());
+      precacheImage(
+        MemoryImage(decodedImage),
+        context.buildContext,
+        onError: (exception, StackTrace? stackTrace) {
+          context.parser.onImageError?.call(exception, stackTrace);
+        },
+      );
+      final widget = Image.memory(
+        decodedImage,
+        frameBuilder: (ctx, child, frame, _) {
+          if (frame == null) {
+            return Text(_alt(context.tree.element!.attributes.cast()) ?? "",
+                style: context.style.generateTextStyle());
+          }
+          return child;
+        },
+      );
+      return Builder(
+          key: context.key,
+          builder: (buildContext) {
+            return GestureDetector(
+              child: widget,
+              onTap: () {
+                if (MultipleTapGestureDetector.of(buildContext) != null) {
+                  MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
+                }
+                context.parser.onImageTap?.call(
+                    _src(context.tree.element!.attributes.cast())!
+                        .split("base64,")[1]
+                        .trim(),
+                    context,
+                    context.tree.element!.attributes.cast(),
+                    context.tree.element);
+              },
             );
-          },
-        );
-      }
-  );
-});
+          });
+    });
 
 CustomRender assetImageRender({
   double? width,
   double? height,
-}) => CustomRender.widget(widget: (context, buildChildren) {
-  final assetPath = _src(context.tree.element!.attributes.cast())!.replaceFirst('asset:', '');
-  final widget = Image.asset(
-    assetPath,
-    width: width ?? _width(context.tree.element!.attributes.cast()),
-    height: height ?? _height(context.tree.element!.attributes.cast()),
-    frameBuilder: (ctx, child, frame, _) {
-      if (frame == null) {
-        return Text(_alt(context.tree.element!.attributes.cast()) ?? "", style: context.style.generateTextStyle());
-      }
-      return child;
-    },
-  );
-  return Builder(
-      key: context.key,
-      builder: (buildContext) {
-        return GestureDetector(
-          child: widget,
-          onTap: () {
-            if (MultipleTapGestureDetector.of(buildContext) != null) {
-              MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
-            }
-            context.parser.onImageTap?.call(
-                assetPath,
-                context,
-                context.tree.element!.attributes.cast(),
-                context.tree.element
+}) =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      final assetPath = _src(context.tree.element!.attributes.cast())!
+          .replaceFirst('asset:', '');
+      final widget = Image.asset(
+        assetPath,
+        width: width ?? _width(context.tree.element!.attributes.cast()),
+        height: height ?? _height(context.tree.element!.attributes.cast()),
+        frameBuilder: (ctx, child, frame, _) {
+          if (frame == null) {
+            return Text(_alt(context.tree.element!.attributes.cast()) ?? "",
+                style: context.style.generateTextStyle());
+          }
+          return child;
+        },
+      );
+      return Builder(
+          key: context.key,
+          builder: (buildContext) {
+            return GestureDetector(
+              child: widget,
+              onTap: () {
+                if (MultipleTapGestureDetector.of(buildContext) != null) {
+                  MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
+                }
+                context.parser.onImageTap?.call(
+                    assetPath,
+                    context,
+                    context.tree.element!.attributes.cast(),
+                    context.tree.element);
+              },
             );
-          },
-        );
-      }
-  );
-});
+          });
+    });
 
 CustomRender networkImageRender({
   Map<String, String>? headers,
@@ -292,151 +352,164 @@ CustomRender networkImageRender({
   double? height,
   Widget Function(String?)? altWidget,
   Widget Function()? loadingWidget,
-}) => CustomRender.widget(widget: (context, buildChildren) {
-  final src = mapUrl?.call(_src(context.tree.element!.attributes.cast()))
-      ?? _src(context.tree.element!.attributes.cast())!;
-  Completer<Size> completer = Completer();
-  if (context.parser.cachedImageSizes[src] != null) {
-    completer.complete(context.parser.cachedImageSizes[src]);
-  } else {
-    Image image = Image.network(src, frameBuilder: (ctx, child, frame, _) {
-      if (frame == null) {
-        if (!completer.isCompleted) {
-          completer.completeError("error");
-        }
-        return child;
+}) =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      final src = mapUrl?.call(_src(context.tree.element!.attributes.cast())) ??
+          _src(context.tree.element!.attributes.cast())!;
+      Completer<Size> completer = Completer();
+      if (context.parser.cachedImageSizes[src] != null) {
+        completer.complete(context.parser.cachedImageSizes[src]);
       } else {
-        return child;
-      }
-    });
-
-    ImageStreamListener? listener;
-    listener = ImageStreamListener((ImageInfo imageInfo, bool synchronousCall) {
-      var myImage = imageInfo.image;
-      Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
-      if (!completer.isCompleted) {
-        context.parser.cachedImageSizes[src] = size;
-        completer.complete(size);
-        image.image.resolve(ImageConfiguration()).removeListener(listener!);
-      }
-    }, onError: (object, stacktrace) {
-      if (!completer.isCompleted) {
-        completer.completeError(object);
-        image.image.resolve(ImageConfiguration()).removeListener(listener!);
+        Image image = Image.network(src, frameBuilder: (ctx, child, frame, _) {
+          if (frame == null) {
+            if (!completer.isCompleted) {
+              completer.completeError("error");
+            }
+            return child;
+          } else {
+            return child;
+          }
+        });
+
+        ImageStreamListener? listener;
+        listener =
+            ImageStreamListener((ImageInfo imageInfo, bool synchronousCall) {
+          var myImage = imageInfo.image;
+          Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
+          if (!completer.isCompleted) {
+            context.parser.cachedImageSizes[src] = size;
+            completer.complete(size);
+            image.image.resolve(ImageConfiguration()).removeListener(listener!);
+          }
+        }, onError: (object, stacktrace) {
+          if (!completer.isCompleted) {
+            completer.completeError(object);
+            image.image.resolve(ImageConfiguration()).removeListener(listener!);
+          }
+        });
+
+        image.image.resolve(ImageConfiguration()).addListener(listener);
       }
-    });
-
-    image.image.resolve(ImageConfiguration()).addListener(listener);
-  }
-  final attributes = context.tree.element!.attributes.cast<String, String>();
-  final widget = FutureBuilder<Size>(
-    future: completer.future,
-    initialData: context.parser.cachedImageSizes[src],
-    builder: (BuildContext buildContext, AsyncSnapshot<Size> snapshot) {
-      if (snapshot.hasData) {
-        return Container(
-          constraints: BoxConstraints(
-              maxWidth: width ?? _width(attributes) ?? snapshot.data!.width,
-              maxHeight:
-              (width ?? _width(attributes) ?? snapshot.data!.width) /
-                  _aspectRatio(attributes, snapshot)),
-          child: AspectRatio(
-            aspectRatio: _aspectRatio(attributes, snapshot),
-            child: Image.network(
-              src,
-              headers: headers,
-              width: width ?? _width(attributes) ?? snapshot.data!.width,
-              height: height ?? _height(attributes),
-              frameBuilder: (ctx, child, frame, _) {
-                if (frame == null) {
-                  return altWidget?.call(_alt(attributes)) ??
-                      Text(_alt(attributes) ?? "",
-                          style: context.style.generateTextStyle());
+      final attributes =
+          context.tree.element!.attributes.cast<String, String>();
+      final widget = FutureBuilder<Size>(
+        future: completer.future,
+        initialData: context.parser.cachedImageSizes[src],
+        builder: (BuildContext buildContext, AsyncSnapshot<Size> snapshot) {
+          if (snapshot.hasData) {
+            return Container(
+              constraints: BoxConstraints(
+                  maxWidth: width ?? _width(attributes) ?? snapshot.data!.width,
+                  maxHeight:
+                      (width ?? _width(attributes) ?? snapshot.data!.width) /
+                          _aspectRatio(attributes, snapshot)),
+              child: AspectRatio(
+                aspectRatio: _aspectRatio(attributes, snapshot),
+                child: Image.network(
+                  src,
+                  headers: headers,
+                  width: width ?? _width(attributes) ?? snapshot.data!.width,
+                  height: height ?? _height(attributes),
+                  frameBuilder: (ctx, child, frame, _) {
+                    if (frame == null) {
+                      return altWidget?.call(_alt(attributes)) ??
+                          Text(_alt(attributes) ?? "",
+                              style: context.style.generateTextStyle());
+                    }
+                    return child;
+                  },
+                ),
+              ),
+            );
+          } else if (snapshot.hasError) {
+            return altWidget
+                    ?.call(_alt(context.tree.element!.attributes.cast())) ??
+                Text(_alt(context.tree.element!.attributes.cast()) ?? "",
+                    style: context.style.generateTextStyle());
+          } else {
+            return loadingWidget?.call() ?? const CircularProgressIndicator();
+          }
+        },
+      );
+      return Builder(
+          key: context.key,
+          builder: (buildContext) {
+            return GestureDetector(
+              child: widget,
+              onTap: () {
+                if (MultipleTapGestureDetector.of(buildContext) != null) {
+                  MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
                 }
-                return child;
+                context.parser.onImageTap?.call(
+                    src,
+                    context,
+                    context.tree.element!.attributes.cast(),
+                    context.tree.element);
               },
-            ),
-          ),
-        );
-      } else if (snapshot.hasError) {
-        return altWidget?.call(_alt(context.tree.element!.attributes.cast())) ??
-            Text(_alt(context.tree.element!.attributes.cast())
-                ?? "", style: context.style.generateTextStyle());
-      } else {
-        return loadingWidget?.call() ?? const CircularProgressIndicator();
-      }
-    },
-  );
-  return Builder(
-      key: context.key,
-      builder: (buildContext) {
-        return GestureDetector(
-          child: widget,
-          onTap: () {
-            if (MultipleTapGestureDetector.of(buildContext) != null) {
-              MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
-            }
-            context.parser.onImageTap?.call(
-                src,
-                context,
-                context.tree.element!.attributes.cast(),
-                context.tree.element
             );
-          },
-        );
-      }
-  );
-});
+          });
+    });
 
 CustomRender interactableElementRender({List<InlineSpan>? children}) =>
-    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => TextSpan(
-  children: children ?? (context.tree as InteractableElement).children
-      .map((tree) => context.parser.parseTree(context, tree))
-      .map((childSpan) {
-    return _getInteractableChildren(context, context.tree as InteractableElement, childSpan,
-        context.style.generateTextStyle().merge(childSpan.style));
-  }).toList(),
-));
-
-CustomRender layoutElementRender({Widget? child}) =>
-  CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => WidgetSpan(
-    child: child ?? (context.tree as LayoutElement).toWidget(context)!,
-));
-
-CustomRender verticalAlignRender({
-  double? verticalOffset,
-  Style? style,
-  List<InlineSpan>? children}) =>
-    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => WidgetSpan(
-  child: Transform.translate(
-    key: context.key,
-    offset: Offset(0, verticalOffset ?? _getVerticalOffset(context.tree)),
-    child: StyledText(
-      textSpan: TextSpan(
-        style: style?.generateTextStyle() ?? context.style.generateTextStyle(),
-        children: children ?? buildChildren.call(),
-      ),
-      style: context.style,
-      renderContext: context,
-    ),
-  ),
-));
+    CustomRender.inlineSpan(
+        inlineSpan: (context, buildChildren) => TextSpan(
+              children: children ??
+                  (context.tree as InteractableElement)
+                      .children
+                      .map((tree) => context.parser.parseTree(context, tree))
+                      .map((childSpan) {
+                    return _getInteractableChildren(
+                        context,
+                        context.tree as InteractableElement,
+                        childSpan,
+                        context.style
+                            .generateTextStyle()
+                            .merge(childSpan.style));
+                  }).toList(),
+            ));
+
+CustomRender layoutElementRender({Widget? child}) => CustomRender.inlineSpan(
+    inlineSpan: (context, buildChildren) => WidgetSpan(
+          child: child ?? (context.tree as LayoutElement).toWidget(context)!,
+        ));
+
+CustomRender verticalAlignRender(
+        {double? verticalOffset, Style? style, List<InlineSpan>? children}) =>
+    CustomRender.inlineSpan(
+        inlineSpan: (context, buildChildren) => WidgetSpan(
+              child: Transform.translate(
+                key: context.key,
+                offset: Offset(
+                    0, verticalOffset ?? _getVerticalOffset(context.tree)),
+                child: StyledText(
+                  textSpan: TextSpan(
+                    style: style?.generateTextStyle() ??
+                        context.style.generateTextStyle(),
+                    children: children ?? buildChildren.call(),
+                  ),
+                  style: context.style,
+                  renderContext: context,
+                ),
+              ),
+            ));
 
 CustomRender fallbackRender({Style? style, List<InlineSpan>? children}) =>
-    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => TextSpan(
-      style: style?.generateTextStyle() ?? context.style.generateTextStyle(),
-      children: context.tree.children
-          .expand((tree) => [
-        context.parser.parseTree(context, tree),
-        if (tree.style.display == Display.BLOCK &&
-            tree.element?.parent?.localName != "th" &&
-            tree.element?.parent?.localName != "td" &&
-            tree.element?.localName != "html" &&
-            tree.element?.localName != "body")
-          TextSpan(text: "\n"),
-      ])
-          .toList(),
-));
+    CustomRender.inlineSpan(
+        inlineSpan: (context, buildChildren) => TextSpan(
+              style: style?.generateTextStyle() ??
+                  context.style.generateTextStyle(),
+              children: context.tree.children
+                  .expand((tree) => [
+                        context.parser.parseTree(context, tree),
+                        if (tree.style.display == Display.BLOCK &&
+                            tree.element?.parent?.localName != "th" &&
+                            tree.element?.parent?.localName != "td" &&
+                            tree.element?.localName != "html" &&
+                            tree.element?.localName != "body")
+                          TextSpan(text: "\n"),
+                      ])
+                  .toList(),
+            ));
 
 final Map<CustomRenderMatcher, CustomRender> defaultRenders = {
   blockElementMatcher(): blockElementRender(),
@@ -452,45 +525,51 @@ final Map<CustomRenderMatcher, CustomRender> defaultRenders = {
   fallbackMatcher(): fallbackRender(),
 };
 
-List<InlineSpan> _getListElementChildren(ListStylePosition? position, Function() buildChildren) {
+List<InlineSpan> _getListElementChildren(
+    ListStylePosition? position, Function() buildChildren) {
   List<InlineSpan> children = buildChildren.call();
   if (position == ListStylePosition.INSIDE) {
     final tabSpan = WidgetSpan(
-      child: Text("\t", textAlign: TextAlign.right, style: TextStyle(fontWeight: FontWeight.w400)),
+      child: Text("\t",
+          textAlign: TextAlign.right,
+          style: TextStyle(fontWeight: FontWeight.w400)),
     );
     children.insert(0, tabSpan);
   }
   return children;
 }
 
-InlineSpan _getInteractableChildren(RenderContext context, InteractableElement tree, InlineSpan childSpan, TextStyle childStyle) {
+InlineSpan _getInteractableChildren(RenderContext context,
+    InteractableElement tree, InlineSpan childSpan, TextStyle childStyle) {
   if (childSpan is TextSpan) {
     return TextSpan(
       text: childSpan.text,
       children: childSpan.children
-          ?.map((e) => _getInteractableChildren(context, tree, e, childStyle.merge(childSpan.style)))
+          ?.map((e) => _getInteractableChildren(
+              context, tree, e, childStyle.merge(childSpan.style)))
           .toList(),
-      style: context.style.generateTextStyle().merge(
-          childSpan.style == null
-              ? childStyle
-              : childStyle.merge(childSpan.style)),
+      style: context.style.generateTextStyle().merge(childSpan.style == null
+          ? childStyle
+          : childStyle.merge(childSpan.style)),
       semanticsLabel: childSpan.semanticsLabel,
       recognizer: TapGestureRecognizer()
-        ..onTap =
-          context.parser.internalOnAnchorTap != null ?
-              () => context.parser.internalOnAnchorTap!(tree.href, context, tree.attributes, tree.element)
-              : null,
+        ..onTap = context.parser.internalOnAnchorTap != null
+            ? () => context.parser.internalOnAnchorTap!(
+                tree.href, context, tree.attributes, tree.element)
+            : null,
     );
   } else {
     return WidgetSpan(
       child: MultipleTapGestureDetector(
         onTap: context.parser.internalOnAnchorTap != null
-            ? () => context.parser.internalOnAnchorTap!(tree.href, context, tree.attributes, tree.element)
+            ? () => context.parser.internalOnAnchorTap!(
+                tree.href, context, tree.attributes, tree.element)
             : null,
         child: GestureDetector(
           key: context.key,
           onTap: context.parser.internalOnAnchorTap != null
-              ? () => context.parser.internalOnAnchorTap!(tree.href, context, tree.attributes, tree.element)
+              ? () => context.parser.internalOnAnchorTap!(
+                  tree.href, context, tree.attributes, tree.element)
               : null,
           child: (childSpan as WidgetSpan).child,
         ),
@@ -499,7 +578,8 @@ InlineSpan _getInteractableChildren(RenderContext context, InteractableElement t
   }
 }
 
-final _dataUriFormat = RegExp("^(?<scheme>data):(?<mime>image\/[\\w\+\-\.]+)(?<encoding>;base64)?\,(?<data>.*)");
+final _dataUriFormat = RegExp(
+    "^(?<scheme>data):(?<mime>image\/[\\w\+\-\.]+)(?<encoding>;base64)?\,(?<data>.*)");
 
 double _getVerticalOffset(StyledElement tree) {
   switch (tree.style.verticalAlign) {
@@ -522,12 +602,16 @@ String? _alt(Map<String, String> attributes) {
 
 double? _height(Map<String, String> attributes) {
   final heightString = attributes["height"];
-  return heightString == null ? heightString as double? : double.tryParse(heightString);
+  return heightString == null
+      ? heightString as double?
+      : double.tryParse(heightString);
 }
 
 double? _width(Map<String, String> attributes) {
   final widthString = attributes["width"];
-  return widthString == null ? widthString as double? : double.tryParse(widthString);
+  return widthString == null
+      ? widthString as double?
+      : double.tryParse(widthString);
 }
 
 double _aspectRatio(
@@ -545,5 +629,6 @@ double _aspectRatio(
 }
 
 extension ClampedEdgeInsets on EdgeInsetsGeometry {
-  EdgeInsetsGeometry get nonNegative => this.clamp(EdgeInsets.zero, const EdgeInsets.all(double.infinity));
+  EdgeInsetsGeometry get nonNegative =>
+      this.clamp(EdgeInsets.zero, const EdgeInsets.all(double.infinity));
 }
diff --git a/lib/flutter_html.dart b/lib/flutter_html.dart
index 9496d9263a..3db68efb2b 100644
--- a/lib/flutter_html.dart
+++ b/lib/flutter_html.dart
@@ -159,14 +159,19 @@ class _HtmlState extends State<Html> {
   @override
   void initState() {
     super.initState();
-    documentElement = widget.data != null ? HtmlParser.parseHTML(widget.data!) : widget.documentElement!;
+    documentElement = widget.data != null
+        ? HtmlParser.parseHTML(widget.data!)
+        : widget.documentElement!;
   }
 
   @override
   void didUpdateWidget(Html oldWidget) {
     super.didUpdateWidget(oldWidget);
-    if ((widget.data != null && oldWidget.data != widget.data) || oldWidget.documentElement != widget.documentElement) {
-      documentElement = widget.data != null ? HtmlParser.parseHTML(widget.data!) : widget.documentElement!;
+    if ((widget.data != null && oldWidget.data != widget.data) ||
+        oldWidget.documentElement != widget.documentElement) {
+      documentElement = widget.data != null
+          ? HtmlParser.parseHTML(widget.data!)
+          : widget.documentElement!;
     }
   }
 
@@ -333,7 +338,9 @@ class _SelectableHtmlState extends State<SelectableHtml> {
   @override
   void initState() {
     super.initState();
-    documentElement = widget.data != null ? HtmlParser.parseHTML(widget.data!) : widget.documentElement!;
+    documentElement = widget.data != null
+        ? HtmlParser.parseHTML(widget.data!)
+        : widget.documentElement!;
   }
 
   @override
@@ -354,7 +361,8 @@ class _SelectableHtmlState extends State<SelectableHtml> {
         customRenders: {}
           ..addAll(widget.customRenders)
           ..addAll(defaultRenders),
-        tagsList: widget.tagsList.isEmpty ? SelectableHtml.tags : widget.tagsList,
+        tagsList:
+            widget.tagsList.isEmpty ? SelectableHtml.tags : widget.tagsList,
         selectionControls: widget.selectionControls,
         scrollPhysics: widget.scrollPhysics,
       ),
diff --git a/packages/flutter_html_all/example/example.md b/packages/flutter_html_all/example/example.md
new file mode 100644
index 0000000000..aff9f75ad4
--- /dev/null
+++ b/packages/flutter_html_all/example/example.md
@@ -0,0 +1,3 @@
+# Example
+
+### Coming soon...
\ No newline at end of file
diff --git a/packages/flutter_html_all/lib/flutter_html_all.dart b/packages/flutter_html_all/lib/flutter_html_all.dart
index 9fb8378795..2b34957522 100644
--- a/packages/flutter_html_all/lib/flutter_html_all.dart
+++ b/packages/flutter_html_all/lib/flutter_html_all.dart
@@ -1,3 +1,5 @@
+/// Package flutter_html_all is used to get access to all
+/// of the extended features of the flutter_html package.
 library flutter_html_all;
 
 export 'package:flutter_html_audio/flutter_html_audio.dart';
diff --git a/packages/flutter_html_audio/example/example.md b/packages/flutter_html_audio/example/example.md
new file mode 100644
index 0000000000..aff9f75ad4
--- /dev/null
+++ b/packages/flutter_html_audio/example/example.md
@@ -0,0 +1,3 @@
+# Example
+
+### Coming soon...
\ No newline at end of file
diff --git a/packages/flutter_html_audio/lib/flutter_html_audio.dart b/packages/flutter_html_audio/lib/flutter_html_audio.dart
index 51fc3d70df..2484b8e45d 100644
--- a/packages/flutter_html_audio/lib/flutter_html_audio.dart
+++ b/packages/flutter_html_audio/lib/flutter_html_audio.dart
@@ -6,16 +6,24 @@ import 'package:flutter_html/flutter_html.dart';
 import 'package:video_player/video_player.dart';
 import 'package:html/dom.dart' as dom;
 
-typedef AudioControllerCallback = void Function(dom.Element?, ChewieAudioController, VideoPlayerController);
+typedef AudioControllerCallback = void Function(
+    dom.Element?, ChewieAudioController, VideoPlayerController);
 
-CustomRender audioRender({AudioControllerCallback? onControllerCreated})
-  => CustomRender.widget(widget: (context, buildChildren)
-    => AudioWidget(context: context, callback: onControllerCreated));
+/// The CustomRender function for the `<audio>` tag
+CustomRender audioRender({AudioControllerCallback? onControllerCreated}) =>
+    CustomRender.widget(
+      widget: (context, buildChildren) => AudioWidget(
+        context: context,
+        callback: onControllerCreated,
+      ),
+    );
 
+/// The CustomRenderMatcher that will match the `<audio>` tag
 CustomRenderMatcher audioMatcher() => (context) {
-  return context.tree.element?.localName == "audio";
-};
+      return context.tree.element?.localName == "audio";
+    };
 
+/// A widget used for rendering an audio player in the HTML tree
 class AudioWidget extends StatefulWidget {
   final RenderContext context;
   final AudioControllerCallback? callback;
@@ -39,7 +47,8 @@ class _AudioWidgetState extends State<AudioWidget> {
     sources = <String?>[
       if (widget.context.tree.element?.attributes['src'] != null)
         widget.context.tree.element!.attributes['src'],
-      ...ReplacedElement.parseMediaSources(widget.context.tree.element!.children),
+      ...ReplacedElement.parseMediaSources(
+          widget.context.tree.element!.children),
     ];
     if (sources.isNotEmpty && sources.first != null) {
       audioController = VideoPlayerController.network(
@@ -49,10 +58,12 @@ class _AudioWidgetState extends State<AudioWidget> {
         videoPlayerController: audioController!,
         autoPlay: widget.context.tree.element?.attributes['autoplay'] != null,
         looping: widget.context.tree.element?.attributes['loop'] != null,
-        showControls: widget.context.tree.element?.attributes['controls'] != null,
+        showControls:
+            widget.context.tree.element?.attributes['controls'] != null,
         autoInitialize: true,
       );
-      widget.callback?.call(widget.context.tree.element, chewieAudioController!, audioController!);
+      widget.callback?.call(widget.context.tree.element, chewieAudioController!,
+          audioController!);
     }
     super.initState();
   }
@@ -72,11 +83,10 @@ class _AudioWidgetState extends State<AudioWidget> {
     return Container(
       key: widget.context.key,
       width: widget.context.style.width ?? 300,
-      height: Theme.of(bContext).platform == TargetPlatform.android
-          ? 48 : 75,
+      height: Theme.of(bContext).platform == TargetPlatform.android ? 48 : 75,
       child: ChewieAudio(
         controller: chewieAudioController!,
       ),
     );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/flutter_html_audio/pubspec.yaml b/packages/flutter_html_audio/pubspec.yaml
index adcd592e80..426fafb794 100644
--- a/packages/flutter_html_audio/pubspec.yaml
+++ b/packages/flutter_html_audio/pubspec.yaml
@@ -1,5 +1,5 @@
 name: flutter_html_audio
-description: Audio widget for flutter_html.
+description: This extension package allows the <audio> tag to be rendered using the flutter_html package
 version: 3.0.0-alpha.3
 homepage: https://github.com/Sub6Resources/flutter_html
 
diff --git a/packages/flutter_html_iframe/example/example.md b/packages/flutter_html_iframe/example/example.md
new file mode 100644
index 0000000000..aff9f75ad4
--- /dev/null
+++ b/packages/flutter_html_iframe/example/example.md
@@ -0,0 +1,3 @@
+# Example
+
+### Coming soon...
\ No newline at end of file
diff --git a/packages/flutter_html_iframe/lib/flutter_html_iframe.dart b/packages/flutter_html_iframe/lib/flutter_html_iframe.dart
index ea61f8bb1e..736e9419a4 100644
--- a/packages/flutter_html_iframe/lib/flutter_html_iframe.dart
+++ b/packages/flutter_html_iframe/lib/flutter_html_iframe.dart
@@ -3,9 +3,9 @@ library flutter_html_iframe;
 import 'package:flutter_html/custom_render.dart';
 
 export 'iframe_unsupported.dart'
-  if (dart.library.io) 'iframe_mobile.dart'
-  if (dart.library.html) 'iframe_web.dart';
+    if (dart.library.io) 'iframe_mobile.dart'
+    if (dart.library.html) 'iframe_web.dart';
 
 CustomRenderMatcher iframeMatcher() => (context) {
-  return context.tree.element?.localName == "iframe";
-};
\ No newline at end of file
+      return context.tree.element?.localName == "iframe";
+    };
diff --git a/packages/flutter_html_iframe/lib/iframe_mobile.dart b/packages/flutter_html_iframe/lib/iframe_mobile.dart
index a75a98362c..a1c9bbb713 100644
--- a/packages/flutter_html_iframe/lib/iframe_mobile.dart
+++ b/packages/flutter_html_iframe/lib/iframe_mobile.dart
@@ -4,28 +4,33 @@ import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
-CustomRender iframeRender({NavigationDelegate? navigationDelegate}) => CustomRender.widget(widget: (context, buildChildren) {
-  final sandboxMode = context.tree.element?.attributes["sandbox"];
-  final UniqueKey key = UniqueKey();
-  final givenWidth = double.tryParse(context.tree.element?.attributes['width'] ?? "");
-  final givenHeight = double.tryParse(context.tree.element?.attributes['height'] ?? "");
-  return Container(
-    width: givenWidth ?? (givenHeight ?? 150) * 2,
-    height: givenHeight ?? (givenWidth ?? 300) / 2,
-    child: ContainerSpan(
-      style: context.style,
-      newContext: context,
-      child: WebView(
-        initialUrl: context.tree.element?.attributes['src'],
-        key: key,
-        javascriptMode: sandboxMode == null || sandboxMode == "allow-scripts"
-            ? JavascriptMode.unrestricted
-            : JavascriptMode.disabled,
-        navigationDelegate: navigationDelegate,
-        gestureRecognizers: {
-          Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer())
-        },
-      ),
-    ),
-  );
-});
+CustomRender iframeRender({NavigationDelegate? navigationDelegate}) =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      final sandboxMode = context.tree.element?.attributes["sandbox"];
+      final UniqueKey key = UniqueKey();
+      final givenWidth =
+          double.tryParse(context.tree.element?.attributes['width'] ?? "");
+      final givenHeight =
+          double.tryParse(context.tree.element?.attributes['height'] ?? "");
+      return Container(
+        width: givenWidth ?? (givenHeight ?? 150) * 2,
+        height: givenHeight ?? (givenWidth ?? 300) / 2,
+        child: ContainerSpan(
+          style: context.style,
+          newContext: context,
+          child: WebView(
+            initialUrl: context.tree.element?.attributes['src'],
+            key: key,
+            javascriptMode:
+                sandboxMode == null || sandboxMode == "allow-scripts"
+                    ? JavascriptMode.unrestricted
+                    : JavascriptMode.disabled,
+            navigationDelegate: navigationDelegate,
+            gestureRecognizers: {
+              Factory<VerticalDragGestureRecognizer>(
+                  () => VerticalDragGestureRecognizer())
+            },
+          ),
+        ),
+      );
+    });
diff --git a/packages/flutter_html_iframe/lib/iframe_unsupported.dart b/packages/flutter_html_iframe/lib/iframe_unsupported.dart
index 91b17575e4..588552d36f 100644
--- a/packages/flutter_html_iframe/lib/iframe_unsupported.dart
+++ b/packages/flutter_html_iframe/lib/iframe_unsupported.dart
@@ -2,8 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
-CustomRender iframeRender({NavigationDelegate? navigationDelegate}) => CustomRender.widget(widget: (context, buildChildren) {
-  return Container(
-    child: Text("Iframes are currently not supported in this environment"),
-  );
-});
\ No newline at end of file
+CustomRender iframeRender({NavigationDelegate? navigationDelegate}) =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      return Container(
+        child: Text("Iframes are currently not supported in this environment"),
+      );
+    });
diff --git a/packages/flutter_html_iframe/lib/iframe_web.dart b/packages/flutter_html_iframe/lib/iframe_web.dart
index 4b09ec7a6c..fd776fe980 100644
--- a/packages/flutter_html_iframe/lib/iframe_web.dart
+++ b/packages/flutter_html_iframe/lib/iframe_web.dart
@@ -9,36 +9,46 @@ import 'dart:html' as html;
 
 import 'package:webview_flutter/webview_flutter.dart';
 
-CustomRender iframeRender({NavigationDelegate? navigationDelegate}) => CustomRender.widget(widget: (context, buildChildren) {
-  final givenWidth = double.tryParse(context.tree.element?.attributes['width'] ?? "");
-  final givenHeight = double.tryParse(context.tree.element?.attributes['height'] ?? "");
-  final html.IFrameElement iframe = html.IFrameElement()
-    ..width = (givenWidth ?? (givenHeight ?? 150) * 2).toString()
-    ..height = (givenHeight ?? (givenWidth ?? 300) / 2).toString()
-    ..src = context.tree.element?.attributes['src']
-    ..style.border = 'none';
-  final String createdViewId = getRandString(10);
-  ui.platformViewRegistry.registerViewFactory(createdViewId, (int viewId) => iframe);
-  return Container(
-      width: double.tryParse(context.tree.element?.attributes['width'] ?? "")
-          ?? (double.tryParse(context.tree.element?.attributes['height'] ?? "") ?? 150) * 2,
-      height: double.tryParse(context.tree.element?.attributes['height'] ?? "")
-          ?? (double.tryParse(context.tree.element?.attributes['width'] ?? "") ?? 300) / 2,
-      child: ContainerSpan(
-        style: context.style,
-        newContext: context,
-        child: Directionality(
-            textDirection: TextDirection.ltr,
-            child: HtmlElementView(
-              viewType: createdViewId,
-            )
-        ),
-      )
-  );
-});
+CustomRender iframeRender({NavigationDelegate? navigationDelegate}) =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      final givenWidth =
+          double.tryParse(context.tree.element?.attributes['width'] ?? "");
+      final givenHeight =
+          double.tryParse(context.tree.element?.attributes['height'] ?? "");
+      final html.IFrameElement iframe = html.IFrameElement()
+        ..width = (givenWidth ?? (givenHeight ?? 150) * 2).toString()
+        ..height = (givenHeight ?? (givenWidth ?? 300) / 2).toString()
+        ..src = context.tree.element?.attributes['src']
+        ..style.border = 'none';
+      final String createdViewId = getRandString(10);
+      ui.platformViewRegistry
+          .registerViewFactory(createdViewId, (int viewId) => iframe);
+      return Container(
+          width: double.tryParse(
+                  context.tree.element?.attributes['width'] ?? "") ??
+              (double.tryParse(
+                          context.tree.element?.attributes['height'] ?? "") ??
+                      150) *
+                  2,
+          height: double.tryParse(
+                  context.tree.element?.attributes['height'] ?? "") ??
+              (double.tryParse(
+                          context.tree.element?.attributes['width'] ?? "") ??
+                      300) /
+                  2,
+          child: ContainerSpan(
+            style: context.style,
+            newContext: context,
+            child: Directionality(
+                textDirection: TextDirection.ltr,
+                child: HtmlElementView(
+                  viewType: createdViewId,
+                )),
+          ));
+    });
 
 String getRandString(int len) {
   var random = Random.secure();
-  var values = List<int>.generate(len, (i) =>  random.nextInt(255));
+  var values = List<int>.generate(len, (i) => random.nextInt(255));
   return base64UrlEncode(values);
-}
\ No newline at end of file
+}
diff --git a/packages/flutter_html_iframe/pubspec.yaml b/packages/flutter_html_iframe/pubspec.yaml
index 69a5b80433..d7207c433c 100644
--- a/packages/flutter_html_iframe/pubspec.yaml
+++ b/packages/flutter_html_iframe/pubspec.yaml
@@ -1,5 +1,5 @@
 name: flutter_html_iframe
-description: Iframe widget for flutter_html.
+description: This extension package allows the <iframe> tag to be rendered using the flutter_html package
 version: 3.0.0-alpha.3
 homepage: https://github.com/Sub6Resources/flutter_html
 
diff --git a/packages/flutter_html_math/example/example.md b/packages/flutter_html_math/example/example.md
new file mode 100644
index 0000000000..aff9f75ad4
--- /dev/null
+++ b/packages/flutter_html_math/example/example.md
@@ -0,0 +1,3 @@
+# Example
+
+### Coming soon...
\ No newline at end of file
diff --git a/packages/flutter_html_math/lib/flutter_html_math.dart b/packages/flutter_html_math/lib/flutter_html_math.dart
index cd1ca088cf..1567dbdcab 100644
--- a/packages/flutter_html_math/lib/flutter_html_math.dart
+++ b/packages/flutter_html_math/lib/flutter_html_math.dart
@@ -5,71 +5,92 @@ import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_math_fork/flutter_math.dart';
 
-CustomRender mathRender({OnMathError? onMathError}) => CustomRender.widget(widget: (context, buildChildren) {
-  String texStr = context.tree.element == null ? '' : parseMathRecursive(context.tree.element!, r'');
-  return Container(
-      width: context.parser.shrinkWrap ? null : MediaQuery.of(context.buildContext).size.width,
-      child: Math.tex(
-        texStr,
-        mathStyle: MathStyle.display,
-        textStyle: context.style.generateTextStyle(),
-        onErrorFallback: (FlutterMathException e) {
-          if (onMathError != null) {
-            return onMathError.call(texStr, e.message, e.messageWithType);
-          } else {
-            return Text(e.message);
-          }
-        },
-      )
-  );
-});
+/// The CustomRender function for the <math> tag.
+CustomRender mathRender({OnMathError? onMathError}) =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      String texStr = context.tree.element == null
+          ? ''
+          : _parseMathRecursive(context.tree.element!, r'');
+      return Container(
+          width: context.parser.shrinkWrap
+              ? null
+              : MediaQuery.of(context.buildContext).size.width,
+          child: Math.tex(
+            texStr,
+            mathStyle: MathStyle.display,
+            textStyle: context.style.generateTextStyle(),
+            onErrorFallback: (FlutterMathException e) {
+              if (onMathError != null) {
+                return onMathError.call(texStr, e.message, e.messageWithType);
+              } else {
+                return Text(e.message);
+              }
+            },
+          ));
+    });
 
+/// The CustomRenderMatcher for the <math> element.
 CustomRenderMatcher mathMatcher() => (context) {
-  return context.tree.element?.localName == "math";
-};
+      return context.tree.element?.localName == "math";
+    };
 
-String parseMathRecursive(dom.Node node, String parsed) {
+String _parseMathRecursive(dom.Node node, String parsed) {
   if (node is dom.Element) {
     List<dom.Element> nodeList = node.nodes.whereType<dom.Element>().toList();
     if (node.localName == "math" || node.localName == "mrow") {
       nodeList.forEach((element) {
-        parsed = parseMathRecursive(element, parsed);
+        parsed = _parseMathRecursive(element, parsed);
       });
     }
     // note: munder, mover, and munderover do not support placing braces and other
     // markings above/below elements, instead they are treated as super/subscripts for now.
-    if ((node.localName == "msup" || node.localName == "msub"
-        || node.localName == "munder" || node.localName == "mover") && nodeList.length == 2) {
-      parsed = parseMathRecursive(nodeList[0], parsed);
-      parsed = parseMathRecursive(nodeList[1],
-          parsed + "${node.localName == "msup" || node.localName == "mover" ? "^" : "_"}{") + "}";
+    if ((node.localName == "msup" ||
+            node.localName == "msub" ||
+            node.localName == "munder" ||
+            node.localName == "mover") &&
+        nodeList.length == 2) {
+      parsed = _parseMathRecursive(nodeList[0], parsed);
+      parsed = _parseMathRecursive(
+              nodeList[1],
+              parsed +
+                  "${node.localName == "msup" || node.localName == "mover" ? "^" : "_"}{") +
+          "}";
     }
-    if ((node.localName == "msubsup" || node.localName == "munderover") && nodeList.length == 3) {
-      parsed = parseMathRecursive(nodeList[0], parsed);
-      parsed = parseMathRecursive(nodeList[1], parsed + "_{") + "}";
-      parsed = parseMathRecursive(nodeList[2], parsed + "^{") + "}";
+    if ((node.localName == "msubsup" || node.localName == "munderover") &&
+        nodeList.length == 3) {
+      parsed = _parseMathRecursive(nodeList[0], parsed);
+      parsed = _parseMathRecursive(nodeList[1], parsed + "_{") + "}";
+      parsed = _parseMathRecursive(nodeList[2], parsed + "^{") + "}";
     }
     if (node.localName == "mfrac" && nodeList.length == 2) {
-      parsed = parseMathRecursive(nodeList[0], parsed + r"\frac{") + "}";
-      parsed = parseMathRecursive(nodeList[1], parsed + "{") + "}";
+      parsed = _parseMathRecursive(nodeList[0], parsed + r"\frac{") + "}";
+      parsed = _parseMathRecursive(nodeList[1], parsed + "{") + "}";
     }
     // note: doesn't support answer & intermediate steps
     if (node.localName == "mlongdiv" && nodeList.length == 4) {
-      parsed = parseMathRecursive(nodeList[0], parsed);
-      parsed = parseMathRecursive(nodeList[2], parsed + r"\overline{)") + "}";
+      parsed = _parseMathRecursive(nodeList[0], parsed);
+      parsed = _parseMathRecursive(nodeList[2], parsed + r"\overline{)") + "}";
     }
     if (node.localName == "msqrt" && nodeList.length == 1) {
-      parsed = parseMathRecursive(nodeList[0], parsed + r"\sqrt{") + "}";
+      parsed = _parseMathRecursive(nodeList[0], parsed + r"\sqrt{") + "}";
     }
     if (node.localName == "mroot" && nodeList.length == 2) {
-      parsed = parseMathRecursive(nodeList[1], parsed + r"\sqrt[") + "]";
-      parsed = parseMathRecursive(nodeList[0], parsed + "{") + "}";
+      parsed = _parseMathRecursive(nodeList[1], parsed + r"\sqrt[") + "]";
+      parsed = _parseMathRecursive(nodeList[0], parsed + "{") + "}";
     }
-    if (node.localName == "mi" || node.localName == "mn" || node.localName == "mo") {
-      if (mathML2Tex.keys.contains(node.text.trim())) {
-        parsed = parsed + mathML2Tex[mathML2Tex.keys.firstWhere((e) => e == node.text.trim())]!;
+    if (node.localName == "mi" ||
+        node.localName == "mn" ||
+        node.localName == "mo") {
+      if (_mathML2Tex.keys.contains(node.text.trim())) {
+        parsed = parsed +
+            _mathML2Tex[
+                _mathML2Tex.keys.firstWhere((e) => e == node.text.trim())]!;
       } else if (node.text.startsWith("&") && node.text.endsWith(";")) {
-        parsed = parsed + node.text.trim().replaceFirst("&", r"\").substring(0, node.text.trim().length - 1);
+        parsed = parsed +
+            node.text
+                .trim()
+                .replaceFirst("&", r"\")
+                .substring(0, node.text.trim().length - 1);
       } else {
         parsed = parsed + node.text.trim();
       }
@@ -78,7 +99,7 @@ String parseMathRecursive(dom.Node node, String parsed) {
   return parsed;
 }
 
-Map<String, String> mathML2Tex = {
+Map<String, String> _mathML2Tex = {
   "sin": r"\sin",
   "sinh": r"\sinh",
   "csc": r"\csc",
@@ -96,8 +117,7 @@ Map<String, String> mathML2Tex = {
 };
 
 typedef OnMathError = Widget Function(
-    String parsedTex,
-    String exception,
-    String exceptionWithType,
-    );
-
+  String parsedTex,
+  String exception,
+  String exceptionWithType,
+);
diff --git a/packages/flutter_html_math/pubspec.yaml b/packages/flutter_html_math/pubspec.yaml
index 7f32fc58af..8a2fa63e50 100644
--- a/packages/flutter_html_math/pubspec.yaml
+++ b/packages/flutter_html_math/pubspec.yaml
@@ -1,5 +1,5 @@
 name: flutter_html_math
-description: Math widget for flutter_html.
+description: This extension package allows the <math> tag to be rendered using the flutter_html package
 version: 3.0.0-alpha.3
 homepage: https://github.com/Sub6Resources/flutter_html
 
diff --git a/packages/flutter_html_svg/example/example.md b/packages/flutter_html_svg/example/example.md
new file mode 100644
index 0000000000..aff9f75ad4
--- /dev/null
+++ b/packages/flutter_html_svg/example/example.md
@@ -0,0 +1,3 @@
+# Example
+
+### Coming soon...
\ No newline at end of file
diff --git a/packages/flutter_html_svg/lib/flutter_html_svg.dart b/packages/flutter_html_svg/lib/flutter_html_svg.dart
index e3da0d0f56..dd5b1ff53d 100644
--- a/packages/flutter_html_svg/lib/flutter_html_svg.dart
+++ b/packages/flutter_html_svg/lib/flutter_html_svg.dart
@@ -8,137 +8,156 @@ import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html/src/utils.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 
-CustomRender svgTagRender() => CustomRender.widget(widget: (context, buildChildren) {
-  return Builder(
-      key: context.key,
-      builder: (buildContext) {
-        return GestureDetector(
-          child: SvgPicture.string(
-            context.tree.element?.outerHtml ?? "",
-            width: double.tryParse(context.tree.element?.attributes['width'] ?? ""),
-            height: double.tryParse(context.tree.element?.attributes['width'] ?? ""),
-          ),
-          onTap: () {
-            if (MultipleTapGestureDetector.of(buildContext) != null) {
-              MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
-            }
-            context.parser.onImageTap?.call(
+/// The CustomRender function that renders the <svg> HTML tag.
+CustomRender svgTagRender() =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      return Builder(
+          key: context.key,
+          builder: (buildContext) {
+            return GestureDetector(
+              child: SvgPicture.string(
                 context.tree.element?.outerHtml ?? "",
-                context,
-                context.tree.element!.attributes.cast(),
-                context.tree.element
+                width: double.tryParse(
+                    context.tree.element?.attributes['width'] ?? ""),
+                height: double.tryParse(
+                    context.tree.element?.attributes['width'] ?? ""),
+              ),
+              onTap: () {
+                if (MultipleTapGestureDetector.of(buildContext) != null) {
+                  MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
+                }
+                context.parser.onImageTap?.call(
+                    context.tree.element?.outerHtml ?? "",
+                    context,
+                    context.tree.element!.attributes.cast(),
+                    context.tree.element);
+              },
             );
-          },
-        );
-      }
-  );
-});
+          });
+    });
 
-CustomRender svgDataImageRender() => CustomRender.widget(widget: (context, buildChildren) {
-  final dataUri = _dataUriFormat.firstMatch(_src(context.tree.element?.attributes.cast() ?? <String, String>{})!);
-  final data = dataUri?.namedGroup('data');
-  if (data == null) return Container(height: 0, width: 0);
-  return Builder(
-      key: context.key,
-      builder: (buildContext) {
-        return GestureDetector(
-          child: dataUri?.namedGroup('encoding') == ';base64' ? SvgPicture.memory(
-            base64.decode(data.trim()),
-            width: _width(context.tree.element?.attributes.cast() ?? <String, String>{}),
-            height: _height(context.tree.element?.attributes.cast() ?? <String, String>{}),
-          ) : SvgPicture.string(Uri.decodeFull(data)),
-          onTap: () {
-            if (MultipleTapGestureDetector.of(buildContext) != null) {
-              MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
-            }
-            context.parser.onImageTap?.call(
-                Uri.decodeFull(data),
-                context,
-                context.tree.element!.attributes.cast(),
-                context.tree.element
+/// The CustomRender function that renders an <img> tag with hardcoded svg data.
+CustomRender svgDataImageRender() =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      final dataUri = _dataUriFormat.firstMatch(
+          _src(context.tree.element?.attributes.cast() ?? <String, String>{})!);
+      final data = dataUri?.namedGroup('data');
+      if (data == null) return Container(height: 0, width: 0);
+      return Builder(
+          key: context.key,
+          builder: (buildContext) {
+            return GestureDetector(
+              child: dataUri?.namedGroup('encoding') == ';base64'
+                  ? SvgPicture.memory(
+                      base64.decode(data.trim()),
+                      width: _width(context.tree.element?.attributes.cast() ??
+                          <String, String>{}),
+                      height: _height(context.tree.element?.attributes.cast() ??
+                          <String, String>{}),
+                    )
+                  : SvgPicture.string(Uri.decodeFull(data)),
+              onTap: () {
+                if (MultipleTapGestureDetector.of(buildContext) != null) {
+                  MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
+                }
+                context.parser.onImageTap?.call(
+                    Uri.decodeFull(data),
+                    context,
+                    context.tree.element!.attributes.cast(),
+                    context.tree.element);
+              },
             );
-          },
-        );
-      }
-  );
-});
+          });
+    });
 
-CustomRender svgNetworkImageRender() => CustomRender.widget(widget: (context, buildChildren) {
-  if (context.tree.element?.attributes["src"] == null) {
-    return Container(height: 0, width: 0);
-  }
-  return Builder(
-      key: context.key,
-      builder: (buildContext) {
-        return GestureDetector(
-          child: SvgPicture.network(
-            context.tree.element!.attributes["src"]!,
-            width: _width(context.tree.element!.attributes.cast()),
-            height: _height(context.tree.element!.attributes.cast()),
-          ),
-          onTap: () {
-            if (MultipleTapGestureDetector.of(buildContext) != null) {
-              MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
-            }
-            context.parser.onImageTap?.call(
+/// The CustomRender function that renders an <img> tag with a network svg image.
+CustomRender svgNetworkImageRender() =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      if (context.tree.element?.attributes["src"] == null) {
+        return Container(height: 0, width: 0);
+      }
+      return Builder(
+          key: context.key,
+          builder: (buildContext) {
+            return GestureDetector(
+              child: SvgPicture.network(
                 context.tree.element!.attributes["src"]!,
-                context,
-                context.tree.element!.attributes.cast(),
-                context.tree.element
+                width: _width(context.tree.element!.attributes.cast()),
+                height: _height(context.tree.element!.attributes.cast()),
+              ),
+              onTap: () {
+                if (MultipleTapGestureDetector.of(buildContext) != null) {
+                  MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
+                }
+                context.parser.onImageTap?.call(
+                    context.tree.element!.attributes["src"]!,
+                    context,
+                    context.tree.element!.attributes.cast(),
+                    context.tree.element);
+              },
             );
-          },
-        );
-      }
-  );
-});
+          });
+    });
 
-CustomRender svgAssetImageRender() => CustomRender.widget(widget: (context, buildChildren) {
-  if ( _src(context.tree.element?.attributes.cast() ?? <String, String>{}) == null) {
-    return Container(height: 0, width: 0);
-  }
-  final assetPath = _src(context.tree.element!.attributes.cast())!.replaceFirst('asset:', '');
-  return Builder(
-      key: context.key,
-      builder: (buildContext) {
-        return GestureDetector(
-          child: SvgPicture.asset(assetPath),
-          onTap: () {
-            if (MultipleTapGestureDetector.of(buildContext) != null) {
-              MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
-            }
-            context.parser.onImageTap?.call(
-                assetPath,
-                context,
-                context.tree.element!.attributes.cast(),
-                context.tree.element
-            );
-          },
-        );
+/// The CustomRender function that renders an <img> tag with an svg asset in your app
+CustomRender svgAssetImageRender() =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      if (_src(context.tree.element?.attributes.cast() ?? <String, String>{}) ==
+          null) {
+        return Container(height: 0, width: 0);
       }
-  );
-});
+      final assetPath = _src(context.tree.element!.attributes.cast())!
+          .replaceFirst('asset:', '');
+      return Builder(
+          key: context.key,
+          builder: (buildContext) {
+            return GestureDetector(
+              child: SvgPicture.asset(assetPath),
+              onTap: () {
+                if (MultipleTapGestureDetector.of(buildContext) != null) {
+                  MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
+                }
+                context.parser.onImageTap?.call(
+                    assetPath,
+                    context,
+                    context.tree.element!.attributes.cast(),
+                    context.tree.element);
+              },
+            );
+          });
+    });
 
+/// The CustomRenderMatcher for the <svg> HTML tag.
 CustomRenderMatcher svgTagMatcher() => (context) {
-  return context.tree.element?.localName == "svg";
-};
+      return context.tree.element?.localName == "svg";
+    };
 
-CustomRenderMatcher svgDataUriMatcher({String? encoding = 'base64', String? mime = 'image/svg+xml'}) => (context) {
-  if (_src(context.tree.element?.attributes.cast() ?? <String, String>{}) == null) return false;
-  final dataUri = _dataUriFormat.firstMatch(_src(context.tree.element?.attributes.cast() ?? <String, String>{})!);
-  return context.tree.element?.localName == "img" &&
-      dataUri != null &&
-      (mime == null || dataUri.namedGroup('mime') == mime) &&
-      (encoding == null || dataUri.namedGroup('encoding') == ';$encoding');
-};
+/// A CustomRenderMatcher for an <img> tag with encoded svg data.
+CustomRenderMatcher svgDataUriMatcher(
+        {String? encoding = 'base64', String? mime = 'image/svg+xml'}) =>
+    (context) {
+      if (_src(context.tree.element?.attributes.cast() ?? <String, String>{}) ==
+          null) return false;
+      final dataUri = _dataUriFormat.firstMatch(
+          _src(context.tree.element?.attributes.cast() ?? <String, String>{})!);
+      return context.tree.element?.localName == "img" &&
+          dataUri != null &&
+          (mime == null || dataUri.namedGroup('mime') == mime) &&
+          (encoding == null || dataUri.namedGroup('encoding') == ';$encoding');
+    };
 
+/// A CustomRenderMatcher for an <img> tag with an svg tag over the network
 CustomRenderMatcher svgNetworkSourceMatcher({
   List<String> schemas: const ["https", "http"],
   List<String>? domains,
   String? extension = "svg",
-}) => (context) {
-      if (_src(context.tree.element?.attributes.cast() ?? <String, String>{}) == null) return false;
+}) =>
+    (context) {
+      if (_src(context.tree.element?.attributes.cast() ?? <String, String>{}) ==
+          null) return false;
       try {
-        final src = Uri.parse(_src(context.tree.element?.attributes.cast() ?? <String, String>{})!);
+        final src = Uri.parse(_src(
+            context.tree.element?.attributes.cast() ?? <String, String>{})!);
         return context.tree.element?.localName == "img" &&
             schemas.contains(src.scheme) &&
             (domains == null || domains.contains(src.host)) &&
@@ -148,13 +167,18 @@ CustomRenderMatcher svgNetworkSourceMatcher({
       }
     };
 
+/// A CustomRenderMatcher for an <img> tag with an in-app svg asset
 CustomRenderMatcher svgAssetUriMatcher() => (context) =>
     context.tree.element?.localName == "img" &&
-    _src(context.tree.element?.attributes.cast() ?? <String, String>{}) != null
-    && _src(context.tree.element?.attributes.cast() ?? <String, String>{})!.startsWith("asset:")
-    && _src(context.tree.element?.attributes.cast() ?? <String, String>{})!.endsWith(".svg");
+    _src(context.tree.element?.attributes.cast() ?? <String, String>{}) !=
+        null &&
+    _src(context.tree.element?.attributes.cast() ?? <String, String>{})!
+        .startsWith("asset:") &&
+    _src(context.tree.element?.attributes.cast() ?? <String, String>{})!
+        .endsWith(".svg");
 
-final _dataUriFormat = RegExp("^(?<scheme>data):(?<mime>image\/[\\w\+\-\.]+)(?<encoding>;base64)?\,(?<data>.*)");
+final _dataUriFormat = RegExp(
+    "^(?<scheme>data):(?<mime>image\/[\\w\+\-\.]+)(?<encoding>;base64)?\,(?<data>.*)");
 
 String? _src(Map<String, String> attributes) {
   return attributes["src"];
@@ -162,10 +186,14 @@ String? _src(Map<String, String> attributes) {
 
 double? _height(Map<String, String> attributes) {
   final heightString = attributes["height"];
-  return heightString == null ? heightString as double? : double.tryParse(heightString);
+  return heightString == null
+      ? heightString as double?
+      : double.tryParse(heightString);
 }
 
 double? _width(Map<String, String> attributes) {
   final widthString = attributes["width"];
-  return widthString == null ? widthString as double? : double.tryParse(widthString);
-}
\ No newline at end of file
+  return widthString == null
+      ? widthString as double?
+      : double.tryParse(widthString);
+}
diff --git a/packages/flutter_html_svg/pubspec.yaml b/packages/flutter_html_svg/pubspec.yaml
index ce8e1edd4d..f00202478d 100644
--- a/packages/flutter_html_svg/pubspec.yaml
+++ b/packages/flutter_html_svg/pubspec.yaml
@@ -1,5 +1,5 @@
 name: flutter_html_svg
-description: SVG widget for flutter_html
+description: This extension package allows the <svg> tag and svg-based img sources to be rendered using the flutter_html package
 version: 3.0.0-alpha.3
 homepage: https://github.com/Sub6Resources/flutter_html
 
diff --git a/packages/flutter_html_table/example/example.md b/packages/flutter_html_table/example/example.md
new file mode 100644
index 0000000000..aff9f75ad4
--- /dev/null
+++ b/packages/flutter_html_table/example/example.md
@@ -0,0 +1,3 @@
+# Example
+
+### Coming soon...
\ No newline at end of file
diff --git a/packages/flutter_html_table/lib/flutter_html_table.dart b/packages/flutter_html_table/lib/flutter_html_table.dart
index 7791f36f2c..c65387e9c2 100644
--- a/packages/flutter_html_table/lib/flutter_html_table.dart
+++ b/packages/flutter_html_table/lib/flutter_html_table.dart
@@ -6,25 +6,29 @@ import 'package:flutter_layout_grid/flutter_layout_grid.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 
-CustomRender tableRender() => CustomRender.widget(widget: (context, buildChildren) {
-  return Container(
-    key: context.key,
-    margin: context.style.margin?.nonNegative,
-    padding: context.style.padding?.nonNegative,
-    alignment: context.style.alignment,
-    decoration: BoxDecoration(
-      color: context.style.backgroundColor,
-      border: context.style.border,
-    ),
-    width: context.style.width,
-    height: context.style.height,
-    child: LayoutBuilder(builder: (_, constraints) => _layoutCells(context, constraints)),
-  );
-});
+/// The CustomRender function that will render the <table> HTML tag
+CustomRender tableRender() =>
+    CustomRender.widget(widget: (context, buildChildren) {
+      return Container(
+        key: context.key,
+        margin: context.style.margin?.nonNegative,
+        padding: context.style.padding?.nonNegative,
+        alignment: context.style.alignment,
+        decoration: BoxDecoration(
+          color: context.style.backgroundColor,
+          border: context.style.border,
+        ),
+        width: context.style.width,
+        height: context.style.height,
+        child: LayoutBuilder(
+            builder: (_, constraints) => _layoutCells(context, constraints)),
+      );
+    });
 
+/// A CustomRenderMatcher for matching the <table> HTML tag
 CustomRenderMatcher tableMatcher() => (context) {
-  return context.tree.element?.localName == "table";
-};
+      return context.tree.element?.localName == "table";
+    };
 
 Widget _layoutCells(RenderContext context, BoxConstraints constraints) {
   final rows = <TableRowLayoutElement>[];
@@ -35,29 +39,29 @@ Widget _layoutCells(RenderContext context, BoxConstraints constraints) {
       columnSizes = child.children
           .where((c) => c.name == "col")
           .map((c) {
-        final span = int.tryParse(c.attributes["span"] ?? "1") ?? 1;
-        final colWidth = c.attributes["width"];
-        return List.generate(span, (index) {
-          if (colWidth != null && colWidth.endsWith("%")) {
-            if (!constraints.hasBoundedWidth) {
-              // In a horizontally unbounded container; always wrap content instead of applying flex
-              return IntrinsicContentTrackSize();
-            }
-            final percentageSize = double.tryParse(
-                colWidth.substring(0, colWidth.length - 1));
-            return percentageSize != null && !percentageSize.isNaN
-                ? FlexibleTrackSize(percentageSize * 0.01)
-                : IntrinsicContentTrackSize();
-          } else if (colWidth != null) {
-            final fixedPxSize = double.tryParse(colWidth);
-            return fixedPxSize != null
-                ? FixedTrackSize(fixedPxSize)
-                : IntrinsicContentTrackSize();
-          } else {
-            return IntrinsicContentTrackSize();
-          }
-        });
-      })
+            final span = int.tryParse(c.attributes["span"] ?? "1") ?? 1;
+            final colWidth = c.attributes["width"];
+            return List.generate(span, (index) {
+              if (colWidth != null && colWidth.endsWith("%")) {
+                if (!constraints.hasBoundedWidth) {
+                  // In a horizontally unbounded container; always wrap content instead of applying flex
+                  return IntrinsicContentTrackSize();
+                }
+                final percentageSize =
+                    double.tryParse(colWidth.substring(0, colWidth.length - 1));
+                return percentageSize != null && !percentageSize.isNaN
+                    ? FlexibleTrackSize(percentageSize * 0.01)
+                    : IntrinsicContentTrackSize();
+              } else if (colWidth != null) {
+                final fixedPxSize = double.tryParse(colWidth);
+                return fixedPxSize != null
+                    ? FixedTrackSize(fixedPxSize)
+                    : IntrinsicContentTrackSize();
+              } else {
+                return IntrinsicContentTrackSize();
+              }
+            });
+          })
           .expand((element) => element)
           .toList(growable: false);
     } else if (child is TableSectionLayoutElement) {
@@ -68,18 +72,23 @@ Widget _layoutCells(RenderContext context, BoxConstraints constraints) {
   }
 
   // All table rows have a height intrinsic to their (spanned) contents
-  final rowSizes = List.generate(rows.length, (_) => IntrinsicContentTrackSize());
+  final rowSizes =
+      List.generate(rows.length, (_) => IntrinsicContentTrackSize());
 
   // Calculate column bounds
   int columnMax = 0;
   List<int> rowSpanOffsets = [];
   for (final row in rows) {
-    final cols = row.children.whereType<TableCellElement>().fold(0, (int value, child) => value + child.colspan) +
+    final cols = row.children
+            .whereType<TableCellElement>()
+            .fold(0, (int value, child) => value + child.colspan) +
         rowSpanOffsets.fold<int>(0, (int offset, child) => child);
     columnMax = max(cols, columnMax);
     rowSpanOffsets = [
       ...rowSpanOffsets.map((value) => value - 1).where((value) => value > 0),
-      ...row.children.whereType<TableCellElement>().map((cell) => cell.rowspan - 1),
+      ...row.children
+          .whereType<TableCellElement>()
+          .map((cell) => cell.rowspan - 1),
     ];
   }
 
@@ -91,19 +100,21 @@ Widget _layoutCells(RenderContext context, BoxConstraints constraints) {
   for (var row in rows) {
     int columni = 0;
     for (var child in row.children) {
-      if (columni > columnMax - 1 ) {
+      if (columni > columnMax - 1) {
         break;
       }
       if (child is TableCellElement) {
         while (columnRowOffset[columni] > 0) {
           columnRowOffset[columni] = columnRowOffset[columni] - 1;
-          columni += columnColspanOffset[columni].clamp(1, columnMax - columni - 1);
+          columni +=
+              columnColspanOffset[columni].clamp(1, columnMax - columni - 1);
         }
         cells.add(GridPlacement(
           child: Container(
             width: child.style.width ?? double.infinity,
             height: child.style.height,
-            padding: child.style.padding?.nonNegative ?? row.style.padding?.nonNegative,
+            padding: child.style.padding?.nonNegative ??
+                row.style.padding?.nonNegative,
             decoration: BoxDecoration(
               color: child.style.backgroundColor ?? row.style.backgroundColor,
               border: child.style.border ?? row.style.border,
@@ -140,9 +151,8 @@ Widget _layoutCells(RenderContext context, BoxConstraints constraints) {
 
   // Create column tracks (insofar there were no colgroups that already defined them)
   List<TrackSize> finalColumnSizes = columnSizes.take(columnMax).toList();
-  finalColumnSizes += List.generate(
-      max(0, columnMax - finalColumnSizes.length),
-          (_) => IntrinsicContentTrackSize());
+  finalColumnSizes += List.generate(max(0, columnMax - finalColumnSizes.length),
+      (_) => IntrinsicContentTrackSize());
 
   if (finalColumnSizes.isEmpty || rowSizes.isEmpty) {
     // No actual cells to show
diff --git a/packages/flutter_html_table/pubspec.yaml b/packages/flutter_html_table/pubspec.yaml
index 3459d868fc..564dfb9fe2 100644
--- a/packages/flutter_html_table/pubspec.yaml
+++ b/packages/flutter_html_table/pubspec.yaml
@@ -1,5 +1,6 @@
 name: flutter_html_table
-description: Table widget for flutter_html.
+description: This extension package allows the <table> tag to be rendered using the flutter_html package
+
 version: 3.0.0-alpha.3
 homepage: https://github.com/Sub6Resources/flutter_html
 
diff --git a/packages/flutter_html_video/example/example.md b/packages/flutter_html_video/example/example.md
new file mode 100644
index 0000000000..aff9f75ad4
--- /dev/null
+++ b/packages/flutter_html_video/example/example.md
@@ -0,0 +1,3 @@
+# Example
+
+### Coming soon...
\ No newline at end of file
diff --git a/packages/flutter_html_video/lib/flutter_html_video.dart b/packages/flutter_html_video/lib/flutter_html_video.dart
index 78ccfe8936..2dc6faa62d 100644
--- a/packages/flutter_html_video/lib/flutter_html_video.dart
+++ b/packages/flutter_html_video/lib/flutter_html_video.dart
@@ -6,16 +6,21 @@ import 'package:flutter_html/flutter_html.dart';
 import 'package:video_player/video_player.dart';
 import 'package:html/dom.dart' as dom;
 
-typedef VideoControllerCallback = void Function(dom.Element?, ChewieController, VideoPlayerController);
+typedef VideoControllerCallback = void Function(
+    dom.Element?, ChewieController, VideoPlayerController);
 
-CustomRender videoRender({VideoControllerCallback? onControllerCreated})
-  => CustomRender.widget(widget: (context, buildChildren)
-    => VideoWidget(context: context, callback: onControllerCreated));
+/// A CustomRender function for rendering the <video> HTML tag.
+CustomRender videoRender({VideoControllerCallback? onControllerCreated}) =>
+    CustomRender.widget(
+        widget: (context, buildChildren) =>
+            VideoWidget(context: context, callback: onControllerCreated));
 
+/// A CustomRenderMatcher for the <video> HTML tag
 CustomRenderMatcher videoMatcher() => (context) {
-  return context.tree.element?.localName == "video";
-};
+      return context.tree.element?.localName == "video";
+    };
 
+/// A VideoWidget for displaying within the HTML tree.
 class VideoWidget extends StatefulWidget {
   final RenderContext context;
   final VideoControllerCallback? callback;
@@ -39,9 +44,9 @@ class _VideoWidgetState extends State<VideoWidget> {
   void initState() {
     final attributes = widget.context.tree.element?.attributes ?? {};
     final sources = <String?>[
-      if (attributes['src'] != null)
-        attributes['src'],
-      ...ReplacedElement.parseMediaSources(widget.context.tree.element!.children),
+      if (attributes['src'] != null) attributes['src'],
+      ...ReplacedElement.parseMediaSources(
+          widget.context.tree.element!.children),
     ];
     final givenWidth = double.tryParse(attributes['width'] ?? "");
     final givenHeight = double.tryParse(attributes['height'] ?? "");
@@ -51,16 +56,19 @@ class _VideoWidgetState extends State<VideoWidget> {
       _videoController = VideoPlayerController.network(sources.first!);
       _chewieController = ChewieController(
         videoPlayerController: _videoController!,
-        placeholder: attributes['poster'] != null && attributes['poster']!.isNotEmpty
-            ? Image.network(attributes['poster']!)
-            : Container(color: Colors.black),
+        placeholder:
+            attributes['poster'] != null && attributes['poster']!.isNotEmpty
+                ? Image.network(attributes['poster']!)
+                : Container(color: Colors.black),
         autoPlay: attributes['autoplay'] != null,
         looping: attributes['loop'] != null,
         showControls: attributes['controls'] != null,
         autoInitialize: true,
-        aspectRatio: _width == null || _height == null ? null : _width! / _height!,
+        aspectRatio:
+            _width == null || _height == null ? null : _width! / _height!,
       );
-      widget.callback?.call(widget.context.tree.element, _chewieController!, _videoController!);
+      widget.callback?.call(
+          widget.context.tree.element, _chewieController!, _videoController!);
     }
     super.initState();
   }
@@ -88,4 +96,4 @@ class _VideoWidgetState extends State<VideoWidget> {
       child: child,
     );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/flutter_html_video/pubspec.yaml b/packages/flutter_html_video/pubspec.yaml
index c6c1d2a332..50354655c1 100644
--- a/packages/flutter_html_video/pubspec.yaml
+++ b/packages/flutter_html_video/pubspec.yaml
@@ -1,5 +1,5 @@
 name: flutter_html_video
-description: Video widget for flutter_html.
+description: This extension package allows the <video> tag to be rendered using the flutter_html package
 version: 3.0.0-alpha.4
 homepage: https://github.com/Sub6Resources/flutter_html
 
diff --git a/pubspec.yaml b/pubspec.yaml
index 8842d4ba76..f47df5c0d3 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -18,7 +18,7 @@ dependencies:
   collection: '>=1.15.0 <2.0.0'
 
   # plugin to convert integers to numerals
-  numerus: '>=1.1.1 <2.0.0'
+  numerus: '>=2.0.0 <3.0.0'
 
   flutter:
     sdk: flutter