diff --git a/.github/workflows/mediawiki-tests.yml b/.github/workflows/mediawiki-tests.yml
index ecf6a7ab..c909bfbf 100644
--- a/.github/workflows/mediawiki-tests.yml
+++ b/.github/workflows/mediawiki-tests.yml
@@ -13,46 +13,18 @@ jobs:
     strategy:
       matrix:
         include:
-          # Latest MediaWiki LTS - PHP 8.2 (phan)
-          - mw: 'REL1_43'
-            php: 8.2
-            php-docker: 82
-            experimental: false
-            stage: phan
-
-          # Latest MediaWiki LTS - PHP 8.2 (phpunit)
-          - mw: 'REL1_43'
-            php: 8.2
-            php-docker: 82
-            experimental: false
-            stage: phpunit
-
-          # Legacy MediaWiki stable - PHP 8.2 (phan)
-          - mw: 'REL1_44'
-            php: 8.2
-            php-docker: 82
-            experimental: false
-            stage: phan
-
-          # Legacy MediaWiki stable - PHP 8.2 (phpunit)
-          - mw: 'REL1_44'
-            php: 8.2
-            php-docker: 82
-            experimental: false
-            stage: phpunit
-
           # Latest MediaWiki stable - PHP 8.2 (phan)
           - mw: 'REL1_45'
             php: 8.2
             php-docker: 82
-            experimental: true
+            experimental: false
             stage: phan
 
           # Latest MediaWiki stable - PHP 8.4 (phan)
           - mw: 'REL1_45'
             php: 8.4
             php-docker: 84
-            experimental: true
+            experimental: false
             stage: phan
 
           # Latest MediaWiki stable - PHP 8.2 (phpunit)
diff --git a/README.md b/README.md
index 1323a7dc..d8e1ccc4 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,12 @@ You can use several variables to modify extension's behaviour:
 - `$wgPortableInfoboxResponsiblyOpenCollapsed` (bool) - open collapsed groups when the screen is narrow. (default: true)
 - `$wgPortableInfoboxUseFileDescriptionPage` (bool) - control whether or not embedded images in the infobox will link to their file description page instead of directly to the file. (default: false)
 
+### Parsoid
+PortableInfobox has support for displaying infoboxes when rendering an article using Parsoid. This has been tested against MediaWiki 1.45 and is not guaranteed to work in earlier versions. 
+
+There are still some issues, and the implementation is not bug free, however it should display most infoboxes - infoboxes will also display in the VisualEditor. 
+
+When using PortableInfoboxes and Parsoid, you **must** set `$wgPortableInfoboxUseHeadings = false` otherwise Parsoid will wrap the headings in the infobox in section tags which will break formatting and styling.
 ## Usage
 See: https://community.fandom.com/wiki/Help:Infoboxes
 
diff --git a/extension.json b/extension.json
index 349d9bbd..41520fa8 100644
--- a/extension.json
+++ b/extension.json
@@ -7,15 +7,19 @@
 	],
 	"url": "https://github.com/Universal-Omega/PortableInfobox",
 	"descriptionmsg": "portable-infobox-desc",
-	"version": "0.8",
+	"version": "1.0",
 	"type": "parserhook",
 	"license-name": "GPL-3.0-or-later",
 	"requires": {
-		"MediaWiki": ">= 1.43.0"
+		"MediaWiki": ">= 1.45.0"
 	},
 	"config": {
 		"AllInfoboxesExcludedSubpages": {
-			"value": [ "doc", "draft", "test" ]
+			"value": [
+				"doc",
+				"draft",
+				"test"
+			]
 		},
 		"PortableInfoboxCacheRenderers": {
 			"value": false
@@ -125,5 +129,6 @@
 	"APIListModules": {
 		"allinfoboxes": "PortableInfobox\\Controllers\\ApiQueryAllInfoboxes"
 	},
+	"ParsoidModules": [ "PortableInfobox\\Parsoid\\InfoboxTag" ],
 	"manifest_version": 2
 }
diff --git a/includes/Parsoid/InfoboxTag.php b/includes/Parsoid/InfoboxTag.php
new file mode 100644
index 00000000..d59e1170
--- /dev/null
+++ b/includes/Parsoid/InfoboxTag.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace PortableInfobox\Parsoid;
+
+use Wikimedia\Parsoid\Core\ContentMetadataCollectorStringSets as CMCSS;
+use Wikimedia\Parsoid\Ext\ExtensionModule;
+use Wikimedia\Parsoid\Ext\ExtensionTagHandler;
+use Wikimedia\Parsoid\Ext\ParsoidExtensionAPI;
+
+class InfoboxTag extends ExtensionTagHandler implements ExtensionModule {
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getConfig(): array {
+		return [
+			'name' => 'PortableInfobox',
+			'tags' => [
+				[
+					'name' => 'infobox',
+					'handler' => self::class,
+				],
+			],
+			'domProcessors' => [
+				'PortableInfobox\\Parsoid\\PortableInfoboxDOMProcessor',
+			],
+		];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function sourceToDom( ParsoidExtensionAPI $api, string $src, array $args ) {
+		$domFragments = $api->extTagToDOM( $args, $src, [
+			'wrapperTag' => 'aside',
+			'parseOpts' => [
+				'extTag' => 'infobox',
+				'context' => 'inline',
+			],
+		] );
+
+		$api->getMetadata()->appendOutputStrings( CMCSS::MODULE_STYLE, [ 'ext.PortableInfobox.styles' ] );
+		$api->getMetadata()->appendOutputStrings( CMCSS::MODULE, [ 'ext.PortableInfobox.scripts' ] );
+
+		// return this back. At this point, we have constructed the outer tag (<aside class=...</aside>)
+		// and this function is done with its work. The rest of the work will happen in the DOMProcessor
+		return $domFragments;
+	}
+}
diff --git a/includes/Parsoid/ParsoidMediaWikiParser.php b/includes/Parsoid/ParsoidMediaWikiParser.php
new file mode 100644
index 00000000..f1e7f045
--- /dev/null
+++ b/includes/Parsoid/ParsoidMediaWikiParser.php
@@ -0,0 +1,107 @@
+<?php
+
+namespace PortableInfobox\Parsoid;
+
+use MediaWiki\Title\Title;
+use PortableInfobox\Services\Parser\ExternalParser;
+use Wikimedia\Parsoid\DOM\Element;
+use Wikimedia\Parsoid\Ext\ParsoidExtensionAPI;
+use Wikimedia\Parsoid\Utils\DOMCompat;
+
+class ParsoidMediaWikiParser implements ExternalParser {
+
+	public function __construct(
+		private readonly ParsoidExtensionAPI $api,
+	) {
+	}
+
+	public function parseRecursive( $wikitext ) {
+		if ( $wikitext === null ) {
+			return null;
+		}
+
+		$paramParsed = $this->api->wikitextToDOM( $wikitext, [
+			// this differs from earlier as we need the frame to be able to grab the
+			// params the user passed - parsoid handles this internally it appears
+			'processInNewFrame' => false,
+			'parseOpts' => [ 'context' => 'inline' ],
+		], true );
+		'@phan-var Element $paramParsed';
+
+		// we don't want Parsoid to wrap in a span or add a typeof here,
+		// just interested in the content
+		return DOMCompat::getOuterHTML( $paramParsed );
+	}
+
+	/** @param $wikitext @phan-unused-param */
+	public function replaceVariables( $wikitext ) {
+		// no-op - I think handled by ->wikiTextToDOM?
+	}
+
+	/**
+	 * @param $title @phan-unused-param
+	 * @param array $sizeParams @phan-unused-param
+	 */
+	public function addImage( $title, array $sizeParams ): ?string {
+		// no-op at present. Used to extend the image tag with specific information for the PageImages extension.
+		// that extension relies on Parser hooks and therefore is not safe to assume that will work indefinitely.
+		// could potentially just do it for now whilst the hooks still exist, and maybe remove at a later date if
+		// PageImages is not made Parsoid-compat.
+		return '';
+	}
+
+	public function getParsoidExtensionApi(): ParsoidExtensionAPI {
+		return $this->api;
+	}
+
+	/**
+	 * Extract the gallery and return the filename -> captions. PortableInfobox currently does this
+	 * a lot cleaner as it piggybacks on onAfterParserFetchFileAndTitle hook to set the images into the data bag.
+	 * This hook is NOT available on Parsoid, and we have no other way to get the resultant class which PortableInfobox
+	 * currently relies on. So we need to fake it as best we can and hope WMF comes up with something later down
+	 * the line.
+	 * @param string $wikitext
+	 * @return array an array of the images
+	 */
+	public function extractGallery( string $wikitext ): array {
+		// the legacy implementation reuturns an array where each element is an array of the caption
+		// and the title object for that specific image. We don't have access to this by default,
+		// since there is no concept of half parsing in Parsoid - we either ask Parsoid for the Parsed wt->html
+		// or we work with the WT and grab what we need.
+		$result = [];
+
+		// this is quicker than passing the wikitext to Parsoid and extracting
+		// the images etc from it.
+		if ( preg_match( '/<gallery[^>]*>(.*?)<\/gallery>/s', $wikitext, $matches ) ) {
+			$galleryContent = trim( $matches[1] );
+			if ( !$galleryContent ) {
+				return [];
+			}
+
+			$lines = explode( "\n", $galleryContent );
+			foreach ( $lines as $line ) {
+				$line = trim( $line );
+				if ( !$line ) {
+					continue;
+				}
+
+				$parts = explode( '|', $line, 2 );
+				$filename = trim( $parts[0] );
+				$caption = trim( $parts[1] ?? '' );
+				if ( !$filename ) {
+					continue;
+				}
+
+				$title = Title::newFromText( $filename, NS_FILE );
+				if ( $title !== null ) {
+					$result[] = [
+						'label' => $caption,
+						'title' => $title,
+					];
+				}
+			}
+		}
+
+		return $result;
+	}
+}
diff --git a/includes/Parsoid/ParsoidPortableInfoboxRenderService.php b/includes/Parsoid/ParsoidPortableInfoboxRenderService.php
new file mode 100644
index 00000000..4ffd311c
--- /dev/null
+++ b/includes/Parsoid/ParsoidPortableInfoboxRenderService.php
@@ -0,0 +1,195 @@
+<?php
+
+namespace PortableInfobox\Parsoid;
+
+use PortableInfobox\Services\AbstractPortableInfoboxRenderService;
+use PortableInfobox\Services\Helpers\InfoboxParamsValidator;
+use PortableInfobox\Services\Helpers\PortableInfoboxTemplateEngine;
+use PortableInfobox\Services\Parser\Nodes\NodeFactory;
+use PortableInfobox\Services\Parser\Nodes\NodeInfobox;
+use Wikimedia\Parsoid\Core\Sanitizer;
+use Wikimedia\Parsoid\DOM\Element;
+use Wikimedia\Parsoid\Ext\ParsoidExtensionAPI;
+use Wikimedia\Parsoid\Utils\DOMCompat;
+
+class ParsoidPortableInfoboxRenderService extends AbstractPortableInfoboxRenderService {
+
+	public const PARSER_TAG_VERSION = 2;
+	public const DEFAULT_THEME_NAME = 'default';
+	public const INFOBOX_THEME_PREFIX = 'pi-theme-';
+
+	private const DEFAULT_LAYOUT_NAME = 'default';
+	private const INFOBOX_LAYOUT_PREFIX = 'pi-layout-';
+	private const INFOBOX_TYPE_PREFIX = 'pi-type-';
+	private const ACCENT_COLOR = 'accent-color';
+	private const ACCENT_COLOR_TEXT = 'accent-color-text';
+	private const ERR_UNIMPLEMENTEDNODE = 'portable-infobox-unimplemented-infobox-tag';
+	private const ERR_UNSUPPORTEDATTR = 'portable-infobox-xml-parse-error-infobox-tag-attribute-unsupported';
+
+	private ?InfoboxParamsValidator $infoboxParamsValidator = null;
+
+	private array $paramMap = [];
+
+	/**
+	 * Build a parameter map of field -> value for display
+	 * @param array $params
+	 * @return void
+	 */
+	private function buildParamMap( array $params ): void {
+		// loop over all of the parameters we received and if they have both a value
+		// and a name, then add them to the array - if they do not have a "valueWt" value, then the value was
+		// empty and therefore we should not render this part of the infobox
+		// At this point, we have what we pretty much have what we pass to the legacy function on line
+		// 104 of PortableInfoboxParserTagController::class
+		foreach ( $params as $param ) {
+			if ( isset( $param->k ) && isset( $param->valueWt ) ) {
+				$this->paramMap[ $param->k ] = $param->valueWt;
+			}
+		}
+	}
+
+	/**
+	 * This function is responsible for rendering the actual infobox to the DOM
+	 * This is the entrypoint which should be called to render the infobox from the
+	 * DOMProcessor. This will delegate appropriately
+	 */
+	public function renderPI(
+		ParsoidExtensionAPI $extApi,
+		Element $container,
+		array $params,
+		string $parsoidData
+	): void {
+		$this->buildParamMap( $params );
+		[ $data, $attr ] = $this->prepareInfobox( $extApi, $parsoidData );
+
+		$themes = $this->getThemes( $attr );
+		$layout = $this->getLayout( $attr );
+		$type = $this->getType( $attr );
+
+		// This is a slight change from the legacy, we only use the templates to render the children
+		// since Parsoid will have generated an <aside> wrapper tag before we reach this function, so
+		// lets get our classes and add them to this <aside> wrapper which is the $container
+		$classes = [
+			'portable-infobox',
+			'noexcerpt',
+			'searchaux',
+			'pi-background',
+		];
+
+		$classes = array_merge( $classes, $themes );
+		$classes[] = $layout;
+		$classes[] = $type;
+
+		$container->setAttribute( 'class', implode( ' ', $classes ) );
+
+		$result = $this->renderInfobox( $data );
+		DOMCompat::setInnerHTML( $container, $result );
+	}
+
+	public function prepareInfobox(
+		ParsoidExtensionAPI $extApi,
+		string $parsoidData
+	): array {
+		$externalParser = new ParsoidMediaWikiParser( $extApi );
+		// same as legacy!
+		$infoboxNode = NodeFactory::newFromXML( $parsoidData, $this->paramMap ?: [], $externalParser );
+		$infoboxNode->setExternalParser( $externalParser );
+		$data = $infoboxNode->getRenderData();
+		$attr = $infoboxNode instanceof NodeInfobox ? $infoboxNode->getParams() : [];
+		return [ $data, $attr ];
+	}
+
+	/**
+	 * Get the themes for this infobox as an array, falling back to the default if needed
+	 * @param $attr the attributes
+	 * @return array
+	 */
+	private function getThemes( array $attr ): array {
+		$themes = [];
+		if ( isset( $attr['theme'] ) ) {
+			$staticTheme = trim( $attr['theme'] );
+			if ( $staticTheme ) {
+				$themes[] = $staticTheme;
+			}
+		}
+
+		// we don't have access to the frame here, but what we do have is the params and their values we got earlier, so
+		// we can get the value for that - I think this works but I'm a bit confused alas!
+		if ( !empty( $attr['theme-source' ] ) ) {
+			$variableTheme = $this->paramMap[ $attr['theme-source'] ];
+			if ( $variableTheme ) {
+				$themes[] = $variableTheme;
+			}
+		}
+
+		$themes = $themes ?: [ self::DEFAULT_THEME_NAME ];
+
+		return array_map( static function ( $name ) {
+			return Sanitizer::escapeIdForAttribute(
+				self::INFOBOX_THEME_PREFIX . preg_replace( '|\s+|s', '-', $name )
+			);
+		}, $themes );
+	}
+
+	/**
+	 * Get the layout for this infobox from the attributes
+	 * @param array $attr the attributes
+	 */
+	private function getLayout( array $attr ): string {
+		$layoutName = $attr['layout'] ?? '';
+		if ( $this->getParamsValidator()->validateLayout( $layoutName ) ) {
+			return self::INFOBOX_LAYOUT_PREFIX . $layoutName;
+		}
+
+		return self::INFOBOX_LAYOUT_PREFIX . self::DEFAULT_LAYOUT_NAME;
+	}
+
+	/**
+	 * Get an instance of the InfoboxParamsValidator::class
+	 * @return InfoboxParamsValidator
+	 */
+	private function getParamsValidator() {
+		$this->infoboxParamsValidator ??= new InfoboxParamsValidator();
+		return $this->infoboxParamsValidator;
+	}
+
+	/**
+	 * Get the type of infobox that this is, ie "character" "place"
+	 * @param $attr the attributes
+	 * @return string
+	 */
+	private function getType( array $attr ): string {
+		return !empty( $attr['type'] ) ? Sanitizer::escapeIdForAttribute(
+				self::INFOBOX_TYPE_PREFIX . preg_replace( '|\s+|s', '-', $attr['type'] )
+			) : '';
+	}
+
+	/**
+	 * Get the name for this infobox
+	 * @TODO: needs to go through the sanitizer
+	 * @param array $attr
+	 * @return string
+	 */
+	private function getItemName( $attr ) {
+		return !empty( $attr['name'] ) ? $attr['name'] : '';
+	}
+
+	private function renderInfobox( array $data ) {
+		$this->templateEngine = new PortableInfoboxTemplateEngine();
+		$infoboxHtmlContent = $this->renderChildren( $data );
+
+		return $infoboxHtmlContent;
+	}
+
+	protected function renderHeader( array $data ) {
+		// $data['inlineStyles'] = $this->inlineStyles;
+
+		return $this->render( 'header', $data );
+	}
+
+	protected function renderTitle( array $data ) {
+		// $data['inlineStyles'] = $this->inlineStyles;
+
+		return $this->render( 'title', $data );
+	}
+}
diff --git a/includes/Parsoid/PortableInfoboxDOMProcessor.php b/includes/Parsoid/PortableInfoboxDOMProcessor.php
new file mode 100644
index 00000000..d6e6293a
--- /dev/null
+++ b/includes/Parsoid/PortableInfoboxDOMProcessor.php
@@ -0,0 +1,74 @@
+<?php
+
+namespace PortableInfobox\Parsoid;
+
+use Wikimedia\Parsoid\DOM\Document;
+use Wikimedia\Parsoid\DOM\DocumentFragment;
+use Wikimedia\Parsoid\DOM\Element;
+use Wikimedia\Parsoid\DOM\Node;
+use Wikimedia\Parsoid\Ext\DOMDataUtils;
+use Wikimedia\Parsoid\Ext\DOMProcessor;
+use Wikimedia\Parsoid\Ext\DOMUtils;
+use Wikimedia\Parsoid\Ext\ParsoidExtensionAPI;
+
+class PortableInfoboxDOMProcessor extends DOMProcessor {
+
+	/**
+	 * Note, this is a WIP at present, see comments throughout.
+	 * Will probably need to be revised at a later stage when Parsoid API is more mature
+	 * @since 1.0
+	 *
+	 * @param array $options @phan-unused-param
+	 */
+	public function wtPostprocess(
+		ParsoidExtensionAPI $extApi,
+		Node $node,
+		array $options
+	): void {
+		'@phan-var Document|DocumentFragment $node';
+		// @var Document|DocumentFragment $node
+		$child = $node->firstChild;
+
+		// insipiration taken from Ext:Cite
+		// and also <gallery>
+		while ( $child !== null ) {
+			$nextChild = $child->nextSibling;
+			if ( $child instanceof Element ) {
+				// we're only interested in PIs in this function
+				if ( DOMUtils::hasTypeOf( $child, 'mw:Extension/infobox' ) ) {
+					$dataMw = DOMDataUtils::getDataMw( $child );
+					$parsoidData = DOMDataUtils::getDataParsoid( $child )->src;
+
+					$parts = $dataMw->parts;
+
+					// remove the existing stuff that is generated on the first pass of Parsoid
+					// Note: this is probably a bit of a hacky solution, since we will have already
+					// processed the parser tag at this point and ended up with the mangled HTML
+					// ideally, we would do all of this in the main parse, but Parsoid does not currently
+					// grant us the ability to do that, so just remove whatever gobbldy-guck was generated
+					// in the first pass. This is probably a bit of a performance hog, but it will be cached in the
+					// parser cache for subsequent reads so is a one-shot-pony until the cache expires.
+					while ( $child->firstChild !== null ) {
+						$child->removeChild( $child->firstChild );
+					}
+
+					foreach ( $parts as $part ) {
+						// add our parts to the params info
+						// this will get us the key => value of the parameters that the
+						// user passed to the template from the article,
+						// ie we might get something like
+						// params['name'] = [ 'k' => 'name', 'valueWt' => 'John Doe' ]
+						// which is something akin to what PortableInfoboxParserTagController::renderInfobox()
+						// expects to be passed, albeit we'll need to fudge it a bit!
+						$params = $part->paramInfos;
+
+						$portableInfoboxRenderService = new ParsoidPortableInfoboxRenderService();
+						$portableInfoboxRenderService->renderPI( $extApi, $child, $params, $parsoidData );
+					}
+
+				}
+			}
+			$child = $nextChild;
+		}
+	}
+}
diff --git a/includes/Services/AbstractPortableInfoboxRenderService.php b/includes/Services/AbstractPortableInfoboxRenderService.php
new file mode 100644
index 00000000..518899d9
--- /dev/null
+++ b/includes/Services/AbstractPortableInfoboxRenderService.php
@@ -0,0 +1,347 @@
+<?php
+
+namespace PortableInfobox\Services;
+
+use PortableInfobox\Services\Helpers\PortableInfoboxTemplateEngine;
+
+abstract class AbstractPortableInfoboxRenderService {
+
+	// keep synced with css variables (--pi-width)
+	public const DEFAULT_DESKTOP_INFOBOX_WIDTH = 270;
+	public const DEFAULT_DESKTOP_THUMBNAIL_WIDTH = 350;
+
+	protected $templateEngine;
+	protected $inlineStyles;
+
+	public function __construct() {
+		$this->templateEngine = new PortableInfoboxTemplateEngine();
+	}
+
+	/**
+	 * Produces HTML output for item type and data
+	 *
+	 * @param string $type
+	 * @param array $data
+	 * @return string
+	 */
+	protected function render( $type, array $data ) {
+		return $this->templateEngine->render( $type, $data );
+	}
+
+	/**
+	 * renders part of infobox
+	 *
+	 * @param string $type
+	 * @param array $data
+	 *
+	 * @return string - HTML
+	 */
+	protected function renderItem( $type, array $data ) {
+		switch ( $type ) {
+			case 'group':
+				$result = $this->renderGroup( $data );
+				break;
+			case 'header':
+				$result = $this->renderHeader( $data );
+				break;
+			case 'media':
+				$result = $this->renderMedia( $data );
+				break;
+			case 'title':
+				$result = $this->renderTitle( $data );
+				break;
+			case 'panel':
+				$result = $this->renderPanel( $data );
+				break;
+			case 'section':
+				$result = '';
+				break;
+			default:
+				$result = $this->render( $type, $data );
+				break;
+		}
+
+		return $result;
+	}
+
+	/**
+	 * Render specific elements. These are declared abstract so that both
+	 * Parsoid and legacy can implement themselves as legacy uses $this->inlineStyles
+	 * which Parsoid implementation does not currently support
+	 * @TODO: implement inlineStyles so these can be made non-abstract
+	 */
+	abstract protected function renderHeader( array $data );
+
+	abstract protected function renderTitle( array $data );
+
+	/**
+	 * renders group infobox component
+	 *
+	 * @param array $groupData
+	 *
+	 * @return string - group HTML markup
+	 */
+	protected function renderGroup( array $groupData ) {
+		$cssClasses = [];
+		$groupHTMLContent = '';
+		$children = $groupData['value'];
+		$layout = $groupData['layout'];
+		$collapse = $groupData['collapse'];
+		$rowItems = $groupData['row-items'];
+
+		if ( $rowItems > 0 ) {
+			$items = $this->createSmartGroups( $children, $rowItems );
+			$groupHTMLContent .= $this->renderChildren( $items );
+		} elseif ( $layout === 'horizontal' ) {
+			$groupHTMLContent .= $this->renderItem(
+				'horizontal-group-content',
+				$this->createHorizontalGroupData( $children )
+			);
+		} else {
+			$groupHTMLContent .= $this->renderChildren( $children );
+		}
+
+		if ( $collapse !== null && count( $children ) > 0 && $children[0]['type'] === 'header' ) {
+			$cssClasses[] = 'pi-collapse';
+			$cssClasses[] = 'pi-collapse-' . $collapse;
+		}
+
+		return $this->render( 'group', [
+			'content' => $groupHTMLContent,
+			'cssClasses' => implode( ' ', $cssClasses ),
+			'item-name' => $groupData['item-name'],
+		] );
+	}
+
+	/**
+	 * Create a smart group
+	 * @param array $groupData
+	 * @param $rowCapacity
+	 */
+	protected function createSmartGroups( array $groupData, $rowCapacity ) {
+		$result = [];
+		$rowSpan = 0;
+		$rowItems = [];
+
+		foreach ( $groupData as $item ) {
+			$data = $item['data'];
+
+			if ( $item['type'] === 'data' && $data['layout'] !== 'default' ) {
+				if ( $rowItems && $rowSpan + $data['span'] > $rowCapacity ) {
+					$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
+					$rowSpan = 0;
+					$rowItems = [];
+				}
+				$rowSpan += $data['span'];
+				$rowItems[] = $item;
+			} else {
+				// smart wrapping works only for data tags
+				if ( $rowItems ) {
+					$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
+					$rowSpan = 0;
+					$rowItems = [];
+				}
+				$result[] = $item;
+			}
+		}
+		if ( $rowItems ) {
+			$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
+		}
+
+		return $result;
+	}
+
+	/**
+	 * Create a smart group item
+	 * @param array $rowItems
+	 * @param $rowSpan
+	 * @return array
+	 */
+	protected function createSmartGroupItem( array $rowItems, $rowSpan ): array {
+		return [
+			'type' => 'smart-group',
+			'data' => $this->createSmartGroupSections( $rowItems, $rowSpan ),
+		];
+	}
+
+	/**
+	 * Create a smart group section
+	 * @param array $rowItems
+	 * @param $capacity
+	 */
+	protected function createSmartGroupSections( array $rowItems, $capacity ) {
+		return array_reduce( $rowItems, static function ( $result, $item ) use ( $capacity ) {
+			$width = $item['data']['span'] / $capacity * 100;
+			$styles = "width: {$width}%";
+
+			$label = $item['data']['label'] ?? '';
+			if ( $label ) {
+				$result['renderLabels'] = true;
+			}
+			$result['data'][] = [
+				'label' => $label,
+				'value' => $item['data']['value'],
+				'inlineStyles' => $styles,
+				'source' => $item['data']['source'] ?? '',
+				'item-name' => $item['data']['item-name'],
+			];
+
+			return $result;
+		}, [ 'data' => [], 'renderLabels' => false ] );
+	}
+
+	/**
+	 * Create group data for a horizontal group
+	 * @param array $groupData
+	 * @return array
+	 */
+	protected function createHorizontalGroupData( array $groupData ): array {
+		$horizontalGroupData = [
+			'data' => [],
+			'renderLabels' => false,
+		];
+
+		foreach ( $groupData as $item ) {
+			$data = $item['data'];
+			if ( $item['type'] === 'data' ) {
+				$horizontalGroupData['data'][] = [
+					'label' => $data['label'],
+					'value' => $data['value'],
+					'source' => $item['data']['source'] ?? '',
+					'item-name' => $item['data']['item-name'],
+				];
+
+				if ( !empty( $data['label'] ) ) {
+					$horizontalGroupData['renderLabels'] = true;
+				}
+			} elseif ( $item['type'] === 'header' ) {
+				$horizontalGroupData['header'] = $data['value'];
+				$horizontalGroupData['inlineStyles'] = $this->inlineStyles;
+			}
+		}
+
+		return $horizontalGroupData;
+	}
+
+	/**
+	 * Get data for a specific section
+	 * @param $section
+	 * @param $index
+	 * @return array
+	 */
+	protected function getSectionData( $section, $index ): array {
+		$content = $this->renderChildren( $section['data']['value'] );
+		return [
+			'index' => $index,
+			'item-name' => $section['data']['item-name'],
+			'label' => $section['data']['label'],
+			'content' => $content ?: null,
+		];
+	}
+
+	/**
+	 * Render the children of the infobox - this turns everything between the
+	 * <infobox></infobox> tags into HTML
+	 * @param array $children
+	 * @return string
+	 */
+	protected function renderChildren( array $children ): string {
+		$result = '';
+		foreach ( $children as $child ) {
+			$type = $child['type'];
+			if ( $this->templateEngine->isSupportedType( $type ) ) {
+				$result .= $this->renderItem( $type, $child['data'] );
+			}
+		}
+
+		return $result;
+	}
+
+	/**
+	 * Render a panel
+	 * @param array $data
+	 * @param string $type
+	 */
+	protected function renderPanel( array $data, $type = 'panel' ) {
+		$cssClasses = [];
+		$sections = [];
+		$collapse = $data['collapse'];
+		$header = '';
+		$shouldShowToggles = false;
+
+		foreach ( $data['value'] as $index => $child ) {
+			switch ( $child['type'] ) {
+				case 'header':
+					if ( !$header ) {
+						$header = $this->renderHeader( $child['data'] );
+					}
+					break;
+				case 'section':
+					$sectionData = $this->getSectionData( $child, $index );
+					// section needs to have content in order to render it
+					if ( !empty( $sectionData['content'] ) ) {
+						$sections[] = $sectionData;
+						if ( !empty( $sectionData['label'] ) ) {
+							$shouldShowToggles = true;
+						}
+					}
+					break;
+				default:
+					// we do not support any other tags than section and header inside panel
+					break;
+			}
+		}
+		if ( $collapse !== null && count( $sections ) > 0 && $header ) {
+			$cssClasses[] = 'pi-collapse';
+			$cssClasses[] = 'pi-collapse-' . $collapse;
+		}
+		if ( count( $sections ) > 0 ) {
+			$sections[0]['active'] = true;
+		} else {
+			// do not render empty panel
+			return '';
+		}
+		if ( !$shouldShowToggles ) {
+			$sections = array_map( static function ( $content ) {
+				$content['active'] = true;
+				return $content;
+			}, $sections );
+		}
+
+		return $this->render( $type, [
+			'item-name' => $data['item-name'],
+			'cssClasses' => implode( ' ', $cssClasses ),
+			'header' => $header,
+			'sections' => $sections,
+			'shouldShowToggles' => $shouldShowToggles,
+		] );
+	}
+
+	/**
+	 * If image element has invalid thumbnail, doesn't render this element at all.
+	 *
+	 * @param array $data
+	 * @return string
+	 */
+	protected function renderMedia( array $data ) {
+		if ( count( $data ) === 0 || !$data[0] ) {
+			return '';
+		}
+
+		if ( count( $data ) === 1 ) {
+			$data = $data[0];
+			$templateName = 'media';
+		} else {
+			// More than one image means image collection
+			$data = [
+				'images' => $data,
+				'source' => $data[0]['source'],
+				'item-name' => $data[0]['item-name'],
+			];
+			$templateName = 'media-collection';
+		}
+
+		return $this->render( $templateName, $data );
+	}
+
+}
diff --git a/includes/Services/Parser/Nodes/Node.php b/includes/Services/Parser/Nodes/Node.php
index e28972f2..38594333 100644
--- a/includes/Services/Parser/Nodes/Node.php
+++ b/includes/Services/Parser/Nodes/Node.php
@@ -147,8 +147,8 @@ protected function getChildNodes() {
 		if ( $this->children === null ) {
 			$this->children = [];
 			foreach ( $this->xmlNode as $child ) {
-				$this->children[] = NodeFactory::newFromSimpleXml( $child, $this->infoboxData )
-					->setExternalParser( $this->externalParser );
+				$this->children[] = NodeFactory::newFromSimpleXml( $child, $this->infoboxData, $this->getExternalParser() )
+					->setExternalParser( $this->getExternalParser() );
 			}
 		}
 
diff --git a/includes/Services/Parser/Nodes/NodeFactory.php b/includes/Services/Parser/Nodes/NodeFactory.php
index e8000d3d..4f0c1cfe 100644
--- a/includes/Services/Parser/Nodes/NodeFactory.php
+++ b/includes/Services/Parser/Nodes/NodeFactory.php
@@ -2,17 +2,18 @@
 
 namespace PortableInfobox\Services\Parser\Nodes;
 
+use PortableInfobox\Parsoid\ParsoidMediaWikiParser;
 use PortableInfobox\Services\Parser\XmlParser;
 use SimpleXMLElement;
 
 class NodeFactory {
 
-	public static function newFromXML( $text, array $data = [] ) {
-		return self::getInstance( XmlParser::parseXmlString( $text ), $data );
+	public static function newFromXML( $text, array $data = [], $externalParser = null ) {
+		return self::getInstance( XmlParser::parseXmlString( $text ), $data, $externalParser );
 	}
 
-	public static function newFromSimpleXml( SimpleXMLElement $xmlNode, array $data = [] ) {
-		return self::getInstance( $xmlNode, $data );
+	public static function newFromSimpleXml( SimpleXMLElement $xmlNode, array $data = [], $externalParser = null ) {
+		return self::getInstance( $xmlNode, $data, $externalParser );
 	}
 
 	/**
@@ -21,8 +22,20 @@ public static function newFromSimpleXml( SimpleXMLElement $xmlNode, array $data
 	 *
 	 * @return Node|NodeUnimplemented
 	 */
-	protected static function getInstance( SimpleXMLElement $xmlNode, array $data ) {
+	protected static function getInstance( SimpleXMLElement $xmlNode, array $data, $externalParser ) {
 		$tagType = $xmlNode->getName();
+
+		// a bit messed up, but we want to do some special stuff here with images
+		// that differs from the legacy implementation (which also calls out to Parser.php)
+		// so lets load a different class if we have an image
+		if ( $externalParser instanceof ParsoidMediaWikiParser ) {
+			if ( $tagType === 'image' ) {
+				return new ParsoidImageNode( $xmlNode, $data );
+			} elseif ( $tagType === 'media' ) {
+				return new ParsoidMediaNode( $xmlNode, $data );
+			}
+		}
+
 		$className = Node::class . mb_convert_case( mb_strtolower( $tagType ), MB_CASE_TITLE );
 		if ( class_exists( $className ) ) {
 			/* @var $instance Node */
diff --git a/includes/Services/Parser/Nodes/ParsoidImageNode.php b/includes/Services/Parser/Nodes/ParsoidImageNode.php
new file mode 100644
index 00000000..61545c12
--- /dev/null
+++ b/includes/Services/Parser/Nodes/ParsoidImageNode.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace PortableInfobox\Services\Parser\Nodes;
+
+class ParsoidImageNode extends ParsoidMediaNode {
+	/*
+	 * @return string
+	 */
+	public function getType() {
+		return 'media';
+	}
+
+	/*
+	 * @return bool
+	 */
+	protected function allowImage() {
+		return true;
+	}
+
+	/*
+	 * @return bool
+	 */
+	protected function allowAudio() {
+		return false;
+	}
+}
diff --git a/includes/Services/Parser/Nodes/ParsoidMediaNode.php b/includes/Services/Parser/Nodes/ParsoidMediaNode.php
new file mode 100644
index 00000000..594a0fd5
--- /dev/null
+++ b/includes/Services/Parser/Nodes/ParsoidMediaNode.php
@@ -0,0 +1,223 @@
+<?php
+
+namespace PortableInfobox\Services\Parser\Nodes;
+
+use MediaWiki\FileRepo\File\File;
+use MediaWiki\MediaWikiServices;
+use MediaWiki\Title\Title;
+use PortableInfobox\Parsoid\ParsoidMediaWikiParser;
+use PortableInfobox\Parsoid\ParsoidPortableInfoboxRenderService;
+use PortableInfobox\Services\Helpers\FileNamespaceSanitizeHelper;
+use PortableInfobox\Services\Helpers\PortableInfoboxImagesHelper;
+
+class ParsoidMediaNode extends Node {
+
+	private ?PortableInfoboxImagesHelper $helper;
+
+	private const ALLOWIMAGE_ATTR_NAME = 'image';
+	private const ALLOWVIDEO_ATTR_NAME = 'video';
+	private const ALLOWAUDIO_ATTR_NAME = 'audio';
+	private const ALT_TAG_NAME = 'alt';
+	private const CAPTION_TAG_NAME = 'caption';
+
+	/**
+	 * Return the data for the image
+	 * return array
+	 */
+	public function getData(): array {
+		if ( $this->data === null ) {
+			$this->data = [];
+
+			// value passed to source parameter (or default)
+			// force the $value to be a string so that containsTabberOrGallery()
+			// doesn't fatal
+			$value = $this->getRawValueWithDefault( $this->xmlNode );
+			if ( $this->containsTabberOrGallery( (string)$value ) ) {
+				$this->data = $this->getImagesData( $value );
+			} else {
+				$this->data = [ $this->getImageData(
+					$value,
+					$this->getValueWithDefault( $this->xmlNode->{self::ALT_TAG_NAME} ),
+					$this->getValueWithDefault( $this->xmlNode->{self::CAPTION_TAG_NAME} )
+				) ];
+			}
+		}
+		return $this->data;
+	}
+
+	/**
+	 * Checks if string contains raw <gallery> or <tabber> tags using a hacky regex. With the legacy Parser,
+	 * by the time this function runs in NodeMedia::class, the intial parse has already replaced the $str with a strip marker
+	 * we are not in such environment and we will receieve the raw wikitext passed by the user
+	 * @param string $value wikitext passed in the parameter
+	 * @return bool
+	 */
+	private function containsTabberOrGallery( string $value ): bool {
+		// <gallery></gallery>
+		if ( preg_match( '/<gallery\b[^>]*>/i', $value ) ) {
+			return true;
+		}
+
+		// <tabber></tabber>
+		if ( preg_match( '/<tabber\b[^>]*>/i', $value ) ) {
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Get the data about the image (or images if tabber/gallery) and return it as an array
+	 * @TODO: revisit this later, see comment on ParsoidMediaWikiParser::extractGallery for why this
+	 * is a bad idea - but it works
+	 * @param string $value the wikitext gallery
+	 */
+	private function getImagesData( string $value ) {
+		$helper = $this->getImageHelper();
+		$data = [];
+		$parser = $this->getExternalParser();
+		'@phan-var ParsoidMediaWikiParser $parser';
+		$items = $parser->extractGallery( $value );
+		// @TODO: do tabbers also
+		foreach ( $items as $item ) {
+			$mediaItem = $this->getImageData( $item['title'], $item['label'], $item['label'] );
+			if ( (bool)$mediaItem ) {
+				$data[] = $mediaItem;
+			}
+		}
+
+		return count( $data ) > 1 ? $helper->extendImageCollectionData( $data ) : $data;
+	}
+
+	private function getImageData( $title, $alt, $caption ) {
+		$helper = $this->getImageHelper();
+		$titleObj = $title instanceof Title ? $title : $this->getImageAsTitleObject( $title );
+		$fileObj = $helper->getFile( $titleObj );
+
+		if ( !$fileObj || !$this->isTypeAllowed( $fileObj->getMediaType() ) ) {
+			return [];
+		}
+
+		$mediatype = $fileObj->getMediaType();
+		$image = [
+			'url' => $this->resolveImageUrl( $fileObj, $titleObj ),
+			'name' => $titleObj ? $titleObj->getText() : '',
+			'alt' => $alt ?? ( $titleObj ? $titleObj->getText() : null ),
+			'caption' => $caption ?: null,
+			'isImage' => in_array( $mediatype, [ MEDIATYPE_BITMAP, MEDIATYPE_DRAWING ] ),
+			'isVideo' => $mediatype === MEDIATYPE_VIDEO,
+			'isAudio' => $mediatype === MEDIATYPE_AUDIO,
+			'source' => $this->getPrimarySource(),
+			'item-name' => $this->getItemName(),
+			'htmlAfter' => null,
+		];
+
+		if ( $image['isImage'] ) {
+			$image = array_merge( $image, $helper->extendImageData(
+				$fileObj,
+				ParsoidPortableInfoboxRenderService::DEFAULT_DESKTOP_THUMBNAIL_WIDTH,
+				ParsoidPortableInfoboxRenderService::DEFAULT_DESKTOP_INFOBOX_WIDTH
+			) );
+		}
+
+		return $image;
+	}
+
+	/**
+	 * Get the image as a title object
+	 * @param $imageName the image name
+	 * @return Title|null
+	 */
+	private function getImageAsTitleObject( $imageName ): ?Title {
+		$contLang = MediaWikiServices::getInstance()->getContentLanguage();
+
+		$title = Title::makeTitleSafe(
+			NS_FILE,
+			FileNamespaceSanitizeHelper::getInstance()->sanitizeImageFileName( $imageName, $contLang )
+		);
+
+		return $title;
+	}
+
+	/**
+	 * Returns image url for given image title
+	 * @param File|null $file
+	 * @param Title|null $title
+	 * @return string url or '' if image doesn't exist
+	 */
+	public function resolveImageUrl( $file, $title ) {
+		global $wgPortableInfoboxUseFileDescriptionPage;
+
+		if ( $wgPortableInfoboxUseFileDescriptionPage && $title ) {
+			return $title->getLocalURL();
+		}
+
+		return $file ? $file->getUrl() : '';
+	}
+
+	/**
+	 * Get an instance of the PortableInfoboxImageHelper
+	 * @return PortableInfoboxImagesHelper
+	 */
+	protected function getImageHelper() {
+		$this->helper ??= new PortableInfoboxImagesHelper();
+		return $this->helper;
+	}
+
+	/**
+	 * Checks if file media type is allowed
+	 * @param string $type
+	 * @return bool
+	 */
+	private function isTypeAllowed( $type ) {
+		switch ( $type ) {
+			case MEDIATYPE_BITMAP:
+			case MEDIATYPE_DRAWING:
+				return $this->allowImage();
+			case MEDIATYPE_VIDEO:
+				return $this->allowVideo();
+			case MEDIATYPE_AUDIO:
+				return $this->allowAudio();
+			default:
+				return false;
+		}
+	}
+
+	/**
+	 * @return bool
+	 */
+	protected function allowImage() {
+		$attr = $this->getXmlAttribute( $this->xmlNode, self::ALLOWIMAGE_ATTR_NAME );
+		return !( $attr && strtolower( $attr ) === 'false' );
+	}
+
+	/**
+	 * @return bool
+	 */
+	protected function allowVideo() {
+		$attr = $this->getXmlAttribute( $this->xmlNode, self::ALLOWVIDEO_ATTR_NAME );
+		return !( $attr && strtolower( $attr ) === 'false' );
+	}
+
+	/*
+	 * @return bool
+	 */
+	protected function allowAudio() {
+		$attr = $this->getXmlAttribute( $this->xmlNode, self::ALLOWAUDIO_ATTR_NAME );
+		return !( $attr && strtolower( $attr ) === 'false' );
+	}
+
+	public function isEmpty() {
+		$data = $this->getData();
+		foreach ( $data as $dataItem ) {
+			if ( !empty( $dataItem['url'] ) ) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	public function getType() {
+		return 'media';
+	}
+}
diff --git a/includes/Services/PortableInfoboxRenderService.php b/includes/Services/PortableInfoboxRenderService.php
index fcb27de6..2c72e0b6 100644
--- a/includes/Services/PortableInfoboxRenderService.php
+++ b/includes/Services/PortableInfoboxRenderService.php
@@ -2,19 +2,7 @@
 
 namespace PortableInfobox\Services;
 
-use PortableInfobox\Services\Helpers\PortableInfoboxTemplateEngine;
-
-class PortableInfoboxRenderService {
-	// keep synced with css variables (--pi-width)
-	public const DEFAULT_DESKTOP_INFOBOX_WIDTH = 270;
-	public const DEFAULT_DESKTOP_THUMBNAIL_WIDTH = 350;
-
-	protected $templateEngine;
-	protected $inlineStyles;
-
-	public function __construct() {
-		$this->templateEngine = new PortableInfoboxTemplateEngine();
-	}
+class PortableInfoboxRenderService extends AbstractPortableInfoboxRenderService {
 
 	/**
 	 * renders infobox
@@ -51,119 +39,6 @@ public function renderInfobox(
 		return $output;
 	}
 
-	/**
-	 * Produces HTML output for item type and data
-	 *
-	 * @param string $type
-	 * @param array $data
-	 * @return string
-	 */
-	protected function render( $type, array $data ) {
-		return $this->templateEngine->render( $type, $data );
-	}
-
-	/**
-	 * renders part of infobox
-	 *
-	 * @param string $type
-	 * @param array $data
-	 *
-	 * @return string - HTML
-	 */
-	protected function renderItem( $type, array $data ) {
-		switch ( $type ) {
-			case 'group':
-				$result = $this->renderGroup( $data );
-				break;
-			case 'header':
-				$result = $this->renderHeader( $data );
-				break;
-			case 'media':
-				$result = $this->renderMedia( $data );
-				break;
-			case 'title':
-				$result = $this->renderTitle( $data );
-				break;
-			case 'panel':
-				$result = $this->renderPanel( $data );
-				break;
-			case 'section':
-				$result = '';
-				break;
-			default:
-				$result = $this->render( $type, $data );
-				break;
-		}
-
-		return $result;
-	}
-
-	/**
-	 * renders group infobox component
-	 *
-	 * @param array $groupData
-	 *
-	 * @return string - group HTML markup
-	 */
-	protected function renderGroup( array $groupData ) {
-		$cssClasses = [];
-		$groupHTMLContent = '';
-		$children = $groupData['value'];
-		$layout = $groupData['layout'];
-		$collapse = $groupData['collapse'];
-		$rowItems = $groupData['row-items'];
-
-		if ( $rowItems > 0 ) {
-			$items = $this->createSmartGroups( $children, $rowItems );
-			$groupHTMLContent .= $this->renderChildren( $items );
-		} elseif ( $layout === 'horizontal' ) {
-			$groupHTMLContent .= $this->renderItem(
-				'horizontal-group-content',
-				$this->createHorizontalGroupData( $children )
-			);
-		} else {
-			$groupHTMLContent .= $this->renderChildren( $children );
-		}
-
-		if ( $collapse !== null && count( $children ) > 0 && $children[0]['type'] === 'header' ) {
-			$cssClasses[] = 'pi-collapse';
-			$cssClasses[] = 'pi-collapse-' . $collapse;
-		}
-
-		return $this->render( 'group', [
-			'content' => $groupHTMLContent,
-			'cssClasses' => implode( ' ', $cssClasses ),
-			'item-name' => $groupData['item-name']
-		] );
-	}
-
-	/**
-	 * If image element has invalid thumbnail, doesn't render this element at all.
-	 *
-	 * @param array $data
-	 * @return string
-	 */
-	protected function renderMedia( array $data ) {
-		if ( count( $data ) === 0 || !$data[0] ) {
-			return '';
-		}
-
-		if ( count( $data ) === 1 ) {
-			$data = $data[0];
-			$templateName = 'media';
-		} else {
-			// More than one image means image collection
-			$data = [
-				'images' => $data,
-				'source' => $data[0]['source'],
-				'item-name' => $data[0]['item-name']
-			];
-			$templateName = 'media-collection';
-		}
-
-		return $this->render( $templateName, $data );
-	}
-
 	protected function renderTitle( array $data ) {
 		$data['inlineStyles'] = $this->inlineStyles;
 
@@ -176,176 +51,10 @@ protected function renderHeader( array $data ) {
 		return $this->render( 'header', $data );
 	}
 
-	protected function renderChildren( array $children ) {
-		$result = '';
-		foreach ( $children as $child ) {
-			$type = $child['type'];
-			if ( $this->templateEngine->isSupportedType( $type ) ) {
-				$result .= $this->renderItem( $type, $child['data'] );
-			}
-		}
-
-		return $result;
-	}
-
-	protected function renderPanel( $data, $type = 'panel' ) {
-		$cssClasses = [];
-		$sections = [];
-		$collapse = $data['collapse'];
-		$header = '';
-		$shouldShowToggles = false;
-
-		foreach ( $data['value'] as $index => $child ) {
-			switch ( $child['type'] ) {
-				case 'header':
-					if ( !$header ) {
-						$header = $this->renderHeader( $child['data'] );
-					}
-					break;
-				case 'section':
-					$sectionData = $this->getSectionData( $child, $index );
-					// section needs to have content in order to render it
-					if ( !empty( $sectionData['content'] ) ) {
-						$sections[] = $sectionData;
-						if ( !empty( $sectionData['label'] ) ) {
-							$shouldShowToggles = true;
-						}
-					}
-					break;
-				default:
-					// we do not support any other tags than section and header inside panel
-					break;
-			}
-		}
-		if ( $collapse !== null && count( $sections ) > 0 && $header ) {
-			$cssClasses[] = 'pi-collapse';
-			$cssClasses[] = 'pi-collapse-' . $collapse;
-		}
-		if ( count( $sections ) > 0 ) {
-			$sections[0]['active'] = true;
-		} else {
-			// do not render empty panel
-			return '';
-		}
-		if ( !$shouldShowToggles ) {
-			$sections = array_map( static function ( $content ) {
-				$content['active'] = true;
-				return $content;
-			}, $sections );
-		}
-
-		return $this->render( $type, [
-			'item-name' => $data['item-name'],
-			'cssClasses' => implode( ' ', $cssClasses ),
-			'header' => $header,
-			'sections' => $sections,
-			'shouldShowToggles' => $shouldShowToggles,
-		] );
-	}
-
-	private function getSectionData( $section, $index ) {
-		$content = $this->renderChildren( $section['data']['value'] );
-		return [
-			'index' => $index,
-			'item-name' => $section['data']['item-name'],
-			'label' => $section['data']['label'],
-			'content' => $content ?: null,
-		];
-	}
-
 	private function getInlineStyles( $accentColor, $accentColorText ) {
 		$backgroundColor = !$accentColor ? '' : "background-color:{$accentColor};";
 		$color = !$accentColorText ? '' : "color:{$accentColorText};";
 
 		return "{$backgroundColor}{$color}";
 	}
-
-	private function createHorizontalGroupData( array $groupData ) {
-		$horizontalGroupData = [
-			'data' => [],
-			'renderLabels' => false
-		];
-
-		foreach ( $groupData as $item ) {
-			$data = $item['data'];
-
-			if ( $item['type'] === 'data' ) {
-				$horizontalGroupData['data'][] = [
-					'label' => $data['label'],
-					'value' => $data['value'],
-					'source' => $item['data']['source'] ?? "",
-					'item-name' => $item['data']['item-name']
-				];
-
-				if ( !empty( $data['label'] ) ) {
-					$horizontalGroupData['renderLabels'] = true;
-				}
-			} elseif ( $item['type'] === 'header' ) {
-				$horizontalGroupData['header'] = $data['value'];
-				$horizontalGroupData['inlineStyles'] = $this->inlineStyles;
-			}
-		}
-
-		return $horizontalGroupData;
-	}
-
-	private function createSmartGroups( array $groupData, $rowCapacity ) {
-		$result = [];
-		$rowSpan = 0;
-		$rowItems = [];
-
-		foreach ( $groupData as $item ) {
-			$data = $item['data'];
-			if ( $item['type'] === 'data' && $data['layout'] !== 'default' ) {
-				if ( $rowItems && $rowSpan + $data['span'] > $rowCapacity ) {
-					$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
-					$rowSpan = 0;
-					$rowItems = [];
-				}
-				$rowSpan += $data['span'];
-				$rowItems[] = $item;
-			} else {
-				// smart wrapping works only for data tags
-				if ( $rowItems ) {
-					$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
-					$rowSpan = 0;
-					$rowItems = [];
-				}
-				$result[] = $item;
-			}
-		}
-		if ( $rowItems ) {
-			$result[] = $this->createSmartGroupItem( $rowItems, $rowSpan );
-		}
-
-		return $result;
-	}
-
-	private function createSmartGroupItem( array $rowItems, $rowSpan ) {
-		return [
-			'type' => 'smart-group',
-			'data' => $this->createSmartGroupSections( $rowItems, $rowSpan )
-		];
-	}
-
-	private function createSmartGroupSections( array $rowItems, $capacity ) {
-		return array_reduce( $rowItems, static function ( $result, $item ) use ( $capacity ) {
-			$width = $item['data']['span'] / $capacity * 100;
-			$styles = "width: {$width}%";
-
-			$label = $item['data']['label'] ?? '';
-			if ( $label ) {
-				$result['renderLabels'] = true;
-			}
-			$result['data'][] = [
-				'label' => $label,
-				'value' => $item['data']['value'],
-				'inlineStyles' => $styles,
-				'source' => $item['data']['source'] ?? '',
-				'item-name' => $item['data']['item-name']
-			];
-
-			return $result;
-		}, [ 'data' => [], 'renderLabels' => false ] );
-	}
 }
diff --git a/tests/parser/cite.txt b/tests/parser/cite.txt
new file mode 100644
index 00000000..51220bac
--- /dev/null
+++ b/tests/parser/cite.txt
@@ -0,0 +1,88 @@
+!! options
+version=2
+parsoid-compatible=wt2html
+!! end
+!! hooks
+extension:Cite
+!! endhooks
+!! article
+Template:Character
+!! text
+<infobox type="Character">
+<title source="name"/>
+<image source="image">
+<caption source="imagecaption" />
+</image>
+<group>
+<data source="aliases"><label>Aliases</label></data>
+<data source="relatives"><label>Relatives</label></data>
+<data source="affiliation"><label>Affiliation</label></data>
+</group>
+<group>
+<header>Biographical information</header>
+<data source="marital"><label>Marital status</label></data>
+<data source="birthDate"><label>Date of birth</label></data>
+<data source="birthPlace"><label>Place of birth</label></data>
+<data source="deathDate"><label>Date of death</label></data>
+<data source="deathPlace"><label>Place of death</label></data>
+</group>
+<group>
+<header>Physical description</header>
+<data source="species"><label>Species</label></data>
+<data source="gender"><label>Gender</label></data>
+<data source="height"><label>Height</label></data>
+<data source="weight"><label>Weight</label></data>
+<data source="eyes"><label>Eye color</label></data>
+</group>
+</infobox>
+!! endarticle
+
+!! test
+PortableInfobox Character Template test with references
+!! config
+wgPortableInfoboxUseHeadings=false
+!! wikitext
+{{Character
+ | name         = Example
+ | image        = Example.jpg
+ | imagecaption = An example caption!
+ | aliases      =
+ | relatives    =
+ | affiliation  =
+ | marital      =
+ | birthDate    = January 22, 2026<ref>A Reference</ref>
+ | birthPlace   = United Kingdom
+ | deathDate    =
+ | deathPlace   =
+ | species      = Human
+ | gender       =
+ | height       =
+ | weight       =
+ | eyes         =
+}}
+!! html/parsoid
+<aside typeof="mw:Extension/infobox mw:Transclusion" class="portable-infobox noexcerpt searchaux pi-background pi-theme-default pi-layout-default pi-type-Character" data-mw='{"name":"infobox","attrs":{"type":"Character"},"body":{"extsrc":"\n&lt;title source=\"name\"/>\n&lt;image source=\"image\">\n&lt;caption source=\"imagecaption\" />\n&lt;/image>\n&lt;group>\n&lt;data source=\"aliases\">&lt;label>Aliases&lt;/label>&lt;/data>\n&lt;data source=\"relatives\">&lt;label>Relatives&lt;/label>&lt;/data>\n&lt;data source=\"affiliation\">&lt;label>Affiliation&lt;/label>&lt;/data>\n&lt;/group>\n&lt;group>\n&lt;header>Biographical information&lt;/header>\n&lt;data source=\"marital\">&lt;label>Marital status&lt;/label>&lt;/data>\n&lt;data source=\"birthDate\">&lt;label>Date of birth&lt;/label>&lt;/data>\n&lt;data source=\"birthPlace\">&lt;label>Place of birth&lt;/label>&lt;/data>\n&lt;data source=\"deathDate\">&lt;label>Date of death&lt;/label>&lt;/data>\n&lt;data source=\"deathPlace\">&lt;label>Place of death&lt;/label>&lt;/data>\n&lt;/group>\n&lt;group>\n&lt;header>Physical description&lt;/header>\n&lt;data source=\"species\">&lt;label>Species&lt;/label>&lt;/data>\n&lt;data source=\"gender\">&lt;label>Gender&lt;/label>&lt;/data>\n&lt;data source=\"height\">&lt;label>Height&lt;/label>&lt;/data>\n&lt;data source=\"weight\">&lt;label>Weight&lt;/label>&lt;/data>\n&lt;data source=\"eyes\">&lt;label>Eye color&lt;/label>&lt;/data>\n&lt;/group>\n"},"parts":[{"template":{"target":{"wt":"Character\n ","href":"./Template:Character"},"params":{"name":{"wt":"Example"},"image":{"wt":"Example.jpg"},"imagecaption":{"wt":"An example caption!"},"aliases":{"wt":""},"relatives":{"wt":""},"affiliation":{"wt":""},"marital":{"wt":""},"birthDate":{"wt":"January 22, 2026&lt;ref>A Reference&lt;/ref>"},"birthPlace":{"wt":"United Kingdom"},"deathDate":{"wt":""},"deathPlace":{"wt":""},"species":{"wt":"Human"},"gender":{"wt":""},"height":{"wt":""},"weight":{"wt":""},"eyes":{"wt":""}},"i":0}}]}'>
+<div class="pi-item pi-item-spacing pi-title" data-source="name">Example</div>
+<section class="pi-item pi-group pi-border-color">
+<div class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Biographical information</div>
+<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="birthDate">
+<div class="pi-data-label pi-secondary-font">Date of birth</div>
+<div class="pi-data-value pi-font">January 22, 2026<sup class="mw-ref reference" id="cite_ref-1" rel="dc:references" typeof="mw:Extension/ref" data-mw='{"name":"ref","attrs":{},"body":{"id":"mw-reference-text-cite_note-1"}}'><a href="./Parser_test#cite_note-1"><span class="mw-reflink-text"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></span></a></sup></div>
+</div>
+<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="birthPlace">
+<div class="pi-data-label pi-secondary-font">Place of birth</div>
+<div class="pi-data-value pi-font">United Kingdom</div>
+</div>
+</section><section class="pi-item pi-group pi-border-color">
+<div class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Physical description</div>
+<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="species">
+<div class="pi-data-label pi-secondary-font">Species</div>
+<div class="pi-data-value pi-font">Human</div>
+</div>
+</section></aside>
+<div class="mw-references-wrap" typeof="mw:Extension/references" data-mw='{"name":"references","attrs":{},"autoGenerated":true}'>
+<ol class="mw-references references">
+<li id="cite_note-1" data-mw-footnote-number="1"><span class="mw-cite-backlink"><a href="./Parser_test#cite_ref-1" rel="mw:referencedBy"><span class="mw-linkback-text">↑ </span></a></span> <span id="mw-reference-text-cite_note-1" class="mw-reference-text reference-text">A Reference</span></li>
+</ol>
+</div>
+!! end
diff --git a/tests/parser/parsoid.txt b/tests/parser/parsoid.txt
new file mode 100644
index 00000000..6cca0ac6
--- /dev/null
+++ b/tests/parser/parsoid.txt
@@ -0,0 +1,125 @@
+!! options
+version=2
+parsoid-compatible=wt2html
+!! end
+!! article
+Template:Character
+!! text
+<infobox type="Character">
+<title source="name"/>
+<image source="image">
+<caption source="imagecaption" />
+</image>
+<group>
+<data source="aliases"><label>Aliases</label></data>
+<data source="relatives"><label>Relatives</label></data>
+<data source="affiliation"><label>Affiliation</label></data>
+</group>
+<group>
+<header>Biographical information</header>
+<data source="marital"><label>Marital status</label></data>
+<data source="birthDate"><label>Date of birth</label></data>
+<data source="birthPlace"><label>Place of birth</label></data>
+<data source="deathDate"><label>Date of death</label></data>
+<data source="deathPlace"><label>Place of death</label></data>
+</group>
+<group>
+<header>Physical description</header>
+<data source="species"><label>Species</label></data>
+<data source="gender"><label>Gender</label></data>
+<data source="height"><label>Height</label></data>
+<data source="weight"><label>Weight</label></data>
+<data source="eyes"><label>Eye color</label></data>
+</group>
+</infobox>
+!! endarticle
+
+!! test
+PortableInfobox Character Template test
+!! config
+wgPortableInfoboxUseHeadings=false
+!! wikitext
+{{Character
+ | name         = Example
+ | image        = Example.jpg
+ | imagecaption = An example caption!
+ | aliases      =
+ | relatives    =
+ | affiliation  =
+ | marital      =
+ | birthDate    = January 22, 2026
+ | birthPlace   = United Kingdom
+ | deathDate    =
+ | deathPlace   =
+ | species      = Human
+ | gender       =
+ | height       =
+ | weight       =
+ | eyes         =
+}}
+!! html/parsoid
+<aside typeof="mw:Extension/infobox mw:Transclusion" class="portable-infobox noexcerpt searchaux pi-background pi-theme-default pi-layout-default pi-type-Character" data-mw='{"name":"infobox","attrs":{"type":"Character"},"body":{"extsrc":"\n&lt;title source=\"name\"/>\n&lt;image source=\"image\">\n&lt;caption source=\"imagecaption\" />\n&lt;/image>\n&lt;group>\n&lt;data source=\"aliases\">&lt;label>Aliases&lt;/label>&lt;/data>\n&lt;data source=\"relatives\">&lt;label>Relatives&lt;/label>&lt;/data>\n&lt;data source=\"affiliation\">&lt;label>Affiliation&lt;/label>&lt;/data>\n&lt;/group>\n&lt;group>\n&lt;header>Biographical information&lt;/header>\n&lt;data source=\"marital\">&lt;label>Marital status&lt;/label>&lt;/data>\n&lt;data source=\"birthDate\">&lt;label>Date of birth&lt;/label>&lt;/data>\n&lt;data source=\"birthPlace\">&lt;label>Place of birth&lt;/label>&lt;/data>\n&lt;data source=\"deathDate\">&lt;label>Date of death&lt;/label>&lt;/data>\n&lt;data source=\"deathPlace\">&lt;label>Place of death&lt;/label>&lt;/data>\n&lt;/group>\n&lt;group>\n&lt;header>Physical description&lt;/header>\n&lt;data source=\"species\">&lt;label>Species&lt;/label>&lt;/data>\n&lt;data source=\"gender\">&lt;label>Gender&lt;/label>&lt;/data>\n&lt;data source=\"height\">&lt;label>Height&lt;/label>&lt;/data>\n&lt;data source=\"weight\">&lt;label>Weight&lt;/label>&lt;/data>\n&lt;data source=\"eyes\">&lt;label>Eye color&lt;/label>&lt;/data>\n&lt;/group>\n"},"parts":[{"template":{"target":{"wt":"Character\n ","href":"./Template:Character"},"params":{"name":{"wt":"Example"},"image":{"wt":"Example.jpg"},"imagecaption":{"wt":"An example caption!"},"aliases":{"wt":""},"relatives":{"wt":""},"affiliation":{"wt":""},"marital":{"wt":""},"birthDate":{"wt":"January 22, 2026"},"birthPlace":{"wt":"United Kingdom"},"deathDate":{"wt":""},"deathPlace":{"wt":""},"species":{"wt":"Human"},"gender":{"wt":""},"height":{"wt":""},"weight":{"wt":""},"eyes":{"wt":""}},"i":0}}]}'>
+<div class="pi-item pi-item-spacing pi-title" data-source="name">Example</div>
+<section class="pi-item pi-group pi-border-color">
+<div class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Biographical information</div>
+<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="birthDate">
+<div class="pi-data-label pi-secondary-font">Date of birth</div>
+<div class="pi-data-value pi-font">January 22, 2026</div>
+</div>
+<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="birthPlace">
+<div class="pi-data-label pi-secondary-font">Place of birth</div>
+<div class="pi-data-value pi-font">United Kingdom</div>
+</div>
+</section><section class="pi-item pi-group pi-border-color">
+<div class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Physical description</div>
+<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="species">
+<div class="pi-data-label pi-secondary-font">Species</div>
+<div class="pi-data-value pi-font">Human</div>
+</div>
+</section></aside>
+!! end
+
+!! test
+PortableInfobox Character Template test with formatting
+!! config
+wgPortableInfoboxUseHeadings=false
+!! wikitext
+{{Character
+ | name         = Example
+ | image        = Example.jpg
+ | imagecaption = An example caption!
+ | aliases      =
+ | relatives    =
+ | affiliation  =
+ | marital      =
+ | birthDate    = '''January 22, 2026'''
+ | birthPlace   = ''United Kingdom''
+ | deathDate    =
+ | deathPlace   =
+ | species      = [[Human]]
+ | gender       =
+ | height       =
+ | weight       =
+ | eyes         =
+}}
+!! html/parsoid
+<aside typeof="mw:Extension/infobox mw:Transclusion" class="portable-infobox noexcerpt searchaux pi-background pi-theme-default pi-layout-default pi-type-Character" data-mw='{"name":"infobox","attrs":{"type":"Character"},"body":{"extsrc":"\n&lt;title source=\"name\"/>\n&lt;image source=\"image\">\n&lt;caption source=\"imagecaption\" />\n&lt;/image>\n&lt;group>\n&lt;data source=\"aliases\">&lt;label>Aliases&lt;/label>&lt;/data>\n&lt;data source=\"relatives\">&lt;label>Relatives&lt;/label>&lt;/data>\n&lt;data source=\"affiliation\">&lt;label>Affiliation&lt;/label>&lt;/data>\n&lt;/group>\n&lt;group>\n&lt;header>Biographical information&lt;/header>\n&lt;data source=\"marital\">&lt;label>Marital status&lt;/label>&lt;/data>\n&lt;data source=\"birthDate\">&lt;label>Date of birth&lt;/label>&lt;/data>\n&lt;data source=\"birthPlace\">&lt;label>Place of birth&lt;/label>&lt;/data>\n&lt;data source=\"deathDate\">&lt;label>Date of death&lt;/label>&lt;/data>\n&lt;data source=\"deathPlace\">&lt;label>Place of death&lt;/label>&lt;/data>\n&lt;/group>\n&lt;group>\n&lt;header>Physical description&lt;/header>\n&lt;data source=\"species\">&lt;label>Species&lt;/label>&lt;/data>\n&lt;data source=\"gender\">&lt;label>Gender&lt;/label>&lt;/data>\n&lt;data source=\"height\">&lt;label>Height&lt;/label>&lt;/data>\n&lt;data source=\"weight\">&lt;label>Weight&lt;/label>&lt;/data>\n&lt;data source=\"eyes\">&lt;label>Eye color&lt;/label>&lt;/data>\n&lt;/group>\n"},"parts":[{"template":{"target":{"wt":"Character\n ","href":"./Template:Character"},"params":{"name":{"wt":"Example"},"image":{"wt":"Example.jpg"},"imagecaption":{"wt":"An example caption!"},"aliases":{"wt":""},"relatives":{"wt":""},"affiliation":{"wt":""},"marital":{"wt":""},"birthDate":{"wt":"&apos;&apos;&apos;January 22, 2026&apos;&apos;&apos;"},"birthPlace":{"wt":"&apos;&apos;United Kingdom&apos;&apos;"},"deathDate":{"wt":""},"deathPlace":{"wt":""},"species":{"wt":"[[Human]]"},"gender":{"wt":""},"height":{"wt":""},"weight":{"wt":""},"eyes":{"wt":""}},"i":0}}]}'>
+<div class="pi-item pi-item-spacing pi-title" data-source="name">Example</div>
+<section class="pi-item pi-group pi-border-color">
+<div class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Biographical information</div>
+<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="birthDate">
+<div class="pi-data-label pi-secondary-font">Date of birth</div>
+<div class="pi-data-value pi-font"><b>January 22, 2026</b></div>
+</div>
+<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="birthPlace">
+<div class="pi-data-label pi-secondary-font">Place of birth</div>
+<div class="pi-data-value pi-font"><i>United Kingdom</i></div>
+</div>
+</section><section class="pi-item pi-group pi-border-color">
+<div class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Physical description</div>
+<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="species">
+<div class="pi-data-label pi-secondary-font">Species</div>
+<div class="pi-data-value pi-font"><a rel="mw:WikiLink" href="./Human?action=edit&amp;redlink=1" title="Human" class="new" typeof="mw:LocalizedAttrs" data-mw-i18n='{"title":{"lang":"x-page","key":"red-link-title","params":["Human"]}}'>Human</a></div>
+</div>
+</section></aside>
+!! end
diff --git a/tests/phpunit/Services/PortableInfoboxRenderServiceTest.php b/tests/phpunit/Services/PortableInfoboxRenderServiceTest.php
index 8e26ebba..46d81662 100644
--- a/tests/phpunit/Services/PortableInfoboxRenderServiceTest.php
+++ b/tests/phpunit/Services/PortableInfoboxRenderServiceTest.php
@@ -32,6 +32,7 @@ private function normalizeHTML( $html ) {
 
 	/**
 	 * @covers ::renderInfobox
+	 * @covers \PortableInfobox\Services\AbstractPortableInfoboxRenderService
 	 * @covers \PortableInfobox\Services\Helpers\PortableInfoboxTemplateEngine
 	 * @param $input
 	 * @param $expectedOutput